:root {
  color-scheme: light;
  --page:#f8f8f5; --surface:#fff; --subtle:#f4f4f0; --ink:#171816; --muted:#5e625a;
  --line:#dddfd7; --accent:#c5f660; --green:#527425; --focus:#587c26; --error:#a82427;
  font: 15px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#151615; --surface:#1e201d; --subtle:#262924; --ink:#f1f2ed; --muted:#afb5a8;
  --line:#373c34; --green:#c5f660; --focus:#c5f660; --error:#ff9a9a;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --page:#151615; --surface:#1e201d; --subtle:#262924; --ink:#f1f2ed; --muted:#afb5a8;
    --line:#373c34; --green:#c5f660; --focus:#c5f660; --error:#ff9a9a;
  }
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--page); color:var(--ink) }
[hidden] { display:none!important }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
a { color:inherit; text-decoration:none }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--focus); outline-offset:3px }
h1,h2,h3,p,dl,dd { margin:0 }
svg { width:17px; height:17px; display:block; flex:none }
.shell { max-width:1192px; margin:auto; padding-inline:32px }
.masthead { border-bottom:1px solid var(--line); background:var(--surface) }
.top { display:flex; align-items:center; gap:52px; min-height:69px }
.wordmark { display:inline-flex; align-items:center; gap:9px; font-size:22px; font-weight:760; letter-spacing:-.06em; white-space:nowrap }
.wordmark span { margin-left:-8px; color:var(--green) }
nav,.top-right { display:flex; align-items:center; gap:23px }
nav a { color:var(--muted); font-size:13px; font-weight:580 }
nav a:hover,nav .current { color:var(--ink) }
.top-right { margin-left:auto; gap:13px }
.local,.tag,.eyebrow,.art-label,.art-bar,.art-float,.foot-limit { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; font-weight:650; letter-spacing:.09em }
.local,.tag { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; white-space:nowrap; color:var(--muted) }
.local i,.eyebrow>span { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px #667d37 }
.icon-button { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink) }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:48px; align-items:center; padding-block:61px 63px; border-bottom:1px solid var(--line) }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--muted); letter-spacing:.15em }
.hero-copy { container-type:inline-size }
h1 { font-size:clamp(36px,6vw,80px); font-size:clamp(31px,13.4cqw,82px); font-weight:760; line-height:.95; letter-spacing:-.09em; margin:17px 0 21px }
h1 em { font-style:normal; color:var(--muted); font-weight:650 }
.hero-copy p { max-width:400px; color:var(--muted); font-size:16px }
.hero-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); color:var(--ink); background:var(--surface); padding:10px 14px; border-radius:8px; font-weight:650; font-size:13px; min-height:42px; transition:background .15s, transform .15s }
.button:hover,.icon-button:hover { background:var(--subtle) }
.button:active { transform:translateY(1px) }
.button.primary { color:#171816; background:var(--accent); border-color:#adce6a }
.button.primary:hover { background:#d5fa8c }
.button.small { min-height:34px; padding:6px 10px; font-size:12px }
.button:disabled { opacity:.48; cursor:default }
.hero-art { position:relative; overflow:hidden; min-height:315px; display:grid; align-content:space-between; border-radius:17px; border:1px solid #343830; background:#1a1d18; background-image:radial-gradient(#4a5141 1px,transparent 1px),radial-gradient(ellipse at 50% 45%,#303a24,transparent 65%); background-size:17px 17px,100% 100%; padding:18px; color:#c6cebc }
.art-label { display:flex; justify-content:space-between; align-items:center; z-index:1 }
.bottom { color:#aeb8a1 }
.grid-art { position:absolute; inset:0; display:grid; place-items:center; transform:translate(-3px,0) }
.art-card { width:55%; min-width:180px; height:49%; border-radius:10px; border:1px solid #737e64; background:#242a20; transform:rotate(-9deg) }
.art-back { position:absolute; transform:translate(14px,-12px) rotate(9deg); background:repeating-linear-gradient(0deg,#30372a 0 1px, #22281e 1px 12px); opacity:.76 }
.art-front { z-index:1; box-shadow:0 16px 35px #1115; display:flex; flex-direction:column; overflow:hidden }
.art-bar { display:flex; gap:5px; align-items:center; padding:9px; background:#30392b; font-size:8px }
.art-bar b { height:4px; width:4px; border-radius:50%; background:#95a78c }
.art-bar span { margin-left:auto }
.art-cells { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#4d5846 }
.art-cells i { display:grid; align-items:center; background:#242b21 }
.art-cells i::before { content:""; display:block; height:3px; width:45%; margin-left:11px; background:#798772; border-radius:8px }
.art-cells i:nth-child(4n+2)::before { width:26% }
.art-cells i:nth-child(8) { background:#b8e96a }
.art-cells i:nth-child(8)::before { background:#405529 }
.art-float { position:absolute; z-index:2; top:65%; left:59%; border:1px solid #65745a; padding:8px 9px; border-radius:6px; background:#20291e; color:#e1edda; white-space:nowrap; transform:rotate(6deg) }
.art-float span { color:var(--accent); padding-right:3px }
section[id] { scroll-margin-top:24px }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; padding:29px 0 15px }
.index { color:var(--green) }
h2 { font-size:clamp(24px,4vw,36px); letter-spacing:-.06em; line-height:1.13; font-weight:740; margin-top:5px }
.workspace { border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--surface); box-shadow:0 8px 24px #17181607 }
.workbar,.workfoot,.tools,.pager { padding:10px 15px; display:flex; justify-content:space-between; align-items:center; gap:10px }
.workbar { border-bottom:1px solid var(--line) }
.work-name { display:flex; align-items:center; gap:8px; min-width:0 }
.work-name strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mini-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:7px; background:var(--subtle); flex:none }
.drop { margin:14px; padding:24px 12px; display:grid; justify-items:center; text-align:center; background:var(--page); border:1px dashed var(--line); border-radius:9px; transition:background .15s,border-color .15s }
.drop.dragging { border-color:var(--focus); background:var(--subtle) }
.drop-icon { display:grid; place-items:center; width:42px; height:42px; background:var(--surface); border:1px solid var(--line); border-radius:10px; margin-bottom:7px }
.drop h3 { font-size:16px; letter-spacing:-.025em }
.drop p { color:var(--muted); font-size:13px; margin:3px 0 11px }
.workfoot { justify-content:start; background:var(--subtle); border-top:1px solid var(--line); color:var(--muted); font-size:12px }
.workfoot svg { width:14px; height:14px }
.foot-limit { margin-left:auto; white-space:nowrap }
.guide { padding-block:20px 46px }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:11px }
.steps article { padding:18px; border:1px solid var(--line); border-radius:11px; background:var(--surface) }
.steps h3 { margin-top:9px; font-size:15px; letter-spacing:-.03em }
.steps p { font-size:13px; color:var(--muted); margin-top:5px }
.footer { display:flex; gap:16px; justify-content:space-between; align-items:center; padding-block:19px; border-top:1px solid var(--line); color:var(--muted); font-size:12px }
.footer .wordmark { color:var(--ink); font-size:18px }
.footer a:last-child:hover { text-decoration:underline }
.stats { display:grid; grid-template-columns:repeat(4,1fr); background:var(--subtle); border-bottom:1px solid var(--line) }
.stats div { padding:10px 15px; border-inline-end:1px solid var(--line); min-width:0 }
.stats div:last-child { border-inline-end:0 }
.stats dt { color:var(--muted); font-size:12px }
.stats dd { font-weight:720; font-size:21px; font-variant-numeric:tabular-nums }
.tools,.tool-actions { display:flex; flex-wrap:wrap; gap:7px }
.search { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:8px; padding:4px 9px; min-height:34px }
.search input { color:var(--ink); border:0; background:transparent; min-width:0; width:150px; font-size:13px }
.search svg { width:14px }
.table-wrap { max-height:420px; overflow:auto; border-block:1px solid var(--line) }
table { border-collapse:separate; border-spacing:0; width:100%; text-align:left; font-size:13px }
th,td { padding:7px 12px; border-bottom:1px solid var(--line); min-width:104px; max-width:310px; overflow:hidden; text-overflow:ellipsis; white-space:pre }
thead th { position:sticky; top:0; z-index:1; background:var(--subtle) }
tr:last-child td,tr:last-child th[scope=row] { border-bottom:0 }
tr:hover td { background:var(--subtle) }
th:first-child { min-width:42px; color:var(--muted); width:42px; font-variant-numeric:tabular-nums }
th button { width:100%; text-align:left; border:0; background:transparent; color:var(--ink); padding:2px; font-weight:650; overflow:hidden; text-overflow:ellipsis }
td.missing { color:var(--muted); background:var(--page) }
.pager { color:var(--muted); font-size:12px; flex-wrap:wrap }
.notice { margin:8px 14px }
.error { color:var(--error); font-size:13px }
dialog { width:min(500px,calc(100% - 24px)); max-height:calc(100% - 24px); border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); padding:19px; box-shadow:0 20px 80px #0004 }
dialog::backdrop { background:#15191499 }
.dialog-head { display:flex; align-items:start; justify-content:space-between; gap:10px }
.dialog-head h2 { font-size:26px }
dialog p { color:var(--muted); margin-block:9px 13px; font-size:14px }
dialog textarea,select { width:100%; color:var(--ink); border:1px solid var(--line); background:var(--page); border-radius:8px; padding:8px; resize:vertical }
dialog textarea { font-family:ui-monospace,monospace; font-size:13px }
.form-row,.dialog-actions { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-top:12px }
.form-row>label:not(.check) { display:grid; gap:4px; font-size:13px; flex:1; min-width:115px }
.check { display:flex; align-items:center; gap:6px; font-size:13px; min-height:35px }
.check input { accent-color:var(--green) }
.protect { margin-top:9px }
.dialog-actions { justify-content:end; margin-top:17px }
.skip { position:absolute; left:8px; top:8px; padding:9px; background:var(--surface); z-index:5; transform:translateY(-150%) }
.skip:focus { transform:none }
@media(max-width:760px) {
  .shell { padding-inline:19px }
  .top { gap:20px }
  .hero { gap:20px; padding-block:40px }
  .hero-art { min-height:246px }
  .art-card { min-width:130px }
}
@media(max-width:550px) {
  .top { min-height:58px }
  nav { gap:13px; margin-left:auto }
  .top-right { margin-left:0 }
  .local { display:none }
  .hero { grid-template-columns:1fr; padding-block:32px }
  .hero-art { min-height:212px }
  .art-card { width:48%; height:55% }
  .steps { grid-template-columns:1fr }
  .footer { flex-wrap:wrap }
  .footer>span { order:3; flex-basis:100% }
  .stats div { padding:7px 5px }
  .stats dt { font-size:10px }
  .stats dd { font-size:17px }
}
@media(max-width:350px) {
  nav a { white-space:nowrap }
  nav a:first-child,.section-head .tag { display:none }
  .workbar .button { white-space:nowrap }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important } }