:root{color-scheme:light;--cream:#fff7eb;--ink:#633d25;--rose:#dd746e;--gold:#b58a4d;--muted:#a48a75;--line:#dbc5a5}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;background:#efe5d8;color:var(--ink)}body{min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden}button,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible,input:focus-visible{outline:3px solid #ab6268;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}button{border:0}.app{position:relative;width:min(100vw,480px);height:100svh;height:100dvh;min-height:560px;max-height:960px;overflow:hidden;isolation:isolate;background:#fff6e9;box-shadow:0 12px 90px #77564325}.room{position:absolute;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(ellipse at 48% 35%,#fffdf4 5%,#fff4e3 44%,#eed8c9 100%)}.room::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 58px,#dcc9b015 59px 62px,transparent 63px 110px);mask-image:linear-gradient(#0007,transparent 63%)}.room::after{content:"";position:absolute;width:600px;height:260px;bottom:-140px;left:-270px;border-radius:50%;background:#f1c0b4;filter:blur(50px);opacity:.3}.arch{position:absolute;top:2%;width:26%;height:55%;border:9px double #d3b48c33;border-radius:90px 90px 0 0;background:linear-gradient(135deg,#fff9db99,#f6d6ba20);box-shadow:0 0 12px #c0a78713,inset 0 0 18px #fff7e5;filter:blur(1px)}.arch-left{left:-12%}.arch-right{right:-12%}.counter{position:absolute;top:50%;bottom:0;left:0;right:0;border-top:1px solid #dbc3aa30;background:repeating-linear-gradient(161deg,transparent 0 95px,#cfac9440 96px,transparent 98px 144px),linear-gradient(#fff6e9d9,#ffeddc88);mask-image:linear-gradient(transparent,#000 27%)}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.brand{position:absolute;top:max(18px,env(safe-area-inset-top));left:0;width:100%;text-align:center;pointer-events:none}.brand .flourish{display:block;font-size:20px;height:19px;color:#b18245}.brand h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:27px;letter-spacing:.22em;margin:4px 0 7px;padding-left:.22em}.brand p{font-family:Georgia,serif;font-size:9px;letter-spacing:.31em;margin:0;color:#ad8759}.icon-button{position:absolute;width:37px;height:37px;border:1px solid #caa775;border-radius:50%;background:#fff9eee0;box-shadow:inset 0 0 0 3px #fff,0 2px 5px #ab805520;font-size:20px;z-index:5;top:max(31px,calc(env(safe-area-inset-top) + 12px))}.settings-button{left:18px}.pause-button{right:18px;font-family:Georgia,serif;font-size:18px}.hud{position:absolute;left:31px;right:31px;top:105px;display:flex;justify-content:space-between;flex-wrap:wrap}.small-label{font-size:9px;letter-spacing:.15em;display:block}.hud strong{display:block;font-family:Georgia,serif;font-size:25px;font-weight:500;letter-spacing:.05em}.combo{display:flex;align-items:baseline;gap:7px}.combo strong{color:var(--rose);font-size:29px}.combo .small-label{font-size:9px}.song-progress{position:relative;height:6px;border:1px solid #c8a170;border-radius:10px;width:100%;margin-top:9px;overflow:hidden;background:#fff5e8}.song-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#f6b5a5,#db7771);border-radius:10px}.stage-label{display:flex;justify-content:space-between;width:100%;font:9px Georgia,serif;letter-spacing:.15em;margin-top:11px;color:#96704a}.collection{position:absolute;bottom:252px;left:27px;right:27px;height:63px;display:flex;align-items:center;gap:12px;border:1px solid #caab7d;border-radius:13px;background:linear-gradient(120deg,#fffbf2e8,#fff0dfed);box-shadow:0 4px 12px #b48b5c16,inset 0 0 0 3px #fffbf4}.collection-label{position:absolute;top:-6px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff4e6;padding:0 10px;font:8px Georgia,serif;letter-spacing:.19em;color:#986a3b}.collection-slot{position:relative;margin-left:17px;width:43px;height:43px;border:1px dashed #d9bd9a;border-radius:10px;display:grid;place-items:center;color:#d5b690;font-size:23px}.collection-slot img{position:absolute;width:52px;height:52px;object-fit:contain;left:-5px;top:-5px}.collection-copy{display:flex;flex-direction:column;gap:4px}.collection-copy strong{font:15px Georgia,serif;letter-spacing:.12em}.collection-copy span{font-size:9px;color:#a0856c}.gift{margin-left:auto;margin-right:19px;font-size:29px;color:#b58a4d;transform:rotate(180deg)}.timing-help{position:absolute;bottom:209px;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.02em;color:#967454}.timing-help span:first-child{font:9px Georgia,serif;letter-spacing:.12em}.tap-pad{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);width:124px;height:124px;border-radius:50%;border:1px solid #b38a50;background:radial-gradient(circle at 40% 25%,#fff8f0,#ffe0d2);box-shadow:inset 0 0 0 3px #fff8ec,inset 0 0 0 4px #e9bfa1,0 5px 0 #d5af7a33,0 10px 22px #ae765919;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .08s,box-shadow .08s;touch-action:none;user-select:none;-webkit-user-select:none;z-index:3}.tap-pad:active,.tap-pad.pressed{background:#ffd5c3;box-shadow:inset 0 0 0 3px #fff8ec,inset 0 0 0 4px #e9bfa1,0 0 24px #e89a8e55}.tap-note{font-size:43px;font-family:Georgia,serif;line-height:47px;margin-top:-2px}.tap-word{font:12px Georgia,serif;letter-spacing:.25em;margin-left:.25em}.tap-key{font-size:7px;letter-spacing:.15em;color:#ad8b73;margin-top:7px}.bottom-caption{position:absolute;bottom:15px;width:100%;text-align:center;font:9px Georgia,"Yu Mincho",serif;letter-spacing:.18em;color:#aa8568}.home-screen{position:absolute;inset:0;pointer-events:none}.home-pill{position:absolute;top:117px;left:50%;transform:translateX(-50%);font:8px Georgia,serif;letter-spacing:.2em;white-space:nowrap;border-top:1px solid #cbb08d70;border-bottom:1px solid #cbb08d70;padding:9px 14px;color:#9c7855}.home-bottom{position:absolute;bottom:24px;left:34px;right:34px;text-align:center;pointer-events:auto}.eyebrow{font:9px Georgia,serif;letter-spacing:.2em;color:#b08254}.home-bottom h2{font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;font-size:24px;line-height:1.65;letter-spacing:.12em;font-weight:500;margin:13px 0 10px}.description{font-size:11px;line-height:1.9;color:#92735d;margin:10px 0 19px}.primary-button{width:100%;min-height:48px;border:1px solid #c89871;border-radius:8px;background:linear-gradient(105deg,#9b6650,#825340);color:#fff7ea;box-shadow:inset 0 0 0 2px #ffffff14,0 6px 15px #996d4322;font-size:12px;letter-spacing:.08em;padding:12px 18px;display:flex;align-items:center;justify-content:center;gap:18px}.primary-button:hover{background:#81523f}.primary-button span{font-size:18px;font-family:Georgia,serif}.home-meta{font-size:9px;letter-spacing:.03em;color:#aa8b73;margin:12px 0 7px}.best{font:9px Georgia,serif;letter-spacing:.14em;color:#ab8157;margin:0;min-height:11px}.load-status{font-size:9px;color:#aa7d68;margin:6px 0;min-height:12px}.overlay{position:absolute;inset:0;background:#f6e4d9b8;backdrop-filter:blur(9px);z-index:10;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}.dialog{width:100%;max-width:370px;border:1px solid #cfb08b;background:linear-gradient(140deg,#fffaf0,#fff1e4);box-shadow:0 15px 60px #9c76522b,inset 0 0 0 5px #ffffff7a;border-radius:16px;padding:29px 25px;text-align:center}.dialog h2{font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;font-size:22px;font-weight:500;letter-spacing:.07em;margin:16px 0}.dialog p:not(.eyebrow){font-size:11px;line-height:1.8;color:#987862}.pause-card .primary-button{margin-top:26px}.secondary-button{width:100%;margin-top:11px;padding:13px;border:1px solid #d3b793;border-radius:8px;background:transparent;font-size:12px}.text-button{font-size:10px;padding:14px 10px 0;background:transparent;color:#a18266}.range-label{display:block;text-align:left;font-size:11px;margin-top:23px}.range-label output{float:right;color:#a57960;font:12px Georgia,serif}.range-label input{display:block;width:100%;margin-top:12px;accent-color:#c17d6a}.setting-note{text-align:left;font-size:9px!important;line-height:1.8!important;color:#aa8c73!important}.check-label{display:flex;align-items:center;gap:8px;font-size:11px;margin:21px 0 12px}.check-label input{accent-color:#ab725d;width:16px;height:16px}.settings-card .primary-button{margin-top:23px}.feedback{position:absolute;top:48%;width:100%;text-align:center;pointer-events:none;z-index:2;font:bold 25px Georgia,serif;letter-spacing:.07em;color:#d77672;opacity:0;transform:translateY(9px);transition:opacity .1s,transform .2s;text-shadow:0 2px 0 #fff9eb,0 0 16px #fff9eb}.feedback.show{opacity:1;transform:translateY(0)}.feedback small{display:block;font-size:10px;letter-spacing:.1em;color:#b0815d;margin-top:6px}.result-card{padding:24px 24px 15px}.result-card .eyebrow{margin:3px 0 8px}.result-card h2{font-size:19px;margin:12px 0 0}.result-art{position:relative;width:170px;height:153px;margin:0 auto}.result-art img{width:100%;height:100%;object-fit:contain}.result-art span{position:absolute;bottom:9px;right:0;width:42px;height:42px;border:1px solid #c3975e;border-radius:50%;background:#fff7e5;display:grid;place-items:center;font:22px Georgia,serif;box-shadow:0 3px 10px #a7733420;color:#aa733b}.result-score-label{font:9px Georgia,serif!important;letter-spacing:.18em;margin:12px 0 2px!important}.result-score{font:38px Georgia,serif;letter-spacing:.05em}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:19px 0 13px;border-top:1px solid #dcc4a770;border-bottom:1px solid #dcc4a770;padding:14px 0}.result-stats div{display:flex;flex-direction:column;gap:7px}.result-stats div+div{border-left:1px solid #dcc4a770}.result-stats span{font-size:9px;color:#a0836a}.result-stats strong{font:18px Georgia,serif}.result-grades{font-size:8px!important;letter-spacing:.02em}.new-best{font:9px Georgia,serif!important;color:#ba7957!important;min-height:15px;letter-spacing:.15em;margin:10px 0}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:650px){.app{border:1px solid #dfc9b0;border-radius:24px;height:calc(100dvh - 32px)}body{background:radial-gradient(ellipse at 50% 30%,#fff8ef,#eadcce)}}@media(max-height:710px){.brand{top:12px}.brand h1{font-size:24px}.brand p{font-size:8px}.brand .flourish{font-size:15px;height:14px}.hud{top:88px}.icon-button{top:25px}.home-pill{top:98px}.home-bottom{bottom:13px}.home-bottom h2{font-size:20px;line-height:1.5;margin:8px 0}.description{margin:6px 0 13px;font-size:10px}.home-meta{font-size:8px}.collection{bottom:217px;height:56px}.timing-help{bottom:181px}.tap-pad{bottom:39px;width:107px;height:107px}.tap-note{font-size:37px;line-height:40px}.tap-key{font-size:6px}.bottom-caption{bottom:10px;font-size:8px}.result-card{padding:20px 20px 13px}.result-art{height:110px;width:140px}.result-stats{margin:12px 0 8px;padding:9px 0}.dialog h2{font-size:19px}.range-label{margin-top:16px}.settings-card .primary-button{margin-top:16px}.settings-card{padding:20px}.overlay{padding:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media(pointer:coarse){.tap-key{display:none}} 
.room{background-image:linear-gradient(#fff6e928,#fff6e915 45%,#fff6e945),url('../assets/background.webp');background-size:cover;background-position:center}.room .arch,.room .counter,.room::before{display:none}
/* Landscape / split-screen fallback: keep every control reachable by scrolling. */
@media(max-height:559px){body{display:block;overflow-y:auto;overflow-x:hidden;min-height:100vh}.app{height:700px;min-height:700px;max-height:none;margin:0 auto;border-radius:0}.brand{top:15px}.home-pill{top:100px}.home-bottom{bottom:19px}}
/* v0.2 four-sweet collection: compact tray, individually earned gift slots. */
.collection{gap:10px;padding:0 13px}.collection-slots{display:grid;grid-template-columns:repeat(4,36px);gap:6px}.collection-slot{margin:0;width:36px;height:38px;border-radius:8px;font-size:18px}.collection-slot img{width:45px;height:45px;left:-5px;top:-4px}.collection-slot.current{border-color:#bb9272;border-style:solid;background:#fff9f1}.collection-slot.earned{border-style:solid;border-color:#d2b991;background:#fff9ec}.collection-copy{margin-left:auto;gap:5px;min-width:104px}.collection-copy strong{font-size:16px}.collection-copy span{font-size:8px;max-width:126px;line-height:1.5}.gift-box{position:relative;max-width:238px;margin:20px auto 12px;padding:12px;border:1px solid #c49e72;border-radius:13px;background:linear-gradient(135deg,#e9c1aa,#f7dcc3 40%,#e6bda3);box-shadow:0 7px 16px #ad805321,inset 0 0 0 3px #fff1e0}.gift-ribbon{position:absolute;left:50%;top:-16px;transform:translateX(-50%);background:#aa7657;color:#fff2df;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;font-size:18px;z-index:1;box-shadow:0 1px 5px #92623b22}.gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.gift-cell{position:relative;height:93px;border:1px solid #d2ae87;border-radius:7px;background:radial-gradient(ellipse at 50% 45%,#fffaf0,#f5e3cf);display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;box-shadow:inset 0 1px 4px #bc8d5f12}.gift-cell img{width:91px;height:70px;object-fit:contain;opacity:.17;filter:grayscale(1)}.gift-cell.earned img{opacity:1;filter:none}.gift-cell>span{font:7px Georgia,serif;letter-spacing:.1em;color:#9d7658;position:absolute;bottom:5px}.gift-cell>small{position:absolute;top:5px;right:5px;font-size:7px;color:#ae9078}.gift-cell.earned>small{color:#b17a4e}.gift-box>#result-badge{position:absolute;right:-15px;bottom:-10px;width:42px;height:42px;background:#fff7e5;border:1px solid #c3975e;border-radius:50%;display:grid;place-items:center;font:22px Georgia,serif;color:#aa733b;box-shadow:0 3px 10px #a7733420}.result-card h2{font-size:18px}.result-card .result-score{font-size:32px}.result-card .result-stats{margin-top:13px}.result-card #result-note{font-size:10px;margin:8px 0}.tap-pad:disabled{cursor:default;opacity:.65}.home-bottom .load-status{margin-bottom:0}.home-bottom #asset-retry{padding:6px 10px;font-size:9px}
@media(max-width:359px){.collection{left:18px;right:18px;padding:0 9px;gap:7px}.collection-slots{grid-template-columns:repeat(4,31px);gap:4px}.collection-slot{width:31px;height:34px}.collection-slot img{width:40px;height:40px}.collection-copy{min-width:93px}.collection-copy span{font-size:7px}.timing-help{left:23px;right:23px;font-size:8px}}
@media(max-height:710px){.gift-box{max-width:205px;padding:9px;margin:16px auto 8px}.gift-cell{height:73px}.gift-cell img{height:57px;width:75px}.gift-cell>span{font-size:6px}.result-card h2{font-size:17px}.result-card .result-score{font-size:28px}.result-card .result-stats{margin:9px 0 7px}.result-card .new-best{margin:6px 0}.collection-slots{grid-template-columns:repeat(4,33px);gap:5px}.collection-slot{width:33px;height:34px}.collection-slot img{width:42px;height:42px}}
/* Safe-area offsets move the header, HUD and canvas anchors together. */
.app{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}.brand{top:calc(18px + var(--safe-top))}.icon-button{top:calc(31px + var(--safe-top))}.hud{top:calc(105px + var(--safe-top))}.home-pill{top:calc(117px + var(--safe-top))}.home-bottom{bottom:calc(24px + var(--safe-bottom))}.collection{bottom:calc(252px + var(--safe-bottom))}.timing-help{bottom:calc(209px + var(--safe-bottom))}.tap-pad{bottom:calc(48px + var(--safe-bottom))}.bottom-caption{bottom:calc(15px + var(--safe-bottom))}
@media(max-height:710px){.brand{top:calc(12px + var(--safe-top))}.icon-button{top:calc(25px + var(--safe-top))}.hud{top:calc(88px + var(--safe-top))}.home-pill{top:calc(98px + var(--safe-top))}.home-bottom{bottom:calc(13px + var(--safe-bottom))}.collection{bottom:calc(217px + var(--safe-bottom))}.timing-help{bottom:calc(181px + var(--safe-bottom))}.tap-pad{bottom:calc(39px + var(--safe-bottom))}.bottom-caption{bottom:calc(10px + var(--safe-bottom))}}

/* Reserve a complete two-line judgment block above the collection label. */
.feedback{line-height:1.15}.feedback small{line-height:1.2}

/* Recording credits and an explicit, opt-in failure fallback. */
.track-credit{font-family:Georgia,"Yu Gothic",sans-serif;letter-spacing:.06em;font-size:10px;color:#925e50}.primary-button #start-label{font:inherit;font-size:12px}.audio-mode-label{font-size:10px!important;overflow-wrap:anywhere}.text-button#audio-fallback{font-size:9px;line-height:1.6;padding-top:7px}.load-status{overflow-wrap:anywhere}

/* The current pattern stays visible while the upcoming phrase is previewed. */
.timing-help{bottom:calc(221px + var(--safe-bottom))}#rhythm-guide{display:flex;flex-direction:column;gap:1px;max-width:74%;height:20px;text-align:right;line-height:10px}#rhythm-current{font:9px/10px "Yu Gothic",Meiryo,sans-serif;letter-spacing:0}#rhythm-next{font:7.5px/9px "Yu Gothic",Meiryo,sans-serif;min-height:9px;color:#a48770;letter-spacing:0}
@media(max-height:710px){.timing-help{bottom:calc(190px + var(--safe-bottom))}}

/* Transparent liquid feedback stays above the tap pad, below modal controls. */
canvas.liquid-fx{z-index:4;pointer-events:none}

.feedback{z-index:6}

/* Original generated raster UI; live labels and hit targets remain real DOM. */
.ui-tap-ready .tap-pad{border-color:transparent;background:transparent url('../assets/ui/tap-button.webp') center/100% 100% no-repeat;box-shadow:none}
.ui-tap-ready .tap-pad:active,.ui-tap-ready .tap-pad.pressed{background:transparent url('../assets/ui/tap-button.webp') center/100% 100% no-repeat;box-shadow:none;filter:saturate(1.12) brightness(1.035)}
.ui-note-ready .tap-note{width:43px;height:43px;font-size:0;background:url('../assets/ui/candy-note.webp') center/contain no-repeat}
.ui-tray-ready .collection{border-color:transparent;box-shadow:none;background:#fff5e9 url('../assets/ui/collection-tray.webp') center/100% 100% no-repeat}
.ui-frame-ready .collection-slot,.ui-frame-ready .gift-cell{border-color:transparent;background:transparent url('../assets/ui/sweet-frame.webp') center/100% 100% no-repeat;box-shadow:none}
.ui-frame-ready .collection-slot.current{filter:drop-shadow(0 0 2px #cf9d6c88)}
.ui-frame-ready .gift-cell>span,.ui-frame-ready .gift-cell>small{background:#fff8efdc;border-radius:3px;padding:1px 3px}
.ui-panel-ready .result-card{border-color:transparent;box-shadow:0 15px 60px #9c76522b;background:#fff5e9 url('../assets/ui/result-panel.webp') center/100% 100% no-repeat}
@media(max-height:710px){.ui-note-ready .tap-note{width:36px;height:36px}}
/* Nine-slice borders keep the generated ornament proportions on narrow screens. */
.ui-tray-ready .collection{background:none;border-image:url('../assets/ui/collection-tray.webp') 70 75 fill / 12px 15px / 0 stretch}
.ui-panel-ready .result-card{background:none;border-image:url('../assets/ui/result-panel.webp') 170 60 90 60 fill / 78px 28px 35px 28px / 0 stretch;padding:87px 28px 28px}
.ui-panel-ready .result-screen{align-items:flex-start}
.ui-panel-ready .result-card{margin:auto}
.ui-panel-ready .result-card .eyebrow{margin:0 0 6px}
.ui-panel-ready .result-card h2{font-size:17px;margin:8px 0 0}
.ui-panel-ready .result-card .gift-box{max-width:214px;padding:9px;margin:14px auto 9px}
.ui-panel-ready .result-card .gift-cell{height:74px}
.ui-panel-ready .result-card .gift-cell img{width:78px;height:58px}
.ui-panel-ready .result-card .result-stats{margin:10px 0 7px;padding:9px 0}
.ui-panel-ready .result-card .result-score{font-size:29px}
.ui-panel-ready .result-card .primary-button{padding-top:12px;padding-bottom:12px}
.ui-panel-ready .result-card .new-best{margin:8px 0}
.ui-tap-ready .tap-word{color:#692a3b;font-weight:600;letter-spacing:.15em}
.ui-tap-ready .tap-key{color:#7a3a49}
@media(max-height:710px){.ui-panel-ready .result-card{padding:77px 22px 25px;border-image-width:69px 24px 31px 24px}.ui-panel-ready .result-card h2{font-size:16px}.ui-panel-ready .result-card .gift-box{margin:12px auto 8px}.ui-panel-ready .result-card .gift-cell{height:66px}.ui-panel-ready .result-card .gift-cell img{height:53px;width:71px}}

/* Browser QA: keep the small judgment detail readable over the gilded plate. */
.feedback small{display:table;max-width:calc(100% - 48px);margin:6px auto 0;padding:2px 8px;border:1px solid #dfc6a9;border-radius:9px;background:#fff9ef;color:#865a3f;text-shadow:none}

/* v0.6 playlist: retain the pastry artwork and give selection its own surface. */
.music-open{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:38px;padding:8px 14px;border:1px solid #d3b498;border-radius:9px;background:#fff7ecdf;font-size:11px;color:#80543e}.music-open span{font:9px Georgia,serif;letter-spacing:.1em;color:#9c7557}.home-bottom h2{font-size:21px;line-height:1.45;margin:10px 0 7px}.home-bottom .description{margin:7px 0 13px}.home-bottom .track-credit{margin:5px 0 8px;overflow-wrap:anywhere}.music-card{padding:24px 20px}.music-card h2{margin:10px 0}.music-card .music-intro{font-size:10px;margin:5px 0 15px}.music-choices{display:grid;gap:8px}.music-choice{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px 10px;min-height:76px;border:1px solid #dec7b1;border-radius:12px;background:#fffaf3}.music-choice.selected{border-color:#b67d71;background:linear-gradient(110deg,#f9e3dc,#fff6e9);box-shadow:inset 0 0 0 1px #b67d7140}.music-icon{font-size:25px;width:32px;flex:none;text-align:center}.music-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.music-copy strong{font-size:12px;overflow-wrap:anywhere;font-weight:500;line-height:1.5}.music-copy small{font-size:9px;line-height:1.4;color:#98745d}.music-check{margin-left:auto;color:#a3655c;opacity:0}.music-choice.selected .music-check{opacity:1}.music-card .music-selection{font-size:10px;min-height:18px;overflow-wrap:anywhere;margin:13px 0 2px}.music-card .secondary-button{margin:5px 0 10px;min-height:44px}.music-card .music-footnote{font-size:8px;margin:11px 0 0;color:#a1836b}.music-card{flex-shrink:0}#music-dialog{align-items:safe center;padding:20px 18px}.music-open:focus-visible,.music-choice:focus-visible{outline:3px solid #ab6268;outline-offset:2px}
@media(max-height:710px){.home-bottom h2{font-size:18px;margin:7px 0 5px}.home-bottom .description{margin:5px 0 10px}.music-open{min-height:35px}.music-card{padding:18px 16px}.music-choice{min-height:66px;padding:8px 10px}.music-choices{gap:6px}}

/* v0.6.1: identify the track inside a standalone result screenshot. */
.result-card .result-track{font-size:10px!important;line-height:1.5!important;margin:7px 0 0;color:#865a48;overflow-wrap:anywhere;letter-spacing:.025em}

/* v0.6.2: ten pastry-colored segments, clockwise from twelve o'clock.
   All feedback is static; no spinning or scaling, including reduced motion. */
.combo-ring{position:absolute;inset:-8px;pointer-events:none;display:block}.combo-ring svg{display:block;width:100%;height:100%;overflow:visible;color:#c76b7c}.combo-segment{fill:none;stroke:#e5d4c6;stroke-width:4.5;stroke-linecap:round}.combo-segment.filled{stroke:currentColor;filter:drop-shadow(0 1px 1px #8d634b22)}.tap-combo-meter{position:absolute;left:calc(100% + 18px);top:50%;transform:translateY(-50%);width:66px;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;color:#815440;font-variant-numeric:tabular-nums}.tap-combo-label{font:8px Georgia,serif;letter-spacing:.13em}.tap-combo-meter strong{font:34px/1 Georgia,serif;font-variant-numeric:tabular-nums;color:#9b5365;text-shadow:0 1px 0 #fff9eb}.tap-combo-caption{font-size:8px;line-height:1.5;white-space:nowrap;letter-spacing:0;color:#987052}.tap-combo-meter.milestone strong{color:#a3782f}.tap-combo-meter.milestone .tap-combo-caption{color:#916526;background:#fff4d9;border-radius:6px;padding:1px 4px}.tap-pad:disabled .tap-combo-meter{opacity:1}
@media(max-width:359px){.tap-combo-meter{left:calc(100% + 14px);width:62px}.tap-combo-meter strong{font-size:31px}}
@media(max-height:710px){.tap-combo-meter{left:calc(100% + 17px)}.tap-combo-meter strong{font-size:31px}}

/* Make room between the new ring and the existing timing marker. */
.tap-pad{bottom:calc(40px + var(--safe-bottom))}
@media(max-height:710px){.tap-pad{bottom:calc(31px + var(--safe-bottom))}}

.bottom-caption{margin:0;line-height:12px}
@media(max-height:710px){.bottom-caption{line-height:10px}}

/* Keep the cumulative number above transient droplets, without lifting the pad. */
.tap-combo-meter{z-index:5;left:calc(50% + 80px);top:auto;bottom:calc(102px + var(--safe-bottom));transform:translateY(50%)}
@media(max-width:359px){.tap-combo-meter{left:calc(50% + 76px)}}
@media(max-height:710px){.tap-combo-meter{left:calc(50% + 70.5px);bottom:calc(84.5px + var(--safe-bottom))}}

/* v0.6.3 dedicated timing calibration. Draft changes are saved explicitly. */
.home-tools{display:grid;grid-template-columns:1.15fr 1fr;gap:8px}.timing-open{min-height:38px;border:1px solid #d3b498;border-radius:9px;background:#fff7ecdf;font-size:11px;padding:8px;color:#80543e}.home-tools .music-open{padding:8px 10px;gap:5px}.timing-setting{margin-top:20px;text-align:left;font-size:11px}.timing-setting>span{display:flex;justify-content:space-between}.timing-setting strong{font:13px Georgia,serif;color:#a57960}.timing-setting .secondary-button{margin-top:9px}.calibration-card{padding:23px 22px;flex-shrink:0}.calibration-card h2{font-size:20px;margin:10px 0}.calibration-card .calibration-intro{font-size:10px;margin:8px 0}.calibration-range{margin-top:15px}.calibration-range output{font-size:18px}.calibration-fine{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:7px;margin-top:8px}.calibration-fine button{min-height:42px;margin:0;padding:8px 3px;font-size:11px}.calibration-directions{margin:9px 0 13px!important}.calibration-trial{padding:12px 13px;border:1px solid #dec3a6;border-radius:12px;background:#fff8eebd}.calibration-trial .eyebrow{margin:0 0 5px}.calibration-trial p{margin:5px 0;font-size:10px!important}.calibration-trial .secondary-button{margin-top:6px;font-size:11px;min-height:42px;padding:9px}.calibration-beat{font:13px Georgia,"Yu Gothic",serif;color:#986954;min-height:20px;margin:11px 0 6px}.calibration-tap{width:82px;height:64px;border:1px solid #ba8c75;border-radius:17px;background:linear-gradient(#ffebdf,#f5c6c1);box-shadow:inset 0 0 0 3px #fff7ec8c;font:17px Georgia,serif;letter-spacing:.13em;touch-action:none}.calibration-tap:active{background:#edb5ae}.calibration-tap:disabled{cursor:default}.calibration-trial-status{min-height:34px;line-height:1.6!important}.calibration-tap-feedback{min-height:15px;color:#8d5d48!important;font-variant-numeric:tabular-nums}.calibration-trial .text-button{padding:7px 3px;min-height:35px;font-size:10px}.calibration-card .calibration-footnote{font-size:8px;line-height:1.6;margin:11px 0 13px;text-align:left}.calibration-card>.text-button{min-height:36px;padding-top:10px}#calibration{align-items:safe center;padding:18px}.calibration-card .primary-button{min-height:44px}.calibration-card input:focus-visible,.timing-open:focus-visible{outline-offset:2px}
@media(max-height:710px){.calibration-card{padding:19px 18px}.calibration-card h2{font-size:18px}.calibration-trial{padding:10px 12px}.timing-open{min-height:35px}}

.calibration-card>.eyebrow{margin:0 0 5px}.calibration-tap-row{display:flex;align-items:center;justify-content:center;gap:18px;margin:9px 0}.calibration-tap-row .calibration-beat{width:79px;margin:0;text-align:right}.calibration-tap-row .calibration-tap{width:79px;height:58px}.calibration-card .calibration-directions{font-size:9px!important;line-height:1.6!important;margin:8px 0 11px!important}.calibration-card .calibration-range{margin-top:12px}.calibration-trial .calibration-trial-status{min-height:30px}.calibration-trial .calibration-tap-feedback{min-height:14px}

#settings{align-items:safe center}.settings-card{flex-shrink:0}

.demo-button{display:block;width:100%;min-height:36px;margin:7px 0 0;padding:7px 9px;border:1px solid #cdaa7b88;border-radius:10px;background:#fff7edcc;color:#805c46;font:inherit;font-size:11px;letter-spacing:.03em;cursor:pointer}.demo-button small{font-size:8px;margin-left:8px;color:#a08165}.demo-button:focus-visible{outline:2px solid #a57850;outline-offset:2px}.demo-button:disabled{opacity:.5;cursor:default}