:root { color-scheme: dark; --ink:#eef0ee; --muted:#a6aba7; --dim:#747a76; --accent:#d8ff6a; --panel:rgba(12,14,13,.76); --line:rgba(238,240,238,.22); --line-bright:rgba(238,240,238,.5); --mono:"JetBrains Mono","Fira Code","SFMono-Regular",Consolas,monospace; }
* { box-sizing:border-box; }
html { min-width:320px; height:100%; overflow:hidden; background:#070807; }
body { height:100%; min-height:100svh; margin:0; overflow:hidden; color:var(--ink); font-family:var(--mono); background:linear-gradient(90deg,rgba(5,7,6,.18),rgba(5,7,6,.42)),url("../assets/manga-background.png") center/cover fixed; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); mix-blend-mode:screen; }
button,a { font:inherit; }
.desktop-shell { width:min(1180px,calc(100% - 5rem)); height:100svh; margin:0 auto; padding:6vh 0; display:grid; grid-template-rows:minmax(126px,18vh) minmax(0,1fr); gap:14px; overflow:hidden; }
.window { min-width:0; overflow:hidden; border:1px solid var(--line-bright); border-radius:5px; background:var(--panel); box-shadow:0 18px 45px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(15px) saturate(.55); -webkit-backdrop-filter:blur(15px) saturate(.55); }
.titlebar { height:38px; padding:0 13px; display:grid; grid-template-columns:80px 1fr 80px; align-items:center; background:rgba(5,7,6,.66); border-bottom:1px solid var(--line); font-size:.76rem; color:var(--muted); }
.titlebar p { margin:0; text-align:center; } .window-index { text-align:right; color:var(--dim); } .window-controls { display:flex; gap:7px; } .window-controls span { width:9px; height:9px; border:1px solid var(--muted); border-radius:50%; } .window-controls span:first-child { background:var(--ink); }
.terminal-menu { min-height:calc(100% - 38px); display:flex; align-items:center; gap:18px; padding:18px 28px; }
.prompt,.command span { color:var(--accent); } .menu-items { display:flex; flex-wrap:wrap; gap:10px 12px; }
.menu-link { appearance:none; padding:8px 11px; border:0; border-bottom:1px solid transparent; color:var(--muted); background:transparent; text-decoration:none; cursor:pointer; transition:color .16s,background .16s,border-color .16s; }
.menu-link::before { content:"./"; color:var(--dim); } .menu-link:hover,.menu-link:focus-visible { color:var(--ink); background:rgba(255,255,255,.07); outline:none; } .menu-link.active { color:var(--accent); border-color:var(--accent); } .external span { font-size:.75em; }
.content-window { position:relative; min-height:0; } .view { height:calc(100% - 68px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:clamp(28px,5vw,68px) clamp(25px,7vw,84px); animation:reveal .24s ease-out; } @keyframes reveal { from { opacity:0; transform:translateY(7px); } }
.command { margin:0 0 3.2rem; color:var(--muted); font-size:.85rem; } .ascii-name { font-weight:800; font-size:clamp(3.3rem,10vw,7.4rem); line-height:.82; letter-spacing:-.1em; color:transparent; -webkit-text-stroke:1px var(--ink); opacity:.94; }
.cursor { display:inline-block; width:.11em; height:.72em; margin-left:.16em; background:var(--accent); -webkit-text-stroke:0; animation:blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity:0; } }
h1 { max-width:780px; margin:2.2rem 0 1rem; font-size:clamp(1.55rem,3vw,2.5rem); line-height:1.2; font-weight:500; letter-spacing:-.04em; }
.lede { max-width:720px; color:#c3c7c4; font-family:system-ui,sans-serif; font-size:1.03rem; line-height:1.75; }
.facts { max-width:720px; margin-top:2.5rem; border-top:1px solid var(--line); } .facts div { display:grid; grid-template-columns:130px 1fr; gap:20px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.82rem; } .facts dt { color:var(--dim); } .facts dd { margin:0; color:var(--muted); }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.project-list { margin-top:2.5rem; border-top:1px solid var(--line); } .project-list article { display:grid; grid-template-columns:42px 1fr auto; gap:18px; align-items:start; padding:18px 0; border-bottom:1px solid var(--line); } .project-list article>span { color:var(--dim); } .project-list h2 { margin:0 0 5px; font-size:1rem; font-weight:500; } .project-list p { margin:0; color:var(--muted); font-family:system-ui,sans-serif; } .project-list b { color:var(--accent); font-size:.7rem; font-weight:400; }
.email-link { display:inline-block; margin-top:2rem; padding-bottom:8px; border-bottom:1px solid var(--accent); color:var(--accent); text-decoration:none; font-size:clamp(1rem,2vw,1.35rem); } .email-link:hover { color:white; border-color:white; } .fine-print { margin-top:1.5rem; color:var(--dim); font-size:.75rem; }
.statusbar { position:absolute; inset:auto 0 0; height:30px; display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:center; padding:0 14px; border-top:1px solid var(--line); background:rgba(5,7,6,.7); color:var(--dim); font-size:.68rem; } .statusbar span:first-child { color:#111; background:var(--accent); width:max-content; padding:2px 7px; }
@media (max-width:650px) { body { background-position:62% center; background-attachment:scroll; } .desktop-shell { width:calc(100% - 24px); height:100svh; padding:12px 0; grid-template-rows:auto minmax(0,1fr); gap:10px; } .titlebar { grid-template-columns:55px 1fr 55px; padding:0 9px; } .window-index { font-size:.65rem; } .terminal-menu { align-items:flex-start; gap:8px; padding:14px; } .menu-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:4px; } .menu-link { text-align:left; padding:9px 7px; font-size:.8rem; } .view { padding:28px 20px 56px; } .command { margin-bottom:2.2rem; } .ascii-name { font-size:clamp(3.2rem,21vw,5.2rem); } .facts div { grid-template-columns:90px 1fr; gap:10px; } .project-list article { grid-template-columns:28px 1fr; } .project-list b { grid-column:2; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }