:root{--a:#39ff7a; /* default accent – the builder / exported style.css overrides this at the very end */
--bg:color-mix(in srgb,var(--a) 3%,#050505);--fg:color-mix(in srgb,var(--a) 16%,#ebebeb);--mut:color-mix(in srgb,var(--a) 22%,#8c8c8c);--card:color-mix(in srgb,var(--a) 6%,#060606);--line:color-mix(in srgb,var(--a) 18%,#0e0e0e);--code:color-mix(in srgb,var(--a) 35%,#fff); /* every shade is mixed from the accent, so changing the theme recolours the whole site */
--glow:0 0 12px color-mix(in srgb,var(--a) 45%,transparent)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
.s{background:var(--bg);color:var(--fg);font:16px/1.65 ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;min-height:100vh}
.s::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)} /* CRT scan-lines */
.s ::selection{background:var(--a);color:#000}
.s nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:10px 24px;font-size:14px}
.s nav a{color:var(--fg);text-decoration:none}
.s nav a:hover{color:var(--a);text-shadow:var(--glow)}
.s nav b{color:var(--a)}
.s nav .ps{color:var(--a)} /* prompt colour: guest@portfolio */
.s nav .sep{color:var(--mut)}
.s nav .jump{margin-left:12px;color:var(--mut);border:1px solid var(--line);padding:0 8px;border-radius:4px}
.s header{max-width:980px;margin:auto;padding:48px 24px 12px}
.s header.hero{padding-top:72px}
.s .nm{font-size:clamp(26px,5vw,44px);font-weight:700;margin:0;color:var(--a);text-shadow:var(--glow);word-break:break-word}
.s .hero .nm{font-size:clamp(30px,6vw,56px)}
.s .nm::before{content:"> ";opacity:.6} /* terminal prompt before name */
.s .nm::after{content:"\258C";margin-left:6px;animation:bl 1s steps(1) infinite} /* blinking cursor */
@keyframes bl{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.s .nm::after{animation:none}}
.s .tg{font-size:15px;color:var(--mut);margin:6px 0 0}
.s .tg::before{content:"// "} /* comment-style subtitle */
.s .blk{max-width:980px;margin:auto;padding:12px 24px}
.s .blk>p{max-width:760px;margin:0;white-space:pre-wrap}
.s h2{font-size:24px;margin:12px 0 8px;color:var(--a)}
.s h2::before{content:"## ";opacity:.6} /* markdown-style heading */
.s .rail{margin-top:14px} /* wrapper around a horizontally scrolling row of cards */
.s .rw{position:relative}
.s .grid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:14px;padding:14px 14px 16px;margin:-14px -14px 0;scrollbar-width:thin;scrollbar-color:var(--a) var(--line);overscroll-behavior-x:contain} /* one row, scroll sideways (padding leaves room for the hover glow) */
.s .grid::-webkit-scrollbar{height:8px}
.s .grid::-webkit-scrollbar-track{background:var(--line);border-radius:4px}
.s .grid::-webkit-scrollbar-thumb{background:var(--a);border-radius:4px}
.s .grid>.card{flex:0 0 min(300px,82vw);scroll-snap-align:start} /* fixed card width so they line up in the row */
.s .arr{display:none;position:absolute;top:calc(50% - 20px);z-index:3;width:38px;height:38px;padding:0;align-items:center;justify-content:center;border:1px solid var(--a);background:var(--bg);color:var(--a);border-radius:50%;font:inherit;font-size:22px;line-height:1;cursor:pointer;box-shadow:var(--glow)} /* ‹ › scroll buttons */
.s .arr:hover{background:var(--a);color:#000}
.s .arr.pv{left:-14px}
.s .arr.nx{right:-14px}
.s .rail.l .arr.pv,.s .rail.r .arr.nx{display:flex} /* show each arrow only when there is more to scroll that way */
.s .hint{display:none;text-align:right;color:var(--mut);font-size:12px}
.s .rail.can .hint{display:block} /* "scroll sideways" hint only when cards overflow */
.s .card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:.15s}
.s a.card:hover{border-color:var(--a);box-shadow:var(--glow);transform:translateY(-2px)}
.s .card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:saturate(.7) contrast(1.05)}
.s .cb{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.s h3{margin:0;font-size:18px}
.s h3::before{content:"\25B8 ";color:var(--a)} /* ▶ arrow before card titles */
.s .ds{color:var(--mut);margin:0;white-space:pre-wrap;font-size:14px}
.s .tags{display:flex;flex-wrap:wrap;gap:6px}
.s .tag{border:1px solid var(--a);color:var(--a);border-radius:3px;padding:0 8px;font-size:12px}
.s .more{color:var(--a);margin-top:auto;font-size:14px}
.s .btn{display:inline-block;border:1px solid var(--a);color:var(--a);padding:5px 16px;border-radius:4px;text-decoration:none;font-weight:700;transition:.15s}
.s a.btn:hover{background:var(--a);color:#000;box-shadow:var(--glow)}
.s figure{margin:8px 0}
.s figure img{max-width:100%;border:1px solid var(--line);border-radius:6px;display:block}
.s figcaption{color:var(--mut);font-size:13px;margin-top:6px}
.s .ph{border:1px dashed var(--line);color:var(--mut);padding:40px;text-align:center;border-radius:6px} /* placeholder when no image */
.s .term{border:1px solid var(--line);border-radius:6px;background:color-mix(in srgb,var(--a) 2%,#000);overflow:hidden}
.s .term .bar{display:flex;gap:6px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line);color:var(--mut);font-size:12px}
.s .term .bar i{width:10px;height:10px;border-radius:50%;background:var(--line)} /* fake traffic-light dots */
.s .term .bar .lang{margin-left:6px}
.s .term .bar .cp{margin-left:auto;background:none;border:1px solid var(--line);color:var(--mut);font:inherit;font-size:11px;border-radius:3px;padding:0 8px;cursor:pointer} /* copy-code button */
.s .term .bar .cp:hover{border-color:var(--a);color:var(--a)}
.s .term .bar .op{margin-left:auto;color:var(--a);text-decoration:none} /* "open full ↗" link on HTML projects */
.s .term .bar .op:hover{text-shadow:var(--glow)}
.s .proj iframe{display:block;width:100%;border:0;background:#fff} /* embedded .html project */
.s .proj .ph{border:0;border-radius:0}
.s .blk>.meta{margin-top:6px}
.s.nocrt::after{display:none} /* "CRT lines" switched off */
@keyframes up{from{opacity:0;transform:translateY(8px)}}
.s .blk,.s header{animation:up .45s ease backwards} /* gentle fade-in when a page loads */
@media(prefers-reduced-motion:reduce){.s .blk,.s header{animation:none}}
.s pre.code{margin:0;padding:14px 16px;overflow:auto;white-space:pre;color:var(--code);font:inherit;font-size:14px;tab-size:2}
.s .note{border-left:3px solid var(--a);background:var(--card);padding:10px 16px;white-space:pre-wrap;border-radius:0 6px 6px 0}
.s .note::before{content:"[!] ";color:var(--a)} /* callout prefix */
.s .fl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);background:var(--card);padding:10px 14px;border-radius:6px}
.s .meta{color:var(--mut);font-size:13px}
.s .pdf iframe{width:100%;height:80vh;border:1px solid var(--line);border-radius:6px;background:#fff;margin-top:10px}
.s .ft{max-width:980px;margin:48px auto 0;padding:24px;color:var(--mut);font-size:13px;border-top:1px solid var(--line)}
.s .ft::before{content:"$ ";color:var(--a)} /* footer looks like a shell prompt */

/* chosen accent colour (last, so it overrides the default at the top) */
:root{--a:#ff7a1a}