/* dw101.net — dev work 101
   终端 / Dev 暗色风。零构建，纯 HTML + CSS。 */

:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --border:#30363d;
  --text:#c9d1d9; --muted:#8b949e; --green:#3fb950; --blue:#58a6ff; --orange:#f0883e;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans: system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.7;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(63,185,80,.08), transparent 40%),
    radial-gradient(circle at 85% 8%, rgba(88,166,255,.08), transparent 38%);
  background-attachment:fixed;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(63,185,80,.30); }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:62rem; margin:0 auto; padding:0 1.5rem; }

/* 光标 */
.cursor{ color:var(--green); animation:blink 1.05s steps(1) infinite; }   /* 闪烁，用于中间终端窗口 */
.cursor-static{ color:var(--green); }                                     /* 静态，用于顶部 logo / 标题 */
@keyframes blink{ 50%{ opacity:0; } }

/* 顶部导航 */
nav{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);
  background:rgba(13,17,23,.72); border-bottom:1px solid var(--border);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:58px; }
.brand{ font-family:var(--mono); font-weight:700; font-size:1.05rem; }
.brand b{ color:var(--green); }
.navlinks{ display:flex; gap:24px; font-family:var(--mono); font-size:.85rem; color:var(--muted); }
.navlinks a:hover{ color:var(--green); }

/* Hero */
header.hero{ padding:5rem 0 4.5rem; }
.prompt{ font-family:var(--mono); color:var(--muted); font-size:.9rem; margin-bottom:.8rem; }
.prompt .g{ color:var(--green); }
h1{ font-family:var(--mono); font-size:clamp(1.9rem,5vw,3rem); margin:.1rem 0; font-weight:800; letter-spacing:.01em; }
h1 b{ color:var(--green); }
.gloss{ font-family:var(--mono); font-size:.92rem; color:var(--muted); margin:.55rem 0 .9rem; letter-spacing:.02em; }
.gloss b{ color:var(--text); font-weight:600; }
.lead{ font-family:var(--mono); color:var(--blue); font-size:1rem; margin:.2rem 0; }
.lead .c{ color:var(--muted); }
.sub{ color:var(--muted); font-size:1rem; max-width:34rem; margin-top:.5rem; }
.sub b{ color:var(--text); font-weight:600; }
.cta{ margin-top:1.8rem; display:flex; gap:14px; flex-wrap:wrap; }
.btn{ font-family:var(--mono); font-size:.9rem; padding:.62rem 1.15rem; border-radius:8px; border:1px solid var(--border); transition:.15s; }
.btn.primary{ background:var(--green); color:#06210f; border-color:var(--green); font-weight:700; }
.btn.primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn.ghost:hover{ border-color:var(--green); color:var(--green); }

/* 区块 */
section{ padding:4.5rem 0; border-top:1px solid var(--border); }
.label{ font-family:var(--mono); color:var(--muted); font-size:.82rem; letter-spacing:.04em; margin-bottom:.4rem; }
.label .g{ color:var(--green); }
h2{ font-family:var(--mono); font-size:1.8rem; margin:.1rem 0 1.4rem; font-weight:700; }
h2 .dim{ color:var(--muted); font-size:1rem; }

/* 终端窗口（项目空状态 + 关于共用） */
.term{ background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; max-width:46rem; }
.term .bar{ display:flex; gap:7px; padding:11px 15px; border-bottom:1px solid var(--border); background:var(--panel2); align-items:center; }
.term .bar i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.term .bar span{ font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-left:8px; }
.term .body{ padding:20px 22px; font-family:var(--mono); font-size:.92rem; }
.term .body p{ margin:.25rem 0; }
.term .g{ color:var(--green); }
.term .out{ color:var(--text); }
.term .cmt{ color:var(--green); }
.term .dim{ color:var(--muted); }

/* 关于：窗口内用无衬线正文 */
.about-body{ padding:22px 24px; }
.about-body p{ margin:.2rem 0 1rem; font-family:var(--sans); }
.about-body .cmt{ font-family:var(--mono); color:var(--green); font-size:.86rem; }
.about-body b{ color:var(--text); }

/* 页脚 */
footer{ border-top:1px solid var(--border); padding:2.4rem 0 3rem; color:var(--muted); font-family:var(--mono); font-size:.82rem; }
footer .g{ color:var(--green); }

/* 404 */
.notfound{ min-height:72vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem 1.5rem; }
.notfound .code{ font-family:var(--mono); font-size:clamp(3rem,12vw,6rem); font-weight:800; color:var(--green); margin:0; }
.notfound p{ font-family:var(--mono); color:var(--muted); margin:.6rem 0 1.6rem; }
.notfound .out{ color:var(--text); }

/* 无障碍：尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cursor{ animation:none; }
  *{ transition:none !important; }
}
