:root{--bg-top:#f7f6f3;--bg-bottom:#eae8e3;--glow:oklch(70% .1 255/.14);--text:#1c1c1e;--text-muted:#1c1c1e85;--hairline:#14141614;--accent:oklch(58% .16 255);--accent-strong:oklch(50% .17 255);--on-accent:#fff;--track:#00000014;--dot-idle:#00000024;--btn-bg:#0000000d;--btn-edge:conic-gradient(from 30deg, #ffffffe6 0deg, #ffffff40 55deg, #14141629 130deg, #14141629 230deg, #ffffff1f 300deg, #ffffffe6 360deg);--btn-edge-hover:conic-gradient(from 30deg, #fff 0deg, #fff6 55deg, #14141638 130deg, #14141638 230deg, #ffffff38 300deg, #fff 360deg);--panel-bg:#ffffff80;--panel-border:#14141614;--panel-shadow:0 12px 24px #00000014;--wand:linear-gradient(180deg, #14141673, #14141624);--pivot:#1414164d;--orb:radial-gradient(circle at 32% 26%, #fff 0%, #dde0e4 35%, #a7adb5 68%, #666d75 100%);--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--serif:"Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font:16px/1.5 var(--sans);color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=dark]{--bg-top:#161618;--bg-bottom:#0a0a0b;--glow:oklch(62% .15 255/.16);--text:#f2f2f4;--text-muted:#f2f2f480;--hairline:#ffffff17;--accent:oklch(66% .16 255);--accent-strong:oklch(72% .15 255);--on-accent:#0c1220;--track:#ffffff1f;--dot-idle:#ffffff29;--btn-bg:#ffffff14;--btn-edge:conic-gradient(from 30deg, #ffffff8c 0deg, #ffffff29 55deg, #ffffff05 130deg, #ffffff05 230deg, #ffffff14 300deg, #ffffff8c 360deg);--btn-edge-hover:conic-gradient(from 30deg, #fffc 0deg, #ffffff4d 55deg, #ffffff0d 130deg, #ffffff0d 230deg, #ffffff29 300deg, #fffc 360deg);--panel-bg:#ffffff0f;--panel-border:#ffffff1f;--panel-shadow:0 12px 30px #00000059;--wand:linear-gradient(180deg, #ffffff8c, #ffffff26);--pivot:#ffffff59;--orb:radial-gradient(circle at 32% 26%, #f6f7f9 0%, #cfd3d9 35%, #8b929c 68%, #4d525a 100%)}*{box-sizing:border-box}body{background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);min-height:100svh;margin:0;overflow-x:hidden}#app{min-height:100svh;padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:clamp(20px,3.6vh,34px);display:flex;position:relative;overflow:hidden}.backdrop-grain{opacity:.035;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.backdrop-glow{background:radial-gradient(circle, var(--glow), transparent 70%);filter:blur(10px);pointer-events:none;z-index:0;width:min(64vw,520px);height:min(64vw,520px);position:fixed;top:24%;left:50%;transform:translate(-50%,-50%)}.corner-btn{top:max(20px, env(safe-area-inset-top));background:var(--btn-bg);width:34px;height:34px;color:var(--text);cursor:pointer;z-index:10;border:1px solid #0000;border-radius:50%;place-items:center;transition:color .2s,background .2s,transform .1s;display:grid;position:fixed}.corner-btn:before{content:"";border-radius:inherit;background:var(--btn-edge);-webkit-mask-composite:xor;pointer-events:none;padding:1px;transition:background .15s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.corner-btn:hover:before{background:var(--btn-edge-hover)}.corner-btn:active{transform:scale(.92)}.corner-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.theme-toggle{right:22px}.help-toggle{right:66px}.help-toggle .icon-help{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.theme-toggle .icon{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;grid-area:1/1;width:17px;height:17px}.theme-toggle .icon-sun circle{fill:currentColor;stroke:none}.theme-toggle .icon-moon{fill:currentColor;display:none}:root[data-theme=dark] .theme-toggle .icon-sun{display:none}:root[data-theme=dark] .theme-toggle .icon-moon{display:block}.tap-zone{z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:clamp(14px,2.6vh,24px);width:100%;max-width:440px;display:flex;position:relative}.tap-zone:focus-visible{outline:none}.tap-zone:focus-visible .tempo-marking{outline:2px solid var(--accent);outline-offset:12px;border-radius:14px}.tempo-marking{text-align:center;flex-direction:column;align-items:center;gap:3px;display:flex}.marking-name{font-family:var(--serif);letter-spacing:.005em;color:var(--text);margin:0;font-size:clamp(28px,5.4vw,38px);font-style:italic;font-weight:600;line-height:1.15}.marking-gloss{font-family:var(--serif);color:var(--text-muted);margin:0;font-size:clamp(15px,2.6vw,18px);font-style:italic;font-weight:500}.pendulum-stage{justify-content:center;width:100%;height:clamp(170px,26vh,260px);display:flex;position:relative}.pendulum-shadow{filter:blur(6px);z-index:0;background:#00000029;border-radius:50%;width:60px;height:11px;position:absolute;bottom:4%;left:50%;transform:translate(-50%)}:root[data-theme=dark] .pendulum-shadow{background:#00000080}.pendulum-pivot{background:var(--pivot);z-index:3;border-radius:50%;width:7px;height:7px;position:absolute;top:0;left:50%;transform:translate(-50%)}.pendulum-arm{transform-origin:top;width:2px;height:82%;transform:rotate(var(--pendulum-angle,0deg));z-index:2;margin-left:-1px;position:absolute;top:7px;left:50%}.pendulum-stage.is-resting .pendulum-arm,.pendulum-stage.is-resting .pendulum-shadow{transition:transform .55s cubic-bezier(.22,1,.36,1)}.pendulum-rod{background:var(--wand);border-radius:2px;position:absolute;inset:0}.pendulum-bob{background:var(--orb);border-radius:50%;width:clamp(28px,5.6vw,36px);height:clamp(28px,5.6vw,36px);position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);box-shadow:0 6px 14px #00000059,inset 0 0 0 1px #ffffff1f}.tap-state{letter-spacing:.02em;color:var(--text-muted);min-height:1em;margin:0;font-size:13px;transition:color .2s}.tap-zone.is-playing .tap-state{color:var(--accent)}.bpm-display{align-items:baseline;gap:8px;display:flex}.bpm-number{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.035em;color:var(--text);font-size:clamp(64px,17vw,104px);font-weight:600;line-height:.9}.bpm-unit{font-family:var(--sans);letter-spacing:.14em;color:var(--text-muted);font-size:13px;font-weight:600}.beat-dots{align-items:center;gap:12px;min-height:12px;display:flex}.beat-dot{background:var(--dot-idle);border-radius:50%;width:8px;height:8px;transition:background 90ms,transform 90ms}.beat-dot.is-accent{background:color-mix(in srgb, var(--accent) 42%, var(--dot-idle));width:12px;height:12px}.beat-dot.is-active{background:var(--accent);transform:scale(1.3)}.help-popover{top:calc(max(20px, env(safe-area-inset-top)) + 34px + 10px);z-index:9;background:var(--panel-bg);-webkit-backdrop-filter:blur(22px)saturate(140%);border:1px solid var(--panel-border);width:min(300px,100vw - 44px);box-shadow:var(--panel-shadow);cursor:default;transform-origin:100% 0;opacity:0;pointer-events:none;border-radius:20px;padding:18px 20px 20px;transition:opacity .16s,transform .16s cubic-bezier(.22,1,.36,1);position:fixed;right:22px;transform:scale(.94)translateY(-6px)}.help-popover.is-open{opacity:1;pointer-events:auto;transform:scale(1)translateY(0)}.icon-btn.help-close{width:32px;height:32px;font-size:17px;position:absolute;top:8px;right:8px}.help-title{font-family:var(--sans);color:var(--text);margin:0 36px 8px 0;font-size:15px;font-weight:600}.help-text{color:var(--text-muted);margin:0 0 14px;font-size:13px;line-height:1.5}.help-shortcuts{flex-direction:column;gap:9px;margin:0;padding:0;list-style:none;display:flex}.help-shortcuts li{color:var(--text-muted);align-items:center;gap:6px;font-size:13px;display:flex}.help-shortcuts span{margin-left:4px}.help-shortcuts kbd,.help-tip kbd{background:var(--btn-bg);border:1px solid var(--panel-border);min-width:17px;height:18px;color:var(--text);border-radius:6px;justify-content:center;align-items:center;padding:0 5px;font-family:inherit;font-size:10.5px;font-weight:600;display:inline-flex}.help-tip{border-top:1px solid var(--panel-border);color:var(--text-muted);align-items:center;gap:6px;margin:14px 0 0;padding-top:20px;font-size:12px;display:flex}.help-tip kbd{margin:0 1px}.control-panel{z-index:5;background:var(--panel-bg);-webkit-backdrop-filter:blur(22px)saturate(140%);border:1px solid var(--panel-border);width:min(520px,100%);box-shadow:var(--panel-shadow);cursor:default;border-radius:24px;flex-direction:column;gap:16px;padding:20px 26px 18px;display:flex;position:relative}.control-row{align-items:center;gap:14px;display:flex}.icon-btn{background:var(--btn-bg);width:34px;height:34px;color:var(--text);cursor:pointer;border:1px solid #0000;border-radius:50%;flex:none;place-items:center;font-size:18px;line-height:1;transition:background .15s,transform .1s;display:grid;position:relative}.icon-btn:before{content:"";border-radius:inherit;background:var(--btn-edge);-webkit-mask-composite:xor;pointer-events:none;padding:1px;transition:background .15s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.icon-btn:hover:before{background:var(--btn-edge-hover)}.icon-btn:active{transform:scale(.92)}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tempo-slider{appearance:none;cursor:pointer;background:0 0;flex:auto;width:100%;height:22px;margin:0}.tempo-slider:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}.tempo-slider::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,50%), var(--track) var(--fill,50%), var(--track) 100%);border-radius:3px;height:6px;box-shadow:inset 0 1px 2px #00000026}.tempo-slider::-moz-range-track{background:var(--track);border-radius:3px;height:6px;box-shadow:inset 0 1px 2px #00000026}.tempo-slider::-moz-range-progress{background:var(--accent);border-radius:3px;height:6px}.tempo-slider::-webkit-slider-thumb{appearance:none;background:linear-gradient(210deg,#fff 0% 45%,#d4d5d9 100%);border:none;border-radius:999px;width:32px;height:18px;margin-top:-6px;transition:transform .15s cubic-bezier(.22,1,.36,1),background .15s,box-shadow .15s;box-shadow:0 2px 6px #00000059,inset 1px -1px 1px #ffffffe6,inset -1px 1px 2px #0000001a}.tempo-slider::-moz-range-thumb{background:linear-gradient(210deg,#fff 0% 45%,#d4d5d9 100%);border:none;border-radius:999px;width:32px;height:18px;transition:transform .15s cubic-bezier(.22,1,.36,1),background .15s,box-shadow .15s;box-shadow:0 2px 6px #00000059,inset 1px -1px 1px #ffffffe6,inset -1px 1px 2px #0000001a}.tempo-slider:active::-webkit-slider-thumb{background:linear-gradient(210deg, color-mix(in srgb, var(--accent) 55%, white 45%) 0%, color-mix(in srgb, var(--accent) 70%, white 30%) 45%, color-mix(in srgb, var(--accent) 80%, black 10%) 100%);transform:scale(1.25);box-shadow:0 4px 12px #0006,inset 1px -1px 1px #ffffffb3,inset -1px 1px 2px #00000026}.tempo-slider:active::-moz-range-thumb{background:linear-gradient(210deg, color-mix(in srgb, var(--accent) 55%, white 45%) 0%, color-mix(in srgb, var(--accent) 70%, white 30%) 45%, color-mix(in srgb, var(--accent) 80%, black 10%) 100%);transform:scale(1.25);box-shadow:0 4px 12px #0006,inset 1px -1px 1px #ffffffb3,inset -1px 1px 2px #00000026}.beats-control{flex:none;align-items:center;gap:10px;display:flex}.beats-value{text-align:center;min-width:56px;color:var(--text-muted);font-size:14px}.beats-number{font-variant-numeric:tabular-nums;color:var(--text);font-size:16px;font-weight:600}.tap-button{background:var(--btn-bg);height:38px;color:var(--text);font-family:var(--sans);letter-spacing:.14em;cursor:pointer;border:1px solid #0000;border-radius:999px;flex:auto;padding:0 22px;font-size:13px;font-weight:700;transition:background .15s,transform .1s;position:relative}.tap-button:before{content:"";border-radius:inherit;background:var(--btn-edge);-webkit-mask-composite:xor;pointer-events:none;padding:1px;transition:background .15s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.tap-button:hover:before{background:var(--btn-edge-hover)}.tap-button:active{transform:scale(.96)}.tap-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tap-button.pulse{animation:.1s ease-out tap-pulse}@keyframes tap-pulse{0%{transform:scale(.96)}to{transform:scale(1)}}@media (height<=700px){#app{padding:calc(16px + env(safe-area-inset-top)) 24px calc(16px + env(safe-area-inset-bottom));gap:clamp(10px,2vh,34px)}.tap-zone{gap:clamp(8px,1.8vh,24px)}.pendulum-stage{height:clamp(110px,20vh,260px)}.bpm-number{font-size:clamp(48px,15vw,104px)}.control-panel{gap:10px;padding:14px 22px 12px}}