:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#163d5a;background:#eaf5ff;font-synthesis:none;--muted:#54778f}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#fff,#eaf5ff 65%)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #0078be;outline-offset:4px}.app{width:min(100%,520px);margin:auto;padding:calc(24px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom))}.topbar{display:flex;gap:13px;align-items:center;margin:0 4px 24px}.brand,.panel-icon{display:grid;place-items:center;background:#d9eeff;color:#1684c6;border-radius:14px;width:44px;height:44px;font-size:25px}.eyebrow{font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:700;margin:0 0 5px}h1{margin:0;font-size:28px;letter-spacing:-.04em}.subtitle{margin:5px 0 0;font-size:12px;color:var(--muted)}.hero{border:1px solid #c3e0f2;border-radius:30px;padding:22px;background:linear-gradient(150deg,#fff,#e2f2ff);box-shadow:0 15px 40px #609dc218}.hero-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:var(--muted)}#meterSummary{font-weight:700;color:#1576b1}.tempo-row{display:flex;align-items:center;justify-content:space-between;margin:20px auto 8px;max-width:300px}.tempo-adjust{width:45px;height:45px;border:1px solid #c3e0f2;border-radius:50%;background:#fff;color:#2579ac;font-size:28px}.tempo-readout{display:flex;align-items:baseline;gap:4px}.tempo-readout input{width:136px;border:0;background:transparent;text-align:center;color:#163d5a;font-size:66px;font-weight:300;letter-spacing:-.06em;appearance:textfield;padding:0}.tempo-readout input::-webkit-inner-spin-button{appearance:none}.tempo-readout span{font-size:11px;letter-spacing:.08em;color:var(--muted)}.dial-wrap{position:relative;width:min(100%,340px);aspect-ratio:1;margin:12px auto}.tempo-dial{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -1deg,#94bfd9 0deg 1deg,transparent 1deg 6deg);touch-action:none;cursor:grab;box-shadow:0 0 0 1px #c3e0f2}.tempo-dial:before{content:"";position:absolute;inset:10px;background:#eaf5ff;border-radius:50%}.dial-marker{position:absolute;inset:0;transform:rotate(var(--angle,-50deg));pointer-events:none}.dial-marker:after{content:"";position:absolute;left:calc(50% - 4px);top:0;width:8px;height:13px;border-radius:5px;background:#168bd1}#beatSegments{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);pointer-events:none}#beatSegments g{pointer-events:auto;cursor:pointer}#beatSegments path{fill:#b9dff5;stroke:#eaf5ff;stroke-width:2;transition:fill .1s}#beatSegments [data-level="1"] path{fill:#429dd2}#beatSegments [data-level="0.35"] path{fill:#d6eafa}#beatSegments [data-level="0"] path{fill:#edf5fa;stroke:#a9c9df;stroke-dasharray:3 3}#beatSegments text{font-size:17px;fill:#194f70;pointer-events:none;font-weight:600}#beatSegments .active path{fill:#0779bc}#beatSegments .active text{fill:#fff}.beat-orb{position:absolute;inset:29%;border-radius:50%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;align-content:center;background:linear-gradient(150deg,#fff,#e4f3ff);box-shadow:0 5px 25px #5a9bc025;pointer-events:none}.beat-orb>span{font-size:40px;font-weight:300}.beat-orb small{color:var(--muted);margin:10px 0 0 5px}.play-button{pointer-events:auto;display:flex;justify-content:center;gap:6px;align-items:center;width:88%;min-height:44px;border:0;border-radius:24px;background:#1589ca;color:#fff;font-size:12px;margin-top:5px}.play-button.playing{background:#18597f}.beat-orb.hit{animation:pulse .2s ease-out}.dial-help,.hero-help{color:var(--muted);font-size:11px;line-height:1.5;text-align:center;margin:10px 0}.tempo-slider{width:100%;accent-color:#168bd1;min-height:24px}.tempo-range{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.beat-dots{display:flex;justify-content:center;gap:8px;margin:18px 0 8px}.beat-dots span{width:7px;height:7px;background:#b9d9ed;border-radius:50%}.beat-dots .active{background:#087dbf;box-shadow:0 0 0 3px #168bd118}.panel{margin-top:16px;padding:20px;border:1px solid #c9e3f4;border-radius:24px;background:#ffffffb5}.panel-heading{display:flex;gap:11px;align-items:center;margin-bottom:15px}.panel-icon{width:36px;height:36px;font-size:21px}h2{font-size:19px;margin:0}.meter-presets,.sound-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.sound-options{grid-template-columns:repeat(4,minmax(0,1fr))}.meter-presets button,.sound-options button,.rhythm-options button{border:1px solid #c7e0f1;background:#eff8ff;color:#295773;border-radius:12px;min-height:44px;font-size:12px}.selected,.meter-presets button.selected,.sound-options button.selected,.rhythm-options button.selected{background:#daefff;border-color:#3c9bd1;color:#075f96;box-shadow:inset 0 0 0 1px #3c9bd1}.custom-meter{display:flex;align-items:center;justify-content:space-between;margin-top:15px;font-size:12px}.custom-meter>div{display:flex;gap:8px;align-items:center}select{padding:8px;border:1px solid #c7e0f1;background:#eff8ff;color:#295773;border-radius:9px}.panel-help{font-size:11px;line-height:1.5;color:var(--muted);margin:12px 0 0}.rhythm-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rhythm-options button{display:flex;flex-direction:column;align-items:center;padding:9px 5px}.rhythm-options button:last-child{grid-column:1/-1}.rhythm-options svg{height:60px;width:120px;max-width:100%;fill:currentColor}.rhythm-options svg text{font:700 17px Georgia,serif}.rhythm-options small{font-size:10px;line-height:1.5}.rhythm-options strong{font-size:12px}.volume-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:12px;margin-top:18px}.volume-row input{min-width:0;width:100%;accent-color:#168bd1}.sample-import{display:block;font-size:11px;color:#3c6b89;margin-top:16px}.sample-import input{display:block;width:100%;font-size:11px;margin-top:8px}footer{text-align:center;color:var(--muted);font-size:10px;margin-top:24px}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes pulse{from{box-shadow:0 0 0 8px #168bd12a}to{box-shadow:0 5px 25px #5a9bc025}}@media(prefers-reduced-motion:reduce){.beat-orb.hit{animation:none}}@media(max-width:360px){.app{padding-left:12px;padding-right:12px}.hero{padding:16px}.panel{padding:16px}.beat-orb>span{font-size:32px}.play-button{font-size:11px;min-height:38px}}

.sound-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sound-options button{padding:8px 4px;line-height:1.5}

/* Fixed mobile width, no focus zoom, no double-tap zoom on controls. */
html{background:#c6e9fa;overflow-x:hidden;overscroll-behavior-x:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:#c6e9fa;overflow-x:hidden;width:100%;touch-action:manipulation}
.app{width:100%;max-width:520px;min-height:100svh}
.hero{background:linear-gradient(145deg,#bce5fa,#a5d9f4);border-color:#84c7e9}
.panel{background:#cfeeff;border-color:#9ed3ef}
.tempo-adjust,.beat-orb{background:#d9f1ff}
.tempo-dial:before{background:#b4e0f7}
.tempo-dial{touch-action:none}
input,select{font-size:16px}
button,a,label,select,input{touch-action:manipulation}
.language-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 8px;font-size:12px}
.language-row>div{display:flex;gap:6px}
.language-row button{min-height:44px;border:1px solid #75bce3;border-radius:12px;background:#d9f1ff;color:#194f70;padding:8px 13px;font-weight:600}
.language-row button[aria-pressed="true"]{background:#229ed9;border-color:#1688bf;color:#fff}
.file-action{display:block;width:fit-content;margin-top:9px;padding:10px 14px;border-radius:10px;background:#b2def5;color:#194f70;font-size:12px}
.sample-import:focus-within{outline:2px solid #0078be;outline-offset:4px}

/* Main transport below the dial, immediately above the tempo slider. */
.play-button{width:100%;min-height:60px;margin:16px 0 12px;padding:14px 20px;border:1px solid #1688bf;border-radius:18px;background:#229ed9;color:#fff;font-size:18px;font-weight:700;gap:10px;box-shadow:0 5px 14px #1688bf25}
.play-button.playing{background:#1688bf;color:#fff;border-color:#1175a5}
.play-button:active{background:#1175a5;box-shadow:inset 0 2px 5px #075f9633}

.site-home{margin-left:auto;flex:none;color:#146fa4;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}.site-home:hover{text-decoration:underline}
.language-switch{position:relative;display:flex;gap:2px;align-items:center;margin-left:auto;z-index:10}.language-switch button{display:none;border:1px solid #c3e0f2;border-radius:9px;background:#fff;color:#54778f;padding:7px 8px;font-size:10px;font-weight:700}.language-switch button.selected{display:inline-flex}.language-switch:not(:has(.selected)) button:first-child{display:inline-flex}.language-switch:hover button,.language-switch:focus-within button{display:inline-flex}