:root { color-scheme:dark; --green:#8cff66; --bright:#c5ffb5; --dim:#51a840; --ink:#020702; --line:rgba(140,255,102,.24); font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; } html,body { height:100%; margin:0; overflow:hidden; background:#000; } body { color:var(--green); text-shadow:0 0 7px rgba(113,255,80,.52); }
.crt { position:relative; display:grid; grid-template-rows:auto 1fr auto auto; width:100%; height:100%; padding:clamp(14px,2.4vw,34px); overflow:hidden; background:radial-gradient(ellipse at center,#092609 0%,#031003 53%,#000 100%); isolation:isolate; }.crt::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.19; background:repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 1px,transparent 1px 4px); pointer-events:none; }.scanlines { position:absolute; z-index:4; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.78) 3px 4px); }.crt-glow { position:absolute; z-index:3; inset:0; pointer-events:none; box-shadow:inset 0 0 90px 26px #000,inset 0 0 12px rgba(140,255,102,.25); }
.terminal-bar { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:34px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:clamp(.62rem,1.35vw,.83rem); letter-spacing:.07em; }.terminal-bar p,.terminal-footer { margin:0; }.terminal-mark { color:var(--bright); font-size:.8em; }.terminal-state { color:var(--dim); white-space:nowrap; }.blink { animation:blink .9s steps(1) infinite; }
.terminal { position:relative; min-height:0; overflow:hidden; padding:clamp(16px,3vw,36px) 0 10px; }.output { position:relative; z-index:2; height:100%; max-width:min(900px,80%); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--dim) transparent; padding-right:1rem; font-size:clamp(.76rem,1.55vw,1rem); line-height:1.68; }.output p { margin:0; white-space:pre-wrap; }.bright { color:var(--bright); }.command { color:var(--bright); text-decoration:underline; text-underline-offset:3px; }.reply { color:var(--dim); }.error { color:#c6ff73; }.system-line { color:var(--bright); }
.mascot-zone { position:absolute; z-index:1; width:210px; height:192px; right:5%; bottom:6%; opacity:.88; pointer-events:none; transition:transform 1.55s steps(9,end); }.mascot { position:absolute; margin:0; color:var(--bright); font:700 14px/1 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:-1px; white-space:pre; filter:drop-shadow(0 0 6px rgba(140,255,102,.75)); }.mascot-label { position:absolute; top:162px; left:0; margin:0; color:var(--dim); font-size:9px; letter-spacing:.08em; white-space:nowrap; }.mascot-zone.is-noticing .mascot { animation:notice .22s steps(2) 5; }.mascot-zone.is-writing .mascot { animation:write .13s steps(2) 9; }.mascot-zone.is-idle .mascot { animation:wobble .8s steps(3) 2; }.mascot-zone.is-walking .mascot { animation:stride .24s steps(2) infinite; }
.prompt { position:relative; z-index:5; display:flex; align-items:center; min-height:44px; border-top:1px solid var(--line); padding-top:13px; font-size:clamp(.86rem,1.8vw,1.05rem); }.prompt-symbol { margin-right:.7rem; color:var(--bright); }.prompt input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--bright); caret-color:transparent; font:inherit; text-shadow:inherit; }.input-cursor { width:.56ch; height:1.1em; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink .9s steps(1) infinite; }.prompt:focus-within .input-cursor { animation:none; opacity:.9; }.terminal-footer { position:relative; z-index:5; padding-top:11px; color:var(--dim); font-size:clamp(.58rem,1.2vw,.72rem); letter-spacing:.05em; }.terminal-footer span { color:#32732d; }
@keyframes blink { 50% { opacity:0; } } @keyframes notice { 50% { transform:translateY(-5px); } } @keyframes write { 50% { transform:translateX(3px); } } @keyframes wobble { 50% { transform:rotate(-2deg) translateY(-2px); } } @keyframes stride { 50% { transform:translateY(-3px); } }
@media (max-width:580px) { .crt { padding:15px; }.terminal-bar { align-items:flex-start; }.terminal-state { display:none; }.output { max-width:100%; font-size:.76rem; padding-right:.2rem; }.mascot-zone { right:1%; bottom:2%; transform:scale(.76); transform-origin:bottom right; opacity:.46; }.prompt { min-height:51px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .mascot-zone { transition:none; } }