:root { color-scheme: dark; --bg:#111622; --panel:#1a2334; --line:#354359; --fg:#eef3fa; --muted:#acbad0; --accent:#83d7ff; --good:#a4eab5; }
* { box-sizing:border-box; }
body { margin:0; font-family: "Microsoft Yahei", system-ui, sans-serif; background:var(--bg); color:var(--fg); line-height:1.7; }
.wrap { max-width:1120px; padding:24px 20px 70px; margin:auto; }
a { color:var(--accent); }
.crumb { color:var(--muted); font-size:14px; margin-bottom:18px; }
h1 { font-size:clamp(26px,4vw,36px); line-height:1.3; margin:8px 0 12px; }
h2 { font-size:21px; margin:32px 0 12px; }
h3 { margin:12px 0 8px; font-size:17px; }
p, li { color:var(--muted); }
.lead { max-width:850px; font-size:16px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:15px; }
.card, .panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; }
.card { display:flex; flex-direction:column; gap:7px; }
.card p { margin:2px 0; }
.card a { font-weight:700; font-size:18px; }
.tag { display:inline-block; width:fit-content; border:1px solid var(--line); border-radius:20px; padding:1px 10px; font-size:12px; color:var(--muted); }
.tag.ready { color:var(--good); border-color:#38785b; }
.two { display:grid; grid-template-columns:2fr 1fr; gap:15px; align-items:start; }
.canvas-wrap { background:#090d16; border:1px solid var(--line); padding:8px; border-radius:10px; }
canvas { display:block; width:100%; aspect-ratio:900/420; image-rendering:pixelated; background:#0e1625; }
.canvas-wrap canvas { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
canvas:fullscreen { width:100vw; height:100vh; object-fit:contain; background:#090d16; }
.mobile-help { display:none; border:1px solid #3b7780; color:#c6edf2; background:#142e38; padding:8px 11px; border-radius:8px; margin:8px 0; font-size:14px; }
label.control { display:flex; align-items:center; gap:9px; padding:7px 0; cursor:pointer; color:var(--fg); }
input[type="checkbox"] { width:18px; height:18px; accent-color:#7bd0ee; }
input[type="range"] { max-width:220px; width:100%; }
button, .btn { color:var(--fg); background:#345273; border:1px solid #6384a6; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:14px; }
button:hover, .btn:hover { background:#42678c; }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.small { font-size:13px; color:var(--muted); }
.output { font-family:Consolas, monospace; font-size:13px; background:#0e1626; color:#c8e9fb; padding:10px; border:1px solid #324158; border-radius:8px; margin-top:12px; min-height:55px; white-space:pre-wrap; overflow-wrap:anywhere; }
.steps { padding-left:21px; }
.progress { color:var(--good); font-size:13px; }
code, kbd { color:#ffcb94; }
kbd { border:1px solid var(--line); background:#172c42; padding:1px 6px; border-radius:4px; }
details.source { margin:14px 0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 16px; }
details.source summary { cursor:pointer; font-weight:700; }
details.source pre { background:#101a29; border:1px solid #34435a; border-radius:8px; overflow-x:auto; padding:12px; font-size:13px; line-height:1.55; }
details.source pre code { color:#c8e1f6; }
@media(max-width:740px) { .two { grid-template-columns:1fr; } .wrap { padding:15px 12px 45px; } }
@media (pointer:coarse) {
  .mobile-help { display:block; }
  .canvas-wrap { padding:4px; margin-left:-9px; margin-right:-9px; }
  button { min-height:44px; }
  label.control { min-height:45px; }
  input[type="checkbox"] { width:22px; height:22px; }
  input[type="range"] { height:38px; max-width:100%; }
}
@media(max-width:740px) {
  .wrap { padding:12px 13px 64px; }
  h1 { font-size:26px; }
  h2 { font-size:19px; }
  .card, .panel { padding:15px; }
  .canvas-wrap { padding:3px; }
  .output { font-size:12px; }
  .crumb { font-size:12px; }
  .row { gap:8px; }
  .lead { font-size:14px; }
}