:root{--space-3xs:2px;--space-2xs:4px;--space-xs:6px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:20px;--space-2xl:24px;--space-3xl:28px;--space-4xl:32px;--space-5xl:40px;--space-6xl:48px;--radius-sm:8px;--radius-md:16px;--radius-lg:20px;--radius-xl:24px;--radius-full:999px;--dur-fast:.1s;--dur-base:.15s;--dur-slow:.2s;--dur-slower:.4s;--ease-out:cubic-bezier(.22, 1, .36, 1);--type-xs:11px;--type-sm:12.5px;--type-md:14px;--type-lg:16px;--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;--focus-ring:2px solid var(--accent);--lightningcss-light:initial;--lightningcss-dark: ;--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%)}.btn{background:var(--btn-bg);color:var(--text);cursor:pointer;transition:background var(--dur-base), color var(--dur-slow), transform var(--dur-fast);border:1px solid #0000;position:relative}.btn:before{content:"";border-radius:inherit;background:var(--btn-edge);-webkit-mask-composite:xor;pointer-events:none;transition:background var(--dur-base);padding:1px;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}.btn:hover:before{background:var(--btn-edge-hover)}.btn:active{transform:scale(var(--btn-press,.92))}.btn:focus-visible{outline:var(--focus-ring);outline-offset:2px}.icon-btn{border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-size:18px;line-height:1;display:grid}.panel{background:var(--panel-bg);-webkit-backdrop-filter:var(--panel-filter,blur(22px) saturate(140%));border:1px solid var(--panel-border);box-shadow:var(--panel-shadow)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);min-height:100svh;margin:0;overflow-x:hidden}#app{--scroll-hint-size:44px;--scroll-hint-gap:var(--space-md);min-height:100svh;padding:calc(var(--space-3xl) + env(safe-area-inset-top)) var(--space-2xl) calc(var(--space-3xl) + env(safe-area-inset-bottom));cursor:pointer;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.scroll-hint-region{left:0;right:0;bottom:calc(var(--scroll-hint-gap) + env(safe-area-inset-bottom));pointer-events:none;z-index:5;justify-content:center;align-items:center;display:flex;position:absolute}.scroll-hint{pointer-events:auto;width:var(--scroll-hint-size);height:var(--scroll-hint-size);color:var(--text-muted);cursor:pointer;transition:opacity var(--dur-slower), color var(--dur-slow);place-items:center;animation:1.4s ease-in-out .5s 5 both scroll-bob;display:grid}.scroll-hint:hover{color:var(--text)}.scroll-hint .icon-chevron{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:25px;height:25px}@keyframes scroll-bob{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}@media (prefers-reduced-motion:reduce){.scroll-hint{animation:none}}.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%)}@media (height<=700px){#app{padding:calc(58px + env(safe-area-inset-top)) var(--space-2xl) calc(var(--scroll-hint-size) + var(--scroll-hint-gap) + env(safe-area-inset-bottom));justify-content:flex-end}}.corner-controls{--corner-inset:var(--space-2xl);top:max(20px, env(safe-area-inset-top));right:var(--corner-inset);z-index:10;align-items:center;gap:var(--space-md);display:flex;position:fixed}@media (hover:none) and (pointer:coarse){.help-toggle{display:none}}.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}.help-popover{--popover-pad:var(--space-xl);--close-size:32px;--close-inset:var(--space-sm);top:calc(100% + var(--space-md));z-index:9;width:min(300px, calc(100vw - var(--corner-inset) * 2));padding:var(--popover-pad);border-radius:var(--radius-lg);cursor:default;transform-origin:100% 0;opacity:0;pointer-events:none;transition:opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out);position:absolute;right:0;transform:scale(.94)translateY(-6px)}.help-popover.is-open{opacity:1;pointer-events:auto;transform:scale(1)translateY(0)}.help-header{align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-sm);display:flex}.icon-btn.help-close{width:var(--close-size);height:var(--close-size);margin:calc(var(--close-inset) - var(--popover-pad)) calc(var(--close-inset) - var(--popover-pad)) 0 0;font-size:17px}.help-title{font-family:var(--sans);font-weight:600;font-size:var(--type-lg);color:var(--text);flex:1;margin:0}.help-text{margin:0 0 var(--space-lg);font-size:var(--type-sm);color:var(--text-muted);line-height:1.5}.help-shortcuts{gap:var(--space-sm);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.help-shortcuts li{align-items:center;gap:var(--space-xs);font-size:var(--type-sm);color:var(--text-muted);display:flex}.help-shortcuts span{margin-left:var(--space-2xs)}.help-shortcuts kbd,.help-tip kbd{font-family:inherit;font-size:var(--type-xs);min-width:17px;height:18px;padding:0 var(--space-xs);border-radius:var(--radius-sm);background:var(--btn-bg);border:1px solid var(--panel-border);color:var(--text);justify-content:center;align-items:center;font-weight:600;display:inline-flex}.help-tip{margin:var(--space-lg) 0 0;padding-top:var(--space-xl);border-top:1px solid var(--panel-border);align-items:center;gap:var(--space-xs);font-size:var(--type-sm);color:var(--text-muted);display:flex}.help-tip kbd{margin:0 1px}.links-section{min-height:100svh;padding:var(--space-5xl) var(--space-2xl) calc(var(--space-6xl) + env(safe-area-inset-bottom));place-items:center;display:grid}.links-inner{align-items:center;gap:var(--space-3xl);flex-direction:column;width:100%;max-width:480px;display:flex}.colophon{text-align:center;align-items:center;gap:var(--space-xs);flex-direction:column;display:flex}.colophon-name{font-family:var(--serif);color:var(--text);margin:0;font-size:clamp(26px,4.4vw,34px);font-style:italic;font-weight:600}.colophon-gloss{font-family:var(--serif);color:var(--text-muted);margin:0;font-size:clamp(14px,2.2vw,16px);font-style:italic;font-weight:500}.hairline{background:var(--hairline);border:none;width:40px;height:1px;margin:0}.link-row{gap:var(--space-xl);flex-wrap:wrap;justify-content:center;display:flex}.link-card{--panel-filter:blur(14px);align-items:center;gap:var(--space-md);width:168px;padding:var(--space-3xl) var(--space-xl) var(--space-2xl);border-radius:var(--radius-lg);color:var(--text);transition:transform var(--dur-slow) ease, border-color var(--dur-slow);flex-direction:column;text-decoration:none;display:flex}.link-card:hover{border-color:color-mix(in oklab, var(--accent) 40%, var(--panel-border));transform:translateY(-3px)}.link-icon{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:30px;height:30px;color:var(--text-muted)}.link-icon.is-filled{fill:var(--text-muted);stroke:none}.link-text{align-items:center;gap:var(--space-2xs);flex-direction:column;display:flex}.link-label{font-size:var(--type-md);letter-spacing:.01em;font-weight:600}.link-sub{font-size:var(--type-sm);color:var(--text-muted)}@media (width>=900px){.links-inner{gap:var(--space-5xl);max-width:620px}.link-card{width:280px;padding:var(--space-4xl) var(--space-3xl) var(--space-3xl);gap:var(--space-lg);border-radius:var(--radius-xl);text-align:left;flex-direction:row;justify-content:flex-start}.link-icon{flex-shrink:0;width:32px;height:32px}.link-text{align-items:flex-start}.link-label{font-size:var(--type-lg)}.link-sub{font-size:var(--type-md)}}.hero{align-items:center;gap:clamp(var(--space-xl), 3.6vh, var(--space-4xl));flex-direction:column;width:100%;display:flex}.tap-zone{z-index:1;align-items:center;gap:clamp(var(--space-lg), 2.6vh, var(--space-2xl));cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;max-width:440px;display:flex;position:relative}.tap-zone:focus-visible{outline:none}.tap-zone:focus-visible .tempo-marking{outline:var(--focus-ring);outline-offset:12px;border-radius:var(--radius-md)}.tempo-marking{text-align:center;align-items:center;gap:var(--space-2xs);flex-direction:column;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{--pivot-size:7px;--rod-width:2px;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{width:var(--pivot-size);height:var(--pivot-size);background:var(--pivot);z-index:3;border-radius:50%;position:absolute;top:0;left:50%;transform:translate(-50%)}.pendulum-arm{top:var(--pivot-size);margin-left:calc(var(--rod-width) / -2);width:var(--rod-width);transform-origin:top;height:82%;transform:rotate(var(--pendulum-angle,0deg));z-index:2;position:absolute;left:50%}.pendulum-stage.is-resting .pendulum-arm,.pendulum-stage.is-resting .pendulum-shadow{transition:transform .55s var(--ease-out)}.pendulum-rod{background:var(--wand);border-radius:var(--rod-width);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{font-size:var(--type-sm);letter-spacing:.02em;color:var(--text-muted);transition:color var(--dur-slow);min-height:1em;margin:0}.tap-zone.is-playing .tap-state{color:var(--accent)}.bpm-display{align-items:baseline;gap:var(--space-sm);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);font-weight:600;font-size:var(--type-sm);letter-spacing:.14em;color:var(--text-muted)}.beat-dots{align-items:center;gap:var(--space-md);min-height:12px;display:flex}.beat-dot{background:var(--dot-idle);width:8px;height:8px;transition:background var(--dur-fast) ease, transform var(--dur-fast) ease;border-radius:50%}.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)}.control-panel{z-index:5;width:min(520px,100%);padding:var(--space-xl) var(--space-2xl);border-radius:var(--radius-xl);gap:var(--space-lg);cursor:default;flex-direction:column;display:flex;position:relative}.control-row{align-items:center;gap:var(--space-lg);display:flex}.tempo-slider{--track-h:6px;--thumb-w:32px;--thumb-h:18px;--thumb-face:linear-gradient(210deg, #fff 0%, #fff 45%, #d4d5d9 100%);--thumb-shadow:0 2px 6px #00000059, inset 1px -1px 1px #ffffffe6, inset -1px 1px 2px #0000001a;--thumb-scale:1;appearance:none;cursor:pointer;background:0 0;flex:auto;width:100%;height:22px;margin:0}.tempo-slider:active{--thumb-face: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%);--thumb-shadow:0 4px 12px #0006, inset 1px -1px 1px #ffffffb3, inset -1px 1px 2px #00000026;--thumb-scale:1.25}.tempo-slider:focus-visible{outline:var(--focus-ring);outline-offset:4px;border-radius:var(--radius-sm)}.tempo-slider::-webkit-slider-runnable-track{height:var(--track-h);border-radius:calc(var(--track-h) / 2);background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,50%), var(--track) var(--fill,50%), var(--track) 100%);box-shadow:inset 0 1px 2px #00000026}.tempo-slider::-moz-range-track{height:var(--track-h);border-radius:calc(var(--track-h) / 2);background:var(--track);box-shadow:inset 0 1px 2px #00000026}.tempo-slider::-moz-range-progress{height:var(--track-h);border-radius:calc(var(--track-h) / 2);background:var(--accent)}.tempo-slider::-webkit-slider-thumb{appearance:none;width:var(--thumb-w);height:var(--thumb-h);border-radius:var(--radius-full);background:var(--thumb-face);box-shadow:var(--thumb-shadow);transform:scale(var(--thumb-scale));margin-top:calc((var(--track-h) - var(--thumb-h)) / 2);transition:transform var(--dur-base) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base);border:none}.tempo-slider::-moz-range-thumb{width:var(--thumb-w);height:var(--thumb-h);border-radius:var(--radius-full);background:var(--thumb-face);box-shadow:var(--thumb-shadow);transform:scale(var(--thumb-scale));transition:transform var(--dur-base) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base);border:none}.beats-control{align-items:center;gap:var(--space-md);flex:none;display:flex}.beats-value{text-align:center;color:var(--text-muted);font-size:var(--type-md)}.beats-number{text-align:right;font-variant-numeric:tabular-nums;min-width:2ch;font-weight:600;font-size:var(--type-lg);color:var(--text);display:inline-block}.tap-button{--btn-press:.96;height:38px;padding:0 var(--space-2xl);border-radius:var(--radius-full);font-family:var(--sans);font-weight:700;font-size:var(--type-sm);letter-spacing:.14em;flex:auto}.tap-button.pulse{animation:tap-pulse var(--dur-fast) ease-out}@keyframes tap-pulse{0%{transform:scale(var(--btn-press))}to{transform:scale(1)}}@media (height<=700px){.hero{gap:clamp(var(--space-md), 2.7vh, var(--space-4xl))}.tap-zone{gap:clamp(var(--space-md), 2.2vh, var(--space-xl))}.pendulum-stage{height:clamp(104px,19.5vh,260px)}.bpm-number{font-size:clamp(56px,17vw,104px)}.control-panel{padding:var(--space-xl) var(--space-2xl) var(--space-lg);gap:var(--space-lg)}}