:root{--bg:#14100c;--bg2:#1b1510;--fg:#e9c48f;--amber:#e8913a;--gold:#f0c27b;--dim:#8a6a45;--faint:#4a3824;--line:#2c2117;
--mono:"JetBrains Mono","IBM Plex Sans Thai Looped",ui-monospace,monospace;}
*{box-sizing:border-box}html{font-size:14px;background:#0b0806}
body{margin:0;min-height:100vh;color:var(--fg);font-family:var(--mono);font-weight:300;line-height:1.65;background:#0b0806}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 45%,#211912 0%,#14100c 55%,#080605 100%)}
:lang(th),.th{font-family:"IBM Plex Sans Thai Looped","JetBrains Mono",sans-serif;line-height:1.85}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--bg)}
.crt{position:fixed;inset:0;pointer-events:none;z-index:50;
 background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pxc{display:block;image-rendering:pixelated}
/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;height:26px;display:flex;align-items:center;gap:1.4rem;padding:0 14px;
 background:rgba(232,145,58,.92);color:#1a120a;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.topbar .brand{display:flex;align-items:center;gap:6px}
.topbar .brand canvas{filter:brightness(.25)}
.menus{display:flex;gap:1.1rem}.menus a:hover{text-decoration:underline}
.status{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:400}
.status i{width:7px;height:7px;border-radius:50%;background:#1a120a;box-shadow:0 0 0 2px rgba(26,18,10,.2);animation:blink 2.4s infinite}
.clock{font-variant-numeric:tabular-nums;font-weight:400;white-space:pre}
@keyframes blink{50%{opacity:.25}}
.stage{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 0 10px;text-align:center}
.name{width:min(520px,100%);filter:drop-shadow(0 0 18px rgba(232,145,58,.35))}
.ghostc{filter:drop-shadow(0 0 10px rgba(232,145,58,.25))}
.tag{margin:6px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.tag .th{text-transform:none;letter-spacing:.02em}
.float{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-7px)}}
/* layout: sidebar file tree + editor */
.side{position:fixed;top:26px;bottom:0;left:0;width:240px;z-index:30;display:flex;flex-direction:column;justify-content:flex-start;
 padding:20px 0;background:rgba(10,8,6,.75);border-right:1px solid var(--line);font-size:13px}
.root{display:flex;align-items:center;gap:8px;padding:0 18px 14px;color:var(--gold);font-weight:600}
.tree{display:flex;flex-direction:column}
.tree a,.tree .dir{padding:3px 18px;color:var(--fg);white-space:nowrap}
.tree .dir{color:var(--dim)}.tree .in{padding-left:36px}
.tree a:hover{color:var(--amber);background:rgba(232,145,58,.07)}
.tree a.active{background:var(--amber);color:#1a120a;font-weight:600}
.tree.foot{margin-top:auto}.tree.foot a{color:var(--dim)}
.editor{margin-left:240px;padding:56px 48px 30px;min-height:100vh}
.content{max-width:820px}
.tildes{color:var(--faint);margin-top:28px;line-height:1.5}
.menu{display:none;background:none;border:1px solid rgba(26,18,10,.5);color:inherit;font:inherit;padding:0 8px;cursor:pointer}
.mode{opacity:.75}.fname{font-weight:400;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
h1,h2{color:var(--gold);font-weight:300;letter-spacing:-.01em}
h1{font-size:2.6rem;line-height:1.15;margin:.1em 0 .5em}
h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.16em;color:var(--amber);margin:2.4em 0 .8em;font-weight:400}
h2::before{content:"// ";color:var(--faint)}
b,strong{color:var(--gold);font-weight:600}.hl{color:var(--amber)}
.dim{color:var(--dim)}
.note{border-left:2px solid var(--amber);padding:.5em .9em;background:rgba(232,145,58,.06);color:var(--dim);font-size:12px}
.hero{display:flex;gap:28px;align-items:center}
.tools{list-style:none;padding:0}.tools li{padding:.45em 0;border-bottom:1px solid var(--line)}
.link{color:var(--amber);border-bottom:1px solid var(--faint)}.link:hover{color:var(--gold)}
.list{display:flex;flex-direction:column}
.card{display:flex;gap:18px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);transition:background .2s}
.card:first-child{border-top:1px solid var(--line)}
.card:hover{background:rgba(232,145,58,.05)}.card:hover .ttl{color:var(--amber)}
.card > div{flex:1;min-width:0}.ttl{color:var(--gold);font-size:1.15rem}
.card .dim{font-size:12.5px}.arr{color:var(--faint)}.card:hover .arr{color:var(--amber)}
.meta{font-size:11px;color:var(--dim);letter-spacing:.04em}
.tag{color:var(--amber);text-transform:uppercase;letter-spacing:.12em;margin-right:.4em}
.meta .tag{font-size:11px}
.ex{margin-left:.6em;border:1px solid var(--faint);padding:0 .4em;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.stars{color:var(--amber)}
.prose{font-size:1.05rem;max-width:68ch}.prose a{color:var(--amber);text-decoration:underline}
.prose img{max-width:100%}.prose blockquote{border-left:2px solid var(--amber);margin:1em 0;padding-left:1em;color:var(--dim)}
.prose code{color:var(--gold);background:var(--bg2);padding:.1em .35em}
@media (max-width:760px){
 .topbar{gap:.8rem;font-size:10.5px}.mode,.fname,.status{display:none}.clock{margin-left:auto}.menu{display:block}
 .side{transform:translateX(-100%);transition:transform .25s;width:250px;background:#0d0a07;box-shadow:10px 0 30px rgba(0,0,0,.6)}
 body.open .side{transform:none}
 body.open .editor{filter:brightness(.35)}
 .editor{margin-left:0;padding:46px 18px 24px}
 h1{font-size:1.9rem}.hero{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
h2:lang(th),.th{letter-spacing:0!important;text-transform:none}
.pfoot{margin-top:56px;padding-top:12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--faint);letter-spacing:.08em;max-width:820px}
.name{width:min(600px,100%)}
.cover{width:100%;max-height:420px;object-fit:cover;border:1px solid var(--line);margin:0 0 1.5em;filter:sepia(.25) saturate(.9)}
.about-intro em{color:var(--amber);font-style:normal}.intro{max-width:56ch;color:var(--fg);margin:4px 0 0}
.picon{display:inline-block;vertical-align:-.25em;margin:0 .12em;filter:drop-shadow(0 0 3px rgba(232,145,58,.45))}
.note.banner{color:var(--gold);font-size:12.5px;letter-spacing:.08em}
.tag .picon{height:1.4em!important}
.tree a canvas{display:inline-block;vertical-align:-2px;margin-right:4px}
.tree a.active canvas{filter:brightness(.3)}
.empty{border:1px dashed var(--faint);padding:18px 20px;margin-top:8px}.empty p{margin:.3em 0}
.card canvas{flex:none}
.tgame{max-width:820px}.tgame .tlabel{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin:2px 0 8px}
.tgame .game-wrap.embed{border-style:dashed;background:rgba(10,8,6,.6)}
.tgame .tlabel .link{font-size:11px}
.snd{margin-left:auto;background:none;border:0;padding:0 2px;cursor:pointer;color:#1a120a;display:flex;align-items:center;height:20px}
.snd svg{width:15px;height:13px;fill:currentColor}.snd .w{display:none}.snd.on .w{display:inline}.snd.on .x{display:none}
.snd:not(.on){opacity:.6}.snd:focus-visible{outline:1px solid #1a120a;outline-offset:2px}
.topbar .status{margin-left:0}
@media (max-width:760px){.snd{margin-left:auto}.clock{margin-left:0}}