:root{
  --bg:#0b0d14; --deep:#05060b; --win:rgba(8,10,16,.93); --lift:#161a26; --sel:#2b2f42; --muted:#5b6078;
  --fg:#e8e2d0; --dim:#8a8fa6; --light:#cfc8b4; --bright:#f7f1de;
  --gold:#e3b341; --gold-hi:#f7d98a; --red:#e5725f; --orange:#ee9b52; --yellow:#f0c75e; --green:#9bc48a; --cyan:#78c4d4; --blue:#82a2f0; --mag:#c79ae6;
  --gap:10px; --bar:34px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--deep) center/cover no-repeat;color:var(--fg);font:400 14px/1.55 "JetBrains Mono",ui-monospace,monospace;overflow:hidden}
a{color:var(--gold-hi);text-underline-offset:3px}
a:hover{color:var(--bright)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::selection{background:var(--sel);color:var(--bright)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- bar ---------- */
#bar{position:fixed;top:0;left:0;right:0;height:var(--bar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px;background:rgba(5,6,11,.82);backdrop-filter:blur(10px);z-index:50;font-size:13px}
#bar .l,#bar .r{display:flex;align-items:center;gap:6px}
#bar .r{justify-content:flex-end;gap:14px;color:var(--dim)}
.menu{width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.menu i{width:19px;height:11px;background:url(/bowl.svg) center/contain no-repeat;image-rendering:pixelated}
.menu:hover i{filter:brightness(1.2)}
.wss{display:flex;gap:2px;margin-left:6px}
.wss button{min-width:26px;height:24px;padding:0 9px;border-radius:4px;color:var(--dim);white-space:nowrap}
.wss button.has{color:var(--fg)}
.wss button.on{background:var(--gold);color:var(--deep);font-weight:700}
.wss button span{margin-left:6px}
.wss button.on span{font-weight:400}
.wss button:hover:not(.on){background:var(--sel)}
#clock{color:var(--bright)}
.tray b{color:var(--fg);font-weight:400}
.hint{border:1px solid var(--sel);border-radius:4px;padding:0 6px;color:var(--dim)}
.hint:hover{border-color:var(--gold);color:var(--gold-hi)}

/* ---------- workspaces & windows ---------- */
#desk{position:fixed;inset:var(--bar) 0 16px 0}
.layer{position:absolute;inset:0;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.layer.off-l{transform:translateX(-104%);pointer-events:none}
.layer.off-r{transform:translateX(104%);pointer-events:none}
.layer.hidden{visibility:hidden}
.win{position:absolute;display:flex;flex-direction:column;border:2px solid rgba(43,47,66,.95);border-radius:9px;background:var(--win);backdrop-filter:blur(8px);overflow:hidden;
  transition:left .38s var(--ease),top .38s var(--ease),width .38s var(--ease),height .38s var(--ease),border-color .18s,opacity .25s,transform .3s var(--ease)}
.win.active{border-color:var(--gold);box-shadow:0 10px 50px rgba(0,0,0,.45),0 0 0 1px rgba(247,217,138,.18)}
.win.enter{opacity:0;transform:scale(.92)}
.win.leave{opacity:0;transform:scale(.92)}
.tb{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:26px;padding:0 6px 0 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--sel);user-select:none}
.win.active .tb{color:var(--gold)}
.tb .x{width:20px;height:20px;border-radius:4px;color:var(--muted);line-height:1}
.tb .x:hover{background:var(--red);color:var(--deep)}
.wb{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--sel) transparent}
#credit{position:fixed;right:12px;bottom:2px;font-size:11px;color:rgba(232,226,208,.45);z-index:1;pointer-events:none}

/* ---------- terminal ---------- */
.term{padding:12px 14px;cursor:text;min-height:100%}
.term .ln{white-space:pre-wrap;word-break:break-word;scroll-margin-top:calc(var(--bar) + 12px)}
.p{color:var(--green)}.p i{color:var(--blue);font-style:normal}.p b{color:var(--mag);font-weight:400}
.c-dim{color:var(--dim)}.c-gold{color:var(--gold)}.c-red{color:var(--red)}.c-green{color:var(--green)}.c-cyan{color:var(--cyan)}.c-mag{color:var(--mag)}.c-blue{color:var(--blue)}.c-br{color:var(--bright);font-weight:700}.c-or{color:var(--orange)}
.inl{display:flex;flex-wrap:wrap}
.inl .typed{white-space:pre-wrap;word-break:break-all;color:var(--bright)}
.caret{display:inline-block;width:.62em;height:1.2em;background:var(--gold);vertical-align:-3px;animation:blink 1.1s steps(1) infinite}
.term:not(.focused) .caret{background:transparent;outline:1px solid var(--gold);animation:none}
@keyframes blink{50%{opacity:0}}
.term input{position:absolute;opacity:0;width:1px;height:1px;left:-99px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--sel)}
.chips span{width:100%;font-size:12px}
.chips button{border:1px solid var(--sel);border-radius:5px;padding:5px 10px;color:var(--cyan);font-size:13px;background:rgba(43,47,66,.35)}
.chips button:active{background:var(--gold);color:var(--deep);border-color:var(--gold)}
.fetch{display:flex;gap:22px;margin:4px 0 10px;flex-wrap:wrap}
.logo{color:var(--gold);font-weight:800;line-height:1.12;white-space:pre}
.logo .st{color:var(--cyan);opacity:.75;font-weight:400}.logo .sp{color:var(--orange)}.logo .bw{color:#efe7d2}.logo .ft{color:#b39a6a}.logo .tg{background:#efe7d2;color:var(--deep)}
.kv .k{color:var(--gold);font-weight:700}
.sw{display:flex;margin-top:8px}.sw i{width:20px;height:12px}
.out-gap{height:8px}

/* ---------- image viewer ---------- */
.imv{height:100%;display:flex;flex-direction:column;background:#05060b}
.imv .stage{flex:1;min-height:0;overflow:hidden;padding:14px}
.imv img{width:100%;height:100%;object-fit:contain;border-radius:3px;transition:transform .4s var(--ease);cursor:zoom-in}
.imv img.zoom{transform:scale(1.6);cursor:zoom-out}
.imv .st{flex:none;display:flex;justify-content:space-between;padding:4px 10px;font-size:12px;color:var(--dim);border-top:1px solid var(--sel)}

/* ---------- btop ---------- */
.btop{padding:10px 14px;font-size:13px}
.box{border:1px solid var(--sel);border-radius:6px;padding:8px 10px;position:relative;margin-top:10px}
.box>.lbl{position:absolute;top:-10px;left:10px;background:var(--deep);padding:0 6px;color:var(--gold)}
.graph{display:flex;align-items:flex-end;gap:2px;height:46px}
.graph i{flex:1;background:linear-gradient(to top,var(--green),var(--gold) 60%,var(--red));border-radius:1px;min-height:2px;transition:height .6s}
.meter{display:grid;grid-template-columns:15ch 1fr 4.5ch;gap:8px;align-items:center;margin:5px 0}
.meter .m{height:8px;background:var(--sel);border-radius:2px;overflow:hidden}
.meter .m i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold),var(--red));transition:width .8s var(--ease)}
.meter .v{color:var(--dim);text-align:right}
.proc{width:100%;border-collapse:collapse;margin-top:2px}
.proc th{text-align:left;color:var(--dim);font-weight:400;border-bottom:1px solid var(--sel);padding:2px 4px}
.proc td{padding:2px 4px}
.proc tr.hi td{background:var(--sel);color:var(--bright)}
.proc td:first-child{color:var(--muted)}

/* ---------- files (projects) ---------- */
.files{display:grid;grid-template-columns:minmax(150px,30%) 1fr;height:100%}
.files nav{border-right:1px solid var(--sel);padding:8px 6px;overflow:auto}
.files nav .h{color:var(--muted);font-size:12px;padding:6px 8px}
.files nav button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 8px;border-radius:5px;color:var(--light)}
.files nav button:hover{background:var(--lift)}
.files nav button.on{background:var(--sel);color:var(--bright)}
.files nav button .d{width:8px;height:8px;border-radius:50%;flex:none}
.detail{padding:18px 22px;overflow:auto}
.detail h2{font-size:clamp(20px,2.4vw,30px);line-height:1.1;color:var(--bright);font-weight:800;letter-spacing:-.02em}
.detail .path{color:var(--muted);font-size:12px;margin-bottom:6px}
.chip{display:inline-block;font-size:12px;padding:1px 9px;border-radius:999px;margin:10px 0 2px}
.chip.live{background:rgba(155,196,138,.15);color:var(--green)}.chip.npm{background:rgba(199,154,230,.15);color:var(--mag)}.chip.priv{background:rgba(238,155,82,.15);color:var(--orange)}.chip.oss{background:rgba(120,196,212,.15);color:var(--cyan)}
.detail p{margin-top:10px;max-width:62ch;color:var(--fg)}
.detail dl{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.detail dt{color:var(--gold)}.detail dd{color:var(--light)}
.detail .acts{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold-hi);padding:4px 12px;border-radius:5px;text-decoration:none;font-size:13px}
.btn:hover{background:var(--gold);color:var(--deep)}
.btn.solid{background:var(--gold);color:var(--deep)}
.btn.solid:hover{background:var(--gold-hi)}

/* ---------- browser chrome ---------- */
.zen{display:flex;flex-direction:column;height:100%}
.url{flex:none;display:flex;align-items:center;gap:8px;margin:6px 8px;padding:3px 10px;border-radius:6px;background:var(--lift);color:var(--dim);font-size:12px;overflow:hidden;white-space:nowrap}
.url b{color:var(--fg);font-weight:400}
.zen .page{flex:1;min-height:0;overflow:auto;position:relative}

/* signal fall */
.sf{position:relative;height:100%;background:#080a10}
.sf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sf .ov{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(5,6,11,.92) 45%)}
.sf .ov h3{font-size:22px;color:var(--bright);font-weight:800}
.sf .ov p{color:var(--light);font-size:13px;max-width:52ch;margin:4px 0 10px}
.sf .hud{position:absolute;top:8px;left:10px;right:10px;display:flex;justify-content:space-between;font-size:12px;color:var(--dim);pointer-events:none}
.sf .hud .g{color:var(--gold)}.sf .hud .c{color:var(--cyan)}

/* feedbacker */
.fbk{padding:10px 12px;font-size:13px}
.fbk .file{color:var(--dim);margin-bottom:6px}
.dl{display:grid;grid-template-columns:3.2ch 1.4ch 1fr;gap:0 8px;padding:1px 6px;border-radius:3px;cursor:pointer;white-space:pre}
.dl:hover{background:var(--lift)}
.dl .n{color:var(--muted);text-align:right}
.dl.del{background:rgba(229,114,95,.10);color:var(--red)}
.dl.add{background:rgba(155,196,138,.10);color:var(--green)}
.cm{margin:4px 0 6px 5ch;border-left:2px solid var(--gold);background:rgba(227,179,65,.07);padding:6px 10px;border-radius:0 5px 5px 0;white-space:normal}
.cm .who{color:var(--gold);font-weight:700}
.cm.agent{border-color:var(--cyan);background:rgba(120,196,212,.07)}.cm.agent .who{color:var(--cyan)}
.cm textarea{width:100%;background:var(--deep);color:var(--fg);border:1px solid var(--sel);border-radius:4px;font:inherit;padding:6px;resize:vertical;min-height:48px}
.fbk .bar2{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px;flex-wrap:wrap}
.fbk .bar2 span{color:var(--dim)}

/* blog */
.blog{padding:18px 22px}
.blog h2{font-size:22px;color:var(--bright);font-weight:800}
.blog .sub{color:var(--dim);margin:4px 0 14px;max-width:60ch}
.blog ul{list-style:none}
.blog li a{display:grid;grid-template-columns:11ch 1fr auto;gap:12px;padding:9px 0;border-bottom:1px dashed var(--sel);text-decoration:none;color:var(--fg)}
.blog li a:hover{color:var(--gold-hi)}
.blog li time{color:var(--muted)}
.blog li .r{color:var(--dim);font-size:12px;white-space:nowrap}

/* mail */
.mail{padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-height:calc(100% - 150px)}
.mail .row{display:grid;grid-template-columns:8ch 1fr;align-items:center;border-bottom:1px solid var(--sel);padding:4px 0}
.mail .row label{color:var(--dim)}
.mail input,.mail textarea{background:transparent;border:0;color:var(--fg);font:inherit;outline:none;width:100%}
.mail textarea{flex:1;min-height:90px;resize:none;padding-top:6px}
.mail .to{color:var(--gold-hi);font-weight:700}
.mail .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mail .acts small{color:var(--dim);margin-left:auto}
.socials{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}

/* services */
.svc{padding:16px 18px}
.svc ul{list-style:none;margin-top:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.svc a{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--sel);border-radius:7px;text-decoration:none;color:var(--fg)}
.svc a:hover{border-color:var(--gold);background:var(--lift)}
.svc b{color:var(--bright)}.svc span{color:var(--light);font-size:13px}.svc small{color:var(--muted);font-size:12px}

/* ---------- launcher ---------- */
#launch{position:fixed;inset:0;z-index:80;display:none;place-items:start center;padding-top:14vh;background:rgba(5,6,11,.45)}
#launch.open{display:grid}
#launch .box2{width:min(520px,92vw);background:rgba(11,13,20,.97);border:2px solid var(--gold);border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .22s var(--ease)}
@keyframes pop{from{transform:scale(.95);opacity:0}}
#launch input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--sel);color:var(--bright);font:inherit;font-size:16px;padding:12px 14px;outline:none}
#launch ul{list-style:none;max-height:50vh;overflow:auto;padding:6px}
#launch li{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;border-radius:5px;cursor:pointer}
#launch li small{color:var(--muted)}
#launch li.on{background:var(--sel);color:var(--bright)}
#launch li.on small{color:var(--gold)}

/* ---------- notifications ---------- */
#notes{position:fixed;top:calc(var(--bar) + 10px);right:12px;z-index:90;display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100vw - 24px))}
.note{background:rgba(11,13,20,.97);border:2px solid var(--gold);border-radius:8px;padding:10px 12px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:slidein .35s var(--ease);cursor:pointer}
.note b{display:block;color:var(--gold-hi)}
.note.out{opacity:0;transform:translateX(30px);transition:.3s}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}

/* ---------- mobile: monocle-ish stacked ---------- */
@media (max-width:760px){
  body{overflow:auto}
  #desk{position:static;padding:calc(var(--bar) + 8px) 8px 40px}
  .layer{position:static;transform:none!important;display:flex;flex-direction:column;gap:10px}
  .layer.hidden,.layer.off-l,.layer.off-r{display:none}
  .win{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important}
  .win[data-app=term]{height:auto!important}
  .term{min-height:0;cursor:auto}
  .logo{font-size:9px}
  .fetch{gap:10px}
  .imv .stage{padding:10px}
  .imv img{height:auto;max-height:70vh}
  .win[data-app=signalfall]{height:340px!important}
  .win[data-app=mail]{height:auto!important}
  .files{grid-template-columns:1fr}
  .files nav{border-right:0;border-bottom:1px solid var(--sel);display:flex;flex-wrap:wrap;gap:2px}
  .files nav .h{display:none}
  .files nav button{width:auto}
  .wb{overflow:visible}
  .blog li a{grid-template-columns:1fr}
  .tray .opt:not(.fresh),.hint{display:none}
  .fresh .w{display:none}
  .fresh::before{content:"🪦 "}
  #bar{grid-template-columns:auto 1fr auto}
  #clock{justify-self:end}
  #credit{position:static;display:block;text-align:center;padding:10px}
  #clock{display:none}
  .wss{overflow-x:auto;scrollbar-width:none;min-width:0}
  #bar .l{min-width:0}
  .wss{margin-left:2px}
  .wss button{padding:0 6px;font-size:12px}
  .wss button i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .layer,.win{transition:none}.caret{animation:none}
}

/* ---------- graveyard ---------- */
.files nav .h.sep{margin-top:10px;border-top:1px dashed var(--sel);padding-top:10px}
.files nav button.rip{color:var(--muted)}
.files nav button.rip .d{background:var(--muted)}
.files nav button.rip.on{color:var(--bright)}
.graves{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:18px 0 14px}
.grave{position:relative;padding:22px 14px 14px;border:1px solid var(--sel);border-bottom:3px solid var(--muted);border-radius:70px 70px 4px 4px;background:linear-gradient(var(--lift),rgba(22,26,38,.4));text-align:center;display:flex;flex-direction:column;gap:6px}
.grave .rip{color:var(--muted);font-size:11px;letter-spacing:.3em}
.grave h3{font-size:14px;color:var(--bright);word-break:break-word}
.grave h3 a{color:inherit;text-decoration:none}
.grave h3 a:hover{color:var(--gold-hi);text-decoration:underline}
.grave time{color:var(--gold);font-size:12px}
.grave p{margin:0;font-size:12.5px;line-height:1.5;color:var(--light)}
.grave .cod{margin-top:auto;padding-top:6px;font-size:11px;color:var(--muted);font-style:italic}
.fresh{color:var(--dim);font-size:13px}
.fresh:hover{color:var(--gold-hi)}
.fresh:hover b{color:var(--gold-hi)}

/* ---------- newsletter (in the mail window) ---------- */
.news{border-top:1px dashed var(--sel);padding:12px 18px 16px;display:flex;flex-direction:column;gap:6px}
.news label{color:var(--gold);font-weight:700}
.news p{color:var(--dim);font-size:13px}
.news input{flex:1;min-width:0;background:var(--lift);border:1px solid var(--sel);border-radius:5px;color:var(--fg);font:inherit;padding:4px 10px}
.news input:focus{border-color:var(--gold);outline:none}