@layer components{.metronome-face{position:relative;display:flex;flex-direction:column;align-items:center;width:clamp(220px,60vw,300px);margin:0 auto;--bpm: 120;--beat-duration: .5s;--swing-amp: 20deg;--weight-pos: 50%;--flash-intensity: .08}.metronome-face__body{position:relative;width:100%;background:transparent;aspect-ratio:.75 / 1;overflow:visible}.metronome-face__body:after{content:"";position:absolute;inset:0;clip-path:polygon(18% 0%,82% 0%,100% 100%,0% 100%);background:repeating-linear-gradient(92deg,transparent 0px,transparent 8px,rgba(0,0,0,.025) 8px,rgba(0,0,0,.025) 9px),linear-gradient(170deg,#d4a25a,#c08840 40%,#a87030);border-radius:4px;box-shadow:0 8px 24px #0000004d,inset 0 2px #ffffff26,inset -2px 0 8px #0000001a;pointer-events:none;z-index:0}.metronome-face__arm-track{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;pointer-events:none;overflow:visible;z-index:8}.metronome-face__arm{position:absolute;top:-10%;width:5px;height:82%;background:linear-gradient(180deg,#999,#666 30%,#444 70%,#333);border-radius:3px;transform-origin:bottom center;transform:rotate(0);transition:transform var(--beat-duration) cubic-bezier(.4,0,.2,1);will-change:transform;z-index:10;box-shadow:1px 0 3px #0000004d}.metronome-face__arm.is-swung-left{transform:rotate(calc(-1 * var(--swing-amp)))}.metronome-face__arm.is-swung-right{transform:rotate(var(--swing-amp))}.metronome-face__counterweight{position:absolute;left:50%;transform:translate(-50%);top:var(--weight-pos, 50%);width:26px;height:18px;background:linear-gradient(135deg,#666,#444,#333);border-radius:3px;border:1.5px solid #222;box-shadow:0 2px 4px #0006,inset 0 1px #ffffff26;z-index:2;pointer-events:none}.metronome-face__counterweight:after{content:"";position:absolute;top:3px;left:4px;right:4px;height:3px;background:#ffffff40;border-radius:1px}.metronome-face__pivot{position:absolute;top:72%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#bbb,#777 40%,#444 70%,#333);border:2px solid #222;box-shadow:0 2px 6px #00000080;z-index:15;pointer-events:none}.metronome-face__plate{position:absolute;top:2%;bottom:15%;left:50%;transform:translate(-50%);width:56%;background:linear-gradient(180deg,#1a1a1a,#111,#0a0a0a);border:1px solid #333;border-radius:3px;box-shadow:inset 0 2px 8px #00000080,inset 0 -2px 4px #0000004d,0 0 0 1px #ffffff0d;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:stretch;z-index:1}.metronome-face__flash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,200,100,1) 0%,transparent 70%);opacity:0;pointer-events:none;border-radius:inherit}.metronome-face__flash.is-flashing{animation:beat-flash .2s ease-out forwards}.metronome-face__flash.is-accent{--flash-intensity: .15}@keyframes beat-flash{0%{opacity:var(--flash-intensity, .08)}to{opacity:0}}.metronome-face__scale{width:100%;height:100%;overflow:visible}.metronome-face__beats{position:absolute;bottom:3%;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;max-width:80%;z-index:10}.metronome-face__beat{width:10px;height:10px;border-radius:50%;background:#ffffff40;border:1.5px solid rgba(255,255,255,.4);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,background .1s ease;flex-shrink:0;touch-action:manipulation;-webkit-user-select:none;user-select:none}.metronome-face__beat:hover{transform:scale(1.2)}.metronome-face__beat.is-active{transform:scale(1.4);background:var(--tk-accent);border-color:var(--tk-accent);box-shadow:0 0 8px var(--tk-accent-glow),0 0 16px var(--tk-accent-glow)}.metronome-face__beat.is-accent{background:#ffffff80;border-color:#ffffffb3}.metronome-face__beat.is-active.is-accent{transform:scale(1.5);box-shadow:0 0 10px var(--tk-accent-glow),0 0 24px var(--tk-accent-glow),0 0 40px var(--tk-accent-glow)}.metronome-face__beat.is-muted{background:#6464644d;border-color:#64646466;opacity:.5}.metronome-face__feet{display:flex;justify-content:space-between;width:100%;padding:0 .5rem;margin-top:-2px;position:relative;z-index:2}.metronome-face__feet .foot{width:18%;height:8px;background:linear-gradient(180deg,#8b5e3c,#6b4a2c);border-radius:0 0 4px 4px;box-shadow:0 3px 6px #0000004d}[data-theme=dark] .metronome-face__body:after{background:repeating-linear-gradient(92deg,transparent 0px,transparent 8px,rgba(0,0,0,.06) 8px,rgba(0,0,0,.06) 9px),linear-gradient(170deg,#4a3520,#3a2815 40%,#2d1f10);box-shadow:0 8px 24px #00000080,inset 0 2px #ffffff14,inset -2px 0 8px #0003}[data-theme=dark] .metronome-face__plate{background:linear-gradient(180deg,#141414,#0d0d0d,#080808);border-color:#2a2a2a}[data-theme=dark] .metronome-face__feet .foot{background:linear-gradient(180deg,#2d1f10,#1d1208)}[data-theme=dark] .metronome-face__beat{background:#ffffff1a;border-color:#fff3}[data-theme=dark] .metronome-face__beat.is-active{box-shadow:0 0 10px var(--tk-accent-glow),0 0 20px var(--tk-accent-glow),0 0 36px var(--tk-accent-glow)}.metronome-scale__label{font-size:9px;fill:#c9a850;font-family:var(--tk-font-sans);letter-spacing:.04em;font-weight:500;text-transform:uppercase}.metronome-scale__number{font-size:7px;fill:#b89840;font-family:var(--tk-font-mono);letter-spacing:-.02em}.metronome-scale__tick{stroke:#7a6530}.metronome-scale__tick--major{stroke:#b89840}.metronome-scale__indicator{fill:var(--tk-accent);filter:drop-shadow(0 0 3px var(--tk-accent-glow))}[data-theme=dark] .metronome-scale__label{fill:#c0a040}[data-theme=dark] .metronome-scale__number{fill:#a88830}[data-theme=dark] .metronome-scale__tick{stroke:#6a5520}[data-theme=dark] .metronome-scale__tick--major{stroke:#a88830}}[data-fullscreen] .metronome-shell{max-width:none;width:100%;flex:1 1 auto;min-height:0;justify-content:center;align-items:center;gap:1.5rem;overflow:hidden;padding:0}[data-fullscreen] .metronome-face{width:min(50vh,380px);flex-shrink:0}[data-fullscreen] .metronome-controls{flex-shrink:0}[data-fullscreen] .metronome-shell__status{display:none}@media(max-width:768px){[data-mobile-focus] .metronome-shell{max-width:none;width:100%;flex:1 1 auto;min-height:0;margin-bottom:0;justify-content:center;gap:.75rem;overflow:hidden;padding:0}[data-mobile-focus] .metronome-face{width:min(78vw,320px);flex-shrink:0}[data-mobile-focus] .metronome-shell__status{display:flex!important}[data-mobile-focus] .metronome-controls{display:none!important}}@layer components{.metronome-page{max-width:960px;margin:0 auto;padding:0 1.5rem 4rem}.metronome-hero{text-align:center;padding:3rem 0 1.5rem}.metronome-hero__title{font-size:clamp(1.75rem,5vw,2.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:.5rem}.metronome-hero__desc{font-size:clamp(1rem,2.5vw,1.25rem);color:var(--tk-text-secondary);margin-bottom:1.5rem}.metronome-shell{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:1.5rem 0 2rem}.metronome-shell__status{display:none;align-items:center;gap:.5rem;flex-shrink:0}.metronome-shell__status-bpm{font-family:var(--tk-font-mono);font-size:1.75rem;font-weight:700;color:var(--tk-accent);line-height:1}.metronome-shell__status-unit{font-size:.75rem;font-weight:600;color:var(--tk-text-secondary);letter-spacing:.08em;align-self:flex-end;padding-bottom:.2rem}.metronome-shell__status-sep{color:var(--tk-text-muted);font-size:1rem;align-self:center}.metronome-shell__status-beats{font-family:var(--tk-font-mono);font-size:1rem;font-weight:600;color:var(--tk-text-secondary);align-self:center}.metronome-controls{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:420px}.metronome-controls__bpm-row{display:flex;align-items:center;gap:.5rem;justify-content:center}.metronome-controls__bpm-display{display:flex;flex-direction:column;align-items:center;min-width:100px}.metronome-controls__bpm-value{font-family:var(--tk-font-mono);font-size:2.5rem;font-weight:700;color:var(--tk-accent);line-height:1}.metronome-controls__bpm-unit{font-size:.75rem;font-weight:600;color:var(--tk-text-secondary);letter-spacing:.08em}.metronome-controls__tempo-label{font-size:.75rem;color:var(--tk-text-muted);font-style:italic;margin-top:.1rem}.metronome-controls__adj-btn{padding:.4rem .75rem;border:1px solid var(--tk-border);border-radius:var(--tk-radius);background:var(--tk-surface);color:var(--tk-text-secondary);font-size:.8125rem;font-weight:600;font-family:var(--tk-font-mono);transition:all var(--tk-duration) var(--tk-ease);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}.metronome-controls__adj-btn:hover{border-color:var(--tk-accent);color:var(--tk-accent);box-shadow:0 0 0 2px var(--tk-accent-glow)}.metronome-controls__tap-row{display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%}.metronome-controls__tap-btn{padding:.625rem 1.25rem;border:2px solid var(--tk-border);border-radius:var(--tk-radius-lg);background:var(--tk-surface);color:var(--tk-text-secondary);font-size:.875rem;font-weight:600;letter-spacing:.05em;transition:all var(--tk-duration) var(--tk-ease);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}.metronome-controls__tap-btn:hover,.metronome-controls__tap-btn:active{border-color:var(--tk-accent);color:var(--tk-accent);background:color-mix(in srgb,var(--tk-accent) 8%,var(--tk-surface));transform:scale(.97)}.metronome-controls__tap-btn:active{transform:scale(.93)}.metronome-controls__slider-row{display:flex;align-items:center;gap:.5rem;width:100%}.metronome-controls__slider-label{font-size:.75rem;color:var(--tk-text-muted);font-family:var(--tk-font-mono);min-width:24px;text-align:center}.metronome-controls__slider{flex:1;height:4px;border-radius:2px;accent-color:var(--tk-accent);cursor:pointer;touch-action:pan-x;-webkit-user-select:none;user-select:none}.metronome-controls__section-label{font-size:.75rem;font-weight:600;color:var(--tk-text-muted);letter-spacing:.06em;text-transform:uppercase;text-align:center;display:block;margin-bottom:.375rem}.metronome-controls__beats-row,.metronome-controls__sub-row{display:flex;flex-direction:column;align-items:center;width:100%}.metronome-controls__beats-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem}.metronome-controls__beats-pill{min-width:36px;padding:.35rem .5rem;border:1px solid var(--tk-border);border-radius:var(--tk-radius);background:var(--tk-surface);color:var(--tk-text-secondary);font-size:.875rem;font-weight:600;font-family:var(--tk-font-mono);cursor:pointer;min-height:44px;transition:all var(--tk-duration) var(--tk-ease);touch-action:manipulation;-webkit-user-select:none;user-select:none}.metronome-controls__beats-pill.is-active{background:var(--tk-accent);border-color:var(--tk-accent);color:#fff;box-shadow:0 0 0 2px var(--tk-accent-glow)}.metronome-controls__beats-pill:hover:not(.is-active){border-color:var(--tk-accent);color:var(--tk-accent)}.metronome-controls__sub-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem}.metronome-controls__sub-pill{padding:.35rem .75rem;border:1px solid var(--tk-border);border-radius:var(--tk-radius);background:var(--tk-surface);color:var(--tk-text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--tk-duration) var(--tk-ease);touch-action:manipulation;-webkit-user-select:none;user-select:none}.metronome-controls__sub-pill.is-active{background:var(--tk-accent);border-color:var(--tk-accent);color:#fff;box-shadow:0 0 0 2px var(--tk-accent-glow)}.metronome-controls__sub-pill:hover:not(.is-active){border-color:var(--tk-accent);color:var(--tk-accent)}.metronome-controls__start-btn{padding:.625rem 1.75rem;border:none;border-radius:var(--tk-radius-lg);background:var(--tk-accent);color:#fff;font-size:.9375rem;font-weight:700;letter-spacing:.04em;cursor:pointer;min-height:44px;min-width:120px;transition:all var(--tk-duration) var(--tk-ease);box-shadow:0 4px 16px var(--tk-accent-glow);touch-action:manipulation;-webkit-user-select:none;user-select:none}.metronome-controls__start-btn:hover{background:var(--tk-accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px var(--tk-accent-glow)}.metronome-controls__start-btn.is-running{background:#dc2626;box-shadow:0 4px 16px #dc26264d}.metronome-controls__start-btn.is-running:hover{background:#b91c1c;box-shadow:0 6px 20px #dc262666}.metronome-instruments{padding:2rem 0;text-align:center}.metronome-instruments__heading{font-size:1.25rem;font-weight:700;margin-bottom:1rem}.instruments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}.instrument-card{display:flex;flex-direction:column;align-items:center;padding:1.25rem 1rem;border:1px solid var(--tk-border);border-radius:var(--tk-radius-lg);background:var(--tk-surface);text-align:center;transition:all var(--tk-duration) var(--tk-ease);gap:.375rem}.instrument-card:hover{border-color:var(--tk-accent);box-shadow:0 2px 12px var(--tk-accent-glow);transform:translateY(-2px)}.instrument-card__icon{font-size:1.5rem;margin-bottom:.25rem}.instrument-card__name{font-size:.9375rem;font-weight:600;color:var(--tk-text)}.instrument-card__desc{font-size:.8125rem;color:var(--tk-text-muted);line-height:1.4}.metronome-related{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:1.5rem 0}.metronome-related__label{font-size:.8125rem;color:var(--tk-text-muted);align-self:center;margin-right:.25rem}.metronome-related__link{display:inline-flex;padding:.375rem .875rem;border:1px solid var(--tk-border);border-radius:var(--tk-radius-full);font-size:.8125rem;font-weight:500;color:var(--tk-text-secondary);transition:all var(--tk-duration) var(--tk-ease)}.metronome-related__link:hover,.metronome-related__link.is-current{border-color:var(--tk-accent);color:var(--tk-accent);background:color-mix(in srgb,var(--tk-accent) 8%,var(--tk-surface))}.metronome-content{padding:2rem 0;border-top:1px solid var(--tk-border-subtle)}.metronome-content h2{font-size:1.25rem;font-weight:700;margin:1.5rem 0 .5rem}.metronome-content h2:first-child{margin-top:0}.metronome-content p{font-size:.9375rem;color:var(--tk-text-secondary);line-height:1.7}.metronome-faq{padding:2rem 0;border-top:1px solid var(--tk-border-subtle)}.metronome-faq__heading{font-size:1.25rem;font-weight:700;margin-bottom:1rem}.metronome-faq details{border-bottom:1px solid var(--tk-border-subtle)}.metronome-faq summary{cursor:pointer;padding:.75rem 0;font-weight:500;font-size:.9375rem;list-style:none;display:flex;align-items:center;gap:.5rem}.metronome-faq summary::-webkit-details-marker{display:none}.metronome-faq summary::marker{content:""}.metronome-faq summary:before{content:"+";color:var(--tk-accent);font-weight:700;font-size:1rem;width:1em;flex-shrink:0}.metronome-faq details[open] summary:before{content:"−"}.metronome-faq details p{padding:0 0 .75rem 1.5rem;color:var(--tk-text-secondary);font-size:.9375rem;line-height:1.7}.mini-pendulum-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.mini-metronome-body{position:relative;width:44px;height:64px;clip-path:polygon(20% 0%,80% 0%,100% 100%,0% 100%);background:linear-gradient(170deg,#d4a25a,#a87030);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000040}.mini-pendulum{position:absolute;top:-18px;left:50%;transform-origin:bottom center;transform:translate(-50%);width:3px;height:60px;background:linear-gradient(180deg,#888,#333);border-radius:2px;animation:mini-swing .5s cubic-bezier(.4,0,.2,1) infinite alternate}@keyframes mini-swing{0%{rotate:-18deg}to{rotate:18deg}}@media(max-width:768px){.metronome-hero{padding:1.5rem 0 .5rem}.metronome-hero__title{margin-bottom:0}.metronome-hero__desc{display:none}.metronome-shell{gap:1.25rem;padding:.75rem 0 1.25rem}.metronome-controls__tap-btn,.metronome-controls__start-btn{min-height:52px}.metronome-controls__adj-btn{padding:.5rem .875rem;font-size:.875rem;min-height:44px}}@media(max-width:480px){.metronome-hero{padding:1.125rem 0 .375rem}.metronome-controls__bpm-value{font-size:2rem}.metronome-controls__tap-row{gap:.5rem}.metronome-controls__tap-btn,.metronome-controls__start-btn{flex:1;max-width:172px;padding-inline:.75rem;font-size:.875rem}.metronome-controls{max-width:100%;padding:0 .25rem}.instruments-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}@media(max-width:768px){.metronome-page{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 5.5rem)}}}[data-fullscreen] .metronome-hero,[data-fullscreen] .metronome-instruments,[data-fullscreen] .metronome-related,[data-fullscreen] .metronome-content,[data-fullscreen] .metronome-faq{display:none!important}[data-fullscreen] .metronome-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;max-height:100dvh;min-height:0;padding:1.5rem 2rem;overflow:hidden;box-sizing:border-box}@media(max-width:768px){[data-mobile-focus] .metronome-hero,[data-mobile-focus] .metronome-instruments,[data-mobile-focus] .metronome-related,[data-mobile-focus] .metronome-content,[data-mobile-focus] .metronome-faq{display:none!important}[data-mobile-focus] .metronome-page{display:flex;flex-direction:column;align-items:center;height:100dvh;max-height:100dvh;min-height:0;justify-content:center;overflow:hidden;box-sizing:border-box;padding:.875rem .875rem calc(env(safe-area-inset-bottom,0px) + 4.75rem)}}