:root{--ink:#2f3a37;--ink-soft:#2f3a379e;--glass:#ffffff94;--glass-line:#ffffffbf;--sans:"PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;--serif:"Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--ink);font-family:var(--sans);background:#f4efe6;margin:0;overflow:hidden}canvas{touch-action:none;outline:none;display:block}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}#haze{pointer-events:none;z-index:5;background:radial-gradient(120% 90% at 50% 45%,#fff0 60%,#eef3f838 100%);transition:background 1.5s;position:fixed;inset:0}body.night #haze{background:radial-gradient(120% 90% at 50% 45%,#141a3200 50%,#10142a73 100%)}#ui{pointer-events:none;z-index:10;position:fixed;inset:0}#ui>*{pointer-events:auto}.fade{transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}.hidden{opacity:0!important;pointer-events:none!important}#hud{left:calc(22px + env(safe-area-inset-left));top:calc(18px + env(safe-area-inset-top));pointer-events:none;position:absolute}#hud .brand{letter-spacing:.32em;color:var(--ink-soft);font-size:11px;font-weight:400}#hud .proj{align-items:baseline;gap:10px;margin-top:6px;display:flex}#hud .idx{letter-spacing:.12em;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:11px}#hud .name{font-family:var(--serif);letter-spacing:.18em;font-size:17px;font-weight:500;transition:opacity .35s}.arrow{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);border-radius:50%;place-items:center;width:46px;height:46px;margin-top:-23px;transition:opacity .4s,transform .2s,background .3s;display:grid;position:absolute;top:50%;box-shadow:0 6px 24px #3c463c14}.arrow:hover{background:#fffc;transform:scale(1.06)}.arrow:active{transform:scale(.96)}.arrow svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6px;fill:none}.arrow.left{left:calc(18px + env(safe-area-inset-left))}.arrow.right{right:calc(18px + env(safe-area-inset-right))}.arrow.off{opacity:.25;pointer-events:none}#lightBtn{right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));letter-spacing:.2em;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);border-radius:999px;align-items:center;gap:9px;padding:10px 16px 10px 13px;font-size:13px;transition:background .6s,color .6s,opacity .5s;display:flex;position:absolute;box-shadow:0 6px 24px #3c463c14}#lightBtn .dot{background:#f1c46c;border-radius:50%;width:9px;height:9px;transition:background .6s,box-shadow .6s;box-shadow:0 0 0 3px #f1c46c38}#card{-webkit-backdrop-filter:blur(14px);pointer-events:none;background:#ffffffb8;border:1px solid #ffffffe6;border-radius:18px;width:min(300px,34vw);padding:20px 22px 18px;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);position:absolute;top:50%;left:58%;transform:translateY(-50%);box-shadow:0 16px 50px #323c321f}#card.hidden{transform:translate(14px,-50%)}#card .t{font-family:var(--serif);letter-spacing:.12em;font-size:19px;font-weight:500}#card .p{letter-spacing:.2em;color:var(--ink-soft);margin-top:4px;font-size:11px}#card .d{color:#4a5551;margin-top:12px;font-size:14px;line-height:1.85}#card .h{letter-spacing:.14em;color:#2f3a376b;margin-top:14px;font-size:11px}#hint{left:50%;bottom:calc(26px + env(safe-area-inset-bottom));letter-spacing:.22em;color:var(--ink-soft);white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(8px);background:#ffffff73;border-radius:999px;padding:8px 16px;font-size:12px;transition:opacity .8s;position:absolute;transform:translate(-50%)}#board{left:50%;bottom:calc(9vh + env(safe-area-inset-bottom));text-align:center;pointer-events:none;transition:opacity .7s;position:absolute;transform:translate(-50%)}#board .s{letter-spacing:.3em;-webkit-backdrop-filter:blur(10px);color:var(--ink);white-space:nowrap;background:#ffffffd1;border-radius:999px;align-items:center;gap:12px;padding:11px 20px 11px 24px;font-size:13px;animation:2.6s ease-in-out infinite breathe;display:inline-flex;box-shadow:0 10px 34px #28463724}#board b{font-family:var(--serif);letter-spacing:.35em;font-weight:500}#board i{background:#2f3a3740;width:1px;height:12px}@keyframes breathe{50%{transform:scale(1.04);box-shadow:0 0 0 8px #ffffff2e}}#outside{z-index:20;opacity:0;pointer-events:none;background:#f3f2ec;place-items:center;display:grid;position:fixed;inset:0}#outside .inner{text-align:center;opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s;transform:translateY(10px)}#outside.show{pointer-events:auto}#outside.show .inner{opacity:1;transform:none}#outside .k{letter-spacing:.4em;color:var(--ink-soft);font-size:11px}#outside .name{font-family:var(--serif);letter-spacing:.3em;margin-top:14px;padding-left:.3em;font-size:clamp(30px,6vw,46px);font-weight:400}#outside .line{letter-spacing:.2em;color:var(--ink-soft);margin-top:12px;font-size:14px}#outside .go{color:#fff;letter-spacing:.2em;background:#2f5e4a;border-radius:999px;margin-top:34px;padding:14px 30px;font-size:15px;text-decoration:none;transition:transform .2s;display:inline-block;box-shadow:0 10px 30px #2f5e4a40}#outside .go:hover{transform:translateY(-1px)}#outside .back{letter-spacing:.2em;color:var(--ink-soft);margin:18px auto 0;padding:8px 14px;font-size:13px;display:block}body.night{--ink:#eee8da;--ink-soft:#eee8da99;--glass:#1e263a80;--glass-line:#ffffff1f}body.night #card{background:#1c2234b8;border-color:#ffffff1a}body.night #card .d{color:#d9d3c4}body.night #card .h{color:#eee8da66}body.night #hint{background:#1e263a73}body.night #lightBtn .dot{background:#5d6680;box-shadow:0 0 0 3px #5d668040}body.night .arrow svg{stroke:var(--ink)}body.night .arrow:hover{background:#28324bbf}@media (aspect-ratio<=9/10){#card{top:auto;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));width:min(86vw,360px);padding:16px 18px 14px;transform:translate(-50%)}#card.hidden{transform:translate(-50%,12px)}#card .d{margin-top:8px;font-size:13px}.arrow{width:38px;height:38px;margin-top:-19px;top:58%}.arrow.left{left:10px}.arrow.right{right:10px}#hint{letter-spacing:.14em;bottom:calc(80px + env(safe-area-inset-bottom));font-size:11px}#lightBtn{right:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(50%)}}@media (prefers-reduced-motion:reduce){#board .s{animation:none}}