:root{--bg:#07090d;--panel:#0b1118;--fg:#b8ffd6;--dim:#5d7f6e;--a:#00ff9c;--b:#ff2bd6;--c:#19e3ff;--line:#17402f;--glow:0 0 8px;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#eef3ee;--panel:#fff;--fg:#14302a;--dim:#5b7468;--a:#007a4d;--b:#b0008f;--c:#00748a;--line:#b9d3c4;--glow:0 0 0}}
:root[data-theme="light"]{--bg:#eef3ee;--panel:#fff;--fg:#14302a;--dim:#5b7468;--a:#007a4d;--b:#b0008f;--c:#00748a;--line:#b9d3c4;--glow:0 0 0}
:root[data-theme="dark"]{--bg:#07090d;--panel:#0b1118;--fg:#b8ffd6;--dim:#5d7f6e;--a:#00ff9c;--b:#ff2bd6;--c:#19e3ff;--line:#17402f;--glow:0 0 8px}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 "JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);z-index:9}
a{color:var(--c);text-decoration:none}a:hover{color:var(--b);text-shadow:var(--glow) var(--b)}
nav{position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);border-bottom:1px solid var(--line);display:flex;gap:18px;padding:10px 18px;z-index:5;flex-wrap:wrap;align-items:center}
nav b{color:var(--a);text-shadow:var(--glow) var(--a);margin-right:auto}
nav button{background:none;border:1px solid var(--line);color:var(--dim);font:inherit;padding:2px 8px;cursor:pointer}
main{max-width:920px;margin:0 auto;padding:28px 18px 80px}
h1{font-size:clamp(28px,7vw,56px);margin:.2em 0;color:var(--a);text-shadow:var(--glow) var(--a);letter-spacing:.04em;position:relative}
h1.glitch::before,h1.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden}
h1.glitch::before{color:var(--b);transform:translate(2px,0);clip-path:inset(0 0 60% 0);animation:g1 3s infinite steps(1)}
h1.glitch::after{color:var(--c);transform:translate(-2px,0);clip-path:inset(55% 0 0 0);animation:g1 2.3s infinite steps(1) reverse}
@keyframes g1{0%,90%{opacity:0}92%{opacity:.9}95%{opacity:0}97%{opacity:.8}}
h2{color:var(--b);font-size:18px;margin:48px 0 14px;text-shadow:var(--glow) var(--b)}
h2::before{content:"## ";color:var(--dim)}
.boot{color:var(--dim);white-space:pre-wrap;min-height:6.5em}
.ok{color:var(--a)}
.cursor{display:inline-block;width:.6em;height:1em;background:var(--a);vertical-align:-2px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
pre.art{color:var(--c);font-size:clamp(8px,2.2vw,13px);line-height:1.15;margin:16px 0;overflow-x:auto;text-shadow:var(--glow) var(--c)}
.tag{color:var(--dim)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid var(--line);background:var(--panel);padding:14px;position:relative;transition:.15s}
.card:hover{border-color:var(--a);box-shadow:var(--glow) var(--a);transform:translate(-2px,-2px)}
.card h3{margin:0 0 6px;color:var(--a);font-size:16px}
.card pre{margin:0 0 8px;color:var(--b);font-size:11px;line-height:1.1}
.st{display:inline-block;border:1px solid var(--b);color:var(--b);padding:0 6px;font-size:12px;margin-bottom:8px}
.bar{color:var(--a);letter-spacing:-1px}
.skill{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:4px 0;flex-wrap:wrap}
#term{border:1px solid var(--line);background:var(--panel);padding:12px}
#out{white-space:pre-wrap;max-height:260px;overflow:auto;color:var(--fg)}
#cmd{display:flex;gap:8px;margin-top:8px;align-items:center}
#cmd span{color:var(--a)}
#in{flex:1;background:none;border:0;outline:0;color:var(--fg);font:inherit;min-width:0}
footer{color:var(--dim);margin-top:60px;border-top:1px solid var(--line);padding-top:12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* mobile */
html{-webkit-text-size-adjust:100%}
pre.art{font-size:clamp(9px,2.9vw,13px)}
#in{font-size:16px}
#out{overflow-wrap:anywhere}
.chips{display:none;flex-wrap:wrap;gap:8px;margin-top:10px}
@media (pointer:coarse),(max-width:600px){.chips{display:flex}}
.chips button{background:none;border:1px solid var(--line);color:var(--c);font:inherit;padding:8px 12px;min-height:44px;cursor:pointer}
.chips button:active{border-color:var(--a);color:var(--a)}
p a{display:inline-block;padding:6px 4px}
@media (max-width:600px){
 body{font-size:14px}
 main{padding:20px 14px 60px}
 nav{padding:8px 14px;gap:4px 6px}
 nav b{flex:1 0 100%;margin:0 0 2px}
 nav a,nav button{padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}
 h2{margin:36px 0 12px}
 #cmd{min-height:44px}
 #out{max-height:200px}
 footer{font-size:12px}
}
@media (hover:none){.card:hover{transform:none;box-shadow:none}}