/* ═══════════════════════════════════════════════════════════════════════════
   FAROL studios — v3 · TUI / Omarchy-style
   Alles ist Theme-getrieben: 9 Themes über [data-theme] auf <html>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── THEMES ─────────────────────────────────────────────────────────────── */
:root,[data-theme="tokyo-night"]{
  --bg:#1a1b26;--bg1:#1f2335;--bg2:#24283b;--bg3:#2f3549;
  --fg:#c0caf5;--fg1:#a9b1d6;--fg2:#565f89;
  --ac:#7aa2f7;--ac2:#bb9af7;--ok:#9ece6a;--warn:#e0af68;--err:#f7768e;--mag:#bb9af7;--cyan:#7dcfff;
  --bd:#3b4261;--sel:rgba(122,162,247,.18);--glow:rgba(122,162,247,.35);
  color-scheme:dark;
}
[data-theme="catppuccin"]{
  --bg:#1e1e2e;--bg1:#181825;--bg2:#313244;--bg3:#45475a;
  --fg:#cdd6f4;--fg1:#bac2de;--fg2:#6c7086;
  --ac:#cba6f7;--ac2:#f5c2e7;--ok:#a6e3a1;--warn:#f9e2af;--err:#f38ba8;--mag:#f5c2e7;--cyan:#89dceb;
  --bd:#45475a;--sel:rgba(203,166,247,.18);--glow:rgba(203,166,247,.35);
}
[data-theme="gruvbox"]{
  --bg:#282828;--bg1:#32302f;--bg2:#3c3836;--bg3:#504945;
  --fg:#ebdbb2;--fg1:#d5c4a1;--fg2:#928374;
  --ac:#fe8019;--ac2:#fabd2f;--ok:#b8bb26;--warn:#fabd2f;--err:#fb4934;--mag:#d3869b;--cyan:#8ec07c;
  --bd:#504945;--sel:rgba(254,128,25,.16);--glow:rgba(254,128,25,.35);
}
[data-theme="nord"]{
  --bg:#2e3440;--bg1:#3b4252;--bg2:#434c5e;--bg3:#4c566a;
  --fg:#eceff4;--fg1:#d8dee9;--fg2:#7b88a1;
  --ac:#88c0d0;--ac2:#81a1c1;--ok:#a3be8c;--warn:#ebcb8b;--err:#bf616a;--mag:#b48ead;--cyan:#8fbcbb;
  --bd:#4c566a;--sel:rgba(136,192,208,.18);--glow:rgba(136,192,208,.35);
}
[data-theme="everforest"]{
  --bg:#2d353b;--bg1:#343f44;--bg2:#3d484d;--bg3:#475258;
  --fg:#d3c6aa;--fg1:#9da9a0;--fg2:#7a8478;
  --ac:#a7c080;--ac2:#dbbc7f;--ok:#a7c080;--warn:#dbbc7f;--err:#e67e80;--mag:#d699b6;--cyan:#83c092;
  --bd:#475258;--sel:rgba(167,192,128,.16);--glow:rgba(167,192,128,.35);
}
[data-theme="rose-pine"]{
  --bg:#191724;--bg1:#1f1d2e;--bg2:#26233a;--bg3:#403d52;
  --fg:#e0def4;--fg1:#908caa;--fg2:#6e6a86;
  --ac:#ebbcba;--ac2:#c4a7e7;--ok:#9ccfd8;--warn:#f6c177;--err:#eb6f92;--mag:#c4a7e7;--cyan:#31748f;
  --bd:#403d52;--sel:rgba(235,188,186,.16);--glow:rgba(235,188,186,.35);
}
[data-theme="kanagawa"]{
  --bg:#1f1f28;--bg1:#2a2a37;--bg2:#363646;--bg3:#54546d;
  --fg:#dcd7ba;--fg1:#c8c093;--fg2:#727169;
  --ac:#7e9cd8;--ac2:#e6c384;--ok:#98bb6c;--warn:#e6c384;--err:#e46876;--mag:#957fb8;--cyan:#7fb4ca;
  --bd:#54546d;--sel:rgba(126,156,216,.18);--glow:rgba(126,156,216,.35);
}
[data-theme="farol"]{
  --bg:#060c1a;--bg1:#0a1224;--bg2:#0c1428;--bg3:#16213a;
  --fg:#f3f1e8;--fg1:#b8bccc;--fg2:#5c6480;
  --ac:#c9a84c;--ac2:#1e90ff;--ok:#6fcf97;--warn:#e2c478;--err:#ff6b6b;--mag:#9b7bd8;--cyan:#4cc9f0;
  --bd:#1d2740;--sel:rgba(201,168,76,.16);--glow:rgba(201,168,76,.4);
}
[data-theme="flexoki-light"]{
  --bg:#fffcf0;--bg1:#f2f0e5;--bg2:#e6e4d9;--bg3:#dad8ce;
  --fg:#100f0f;--fg1:#403e3c;--fg2:#878580;
  --ac:#205ea6;--ac2:#a02f6f;--ok:#66800b;--warn:#ad8301;--err:#af3029;--mag:#5e409d;--cyan:#24837b;
  --bd:#cecdc3;--sel:rgba(32,94,166,.12);--glow:rgba(32,94,166,.25);
  color-scheme:light;
}


@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/JetBrainsMono-Regular.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/JetBrainsMono-SemiBold.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/JetBrainsMono-Bold.woff2) format('woff2')}

/* utilities */
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt18{margin-top:18px}.mt40{margin-top:40px}.narrow{max-width:820px}.hide{display:none!important}

/* ─── BASE ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:52px}
body{
  background:var(--bg);color:var(--fg);
  font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;line-height:1.6;overflow-x:hidden;
  padding:46px 0 40px;
  transition:background .35s,color .35s;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
::selection{background:var(--ac);color:var(--bg)}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.c{max-width:1180px;margin:0 auto;padding:0 16px}
.ws{padding:64px 0;position:relative}
.ws + .ws{padding-top:0}
.dim{color:var(--fg2)}
.mut{color:var(--fg1)}
.acc{color:var(--ac)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.err{color:var(--err)}.mag{color:var(--mag)}.cy{color:var(--cyan)}
kbd{display:inline-block;padding:0 6px;border:1px solid var(--bd);border-bottom-width:2px;border-radius:3px;background:var(--bg1);color:var(--fg);font-size:.8em;line-height:1.6}

/* ─── WALLPAPER / CRT ────────────────────────────────────────────────────── */
#wall{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s}
#wall video{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.1)}
#wall::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,transparent 30%,transparent 70%,var(--bg) 100%)}
html.wall-video #wall{opacity:.16}
html.wall-video[data-theme="flexoki-light"] #wall{opacity:.08}
#crt{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);transition:opacity .4s}
html.crt #crt{opacity:.5}
html.crt[data-theme="flexoki-light"] #crt{opacity:.15}
body>*{position:relative;z-index:2}

/* ─── TOP BAR (waybar) ───────────────────────────────────────────────────── */
#top{position:fixed;top:0;left:0;right:0;height:34px;z-index:900;
  background:var(--bg1);border-bottom:1px solid var(--bd);
  display:flex;align-items:stretch;justify-content:space-between;font-size:.78rem;user-select:none}
.tb-l,.tb-r{display:flex;align-items:stretch}
.tb-c{display:flex;align-items:center;color:var(--fg2);padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-c b{color:var(--ac);font-weight:500}
.wsb{display:flex;align-items:center;gap:6px;padding:0 10px;color:var(--fg2);border-right:1px solid var(--bd);transition:background .2s,color .2s;white-space:nowrap}
.wsb i{font-style:normal;font-weight:600}
.wsb span{display:none}
.wsb:hover{color:var(--fg);background:var(--bg2)}
.wsb.on{background:var(--ac);color:var(--bg)}
.wsb.on span{display:inline}
@media(min-width:1100px){.wsb span{display:inline}}
.tbb{display:flex;align-items:center;gap:6px;padding:0 12px;color:var(--fg1);border-left:1px solid var(--bd);transition:background .2s;white-space:nowrap;position:relative}
.tbb:hover{background:var(--bg2);color:var(--fg)}
.tbb b{color:var(--ac);font-weight:500}
.tbb .sw{width:10px;height:10px;border-radius:2px;background:var(--ac);display:inline-block}
#clock{min-width:58px;justify-content:center;color:var(--fg)}
.dd{position:absolute;top:100%;right:0;min-width:200px;background:var(--bg1);border:1px solid var(--bd);border-top:none;
  display:none;flex-direction:column;z-index:950;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.dd.open{display:flex}
.ddi{display:flex;align-items:center;gap:10px;padding:8px 14px;text-align:left;color:var(--fg1);font-size:.78rem;border-bottom:1px solid var(--bd);transition:background .15s}
.ddi:last-child{border-bottom:none}
.ddi:hover{background:var(--bg2);color:var(--fg)}
.ddi.on{color:var(--ac)}
.ddi.on::after{content:'●';margin-left:auto}
.ddi .sw{width:12px;height:12px;border-radius:2px;flex-shrink:0;border:1px solid rgba(0,0,0,.2)}
.ddi .pv{display:flex;gap:2px;margin-left:auto}
.ddi .pv i{width:7px;height:12px;display:block}
.burger{display:none}

/* ─── BOTTOM BAR (tmux) ──────────────────────────────────────────────────── */
#bot{position:fixed;bottom:0;left:0;right:0;height:30px;z-index:900;
  background:var(--bg1);border-top:1px solid var(--bd);display:flex;align-items:stretch;justify-content:space-between;font-size:.74rem;user-select:none}
#mode{display:flex;align-items:center;padding:0 12px;background:var(--ac);color:var(--bg);font-weight:600;letter-spacing:1px;transition:background .2s}
#mode.ins{background:var(--ok)}#mode.cmd{background:var(--warn)}#mode.term{background:var(--mag)}
.bb-c{display:flex;align-items:center;gap:14px;padding:0 14px;color:var(--fg2);white-space:nowrap;overflow:hidden}
.bb-c kbd{font-size:.68rem;padding:0 4px;line-height:1.4}
.bb-r{display:flex;align-items:stretch}
.bbb{display:flex;align-items:center;gap:6px;padding:0 12px;border-left:1px solid var(--bd);color:var(--fg1);transition:background .2s}
.bbb:hover{background:var(--bg2);color:var(--fg)}
.bbb b{color:var(--ac);font-weight:500}

/* ─── WINDOW (hyprland client) ───────────────────────────────────────────── */
.win{background:var(--bg1);border:1px solid var(--bd);border-radius:6px;overflow:hidden;position:relative;
  transition:border-color .3s,box-shadow .3s,transform .5s,opacity .5s}
.win.focus{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac),0 18px 50px -20px var(--glow)}
.wt{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg2);border-bottom:1px solid var(--bd);font-size:.72rem;color:var(--fg2);user-select:none}
.wd{width:10px;height:10px;border-radius:50%;background:var(--bg3);flex-shrink:0}
.win.focus .wd:nth-child(1){background:var(--err)}.win.focus .wd:nth-child(2){background:var(--warn)}.win.focus .wd:nth-child(3){background:var(--ok)}
.wtt{margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtt b{color:var(--fg1);font-weight:500}
.wtr{margin-left:auto;color:var(--fg2);white-space:nowrap}
.wb{padding:22px 24px}
@media(max-width:600px){.wb{padding:16px 14px}}

/* ─── SECTION HEADER ─────────────────────────────────────────────────────── */
.sh{margin-bottom:22px}
.sl{display:block;color:var(--fg2);font-size:.78rem;margin-bottom:6px}
.sl::before{content:'// ';color:var(--fg2)}
.st{font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--fg)}
.st::before{content:'# ';color:var(--ac)}
.st .g{color:var(--ac)}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--bd);border-radius:4px;color:var(--fg);
  font-size:.82rem;background:var(--bg1);transition:all .18s;white-space:nowrap;text-decoration:none!important}
.btn::before{content:'[';color:var(--fg2)}.btn::after{content:']';color:var(--fg2)}
.btn:hover{border-color:var(--ac);color:var(--ac);transform:translateY(-1px)}
.btn.p{background:var(--ac);color:var(--bg);border-color:var(--ac);font-weight:600}
.btn.p::before,.btn.p::after{color:var(--bg);opacity:.6}
.btn.p:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn:disabled{opacity:.4;transform:none;cursor:default;border-color:var(--bd);color:var(--fg2)}
.btn.sm{padding:5px 10px;font-size:.76rem}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
#home{min-height:calc(100vh - 76px);display:flex;align-items:center;padding:28px 0 48px}
.hg{display:grid;grid-template-columns:1.35fr .8fr;gap:12px;width:100%;align-items:stretch}
#term .wb{padding:20px 24px 24px;min-height:460px;display:flex;flex-direction:column}
.boot{font-size:.8rem;color:var(--fg1);min-height:7.2em;line-height:1.8}
.boot .ln{display:block;white-space:pre-wrap}
.boot .pr{color:var(--ok)}.boot .pr b{color:var(--ac);font-weight:500}
.boot .st-ok{color:var(--ok)}
.boot .dots{color:var(--fg2)}
.cur{display:inline-block;width:.6em;height:1.1em;background:var(--ac);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.logo-ascii{font-size:clamp(5.2px,1.15vw,13px);line-height:1.22;padding-top:4px;color:var(--ac);margin:14px 0 18px;white-space:pre;overflow:hidden;letter-spacing:0;text-shadow:0 0 18px var(--glow);opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s}
.logo-ascii.on{opacity:1;transform:none}
.hcopy{opacity:0;transform:translateY(8px);transition:opacity .8s .2s,transform .8s .2s}
.hcopy.on{opacity:1;transform:none}
.htag{font-size:.76rem;color:var(--fg2);margin-bottom:10px}
.htag::before{content:'$ echo "';color:var(--fg2)}.htag::after{content:'"'}
.htit{font-size:clamp(1.55rem,3.6vw,2.6rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-bottom:12px}
.htit .g{color:var(--ac)}
.hsb{color:var(--fg1);max-width:560px;margin-bottom:22px;font-size:.92rem}
.hhint{margin-top:auto;padding-top:20px;color:var(--fg2);font-size:.74rem;display:flex;gap:16px;flex-wrap:wrap}
.hhint span{display:inline-flex;align-items:center;gap:6px}
/* lighthouse */
#lh .wb{padding:0;height:100%;min-height:380px;position:relative;overflow:hidden;background:
  radial-gradient(ellipse at 50% 100%,var(--bg2) 0%,var(--bg1) 60%)}
.beam{position:absolute;left:50%;top:30%;width:900px;height:900px;transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,transparent 0deg,var(--glow) 6deg,var(--ac) 11deg,var(--glow) 16deg,transparent 24deg);
  opacity:.55;animation:sweep 6s linear infinite;mix-blend-mode:screen;filter:blur(2px);pointer-events:none}
[data-theme="flexoki-light"] .beam{mix-blend-mode:multiply;opacity:.35}
@keyframes sweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
.lhart{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);margin:0;font-size:clamp(9px,1.05vw,13px);line-height:1.15;white-space:pre;color:var(--fg1);text-shadow:0 0 12px rgba(0,0,0,.4)}
.lhart .lamp{color:var(--warn);animation:lamp 6s linear infinite}
@keyframes lamp{0%,100%{text-shadow:0 0 6px var(--warn)}50%{text-shadow:0 0 22px var(--warn),0 0 40px var(--ac)}}
.lhart .sea{color:var(--cyan)}
.lhart .red{color:var(--err)}
.lhmeta{position:absolute;left:14px;top:12px;font-size:.7rem;color:var(--fg2);line-height:1.7}
.lhmeta b{color:var(--ok);font-weight:500}
.star{position:absolute;width:2px;height:2px;background:var(--fg2);border-radius:50%;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.2}}

/* ─── SERVICES (pacman) ──────────────────────────────────────────────────── */
.svg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.svc .wb{display:flex;flex-direction:column;gap:10px;height:100%}
.sic{font-size:1.6rem;color:var(--ac);line-height:1}
.svc h3{font-size:1rem;font-weight:600}
.svc h3::before{content:'» ';color:var(--fg2)}
.pkg{font-size:.72rem;color:var(--fg2)}
.pkg b{color:var(--ok);font-weight:500}
.svc p{color:var(--fg1);font-size:.85rem;flex:1}
.deps{font-size:.72rem;color:var(--fg2);border-top:1px dashed var(--bd);padding-top:10px}
.deps span{color:var(--cyan)}
.svc .btn{align-self:flex-start;margin-top:4px}

/* ─── PROCESS (git log --graph) ──────────────────────────────────────────── */
.glog{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;position:relative}
.step{position:relative;padding:18px 22px 18px 34px;border-left:1px solid var(--bd);transition:background .2s}
.step:hover,.step.on{background:var(--sel)}
.step::before{content:'●';position:absolute;left:-7px;top:18px;color:var(--fg2);background:var(--bg1);line-height:1;transition:color .2s,text-shadow .2s}
.step:hover::before,.step.on::before{color:var(--ac);text-shadow:0 0 10px var(--ac)}
.step .sha{font-size:.7rem;color:var(--warn)}
.step .sha i{font-style:normal;color:var(--fg2)}
.step h3{font-size:.95rem;font-weight:600;margin:4px 0 6px}
.step p{font-size:.82rem;color:var(--fg1)}
.step .tag{display:inline-block;margin-top:10px;font-size:.68rem;color:var(--ok);border:1px solid var(--ok);border-radius:3px;padding:0 6px}
@media(min-width:960px){.glog{grid-template-columns:repeat(4,1fr)}.step{border-left:none;border-top:1px solid var(--bd);padding:26px 18px 18px 14px}
  .step::before{left:14px;top:-7px}}

/* ─── SECTORS (tiles) ────────────────────────────────────────────────────── */
.igd{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}
@media(min-width:1000px){.igd{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--bg1);border:1px solid var(--bd);border-radius:6px;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.tile:hover,.tile:focus-within{border-color:var(--ac);transform:translateY(-3px);box-shadow:0 0 0 1px var(--ac),0 16px 40px -18px var(--glow)}
.tile .wt{padding:5px 10px;font-size:.68rem}
.tile .im{aspect-ratio:3/2;position:relative;overflow:hidden;background:var(--bg2)}
.tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05);transition:transform .6s,filter .4s}
.tile:hover img{transform:scale(1.05);filter:saturate(1)}
.tile .im::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--bg1) 100%);opacity:.9}
.tile .cap{position:absolute;left:10px;bottom:8px;z-index:2;font-size:.74rem;color:var(--fg)}
.tile .cap::before{content:'$ ';color:var(--ok)}

/* ─── QUICK QUOTE ────────────────────────────────────────────────────────── */
.qfs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.qfg label{display:block;font-size:.74rem;color:var(--fg2);margin-bottom:10px}
.qfg label::before{content:'--';color:var(--fg2)}
.qfo{display:flex;flex-wrap:wrap;gap:8px}
.qop{padding:5px 10px;border:1px solid var(--bd);border-radius:4px;font-size:.8rem;color:var(--fg1);cursor:pointer;user-select:none;transition:all .15s;background:var(--bg1)}
.qop::before{content:'[ ] ';color:var(--fg2);white-space:pre}
.qop:hover{border-color:var(--ac);color:var(--fg)}
.qop.sl{border-color:var(--ac);color:var(--ac);background:var(--sel)}
.qop.sl::before{content:'[x] ';color:var(--ac)}
.qsub{color:var(--fg1);font-size:.85rem;margin-bottom:22px}
.qbtn{margin-top:24px}

/* ─── CALCULATOR ─────────────────────────────────────────────────────────── */
.clcw{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
.clcg{display:flex;flex-direction:column;gap:4px}
.clci{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:10px 12px;border:1px solid transparent;border-radius:4px;cursor:pointer;user-select:none;transition:all .15s}
.clci:hover{background:var(--bg2)}
.clci.on{background:var(--sel);border-color:var(--ac)}
.clck{color:var(--fg2);white-space:pre;font-size:.85rem;line-height:1.5}
.clci.on .clck{color:var(--ac)}
.clci h4{font-size:.86rem;font-weight:600}
.clci p{font-size:.74rem;color:var(--fg2)}
.clcp{font-size:.8rem;color:var(--warn);white-space:nowrap}
.clcs{border-left:1px solid var(--bd);padding-left:28px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.cst{font-size:.72rem;color:var(--fg2)}
.cst::before{content:'// '}
.meter{font-size:.76rem;color:var(--fg2);display:flex;flex-direction:column;gap:4px}
.meter .mb{display:flex;gap:8px;align-items:center}
.meter .bar{flex:1;height:10px;background:var(--bg2);border-radius:2px;overflow:hidden;position:relative}
.meter .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ac);width:0;transition:width .5s cubic-bezier(.2,.8,.2,1);
  background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.25) 3px 4px)}
.meter.mo .bar i{background-color:var(--cyan)}
.meter b{font-size:1.3rem;font-weight:600;color:var(--fg)}
.meter b em{font-style:normal;font-size:.72rem;color:var(--fg2)}
.clcnote{font-size:.72rem;color:var(--fg2);line-height:1.5}

/* ─── IMPACT CHART ───────────────────────────────────────────────────────── */
.cbx{position:relative}
#gcv{width:100%;display:block}
.ctt{position:fixed;pointer-events:none;background:var(--bg);border:1px solid var(--ac);padding:10px 12px;font-size:.76rem;min-width:200px;opacity:0;transition:opacity .15s;z-index:50;border-radius:4px}
.ctt b{display:block;margin-bottom:6px;color:var(--ac);font-weight:500}
.tr{display:flex;justify-content:space-between;gap:14px;color:var(--fg2)}
.tr span:last-child{color:var(--fg)}
.cleg{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.cli{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--fg1);cursor:pointer;user-select:none;padding:4px 10px;border:1px solid var(--bd);border-radius:4px;transition:opacity .2s,border-color .2s}
.cli:hover{border-color:var(--ac)}
.cli.off{opacity:.35}
.cll{width:18px;height:3px;display:inline-block}
.cll.gy{background:var(--fg2)}.cll.bl{background:var(--cyan)}.cll.go{background:var(--ac)}
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:18px}
.csti{border:1px solid var(--bd);border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.csti b{font-size:1.5rem;font-weight:600;color:var(--ac)}
.csti span{font-size:.72rem;color:var(--fg2);line-height:1.5}
.csti .blk{font-size:.9rem;color:var(--ac);letter-spacing:1px;line-height:1}
.csrc{margin-top:12px;font-size:.68rem;color:var(--fg2);line-height:1.7}
.csrc a{color:var(--fg1)}
.cnote{text-align:center;font-size:.68rem;color:var(--fg2);margin-top:10px}

/* ─── STATS ──────────────────────────────────────────────────────────────── */
.stg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0}
.sti{padding:18px 22px;border-right:1px solid var(--bd)}
.sti:last-child{border-right:none}
.stn{display:block;font-size:1.9rem;font-weight:700;color:var(--fg);line-height:1.1}
.stl{font-size:.72rem;color:var(--fg2);display:block;margin:4px 0 8px}
.stbar{font-size:.8rem;letter-spacing:1px;color:var(--ac);white-space:pre;line-height:1}
.stbar i{font-style:normal;color:var(--bg3)}

/* ─── SKILLS (neofetch + audit) ──────────────────────────────────────────── */
.nfg{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start}
.nfart{font-size:clamp(8px,.9vw,11px);line-height:1.15;white-space:pre;color:var(--ac);text-shadow:0 0 14px var(--glow)}
.nfk{font-size:.82rem;line-height:1.75}
.nfk .nfu{color:var(--ac);font-weight:600}.nfk .nfu i{color:var(--fg2);font-style:normal}
.nfk .hr{color:var(--fg2)}
.nfk dl{display:grid;grid-template-columns:auto 1fr;column-gap:14px}
.nfk dt{color:var(--warn);white-space:nowrap}
.nfk dd{color:var(--fg1)}
.nfk dd i{font-style:normal;color:var(--fg2)}
.pal{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.pal button{width:34px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.25);position:relative;transition:transform .15s}
.pal button:hover{transform:scale(1.15)}
.pal button::after{content:attr(data-hex);position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-size:.62rem;color:var(--fg);background:var(--bg);border:1px solid var(--bd);padding:1px 5px;border-radius:3px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .15s}
.pal button:hover::after{opacity:1}
.palnote{font-size:.7rem;color:var(--fg2);margin-top:6px}
.audg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 24px;font-size:.8rem}
.aud{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:8px 0;border-bottom:1px dashed var(--bd)}
.aud span{color:var(--fg1)}
.aud b{color:var(--ok);font-weight:500;text-align:right;white-space:nowrap}
.aud .bar{grid-column:1/-1;height:4px;background:var(--bg2);border-radius:2px;overflow:hidden}
.aud .bar i{display:block;height:100%;width:0;background:var(--ok);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.audnote{font-size:.7rem;color:var(--fg2);margin-top:12px;line-height:1.6}
.skg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.72rem;padding:2px 8px;border:1px solid var(--bd);border-radius:3px;color:var(--fg1)}
.tag.on{border-color:var(--ac);color:var(--ac)}

/* ─── ABOUT ──────────────────────────────────────────────────────────────── */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.at p{color:var(--fg1);margin-bottom:12px;font-size:.9rem}
.at p::before{content:'> ';color:var(--ac)}
.ahs{margin-top:18px;display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--fg1)}
.ahl::before{content:'[ok] ';color:var(--ok)}
.vidw .wb{padding:0;height:100%;min-height:300px;background:var(--bg)}
.vidw video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;filter:saturate(.8)}

/* ─── CONTACT ────────────────────────────────────────────────────────────── */
.cf{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:5px}.fg.f{grid-column:1/-1}
.fg label{font-size:.72rem;color:var(--fg2)}
.fg label::after{content:':'}
.fg input,.fg textarea,.fg select{background:var(--bg);border:1px solid var(--bd);border-radius:4px;color:var(--fg);padding:10px 12px;font-size:.86rem;outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical;appearance:none;width:100%}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
.fg textarea{min-height:120px}
.fg select{background-image:linear-gradient(45deg,transparent 50%,var(--fg2) 50%),linear-gradient(135deg,var(--fg2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.hn{display:none}
.mailhd{font-size:.78rem;color:var(--fg2);border-bottom:1px dashed var(--bd);padding-bottom:12px;margin-bottom:16px;line-height:1.8}
.mailhd b{color:var(--fg1);font-weight:500;display:inline-block;min-width:60px}
.mailhd a{color:var(--ac)}
.fstat{grid-column:1/-1;font-size:.8rem;padding:10px 12px;display:none;border-radius:4px}
.fstat.ok{display:block;border:1px solid var(--ok);color:var(--ok)}
.fstat.err{display:block;border:1px solid var(--err);color:var(--err)}
.csb{grid-column:1/-1;justify-content:center}
.cif{display:flex;gap:28px;justify-content:center;margin-top:20px;flex-wrap:wrap;font-size:.76rem}
.cit span{color:var(--fg2)}.cit span::after{content:': '}
.cit p{display:inline;color:var(--fg)}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--bd);padding:26px 0;font-size:.76rem;color:var(--fg2)}
.fi{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.fl{color:var(--fg)}.fl b{color:var(--ac)}
.fls{display:flex;gap:16px;list-style:none;flex-wrap:wrap}
.fls a{color:var(--fg1)}
.fls a::before{content:'./'; color:var(--fg2)}

/* ─── OVERLAYS ───────────────────────────────────────────────────────────── */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:1500;display:none;align-items:center;justify-content:center;padding:20px}
.ov.open{display:flex}
.ov .win{width:100%;max-width:760px;max-height:calc(100vh - 60px);display:flex;flex-direction:column;animation:spawn .18s ease-out}
.ov .wb{overflow-y:auto}
@keyframes spawn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.moc{margin-left:8px;color:var(--fg2);padding:0 4px}
.moc:hover{color:var(--err)}
.mod h2{font-size:1.1rem;margin-bottom:18px;color:var(--ac)}
.mod h3{font-size:.85rem;margin:16px 0 4px;color:var(--warn)}
.mod p,.mod li{font-size:.82rem;color:var(--fg1)}
.mod ul{list-style:none}.mod li::before{content:'- ';color:var(--fg2)}
/* help */
.hk{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 28px;font-size:.82rem}
.hk div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--bd);color:var(--fg1)}
.hk div span:last-child{white-space:nowrap}
/* palette */
#pal .win{max-width:560px;align-self:flex-start;margin-top:8vh}
#palin{width:100%;background:var(--bg);border:none;border-bottom:1px solid var(--bd);padding:14px 16px;font-size:1rem;outline:none;color:var(--fg)}
#palin::placeholder{color:var(--fg2)}
#pall{max-height:50vh;overflow-y:auto}
.pli{display:flex;align-items:center;gap:12px;padding:9px 16px;font-size:.84rem;color:var(--fg1);cursor:pointer;border-bottom:1px solid var(--bd)}
.pli:last-child{border-bottom:none}
.pli.on,.pli:hover{background:var(--sel);color:var(--fg)}
.pli .k{color:var(--fg2);font-size:.72rem;margin-left:auto;white-space:nowrap}
.pli .ic{color:var(--ac);width:16px;text-align:center}
/* terminal drawer */
#tdr{position:fixed;left:0;right:0;bottom:30px;height:min(360px,55vh);z-index:1200;background:var(--bg);border-top:1px solid var(--ac);
  transform:translateY(110%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:0 -20px 60px rgba(0,0,0,.4)}
#tdr.open{transform:none}
#tout{flex:1;overflow-y:auto;padding:14px 16px;font-size:.8rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
#tout .p{color:var(--ok)}#tout .p b{color:var(--ac);font-weight:500}
#tout .o{color:var(--fg1)}#tout .e{color:var(--err)}#tout .h{color:var(--warn)}#tout .d{color:var(--fg2)}
#tout a{color:var(--cyan)}
.tin{display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--bd);background:var(--bg1)}
.tin .p{color:var(--ok);white-space:nowrap}.tin .p b{color:var(--ac);font-weight:500}
#tinp{flex:1;background:none;border:none;outline:none;color:var(--fg);font-size:.86rem}
.tsg{display:flex;gap:6px;padding:6px 16px;overflow-x:auto;background:var(--bg1);border-top:1px solid var(--bd);scrollbar-width:none}
.tsg button{font-size:.7rem;color:var(--fg1);border:1px solid var(--bd);border-radius:3px;padding:2px 8px;white-space:nowrap}
.tsg button:hover{border-color:var(--ac);color:var(--ac)}
/* cookie notification (mako) */
#cbanner{position:fixed;top:44px;right:12px;z-index:1400;width:min(380px,calc(100vw - 24px));animation:spawn .25s ease-out}
#cbanner .wb{padding:14px 16px;font-size:.78rem;color:var(--fg1)}
#cbanner .btns{margin-top:12px}
#cblink{color:var(--ac);cursor:pointer;text-decoration:underline}
/* toast */
#toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%) translateY(20px);background:var(--bg1);border:1px solid var(--ac);color:var(--fg);font-size:.78rem;padding:8px 14px;border-radius:4px;opacity:0;transition:all .25s;z-index:1600;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1;transform:translateX(-50%)}

/* ─── REVEAL ─────────────────────────────────────────────────────────────── */
.rev{opacity:0;transform:translateY(16px) scale(.995);transition:opacity .6s,transform .6s}
.rev.vis{opacity:1;transform:none}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media(max-width:980px){
  .hg{grid-template-columns:1fr}
  #lh .wb{min-height:260px}
  .clcw{grid-template-columns:1fr}
  .clcs{border-left:none;padding-left:0;border-top:1px solid var(--bd);padding-top:20px}
  .ag{grid-template-columns:1fr}
  .skg{grid-template-columns:1fr}
  .nfg{grid-template-columns:1fr}
  .nfart{display:none}
  .tb-c{display:none}
  .bb-c{display:none}
  .wsb span{display:none!important}
  .sti{border-right:none;border-bottom:1px solid var(--bd)}
}
@media(max-width:600px){
  body{font-size:13px;padding-top:40px}
  #top{height:34px}
  .wsb{padding:0 8px}
  .tbb{padding:0 9px}
  .tbb .lbl{display:none}
  #clock{display:none}
  .cf{grid-template-columns:1fr}.fg.f{grid-column:1}
  #term .wb{min-height:0}
  .logo-ascii{font-size:2.05vw}
  .boot{min-height:0}
  .hhint{display:none}
  .ws{padding:40px 0}
  .btns .btn{width:100%;justify-content:center}
  #tdr{height:60vh}
  .glog{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .beam,.cur,.lamp,.star{animation:none}
  #wall{display:none}
}