/* ~/home — styles. Colours live in the :root tokens at the top. */
/* ---------- tokens: warm charcoal + amber phosphor ---------- */
:root{
  --bg:#1b1713; --bg2:#211c17; --panel:#26201acc; --line:#3a3128;
  --fg:#efe4d2; --dim:#a8977f; --mute:#6b5d4c;
  --acc:#ffb454; --acc-rgb:255,180,84; --acc2:#7ee0a1; --err:#ff6b6b;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="green"]{--acc:#3dff9a;--acc-rgb:61,255,154;--acc2:#ffb454}
:root[data-theme="cyan"]{--acc:#4de1ff;--acc-rgb:77,225,255;--acc2:#ffb454}
:root{--rain-fade:rgba(27,23,19,.12);--scan:rgba(0,0,0,.08);--vig:rgba(0,0,0,.35);--glow:.22;--blend:screen}
/* light mode: warm paper + darker amber ink for contrast */
:root[data-mode="light"]{
  --bg:#f7f2e8; --bg2:#efe7d8; --panel:#fffbf4d9; --line:#e2d5bf;
  --fg:#2a2118; --dim:#6b5a45; --mute:#a3907a;
  --acc:#b25f00; --acc-rgb:178,95,0; --acc2:#1d8048; --err:#c8323c;
  --rain-fade:rgba(247,242,232,.14); --scan:rgba(0,0,0,.025); --vig:rgba(120,90,50,.10); --glow:.12; --blend:multiply;
}
:root[data-mode="light"][data-theme="green"]{--acc:#0b7d44;--acc-rgb:11,125,68;--acc2:#b25f00}
:root[data-mode="light"][data-theme="cyan"]{--acc:#0a7493;--acc-rgb:10,116,147;--acc2:#b25f00}
:root{--rain:var(--acc);--rain-op:.09}
:root[data-mode="light"]{--rain:#6e3a00;--rain-op:.2}
:root[data-mode="light"][data-theme="green"]{--rain:#075c32}
:root[data-mode="light"][data-theme="cyan"]{--rain:#06566d}
#rain.boost{opacity:.4!important}
:root[data-mode="light"] #rain.boost{opacity:.5!important}
:root[data-mode="light"] .term-h{background:#00000008}
body,.panel,.dir,.term,.btn,.bar{transition:background-color .35s,color .35s,border-color .35s}

/* mode toggle: a little terminal switch */
#mode{display:inline-flex;align-items:center;gap:0;font:12px var(--mono);border:1px solid var(--line);border-radius:4px;
  background:var(--panel);cursor:pointer;padding:2px;color:var(--mute)}
#mode span{padding:2px 8px;border-radius:3px;transition:.2s}
#mode:hover{border-color:var(--acc)}
:root:not([data-mode="light"]) #mode .d,:root[data-mode="light"] #mode .l{background:var(--acc);color:var(--bg);font-weight:600}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:15px/1.65 var(--mono);overflow-x:hidden;-webkit-font-smoothing:antialiased}
#rain{position:fixed;inset:0;z-index:0;opacity:var(--rain-op);pointer-events:none;transition:opacity .35s}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(rgba(var(--acc-rgb),.045) 1px,transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg,rgba(var(--acc-rgb),.045) 1px,transparent 1px) 0 0/32px 100%;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 35%,transparent 85%)}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 65%,var(--vig))}
::selection{background:var(--acc);color:var(--bg)}
a{color:inherit;text-decoration:none}

.wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:20px 24px 40px;display:flex;flex-direction:column;gap:26px}

/* status bar / nav */
.bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--dim);border-bottom:1px solid var(--line);padding:12px 0;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.bar b{color:var(--acc);font-weight:600}
.bar .seg{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.bar nav a{color:var(--dim);padding:3px 6px;border-radius:3px;transition:.15s}
.bar nav a::before{content:"./";color:var(--mute)}
.bar nav a:hover{color:var(--acc);background:rgba(var(--acc-rgb),.1)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc2);
  box-shadow:0 0 8px var(--acc2);margin-right:6px;vertical-align:1px;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

/* hero */
.hero{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;margin-top:7vh}
.greet{color:var(--dim);font-size:13px;margin-bottom:6px}
.greet .k{color:var(--acc)}
h1{font-size:clamp(56px,10vw,124px);font-weight:800;letter-spacing:-.05em;line-height:.95;
  text-shadow:0 0 34px rgba(var(--acc-rgb),var(--glow))}
h1 .u{color:var(--acc);animation:blink 1s steps(1) infinite}
.glitch{position:relative;display:inline-block}
.glitch:hover::before,.glitch:hover::after{content:attr(data-t);position:absolute;inset:0}
.glitch:hover::before{color:var(--err);transform:translate(2px,-1px);clip-path:inset(0 0 60% 0);mix-blend-mode:var(--blend)}
.glitch:hover::after{color:#4de1ff;transform:translate(-2px,1px);clip-path:inset(55% 0 0 0);mix-blend-mode:var(--blend)}
.lede{margin-top:16px;color:var(--dim);font-size:16px;max-width:52ch}
.lede span{color:var(--fg)}
.cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn{border:1px solid var(--line);padding:9px 15px;border-radius:4px;font-size:13px;color:var(--fg);background:var(--panel);transition:.15s}
.btn:hover{border-color:var(--acc);color:var(--acc);box-shadow:0 0 18px -6px rgba(var(--acc-rgb),.6)}
.btn.p{background:var(--acc);color:var(--bg);border-color:var(--acc);font-weight:600}
.btn.p:hover{color:var(--bg);filter:brightness(1.08)}

.sys{font-size:12px;color:var(--dim);border-left:1px solid var(--line);padding-left:20px;min-width:250px}
.sys div{display:flex;justify-content:space-between;gap:20px}
.sys i{font-style:normal;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sys{width:350px}
.sys div>span{white-space:nowrap}
.sys .meter{height:3px;background:var(--line);margin:3px 0 8px;position:relative;overflow:hidden}
.sys .meter::after{content:"";position:absolute;inset:0;width:var(--w,40%);background:var(--acc);box-shadow:0 0 6px var(--acc)}

/* terminal */
.term{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(6px);border-radius:6px;overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(var(--acc-rgb),.35)}
.term-h{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:11px;color:var(--dim);background:#00000022}
.term-h .l{width:10px;height:10px;border-radius:50%}
.term-h .l:nth-child(1){background:#ff5f56aa}.term-h .l:nth-child(2){background:#ffbd2eaa}.term-h .l:nth-child(3){background:#27c93faa}
.term-h .t{margin-left:auto}.term-h .t b{color:var(--acc)}
#out{max-height:260px;overflow:auto;padding:12px 16px 0;font-size:13px;color:var(--dim);white-space:pre-wrap}
#out .ok{color:var(--acc)} #out .er{color:var(--err)} #out .hl{color:var(--acc2)} #out .fg{color:var(--fg)}
#out a{color:var(--acc2);text-decoration:underline;text-underline-offset:2px}
.line{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:16px}
.ps1{color:var(--acc);white-space:nowrap;font-weight:600}
.ps1 .p{color:var(--acc2)} .ps1 .u{color:var(--dim);font-weight:400}
#cmd{flex:1;background:none;border:0;outline:0;color:var(--fg);font:inherit;caret-color:var(--acc);min-width:0}
#cmd::placeholder{color:var(--mute)}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 14px}
.chips button{font:12px var(--mono);background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:3px 9px;cursor:pointer}
.chips button:hover{color:var(--acc);border-color:var(--acc)}

/* section heads */
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 -8px}
.sh h2{font-size:13px;font-weight:600;color:var(--acc)}
.sh h2 .k{color:var(--mute);font-weight:400;margin-right:8px}
.sh p{font-size:12px;color:var(--mute)}

/* project / link dirs */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dir{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;position:relative;transition:border-color .2s,transform .2s;display:flex;flex-direction:column}
.dir:hover{border-color:rgba(var(--acc-rgb),.5);transform:translateY(-2px)}
.dir::before{content:"";position:absolute;left:-1px;top:16px;width:2px;height:20px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.dir .path{font-size:11px;color:var(--mute);display:flex;justify-content:space-between;margin-bottom:6px}
.dir .path b{color:var(--acc);font-weight:400}
.dir .path i{font-style:normal}
.dir .path>span:last-child{white-space:nowrap;margin-left:12px}
.dir h3{font-size:18px;font-weight:600;margin-bottom:6px;color:var(--fg)}
.dir p{color:var(--dim);font-size:13px;flex:1;margin-bottom:12px}
.dir .meta{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;align-items:center}
.tag{border:1px solid var(--line);color:var(--dim);padding:0 7px;border-radius:3px}
.dir .go{margin-left:auto;color:var(--acc);transition:transform .2s}
.dir:hover .go{transform:translateX(4px)}

/* bottom row */
.row2{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.row2>*{min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px}
.panel h3{font-size:12px;color:var(--acc);font-weight:600;margin-bottom:10px}
.panel h3 span{color:var(--mute);font-weight:400}
.panel p{color:var(--dim);font-size:14px;margin-bottom:10px}
.panel p b{color:var(--fg);font-weight:400}
.kv div{display:grid;grid-template-columns:90px 1fr;gap:10px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--line)}
.kv div:last-child{border:0}
.kv dt{color:var(--mute)} .kv dd{color:var(--fg)}
.links a{display:flex;align-items:center;gap:12px;padding:8px 8px;margin:0 -8px;border-radius:4px;font-size:13px;transition:background .12s}
.links a:hover{background:rgba(var(--acc-rgb),.1);color:var(--acc)}
.links .ic{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px;color:var(--acc);font-size:11px;flex:none}
.links small{color:var(--mute);margin-left:auto}

footer{font-size:11px;color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin-top:10px}
footer b{color:var(--dim);font-weight:400}
.cursor{display:inline-block;width:.6em;height:1.05em;background:var(--acc);vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

#boot{position:fixed;inset:0;z-index:60;background:var(--bg);padding:28px;font-size:13px;color:var(--dim);white-space:pre;transition:opacity .4s}
#boot.gone{opacity:0;pointer-events:none}
#boot .ok{color:var(--acc2)}

@media (max-width:780px){
  .wrap{padding:0 16px 30px}
  .bar{gap:10px;flex-wrap:nowrap}
  .bar nav.seg{display:none}
  .hero{grid-template-columns:1fr;margin-top:4vh}
  .sys{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px;min-width:0;width:auto}
  .row2{grid-template-columns:1fr}
  .line{font-size:14px}
  .ps1 .u{display:none}
  .grid{grid-template-columns:1fr}
  .dir .path .perm{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#rain{display:none}}