:root{--bg:#1e1c29;--paper:#2b2839;--ink:#0f0e16;--sub:#a7a2b8;--text:#f1eefa;--pink:oklch(78% .11 350);--mint:oklch(80% .1 180);--lav:oklch(72% .09 290);--butter:oklch(86% .1 95);--cheek:oklch(72% .12 350);--glow:#d9fff6;--on-color:#2a2833;--bg-focus:color-mix(in oklch, var(--mint) 14%, var(--bg));--bg-done:color-mix(in oklch, var(--butter) 14%, var(--bg));--stripe:repeating-linear-gradient(135deg, #34304a 0 12px, #2e2b40 12px 24px);--dots:radial-gradient(#2a283314 1.2px, transparent 1.2px);--font-dot:"DotGothic16", monospace;--font-body:"M PLUS 1p", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{color:inherit;cursor:pointer;font-family:inherit}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes scanline{0%{top:0}50%{top:calc(100% - 4px)}to{top:0}}@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.screen{max-width:480px;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 28px);background-color:var(--bg);background-image:var(--dots);background-size:18px 18px;flex-direction:column;margin:0 auto;display:flex;position:relative;overflow:hidden}.title{font-family:var(--font-dot);white-space:nowrap;letter-spacing:.04em;font-synthesis:none;text-shadow:1px 0 0 currentColor, 2px 2px 0 var(--pink), 3px 2px 0 var(--pink);font-size:22px}.chip{border:2px solid var(--ink);font:400 13px var(--font-dot);color:var(--on-color);border-radius:6px;padding:5px 9px}.xpbar{font:400 11px var(--font-dot);color:var(--sub);align-items:center;gap:10px;display:flex}.xpbar-track{box-sizing:content-box;border:2px solid var(--ink);background:var(--paper);flex:1;height:12px;padding:1px}.xpbar-fill{background:var(--mint);height:100%;transition:width .6s}.bubble{border:2.5px solid var(--ink);background:var(--paper);max-width:290px;box-shadow:3px 3px 0 var(--ink);text-wrap:pretty;border-radius:10px;padding:14px 16px;font-size:15px;line-height:1.7;position:relative}.bubble-name{background:var(--ink);color:#fffdf7;font:400 11px var(--font-dot);border-radius:3px;padding:1px 8px;position:absolute;top:-11px;left:12px}.btn{border:2.5px solid var(--ink);background:var(--paper);font:700 14px var(--font-body);color:var(--text);border-radius:10px}.btn-primary{background:var(--pink);box-shadow:4px 4px 0 var(--ink);font:400 22px var(--font-dot);color:var(--on-color)}.btn-primary:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.link{font:500 13px var(--font-body);color:var(--sub);white-space:nowrap;background:0 0;border:0;padding:10px;text-decoration:underline}.sheet-backdrop{z-index:10;background:#2a283373;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{width:100%;max-width:480px;padding:24px 22px calc(env(safe-area-inset-bottom) + 30px);background:var(--bg);border-top:2.5px solid var(--ink);border-radius:18px 18px 0 0;flex-direction:column;align-items:center;gap:14px;animation:.3s pop;display:flex}.back{font:500 14px var(--font-body);white-space:nowrap;background:0 0;border:0;padding:8px 0}.photo{border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--stripe);border-radius:10px;flex:none;position:relative;overflow:hidden}.photo>img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}input[type=range].yz{appearance:none;background:repeating-linear-gradient(90deg, var(--sub) 0 2px, transparent 2px 10px) center / 100% 2px no-repeat;width:100%;height:28px;margin:0}input[type=range].yz::-webkit-slider-thumb{-webkit-appearance:none;border:2.5px solid var(--ink);width:28px;height:28px;box-shadow:2px 2px 0 var(--ink);background:#fffdf7;border-radius:4px}input[type=range].yz::-moz-range-thumb{border:2.5px solid var(--ink);width:28px;height:28px;box-shadow:2px 2px 0 var(--ink);background:#fffdf7;border-radius:4px}.seg{border:2.5px solid var(--ink);border-radius:8px;display:flex;overflow:hidden}.seg>button{background:var(--paper);height:38px;font:400 14px var(--font-dot);border:0;flex:1}.seg>button+button{border-left:2.5px solid var(--ink)}.seg>button[aria-pressed=true]{background:var(--butter);color:var(--on-color)}
