/* messages */
.th-row .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:600;color:#fff;flex:none;background:linear-gradient(#a2a8b6,#6c7384)}
.th-row .t b{display:flex;justify-content:space-between}.th-row .t b em{font-style:normal;font-weight:400;font-size:14px;color:#8e8e93}
.th-row .udot{width:10px;height:10px;border-radius:50%;background:#0a84ff;flex:none}
.chat{display:flex;flex-direction:column;gap:3px;padding:8px 12px 18px}
.msg{max-width:76%;padding:8px 13px;border-radius:19px;font-size:16px;line-height:1.36;word-break:break-word;animation:bub .38s var(--ease) both;transform-origin:left bottom}
.msg.them{background:#26262a;align-self:flex-start}
.msg.me{background:#0a84ff;align-self:flex-end;transform-origin:right bottom}
.msg.sys{align-self:center;background:none;color:#8e8e93;font-size:12px;padding:10px 0 4px;animation:none}
.msg.glitch{font-family:ui-monospace,Menlo,monospace;color:#ff8a8d;background:#2a1215}
@keyframes bub{from{opacity:0;transform:scale(.6) translateY(10px)}}
.typing{align-self:flex-start;background:#26262a;border-radius:19px;padding:12px 15px;display:flex;gap:4px;animation:bub .3s var(--ease)}
.typing i{width:8px;height:8px;border-radius:50%;background:#8e8e93;animation:tdot 1.2s infinite}.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.replies{flex:none;padding:8px 12px calc(36px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:7px;border-top:.5px solid #ffffff1a;background:#0b0b0d}
.replies button{align-self:flex-end;border:1px solid #0a84ff;color:#4da3ff;border-radius:18px;padding:8px 14px;font-size:15px;max-width:88%;text-align:right;animation:bub .3s var(--ease) both}
.replies button:active{background:#0a84ff;color:#fff}
.replies .none{color:#6e6e73;font-size:13px;text-align:center;padding:4px}
/* notes */
.win.notes{background:#1c1c1e;--tint:#ffd60a}
.note-body{padding:4px 22px 40px;font-size:17px;line-height:1.7;white-space:pre-wrap}
.note-body h2{font-size:26px;margin-bottom:6px}.note-body small{color:#8e8e93;display:block;margin-bottom:18px;font-size:13px}
.note-body .strike{text-decoration:line-through;color:#8e8e93}
.note-body .hl{background:#ffd60a33;border-radius:4px;padding:0 3px}
/* photos */
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ph-grid button{aspect-ratio:1;position:relative;overflow:hidden;background:#222}
.ph-grid button svg,.ph-grid button .tn{width:100%;height:100%;display:block}
.ph-grid .lk{position:absolute;inset:0;display:grid;place-items:center;background:#0008;font-size:22px}
.ph-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 0 60px}
.ph-view svg{width:100%;height:auto;display:block}
.ph-cap{padding:14px 20px;font-size:14px;color:#aeb4c2;line-height:1.5}
/* puzzle */
.pz-wrap{padding:6px 18px}
.pz{position:relative;width:100%;aspect-ratio:1;background:#0d0d10;border-radius:14px;overflow:hidden;touch-action:none;box-shadow:inset 0 0 0 1px #ffffff14}
.pz .tile{position:absolute;width:33.333%;height:33.333%;padding:2px;transition:left .22s var(--ease),top .22s var(--ease)}
.pz .tile>div{width:100%;height:100%;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 2px 8px #0008}
.pz .tile svg{position:absolute;width:300%;height:300%}
.pz .tile .num{position:absolute;right:5px;bottom:3px;font-size:11px;color:#fff8;text-shadow:0 1px 2px #000}
.pz.done .tile{padding:0}.pz.done .tile>div{border-radius:0;box-shadow:none}.pz.done .num{display:none}
.pz-meta{display:flex;justify-content:space-between;padding:12px 4px;color:#8e8e93;font-size:14px}
/* snake */
.win.snake{background:#0f1a0a;color:#c8f08f}
.sn-top{display:flex;justify-content:space-between;align-items:flex-end;padding:0 20px 10px;font-family:ui-monospace,Menlo,monospace}
.sn-top b{font-size:30px;color:#d4ff6a}.sn-top small{font-size:12px;color:#7e9a5e;display:block}
.sn-board{margin:0 auto;position:relative;border:2px solid #3b5a22;border-radius:6px;background:#122008;image-rendering:pixelated;touch-action:none}
.sn-board canvas{display:block;width:100%;height:100%}
.sn-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0b1406dd;text-align:center;padding:20px;font-family:ui-monospace,Menlo,monospace}
.sn-over h3{font-size:22px;color:#d4ff6a}.sn-over p{font-size:13px;color:#a6c47e;line-height:1.6}
.sn-over button{border:2px solid #d4ff6a;color:#d4ff6a;padding:9px 22px;border-radius:8px;font-family:inherit;font-size:15px;margin-top:6px}
.sn-pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,54px);gap:8px;justify-content:center;margin-top:16px}
.sn-pad button{border-radius:12px;background:#1f3311;color:#d4ff6a;font-size:22px;box-shadow:inset 0 -3px 0 #0a1404}
.sn-pad button:active{transform:translateY(2px);box-shadow:none}
.sn-pad .u{grid-column:2}.sn-pad .l{grid-column:1;grid-row:2}.sn-pad .d{grid-column:2;grid-row:2}.sn-pad .r{grid-column:3;grid-row:2}
/* radio */
.win.radio{background:linear-gradient(#2a1d14,#120c08);color:#ffd9a8;--tint:#ffb35c}
.rd-face{margin:8px 20px;border-radius:20px;background:linear-gradient(#3b2a1e,#24180f);padding:20px;box-shadow:inset 0 2px 0 #ffffff12,0 10px 30px #0008}
.rd-freq{font-family:ui-monospace,Menlo,monospace;font-size:54px;text-align:center;color:#ffb35c;text-shadow:0 0 18px #ff9d2e88;letter-spacing:2px}
.rd-freq small{font-size:18px;margin-left:6px;color:#b98a5a}
.rd-scale{position:relative;height:46px;margin:14px 0 6px;border-radius:8px;background:#120b06;overflow:hidden;box-shadow:inset 0 2px 6px #000}
.rd-scale .ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffd9a855 0 1px,transparent 1px 10px);mask:linear-gradient(transparent 55%,#000 55%);-webkit-mask:linear-gradient(transparent 55%,#000 55%)}
.rd-scale .nums{position:absolute;left:0;right:0;top:4px;display:flex;justify-content:space-between;padding:0 6px;font-size:10px;color:#b98a5a;font-family:ui-monospace,monospace}
.rd-needle{position:absolute;top:0;bottom:0;width:2px;background:#ff5a2e;box-shadow:0 0 8px #ff5a2e;transition:left .08s}
.rd-sig{display:flex;gap:4px;justify-content:center;margin:10px 0}
.rd-sig i{width:10px;height:18px;border-radius:2px;background:#4a3524;transition:background .15s}.rd-sig i.on{background:#ffb35c;box-shadow:0 0 6px #ffb35c}
.rd-dial{width:170px;height:170px;margin:18px auto 0;border-radius:50%;background:conic-gradient(from 0deg,#5a4130,#2a1d14,#5a4130,#2a1d14,#5a4130);box-shadow:0 10px 28px #000a,inset 0 2px 0 #ffffff22;position:relative;touch-action:none;cursor:grab}
.rd-dial::after{content:'';position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#6b4d37,#2b1d13)}
.rd-dial i{position:absolute;left:50%;top:12px;width:6px;height:22px;margin-left:-3px;border-radius:3px;background:#ffb35c;z-index:2;transform-origin:3px 73px}
.rd-sub{min-height:110px;padding:14px 26px;text-align:center;font-size:16px;line-height:1.65}
.rd-sub p{animation:bub .5s var(--ease) both}.rd-sub .dim{color:#a37b55;font-size:13px}
.rd-fine{display:flex;justify-content:center;gap:16px;margin-top:6px}.rd-fine button{width:52px;height:40px;border-radius:12px;background:#3b2a1e;font-size:18px;color:#ffb35c}
/* calculator */
.win.calc{background:#000}
.calc-disp{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:0 26px 14px;min-height:150px}
.calc-disp .ex{color:#8e8e93;font-size:22px;min-height:28px}
.calc-disp .val{font-size:78px;font-weight:300;line-height:1;letter-spacing:-1px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;padding:0 18px calc(40px + env(safe-area-inset-bottom))}
.calc-keys button{aspect-ratio:1;border-radius:50%;background:#333;font-size:32px;transition:filter .1s}
.calc-keys button:active{filter:brightness(1.6)}
.calc-keys .fn{background:#a5a5a5;color:#000;font-size:26px}.calc-keys .op{background:#ff9f0a;font-size:36px}.calc-keys .zero{grid-column:span 2;aspect-ratio:auto;border-radius:44px;text-align:left;padding-left:30px}
.vault{padding:0 16px}
.vault .file{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;background:#1c1c1e;margin-bottom:10px;width:100%;text-align:left}
.vault .file .fi{width:40px;height:48px;border-radius:6px;background:linear-gradient(#ff9f0a,#c46f00);display:grid;place-items:center;font-size:12px;font-weight:700;color:#000}
.ledger{font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.9;padding:16px;background:#111;border-radius:12px;margin:0 16px;color:#cfd3dc}
.ledger .r{color:#ff6b6b}
/* settings */
.win.settings{background:#000}
.set-prof{display:flex;gap:14px;align-items:center}
.set-prof .av{width:60px;height:60px;border-radius:50%;background:linear-gradient(#ffcf7a,#e07a3a);display:grid;place-items:center;font-size:26px;font-weight:600;color:#fff}
/* phone app */
.win.phone{background:#000;--tint:#34c759}
.dialpad{display:grid;grid-template-columns:repeat(3,78px);gap:16px 26px;justify-content:center;margin-top:10px}
.dialpad button{width:78px;height:78px;border-radius:50%;background:#333;font-size:34px;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dialpad button small{font-size:10px;letter-spacing:2px;color:#ddd}
.dialpad button:active{background:#777}
.dial-num{text-align:center;font-size:38px;min-height:56px;padding:4px 20px;letter-spacing:1px;font-variant-numeric:tabular-nums}
.dial-call{display:flex;justify-content:center;margin:18px 0}.dial-call button{width:78px;height:78px;border-radius:50%;background:#34c759;display:grid;place-items:center}.dial-call svg{width:34px;height:34px;fill:#fff}
.ph-tabs{display:flex;padding:8px 0 calc(28px + env(safe-area-inset-bottom));border-top:.5px solid #ffffff1c;background:#111}
.ph-tabs button{flex:1;font-size:11px;color:#8e8e93;padding-top:4px}.ph-tabs button.on{color:#34c759}
.missed{color:#ff453a}
/* wall */
.win.wall{background:#16120d;color:#f1e6d3;--tint:#d4ff6a}
.cork{margin:0 14px;border-radius:18px;padding:16px 12px 22px;background:radial-gradient(#5b4128 1px,transparent 1.5px) 0 0/9px 9px,linear-gradient(#7a5833,#5c4024);box-shadow:inset 0 0 40px #0008;position:relative;min-height:420px}
.cork svg.strings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cork .pins{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;position:relative}
.pinc{background:#f4ecd8;color:#2b2218;border-radius:4px;padding:14px 12px 12px;min-height:118px;box-shadow:0 6px 14px #0007;position:relative;transform:rotate(var(--r,0deg));animation:pinIn .6s var(--ease) both}
.pinc::before{content:'';position:absolute;top:-6px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a8d,#b0151a);box-shadow:0 2px 3px #0007}
.pinc .g{font-size:26px}.pinc b{display:block;font-size:14px;margin:4px 0 2px}.pinc p{font-size:12px;line-height:1.45;color:#5a4a36}
.pinc.empty{background:#00000033;color:#d8c6a6;box-shadow:inset 0 0 0 1.5px #ffffff26;display:grid;place-items:center;text-align:center;font-size:12px}
.pinc.empty::before{background:#00000055}
.pinc.empty b{color:#e8dac0;font-size:22px;margin:0}
@keyframes pinIn{from{opacity:0;transform:translateY(-30px) rotate(calc(var(--r,0deg) + 20deg)) scale(1.2)}}
.wall-cta{margin:18px 16px 0;padding:15px;border-radius:16px;background:#d4ff6a;color:#141a08;font-weight:700;font-size:16px;width:calc(100% - 32px)}
.wall-cta.ghost{background:#ffffff10;color:#d8c6a6;font-weight:500;font-size:14px;margin-top:10px}
.prog{margin:4px 18px 14px;height:6px;border-radius:3px;background:#ffffff14;overflow:hidden}.prog i{display:block;height:100%;background:linear-gradient(90deg,#9ccf3a,#d4ff6a);transition:width .8s var(--ease)}
.recips .row .ri{border-radius:50%;width:40px;height:40px;font-size:17px}
/* ending */
#ending{position:absolute;inset:0;z-index:99;background:#000;display:flex;flex-direction:column;padding:calc(90px + env(safe-area-inset-top)) 28px calc(40px + env(safe-area-inset-bottom));overflow-y:auto;animation:fade 1.2s}
#ending .et{font-size:12px;letter-spacing:5px;color:var(--acc)}
#ending h1{font-size:40px;line-height:1.2;margin:14px 0 22px;font-weight:700}
#ending p{font-size:16px;line-height:1.85;color:#c9cfdb;margin-bottom:14px;animation:bub .8s var(--ease) both}
#ending .q{border-left:2px solid var(--acc);padding-left:16px;color:#fff;font-size:19px;margin:22px 0}
#ending .stats{display:flex;gap:10px;margin:22px 0}#ending .stats div{flex:1;background:#ffffff0c;border-radius:14px;padding:12px;text-align:center;font-size:11px;color:#9aa3b5}#ending .stats b{display:block;font-size:20px;color:#fff;margin-bottom:2px}
#ending .eb{padding:15px;border-radius:16px;background:#fff;color:#000;font-weight:600;font-size:16px;margin-top:10px}
#ending .eb.g{background:#ffffff12;color:#fff;font-weight:500}
#ending .elist{display:flex;gap:8px;justify-content:center;margin-top:16px}#ending .elist i{width:30px;height:4px;border-radius:2px;background:#ffffff22}#ending .elist i.on{background:var(--acc)}
/* intro */
#intro{position:absolute;inset:0;z-index:98;background:#000;display:flex;flex-direction:column;justify-content:center;padding:40px 34px;transition:opacity 1s}
#intro.gone{opacity:0;pointer-events:none}
#intro .il{font-size:17px;line-height:2;color:#c9cfdb;min-height:1.9em;opacity:0;transform:translateY(8px);transition:opacity .9s,transform .9s}
#intro .il.on{opacity:1;transform:none}
#intro .il.big{font-size:30px;color:#fff;font-weight:700;margin-top:18px;letter-spacing:1px}
#intro .go{margin-top:46px;align-self:flex-start;padding:13px 26px;border-radius:24px;border:1px solid #ffffff55;font-size:15px;letter-spacing:2px;opacity:0;transition:opacity 1s}
#intro .go.on{opacity:1}
#intro .cont{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));left:34px;right:34px;display:flex;justify-content:space-between;font-size:12px;color:#6e7380}
#intro .cont button{color:#9aa3b5;font-size:12px;padding:6px 0}
#intro .credit{position:absolute;top:calc(44px + env(safe-area-inset-top));left:34px;font-size:12px;letter-spacing:5px;color:#8a909c}
#intro .credit b{color:#d4ff6a;font-weight:600}
.author{margin-top:26px;padding:16px;border-radius:16px;background:#ffffff0a;text-align:center;font-size:13px;color:#9aa3b5;line-height:1.7}
.author b{color:#fff;letter-spacing:2px}
.author a{display:inline-block;margin-top:8px;padding:9px 16px;border-radius:18px;background:#d4ff6a;color:#141a08;font-weight:600;text-decoration:none;font-size:13px}
.train-light{position:absolute;left:0;right:0;height:120px;top:30%;background:linear-gradient(90deg,transparent,#fff1,transparent);animation:pass 3.2s linear infinite;pointer-events:none}
@keyframes pass{from{transform:translateX(-100%)}to{transform:translateX(100%)}}