:root{font-family:Arial,"Noto Serif TC",Microsoft JhengHei,serif;color:#f5e8e1;background:#242332;font-synthesis:none;font-weight:400;color-scheme:dark}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:1px solid #ffdbb7;outline-offset:4px}button{border:0;background:none}button svg{stroke-width:1.4;flex-shrink:0}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.experience{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}.experience>div:first-child{position:absolute!important;inset:0}canvas{display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.interface{position:absolute;inset:0;pointer-events:none;opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s;z-index:10}.interface.is-hidden{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}.interface.is-hidden *{pointer-events:none!important}.brand{position:absolute;top:max(32px,env(safe-area-inset-top));left:38px;text-shadow:0 2px 20px #211b31a0;pointer-events:none;opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}.brand-mark{display:flex;align-items:center;gap:13px;font:36px "Noto Serif TC",Songti TC,serif;letter-spacing:8px}.seal{font:10px/17px serif;letter-spacing:0;border:1px solid #edd5b465;width:17px;text-align:center;opacity:.7}.site-credit{position:absolute;right:30px;bottom:max(10px,env(safe-area-inset-bottom));z-index:12;font-size:8px;letter-spacing:2.4px;color:#f2dfd870;text-decoration:none;pointer-events:auto;transition:color .25s ease}.site-credit:hover{color:#ffe6e5}.brand-name{display:block;font-size:8px;letter-spacing:2.8px;margin-top:12px;color:#f7e9e0b0}.brand-poem{margin-top:0;max-height:0;display:grid;gap:9px;font:10px serif;letter-spacing:2px;opacity:0;visibility:hidden;overflow:hidden;transition:opacity .45s ease,visibility .45s,margin-top .45s ease,max-height .45s ease}.text-full .brand-poem{margin-top:25px;max-height:64px;opacity:.8;visibility:visible}.brand-poem em{font:italic 12px Georgia,serif;letter-spacing:.5px}.top-tools{position:absolute;right:30px;top:max(28px,env(safe-area-inset-top));display:flex;gap:9px;pointer-events:auto}.round-button{width:41px;height:41px;display:grid;place-items:center;background:#29263735;border:1px solid #f5e2d129;border-radius:50%;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background .2s}.round-button:hover,.round-button.active{background:#c9a4bb3b}.glass{background:linear-gradient(140deg,#292432c9,#292a37c4);border:1px solid #f3d8d12c;box-shadow:0 12px 45px #15102132;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}.settings{position:absolute;right:30px;top:82px;width:318px;max-height:calc(100dvh - 112px);overflow:auto;overscroll-behavior:contain;border-radius:15px;padding:21px 22px;pointer-events:auto;animation:appear .25s ease;z-index:11}.panel-heading{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:2px}.panel-kicker{margin-left:auto;font-size:6px;letter-spacing:1px;opacity:.4}.settings section{padding-top:18px;margin-top:18px;border-top:1px solid #ecd9e019}.settings h2{font-size:10px;font-weight:400;letter-spacing:2px;margin:0 0 15px;display:flex;align-items:center;gap:8px;color:#f5ded7c5}.period-options{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.period-option{padding:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}.swatch{height:39px;width:100%;border:1px solid #ffe9e518;border-radius:5px;position:relative;display:grid;place-items:center;overflow:hidden;opacity:.7;transition:opacity .2s,border-color .2s}.swatch:after{content:"";position:absolute;inset:70% -15% -20%;background:#44465766;transform:rotate(-7deg);border-radius:50%}.period-option:hover .swatch,.period-option.selected .swatch{opacity:1;border-color:#f7d3c4b0}.swatch-sunrise .swatch{background:linear-gradient(#8690b4,#eab0ad 65%,#edc695)}.swatch-day .swatch{background:linear-gradient(#4093c8,#9aceeb 70%,#dfded1)}.swatch-sunset .swatch{background:linear-gradient(#655676,#d78b86 50%,#eab572)}.swatch-night .swatch{background:linear-gradient(#141d3f,#34446c 75%,#61638c)}.swatch svg{position:relative;z-index:1;stroke-width:1.3;color:#fff0d9}.swatch-night .swatch svg{color:#dbe4ff}.selected-check{position:absolute!important;bottom:3px;right:3px}.option-name{font-size:9px;letter-spacing:1px;opacity:.85}.option-time{font-size:8px;font-variant-numeric:tabular-nums;opacity:.45;letter-spacing:.7px}.slider-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1px;margin:13px 0 8px;color:#eedfe1b8}.slider-label output{font-size:10px;font-variant-numeric:tabular-nums;color:#f3c2cc}input[type=range]{display:block;appearance:none;width:100%;height:4px;margin:12px 0 22px;border-radius:2px;background:linear-gradient(to right,#d9a1b3 var(--value),#d2bcc328 var(--value));cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#e4a7bc;border:1px solid #f7ccda;box-shadow:0 0 0 4px #d5a1b012}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#e4a7bc;border:1px solid #f7ccda}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1px;margin:13px 0}.segmented{display:flex;gap:2px;border:1px solid #efdce51b;border-radius:5px;padding:2px}.segmented button{font-size:9px;padding:7px 10px;border-radius:3px;color:#f0dce196;min-width:32px;min-height:29px}.segmented button[aria-pressed=true]{background:#dfb1c026;color:#ffe6e5}.setting-action{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font-size:10px;letter-spacing:1px;padding:12px 0;border-top:1px solid #eddbe910;color:#f2e3e1bc}.setting-action:hover{color:#ffe5e6}.setting-action kbd{margin-left:auto;border:1px solid #efdce526;border-radius:3px;font:9px Arial;padding:2px 5px;opacity:.6}.panel-help{font-size:8px;line-height:1.9;letter-spacing:.6px;color:#ecdee66b;margin:12px 0 0}.time-dock{position:absolute;right:30px;bottom:max(36px,calc(env(safe-area-inset-bottom) + 26px));pointer-events:auto}.time-control{display:flex;align-items:center;border-radius:30px;height:44px;width:272px;padding:0 6px;background:linear-gradient(110deg,#3e2b3e8c,#51404c69);box-sizing:border-box}.arrow-button{height:38px;width:33px;display:grid;place-items:center;opacity:.75}.arrow-button:hover{opacity:1}.current-period{height:40px;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:11px;padding:0 10px;transition:padding .45s ease,gap .45s ease}.time-control .ui-text{max-width:7.5em;overflow:hidden;white-space:nowrap;opacity:1;transition:opacity .4s ease,max-width .45s ease,margin .45s ease,transform .45s ease}.period-jp{font:12px "Noto Serif TC",serif;letter-spacing:1.2px}.period-en{font:10px Georgia,serif;color:#f0dedbc2;letter-spacing:.5px}.period-time{font-size:10px;color:#f2dfd8a3;letter-spacing:1px;font-variant-numeric:tabular-nums}.current-period>svg{color:#f4c5af}.time-picker{position:absolute;bottom:57px;right:0;width:304px;border-radius:12px;padding:18px;animation:appear .25s ease;z-index:11}.picker-title{font:11px "Noto Serif TC",serif;letter-spacing:2px;margin-bottom:17px;color:#efdfe2b8}.time-picker .swatch{height:54px}.quiet-caption{position:absolute;left:39px;bottom:38px;display:flex;align-items:center;gap:20px;font:italic 12px Georgia,serif;letter-spacing:.8px;color:#e9dbe1b0;text-shadow:0 1px 10px #17101d;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .5s ease,visibility 0s linear .5s,transform .5s ease}.text-full .quiet-caption{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .5s ease,visibility 0s,transform .5s ease}.quiet-caption span{width:31px;height:1px;background:#e1ccd352}.notice{position:absolute;bottom:100px;left:50%;transform:translate(-50%);background:#282430b0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 20px;border-radius:6px;font-size:11px;max-width:90%;text-align:center}.restore-interface{position:absolute;top:0;right:0;width:82px;height:82px;opacity:0;background:none;border:0;cursor:default}.music-dock{display:flex;align-items:center;gap:2px;height:41px;padding:0 12px 0 5px;border-radius:30px;pointer-events:auto;background:#29263735;border:1px solid #f5e2d129;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .2s}.music-dock:hover{background:#c9a4bb3b}.music-toggle{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;color:#f0dce1c8;transition:background .2s,color .2s,opacity .2s}.music-toggle:hover{background:#c9a4bb3b;color:#ffe6e5}.music-toggle.off{opacity:.42}.music-toggle svg{stroke-width:1.45}.music-volume{display:flex;align-items:center;gap:8px;padding-left:2px}.music-volume input[type=range]{appearance:none;-webkit-appearance:none;width:76px;height:3px;margin:0;border-radius:2px;background:linear-gradient(to right,#e4a7bc var(--value),#d2bcc328 var(--value));cursor:pointer;touch-action:manipulation}.music-volume input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#e4a7bc;border:1px solid #f7ccda;box-shadow:0 0 0 3px #d5a1b016}.music-volume input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e4a7bc;border:1px solid #f7ccda}.music-volume output{font-size:8px;letter-spacing:1.1px;min-width:1.8em;text-align:right;color:#f2dfd8a0;font-variant-numeric:tabular-nums}.textless-icon{display:none}.text-hidden .brand,.text-hidden .quiet-caption{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s,transform .5s ease}.text-hidden .time-control .ui-text{opacity:0;max-width:0;margin:0;transform:translate(-4px)}.text-hidden .current-period{gap:0}.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}.loading{position:absolute;inset:0;z-index:4;background:linear-gradient(#5c5069,#b77983,#e6aa7c);display:flex;flex-direction:column;gap:25px;justify-content:center;align-items:center;font:11px serif;letter-spacing:5px}.loading svg{animation:breathe 3s ease-in-out infinite}.fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#392e42;z-index:8;gap:14px}.fallback>span{font:40px serif;letter-spacing:12px}.fallback small{padding:0 25px;text-align:center}.fallback button{border:1px solid #fff4;border-radius:24px;padding:12px 24px;margin:20px}@keyframes appear{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{50%{opacity:.4;transform:rotate(25deg)}}@media(max-width:600px){.brand{left:24px;top:max(25px,env(safe-area-inset-top))}.brand-mark{font-size:29px;letter-spacing:6px;gap:8px}.site-credit{position:absolute;right:30px;bottom:max(10px,env(safe-area-inset-bottom));z-index:12;font-size:8px;letter-spacing:2.4px;color:#f2dfd870;text-decoration:none;pointer-events:auto;transition:color .25s ease}.site-credit:hover{color:#ffe6e5}.brand-name{font-size:6px;letter-spacing:1.9px;margin-top:10px}.site-credit{right:19px;bottom:max(8px,env(safe-area-inset-bottom));font-size:7px;letter-spacing:1.8px}.seal{width:15px;font-size:9px;line-height:15px}.top-tools{right:19px;top:max(24px,env(safe-area-inset-top));gap:7px}.round-button{width:37px;height:37px}.music-dock{height:37px;padding:0 10px 0 3px}.music-toggle{width:28px;height:28px}.music-volume{gap:6px}.music-volume input[type=range]{width:58px}.music-volume output{font-size:7px;letter-spacing:.8px}.settings{right:17px;top:75px;width:min(318px,calc(100vw - 34px));padding:18px 20px;max-height:calc(100dvh - 96px)}.time-dock{right:19px;bottom:max(32px,calc(env(safe-area-inset-bottom) + 22px))}.time-control{height:43px;width:min(272px,calc(100vw - 38px))}.current-period{gap:9px;padding:0 6px}.period-jp{font-size:11px}.period-en,.period-time{font-size:9px}.time-picker{width:min(304px,calc(100vw - 38px))}.quiet-caption{display:none}.panel-kicker{font-size:5px}.brand-poem{font-size:8px}.text-full .brand-poem{margin-top:20px}.brand-poem em{font-size:10px}.settings section{padding-top:14px;margin-top:14px}}.quality-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:3px;border:1px solid #efdce51b;border-radius:6px}.quality-grid button{font-size:9px;min-height:31px;border-radius:4px;color:#f0dce190}.quality-grid button:hover{color:#fff0ef}.quality-grid button[aria-pressed=true]{background:#dfb1c02b;color:#ffe6e5;box-shadow:inset 0 0 0 1px #f0c3cf1f}.quality-detail{font-size:8px;line-height:1.5;letter-spacing:.5px;color:#ecdee66b;margin:8px 2px 0}.toggle{margin-left:auto;width:28px;height:16px;border-radius:10px;background:#b5aab332;position:relative;transition:background .2s}.toggle:after{content:"";position:absolute;width:12px;height:12px;left:2px;top:2px;border-radius:50%;background:#c7bdc2;transition:transform .2s}.toggle.on{background:#d989aa88}.toggle.on:after{transform:translate(12px);background:#ffd4df}.fps-meter{position:absolute;left:30px;bottom:28px;z-index:5;display:grid;grid-template-columns:auto auto;column-gap:5px;align-items:baseline;background:#211f29a8;border:1px solid #eedbe321;border-radius:7px;padding:8px 11px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:8px Arial;color:#f6e6e6b0;letter-spacing:1px;pointer-events:none}.fps-meter strong{font-size:16px;font-weight:400;color:#f4e3e2}.fps-meter small{grid-column:1/-1;font-size:6px;margin-top:2px;opacity:.58;letter-spacing:.7px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}