:root{--n-h: 34;--n-s: 7%;--b-h: 40;--b-s: 24%;--b-l: 63%}html[data-palette=stone]{--n-h: 205;--n-s: 6%;--b-h: 196;--b-s: 13%;--b-l: 63%}html[data-palette=rust]{--n-h: 26;--n-s: 7%;--b-h: 8;--b-s: 24%;--b-l: 60%}html[data-palette=moss]{--n-h: 150;--n-s: 5%;--b-h: 158;--b-s: 13%;--b-l: 58%}:root{color-scheme:dark;--c-main: hsl(var(--n-h), calc(var(--n-s) + 9%), 93%);--c-sub: hsl(var(--n-h), calc(var(--n-s) + 5%), 61%);--c-accent: hsl(var(--b-h), var(--b-s), var(--b-l));--c-accent-soft: hsla(var(--b-h), var(--b-s), var(--b-l), .12);--c-accent-line: hsla(var(--b-h), var(--b-s), var(--b-l), .32);--c-bg: hsl(var(--n-h), calc(var(--n-s) + 4%), 6%);--c-bg-2: hsl(var(--n-h), calc(var(--n-s) + 2%), 10%);--c-panel: hsla(var(--n-h), calc(var(--n-s) + 3%), 7%, .76);--c-panel-solid: hsl(var(--n-h), calc(var(--n-s) + 2%), 9%);--c-scrim: hsla(var(--n-h), 12%, 3%, .62);--c-line: hsla(var(--n-h), 40%, 94%, .09);--c-line-2: hsla(var(--n-h), 40%, 94%, .18);--c-shadow: hsla(var(--n-h), 20%, 2%, .55);--dk-main: hsl(var(--n-h), calc(var(--n-s) + 9%), 94%);--dk-sub: hsl(var(--n-h), calc(var(--n-s) + 5%), 67%);--dk-accent: hsl(var(--b-h), var(--b-s), 68%);--dk-soft: hsla(var(--b-h), var(--b-s), 68%, .13);--dk-line: hsla(var(--n-h), 40%, 94%, .1);--dk-line-2: hsla(var(--n-h), 40%, 94%, .2);--dk-panel: hsl(var(--n-h), calc(var(--n-s) + 2%), 8%);--font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, "Times New Roman", serif;--font-sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--fs-2xs: 10px;--fs-xs: 11px;--fs-sm: 12px;--fs-base: 13px;--fs-md: 15px;--fs-lg: 18px;--fs-xl: 22px;--fs-2xl: clamp(26px, 3.2vw, 34px);--fs-display: clamp(42px, 5.4vw, 66px);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--r-sm: 4px;--r-md: 8px;--r-lg: 14px;--r-pill: 999px;--ease: cubic-bezier(.2, .8, .2, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--dur-fast: .16s;--dur: .28s;--dur-slow: .44s;--ic-stroke: 1.9;--viewport-height: 100dvh;--viewport-width: 100vw;font-family:var(--font-sans);font-synthesis-weight:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}html[data-theme=light]{color-scheme:light;--b-l: 35%;--c-main: hsl(var(--n-h), calc(var(--n-s) + 10%), 16%);--c-sub: hsl(var(--n-h), calc(var(--n-s) + 6%), 43%);--c-bg: hsl(var(--n-h), calc(var(--n-s) + 6%), 89%);--c-bg-2: hsl(var(--n-h), calc(var(--n-s) + 2%), 96%);--c-panel: hsla(var(--n-h), 60%, 99%, .82);--c-panel-solid: hsl(var(--n-h), calc(var(--n-s) + 2%), 97%);--c-scrim: hsla(var(--n-h), 14%, 22%, .34);--c-line: hsla(var(--n-h), 30%, 22%, .14);--c-line-2: hsla(var(--n-h), 30%, 22%, .26);--c-shadow: hsla(var(--n-h), 22%, 22%, .18)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--c-bg)}body{color:var(--c-main);background:linear-gradient(158deg,var(--c-bg-2) 0%,var(--c-bg) 62%,hsl(var(--n-h),calc(var(--n-s) + 5%),4%) 100%);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;transition:background-color var(--dur) ease}::selection{background:var(--c-accent-soft);color:var(--c-main)}button,input{font:inherit}button{color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--c-accent);outline-offset:3px;border-radius:var(--r-sm)}button:active{transform:scale(.96);transition-duration:.12s}[hidden]{display:none!important}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.glass-panel{border:1px solid var(--c-line);background:var(--c-panel);box-shadow:0 20px 48px -22px var(--c-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.ic{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:var(--ic-stroke);stroke-linecap:round;stroke-linejoin:round}.ic-solid{fill:currentColor}.icon-button{position:relative;display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:var(--r-md);background:transparent;color:var(--c-main);transition:color var(--dur-fast) ease,background var(--dur-fast) ease,transform .12s ease,opacity var(--dur-fast) ease}.icon-button:hover{background:var(--c-line)}.icon-button:disabled{cursor:not-allowed}.icon-button.is-off{color:var(--c-sub);opacity:.4}.icon-button.is-off:hover{background:transparent;color:var(--c-sub)}.icon-button.is-active{color:var(--c-accent)}#autoplay-toggle .ic-pause,#autoplay-toggle.is-active .ic-play{display:none}#autoplay-toggle.is-active .ic-pause{display:block}#fullscreen-toggle .ic-minimize,#fullscreen-toggle.is-active .ic-maximize{display:none}#fullscreen-toggle.is-active .ic-minimize{display:block}.app{position:fixed;inset:0;min-width:0;min-height:0;overflow:hidden;overflow:clip;isolation:isolate}.app:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 58%,hsla(var(--n-h),24%,2%,.5))}.topbar,.controls{position:absolute;z-index:20;display:flex;align-items:center;transition:opacity .35s ease,transform .38s var(--ease)}.topbar{top:max(18px,env(safe-area-inset-top));left:50%;width:min(92vw,1600px);min-height:56px;padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);border-radius:var(--r-md);transform:translate(-50%);justify-content:space-between}.topbar-context{display:flex;align-items:center;min-width:0}.album-mini-title{margin-right:var(--sp-4);padding-right:var(--sp-4);border-right:1px solid var(--c-line);color:var(--c-accent);font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:.14em;white-space:nowrap}.app.ui-idle .topbar{opacity:0;pointer-events:none;transform:translate(-50%,calc(-100% - 32px))}.app.ui-idle .controls{opacity:0;pointer-events:none;transform:translate(-50%,calc(100% + 32px))}.page-indicator{display:flex;align-items:baseline;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-2);background:transparent;font-family:var(--font-mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;transition:opacity var(--dur-fast) ease}.page-indicator:hover{opacity:.8}#current-page{color:var(--c-accent);font-size:var(--fs-xl);font-weight:600;letter-spacing:.01em}.page-divider{color:var(--c-sub);opacity:.4}#total-pages{color:var(--c-sub);font-size:var(--fs-sm)}.top-actions{display:flex;gap:2px}.voice-wave{display:inline-flex;align-items:flex-end;gap:2px;height:13px;margin-left:var(--sp-1)}.voice-wave i{width:2px;height:5px;border-radius:1px;background:var(--c-accent);animation:wave .72s ease-in-out infinite alternate}.voice-wave i:nth-child(2){height:11px;animation-delay:-.3s}.voice-wave i:nth-child(3){height:7px;animation-delay:-.5s}@keyframes wave{to{height:13px;opacity:.5}}.viewer{position:absolute;inset:0;display:grid;place-items:center;min-height:0}.stage{position:relative;width:100%;height:100%;perspective:1300px;touch-action:none}.page{position:absolute;inset:0;display:grid;place-items:center;will-change:transform,opacity;opacity:0;pointer-events:none;transform:translate3d(110%,0,-80px) scale(.96) rotateY(-2deg);transition:transform var(--dur-slow) var(--ease),opacity .36s ease}.page.is-current{opacity:1;pointer-events:auto;transform:translateZ(0) scale(1) rotateY(0);z-index:3}.page.is-before{transform:translate3d(-110%,0,-80px) scale(.96) rotateY(2deg)}.page.is-after{transform:translate3d(110%,0,-80px) scale(.96) rotateY(-2deg)}.page.is-dragging{transition:none}.page-frame{position:relative;display:grid;grid-template-rows:100%;grid-template-columns:100%;place-items:center;width:100%;height:100%;border:0;background:hsla(var(--n-h),calc(var(--n-s) + 4%),4%,.5);overflow:hidden}.page-frame:before,.page-frame:after{content:"";position:absolute;z-index:4;width:18px;height:18px;pointer-events:none;opacity:.7}.page-frame:before{top:14px;left:14px;border-top:1px solid var(--c-line-2);border-left:1px solid var(--c-line-2)}.page-frame:after{right:14px;bottom:14px;border-right:1px solid var(--c-line-2);border-bottom:1px solid var(--c-line-2)}.page img{width:100%;height:100%;display:block;object-fit:contain;image-rendering:auto;transform:translate3d(var(--pan-x, 0),var(--pan-y, 0),0) scale(var(--zoom, 1));transform-origin:center;transition:transform .3s var(--ease),opacity .26s ease;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.page img.is-loading{opacity:.24;transform:scale(.96)}.page-error{padding:var(--sp-5);color:var(--dk-sub);font-size:var(--fs-base);text-align:center}.caption{position:absolute;left:50%;bottom:-4px;z-index:5;display:flex;align-items:center;gap:var(--sp-2);max-width:min(74vw,900px);padding:var(--sp-2) var(--sp-4);border:1px solid var(--dk-line);border-radius:var(--r-pill);background:hsla(var(--n-h),18%,5%,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--dk-main);transform:translate(-50%);font-size:var(--fs-base);line-height:1.6;text-align:center}.caption span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.caption.is-expanded span{display:block}.caption button{padding:var(--sp-1);color:var(--dk-accent);font-size:var(--fs-sm);background:transparent;white-space:nowrap}.controls{bottom:max(18px,env(safe-area-inset-bottom));left:50%;width:min(92vw,1120px);min-height:56px;padding:var(--sp-1);border-radius:var(--r-md);transform:translate(-50%)}.progress-wrap{position:relative;flex:1;display:grid;align-items:center;height:44px;padding:0 var(--sp-4)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:ew-resize;--track: var(--c-line-2);--thumb: var(--c-accent);--thumb-ring: transparent}input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:var(--r-pill);background:var(--track)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-5px;border:0;border-radius:50%;background:var(--thumb);box-shadow:0 0 0 4px var(--thumb-ring);transition:box-shadow var(--dur-fast) ease,transform var(--dur-fast) ease}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px var(--thumb-ring);transform:scale(1.05)}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}input[type=range]::-moz-range-track{height:2px;border-radius:var(--r-pill);background:var(--track)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--thumb);box-shadow:0 0 0 4px var(--thumb-ring)}.progress-preview{position:absolute;bottom:46px;width:132px;padding:var(--sp-1);border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-panel-solid);box-shadow:0 20px 44px -20px var(--c-shadow);transform:translate(-50%);pointer-events:none}.progress-preview img{width:100%;height:72px;display:block;object-fit:contain;border-radius:var(--r-sm);background:hsl(var(--n-h),calc(var(--n-s) + 4%),5%)}.progress-preview span{display:block;padding-top:var(--sp-1);color:var(--c-sub);font:var(--fs-xs)/1 var(--font-mono);font-variant-numeric:tabular-nums;text-align:center}.edge-message{position:absolute;top:50%;z-index:15;opacity:0;padding:var(--sp-2) var(--sp-4);border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:var(--fs-sm);transform:translateY(-50%);transition:opacity .2s ease;pointer-events:none}.edge-message.is-visible{opacity:1}.edge-message.is-start{left:28px}.edge-message.is-end{right:28px}.toast{position:absolute;left:50%;bottom:92px;z-index:70;max-width:80vw;padding:var(--sp-3) var(--sp-4);border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-panel-solid);box-shadow:0 20px 44px -20px var(--c-shadow);opacity:0;transform:translate(-50%,10px);transition:opacity .2s ease,transform .24s var(--ease);pointer-events:none;font-size:var(--fs-base);letter-spacing:.01em}.toast.is-visible{opacity:1;transform:translate(-50%)}.home-button{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:92px;z-index:16;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--c-line);border-radius:50%;background:var(--c-panel);color:var(--c-sub);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:opacity .35s ease,transform .35s var(--ease),background var(--dur-fast) ease,color var(--dur-fast) ease}.home-button:hover{background:var(--c-panel-solid);color:var(--c-accent)}.app.ui-idle .home-button{opacity:0;pointer-events:none;transform:translateY(24px)}.retry-button{position:absolute;z-index:8;padding:var(--sp-3) var(--sp-4);border:1px solid var(--c-line-2);border-radius:var(--r-md);background:var(--c-panel-solid);font-size:var(--fs-base)}.retry-button:hover{border-color:var(--c-accent-line);color:var(--c-accent)}.loading-screen,.start-screen{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;background:radial-gradient(circle at 50% 42%,hsla(var(--b-h),var(--b-s),50%,.07),transparent 40%),linear-gradient(158deg,hsl(var(--n-h),calc(var(--n-s) + 3%),5%),hsl(var(--n-h),calc(var(--n-s) + 5%),9%));color:var(--dk-main)}.loading-screen{gap:var(--sp-5)}.loading-brand{display:grid;justify-items:center;gap:var(--sp-1);margin-bottom:var(--sp-3)}.loading-brand span{color:var(--dk-sub);font:400 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.34em;text-indent:.34em}.loading-brand strong{color:var(--dk-accent);font-family:var(--font-display);font-size:var(--fs-xl);font-weight:400;letter-spacing:.3em;text-indent:.3em}.loading-screen p{margin:0;color:var(--dk-sub);font-size:var(--fs-base);letter-spacing:.06em}.loading-mark{position:relative;display:grid;place-items:center;width:108px;height:108px;border-radius:50%;background:conic-gradient(var(--dk-accent) var(--progress),var(--dk-line) 0);font-family:var(--font-mono);font-variant-numeric:tabular-nums}.loading-mark:after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--dk-panel)}.loading-mark span{position:relative;z-index:1;color:var(--dk-main);font-size:var(--fs-md);letter-spacing:.04em}.start-screen{isolation:isolate;align-content:end;justify-content:center;justify-items:center;padding:clamp(30px,5.2vw,76px);background-color:hsl(var(--n-h),calc(var(--n-s) + 5%),4%);background-image:var(--start-img, none),linear-gradient(158deg,hsl(var(--n-h),calc(var(--n-s) + 3%),10%),hsl(var(--n-h),calc(var(--n-s) + 5%),4%));background-position:center,center;background-repeat:no-repeat,no-repeat;background-size:contain,cover;color:var(--dk-main)}.start-screen:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 72% at 50% 46%,transparent 44%,hsla(var(--n-h),20%,2%,.5) 100%),linear-gradient(180deg,transparent 54%,hsla(var(--n-h),18%,2%,.6) 100%)}.start-button,.text-button{min-height:46px;padding:0 var(--sp-5);border:1px solid var(--dk-line-2);border-radius:var(--r-pill);background:hsla(var(--n-h),30%,6%,.68);color:var(--dk-main);font-size:var(--fs-base);letter-spacing:.12em;transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease,transform .12s ease}.start-cta{position:relative;display:inline-grid;place-items:center}.start-pulse{position:absolute;inset:0;pointer-events:none;border:1.5px solid hsla(var(--b-h),calc(var(--b-s) + 18%),74%,.95);border-radius:var(--r-pill);box-shadow:0 0 16px hsla(var(--b-h),calc(var(--b-s) + 14%),64%,.75),0 0 42px hsla(var(--b-h),calc(var(--b-s) + 10%),58%,.38),inset 0 0 16px hsla(var(--b-h),calc(var(--b-s) + 14%),64%,.45);opacity:0;animation:start-radar 3.6s linear infinite}.start-pulse:nth-child(2){animation-delay:1.2s}.start-pulse:nth-child(3){animation-delay:2.4s}@keyframes start-radar{0%{transform:scale(1);opacity:0}6%{opacity:1}55%{opacity:.55}to{transform:scale(3);opacity:0}}.start-button{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:52px;padding-left:var(--sp-5);padding-right:var(--sp-6);animation:start-breathe 3.6s ease-in-out infinite}@keyframes start-breathe{0%,to{box-shadow:0 0 16px hsla(var(--b-h),var(--b-s),68%,.14)}50%{box-shadow:0 0 36px 5px hsla(var(--b-h),var(--b-s),68%,.45)}}.start-button .ic{width:14px;height:14px;color:var(--dk-accent)}.start-button:hover,.text-button:hover{border-color:var(--dk-accent);color:var(--dk-accent);background:hsla(var(--n-h),30%,8%,.8)}.orientation-hint{position:absolute;inset:0;z-index:120;display:grid;place-content:center;justify-items:center;gap:var(--sp-3);background:hsla(var(--n-h),20%,4%,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--dk-main);text-align:center}.orientation-hint strong{font-size:var(--fs-lg);font-weight:500;letter-spacing:.06em}.orientation-hint small{color:var(--dk-sub);font-size:var(--fs-base);letter-spacing:.12em}.phone-turn{width:44px;height:72px;border:1px solid var(--dk-accent);border-radius:8px;animation:turn-phone 1.8s var(--ease) infinite}.phone-turn span{display:block;width:4px;height:4px;margin:5px auto;border-radius:50%;background:var(--dk-accent)}@keyframes turn-phone{45%,75%{transform:rotate(90deg)}}.drawer{position:absolute;top:0;right:0;z-index:82;width:min(430px,92%);height:100%;padding:var(--sp-5);overflow:auto;border-left:1px solid var(--dk-line);background:hsla(var(--n-h),calc(var(--n-s) + 4%),6%,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--dk-main);visibility:hidden;transform:translate(105%);transition:transform .36s var(--ease),visibility 0s linear .36s}.drawer::-webkit-scrollbar{width:8px}.drawer::-webkit-scrollbar-thumb{background:var(--dk-line-2);border-radius:var(--r-pill)}.drawer::-webkit-scrollbar-track{background:transparent}.drawer.is-open{visibility:visible;transform:translate(0);transition-delay:0s}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-5)}.drawer-head small{color:var(--dk-sub);font:400 var(--fs-2xs)/1 var(--font-mono);letter-spacing:.34em}.drawer-head h2{margin:var(--sp-2) 0 0;font-family:var(--font-display);font-size:var(--fs-xl);font-weight:400;letter-spacing:.12em}.drawer .icon-button{color:var(--dk-main)}.drawer .icon-button:hover{background:var(--dk-line);color:var(--dk-accent)}.thumbnail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}.thumbnail{position:relative;aspect-ratio:16/10;padding:0;overflow:hidden;border:1px solid var(--dk-line);border-radius:var(--r-md);background:hsl(var(--n-h),calc(var(--n-s) + 4%),5%);transition:border-color var(--dur-fast) ease,transform var(--dur-fast) ease}.thumbnail img{width:100%;height:100%;display:block;object-fit:contain}.thumbnail span{position:absolute;right:var(--sp-2);bottom:var(--sp-2);padding:2px 6px;border-radius:var(--r-sm);background:hsla(var(--n-h),20%,4%,.7);color:var(--dk-main);font:400 var(--fs-2xs)/1.4 var(--font-mono);font-variant-numeric:tabular-nums}.thumbnail:hover{border-color:var(--dk-line-2);transform:translateY(-1px)}.thumbnail.is-current{border-color:var(--dk-accent)}.drawer-settings{display:grid;gap:var(--sp-4);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--dk-line)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);color:var(--dk-sub);font-size:var(--fs-base);letter-spacing:.02em;min-height:24px}.drawer-settings output{color:var(--dk-main);font-family:var(--font-mono);font-variant-numeric:tabular-nums}.drawer input[type=range]{--track: var(--dk-line-2);--thumb: var(--dk-accent);--thumb-ring: hsla(var(--b-h), var(--b-s), 68%, .16)}.drawer .text-button{width:100%;border-color:var(--dk-line-2);background:transparent;color:var(--dk-main)}.drawer .text-button:hover{background:var(--dk-soft);border-color:var(--dk-accent);color:var(--dk-accent)}.scrim{position:absolute;inset:0;z-index:80;background:hsla(var(--n-h),16%,2%,.58)}.swatches{display:inline-flex;gap:var(--sp-3)}.swatch{width:20px;height:20px;padding:0;border:0;border-radius:50%;transition:box-shadow var(--dur-fast) ease,transform var(--dur-fast) ease}.swatch[data-palette=brass]{background:#bfb092}.swatch[data-palette=stone]{background:#95aab1}.swatch[data-palette=rust]{background:#b98f88}.swatch[data-palette=moss]{background:#8ba79d}.swatch[aria-checked=false]{opacity:.5;box-shadow:0 0 0 1px var(--dk-line-2)}.swatch[aria-checked=true]{box-shadow:0 0 0 1px var(--dk-panel),0 0 0 3px var(--dk-accent)}.switch-row input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:0 0 42px;width:42px;height:24px;margin:0;border-radius:var(--r-pill);background:var(--dk-line-2);transition:background var(--dur-fast) ease;cursor:pointer}.switch-row input[type=checkbox]:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:hsl(var(--n-h),20%,96%);box-shadow:0 1px 3px hsla(var(--n-h),20%,4%,.5);transition:transform var(--dur-fast) var(--ease)}.switch-row input[type=checkbox]:checked{background:var(--dk-accent)}.switch-row input[type=checkbox]:checked:after{transform:translate(18px)}.modal{width:min(460px,calc(100% - 32px));max-height:calc(100% - 32px);padding:var(--sp-5);overflow:auto;border:1px solid var(--dk-line);border-radius:var(--r-lg);background:var(--dk-panel);color:var(--dk-main);box-shadow:0 32px 84px -30px hsla(var(--n-h),20%,2%,.8)}.modal::backdrop{background:hsla(var(--n-h),16%,2%,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}.modal-head h2{margin:0;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:400;letter-spacing:.1em}.modal .icon-button{color:var(--dk-main)}.modal .icon-button:hover{background:var(--dk-line);color:var(--dk-accent)}.key-list{margin:0}.key-list div{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:var(--sp-4);align-items:center;padding:var(--sp-3) 0;border-top:1px solid var(--dk-line)}.key-list div:first-child{border-top:0}.key-list dt{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--dk-line-2);border-radius:var(--r-sm);background:transparent;color:var(--dk-main);font:500 var(--fs-xs)/1.5 var(--font-mono);white-space:nowrap}.key-list dd{margin:0;color:var(--dk-sub);font-size:var(--fs-base)}.context-modal{width:min(340px,calc(100vw - 32px))}.menu-action{display:block;width:100%;min-height:48px;padding:0 var(--sp-3);border-top:1px solid var(--dk-line);border-radius:var(--r-sm);background:transparent;color:var(--dk-main);font-size:var(--fs-md);letter-spacing:.06em;text-align:left;transition:background var(--dur-fast) ease,color var(--dur-fast) ease,padding-left var(--dur-fast) ease}.menu-action:hover{background:var(--dk-soft);color:var(--dk-accent);padding-left:var(--sp-4)}.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(max-height:560px){.topbar{top:8px;min-height:48px}.controls{bottom:6px;min-height:48px}.icon-button{width:40px;height:40px;flex-basis:40px}.toast{bottom:66px}.home-button{bottom:68px}.start-screen{padding:var(--sp-5) var(--sp-6)}}@media(pointer:coarse)and (orientation:landscape){.topbar{width:94vw}.controls{width:min(94vw,1000px)}}@media(pointer:coarse)and (min-aspect-ratio:16/9){.start-screen{background-size:100% auto,cover}}@media(max-width:680px){.topbar{top:8px;width:calc(100vw - 16px);padding-left:var(--sp-2)}.album-mini-title{display:none}.top-actions{gap:0}.controls{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100vw - 16px);height:54px}#help-toggle{display:none}.drawer{width:min(430px,100%);padding:var(--sp-4)}}body.css-landscape .app{inset:0 auto auto 0;width:var(--viewport-height);height:var(--viewport-width);transform:rotate(90deg) translateY(-100%);transform-origin:top left}body.css-landscape .topbar{width:calc(var(--viewport-height) - 16px)}body.css-landscape .controls{width:min(calc(var(--viewport-height) - 16px),1000px)}
