:root{
  /* MunchFiles theme: sky blue on solid deep navy. One theme, always dark. */
  --bg:#0d1520; --card:#141e2b; --raised:#1a2a3d; --ink:#eaf2fb; --muted:#9fb0c4; --soft-ink:#bccadb;
  --line:#24324a; --accent:#7cc4ff; --accent-ink:#08111c; --accent-soft:#2b435a; --accent-text:#b5dcff;
  --dough:#f4eee2; --blush:#ff8fb5;
  --ok:#6ad49a; --ok-soft:#173a26; --bad:#ff8fa3; --bad-soft:#3a1c26;
  --shadow:0 18px 50px -20px #00000099;
  --radius:28px;
  /* Nunito is used when installed; to bundle it, add vendor/fonts/nunito.woff2 (OFL) and an @font-face here. */
  font-family:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* `hidden` must win over component display rules (the empty state used to stay visible) */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{grid-template-columns:minmax(0,1fr);
  margin:0;min-height:100vh;display:grid;place-items:center;color:var(--ink);
  background:var(--bg);
}
main{width:min(720px,100% - 32px);padding:56px 0 40px}

header{text-align:center;margin-bottom:28px}
.brand{font-size:clamp(2.6rem,9vw,4.6rem);font-weight:900;letter-spacing:-.05em;line-height:1}
.brand span{color:var(--accent)}
.tagline{margin:.6rem 0 0;color:var(--muted);font-size:1.2rem;font-weight:600}
a.brand{color:inherit;text-decoration:none}
.brand.small{font-size:1.6rem;display:inline-block;margin-bottom:10px}
h1.storefront{margin:0;font-size:clamp(2.2rem,8vw,3.6rem);font-weight:900;letter-spacing:-.04em;line-height:1.05}
h1.storefront span[aria-hidden]{color:var(--accent)}

/* drop zone */
.drop{
  position:relative;background:var(--card);border:2.5px dashed var(--line);border-radius:var(--radius);
  padding:28px;min-height:380px;box-shadow:var(--shadow);
  transition:border-color .2s,transform .2s,background .2s;outline:none;
}
.drop:focus-visible{border-color:var(--accent);border-style:solid}
.drop.hot{border-color:var(--accent);border-style:solid;background:var(--accent-soft);transform:scale(1.015)}
#empty{min-height:320px;display:grid;place-items:center;align-content:center;gap:10px;cursor:pointer;text-align:center}
.cta{font-size:1.5rem;font-weight:800}
.sub{color:var(--muted)}
.sub{font-size:1.05rem}
.sub u{color:var(--ink);font-weight:700;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}

/* mascot: steamed dumpling — idle, munching (hover/drag/converting), confused (crunchy) */
.muncher{width:132px;height:132px;margin-bottom:6px;animation:bob 3.2s ease-in-out infinite;overflow:visible}
.muncher .dough{fill:var(--dough)}
.muncher .pleats{fill:none;stroke:#000;stroke-opacity:.13;stroke-width:2.6;stroke-linecap:round}
.muncher .ink{fill:#08111c}
.muncher .line{fill:none;stroke:#08111c;stroke-linecap:round}
.muncher .shine{fill:#fff}
.muncher .blush{fill:var(--blush);fill-opacity:.7}
.muncher .tongue{fill:var(--blush)}
.muncher .crumb{fill:var(--accent)}
.muncher .drip{fill:var(--accent-text)}
.muncher .shadow{fill:#000;fill-opacity:.3}
.muncher .f-idle .eye{transform-origin:center;transform-box:fill-box;animation:blink 4.5s infinite}
.muncher .f-munch,.muncher .f-confused{display:none}
#empty:hover .muncher .f-idle,.drop.hot .muncher .f-idle,.drop.munching .mini .f-idle,.drop.crunchy .mini .f-idle{display:none}
#empty:hover .muncher .f-munch,.drop.hot .muncher .f-munch,.drop.munching .mini .f-munch{display:inline}
.drop.crunchy .mini .f-confused{display:inline}
.drop.munching .mini .chew{transform-origin:60px 86px;transform-box:view-box;animation:chew .45s ease-in-out infinite}
.drop.hot .muncher{animation:none;transform:scale(1.08)}
.mini{width:60px;height:60px;margin:0;flex:none;animation:none}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes chew{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}


/* result */
#result{animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.filehead{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.fileinfo{display:grid;gap:4px;min-width:0;flex:1}
.fileinfo strong{font-size:1.3rem;overflow-wrap:anywhere}
.filetag{justify-self:start;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);background:var(--accent-soft);padding:3px 9px;border-radius:99px}
.size{color:var(--muted);font-size:.95rem}

h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:24px 0 10px}
#routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}

.route{
  display:grid;gap:4px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--bg);border:2px solid var(--line);border-radius:18px;padding:16px 18px;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.route:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px -14px var(--accent)}
.route:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.route:disabled{opacity:.55;cursor:progress}
.route strong{font-size:1.25rem;display:flex;align-items:center;gap:8px}
.route .arrow{color:var(--accent);font-weight:900}
.route small{color:var(--muted);font-size:.88rem;line-height:1.4}
.route .benefit{font-weight:700;font-size:.95rem}
.route.preferred{border-color:var(--accent);background:var(--raised)}

/* per-route options (SVG size, PDF resolution, page size) */
.option{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.option legend{float:left;font-weight:700;font-size:.9rem;color:var(--muted);margin-right:10px;padding:0}
.segmented{display:inline-flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label{padding:7px 12px;font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap}
.segmented label+input+label{border-left:2px solid var(--line)}
.segmented input:checked+label{background:var(--accent);color:var(--accent-ink)}
.segmented input:focus-visible+label{outline:3px solid var(--accent);outline-offset:-3px}

/* Pro */
.pro-badge{display:inline-block;font-size:.66rem;font-weight:900;letter-spacing:.08em;padding:2px 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink);vertical-align:middle}
.route .pro-badge{margin-left:auto}
.route[aria-pressed="true"]{border-color:var(--accent);background:var(--raised)}

/* panel under the route cards: shrink options, page board, Pro gate */
.panel{margin-top:12px;padding:18px;border-radius:18px;background:var(--bg);border:2px solid var(--accent-soft);display:grid;gap:14px}
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head strong{font-size:1.1rem}
.panel-head .muted{margin-left:auto}
.panel p{margin:0;line-height:1.5}
.panel-options{display:grid;gap:12px}
.panel .segmented{flex-wrap:wrap}
.muted{color:var(--muted)}
button.primary{
  justify-self:start;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;
  border-radius:12px;padding:11px 18px;border:0;background:var(--accent);color:var(--accent-ink);
}
button.primary:hover:not(:disabled){filter:brightness(1.08)}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.primary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pro-list{margin:0;padding-left:1.2em;line-height:1.6;color:var(--soft-ink)}

.board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;max-height:min(70vh,640px);overflow:auto}
.pg{display:grid;gap:6px;padding:8px;border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:grab}
.pg.dragging{opacity:.4}
.pg-thumb{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:var(--raised)}
.pg-thumb img{max-width:100%;max-height:100%;box-shadow:0 2px 8px #0006;transition:transform .15s}
.pg-blank{width:70%;height:90%;background:#fff;opacity:.15}
.pg-label{font-size:.8rem;font-weight:800;text-align:center;color:var(--soft-ink)}
.pg-tools{display:flex;justify-content:space-between;gap:2px}
.pg-btn{font:inherit;font-size:.85rem;line-height:1;cursor:pointer;border:0;border-radius:8px;padding:6px 0;flex:1;background:transparent;color:var(--soft-ink)}
.pg-btn:hover{background:var(--raised);color:var(--accent-text)}
.pg-btn:focus-visible{outline:2px solid var(--accent)}
.pg.removed .pg-thumb{opacity:.25}
.pg.removed .pg-label{text-decoration:line-through;color:var(--muted)}

.pro{margin-top:28px;padding:22px 24px;border-radius:var(--radius);background:linear-gradient(160deg,var(--raised),var(--card));border:1px solid var(--accent-soft)}
.pro-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pro-head h2{margin:0;font-size:1.2rem;color:var(--ink);text-transform:none;letter-spacing:0}

/* teaching pass: privacy line, steps, capability map, changes, dev path */
.for-touch{display:none}
@media (hover:none) and (pointer:coarse){.for-mouse{display:none!important}.for-touch{display:inline}}
.privacy{margin:10px 0 0;font-size:.9rem;color:var(--soft-ink)}
.step-title{margin:0 0 10px}
#routes-heading{margin-top:22px}
.route .pro-badge{margin-left:auto}
.caps{margin-top:16px;padding:16px 20px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.caps dl{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin:0;font-size:.92rem}
.caps dl>div{display:grid;gap:2px}
.caps dt{font-weight:800;color:var(--ink)}
.caps dd{margin:0;color:var(--soft-ink);font-family:inherit;line-height:1.45}
.pro-mark{font-size:.66rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:1px 6px;border-radius:99px;border:1px solid var(--accent-soft);color:var(--accent-text);vertical-align:1px}
.pro-mark:hover{border-color:var(--accent)}
.changes-box h3{margin:0 0 4px;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.changes-box .changes{margin:0;padding-left:1.2em;color:var(--soft-ink);font-size:.92rem;line-height:1.5}
.pro-lede{margin:12px 0 10px;color:var(--ink);font-size:1.02rem;line-height:1.5}
.pro .pro-list{margin:0 0 10px}
.pro-terms{margin:0 0 14px;color:var(--soft-ink);font-size:.92rem}
.pro-action{display:grid;gap:8px;justify-items:start}
.pro-note{margin:0;color:var(--accent-text);font-size:.92rem;line-height:1.45}
.pro-note:empty{display:none}
.dev-path{text-align:center;margin:28px 0 0;color:var(--muted);font-size:.9rem}
.dev-path a{color:var(--accent-text);text-decoration:none;font-weight:700}
.dev-path a:hover{text-decoration:underline}
details.tech p{margin:10px 0 0;font-size:.88rem}
details.tech .ghost{margin-top:10px}

/* crunchy outcome */
#crunchy{display:grid;gap:6px;margin-top:14px;background:var(--bg);border:2px dashed var(--line);border-radius:18px;padding:18px}
#crunchy strong{font-size:1.15rem}
#crunchy span{color:var(--muted);line-height:1.45}
#crunchy .reason{justify-self:start;font-size:.78rem;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:2px 8px}
#crunchy button{justify-self:start;margin-top:6px}


button.ghost{
  font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;white-space:nowrap;
  border-radius:12px;padding:9px 14px;border:2px solid var(--line);background:var(--card);color:var(--ink);
  transition:border-color .15s;
}
button.ghost:hover{border-color:var(--accent)}

#status{margin:14px 0 0;min-height:1.4em;font-weight:600}
#status:empty{margin:0;min-height:0}
#status.ok,#status.bad,#status.busy{padding:10px 14px;border-radius:12px}
#status.ok{color:var(--ok);background:var(--ok-soft)}
#status.bad{color:var(--bad);background:var(--bad-soft)}
#status.busy{color:var(--muted);background:var(--bg)}

details{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
summary{cursor:pointer;font-weight:700;color:var(--muted);font-size:.9rem}
dl{display:grid;grid-template-columns:100px 1fr;gap:8px;margin:12px 0 0;font-size:.88rem}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere;font-family:ui-monospace,monospace}

/* chewing while converting */
.drop.munching{border-color:var(--accent);border-style:solid}


.shelves{margin-top:36px;scroll-margin-top:24px}
.shelves h2{margin:0 0 14px;text-align:center}
.shelf-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shelf{padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.shelf h3{margin:0 0 10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-text)}
.shelf ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.shelf a,.shelf [aria-current]{display:block;padding:7px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem}
.shelf a:hover,.shelf a:focus-visible{background:var(--raised);color:var(--accent-text)}
.shelf [aria-current]{background:var(--accent-soft);color:var(--accent-text)}

.headline{margin:.7rem auto 0;max-width:30ch;font-size:clamp(1.2rem,3.6vw,1.55rem);font-weight:800;line-height:1.25;color:var(--ink);letter-spacing:-.01em}

.guide{margin-top:36px;padding:24px 26px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);line-height:1.6;color:var(--soft-ink)}
.guide h2{margin:26px 0 8px;font-size:1.15rem;color:var(--ink);text-transform:none;letter-spacing:0}
.guide h2:first-child{margin-top:0}
.guide p{margin:0 0 10px}
.guide ol,.guide ul{margin:0 0 10px;padding-left:1.4em}
.guide li{margin:4px 0}
.steps li::marker{color:var(--accent);font-weight:800}
.changes li::marker{color:var(--muted)}
.faq{display:grid;gap:8px}
.faq details{margin:0;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:1rem}
.faq details p{margin:8px 0 0}

.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--soft-ink);text-decoration:none}
.crumbs a:hover{color:var(--accent-text);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:700}
.jump{margin:12px 0 0;font-size:.95rem}
.jump a{color:var(--accent-text);text-decoration:none;font-weight:700}
.jump a:hover{text-decoration:underline}

/* developers page */
main.wide{width:min(960px,100% - 32px)}
.doc{padding:26px 30px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);line-height:1.6;color:var(--soft-ink)}
.doc h2{margin:34px 0 10px;font-size:1.35rem;color:var(--ink);text-transform:none;letter-spacing:0;scroll-margin-top:16px}
.doc h3{margin:24px 0 10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-text)}
.doc p,.doc ul{margin:0 0 12px}
.doc li{margin:4px 0}
.doc a{color:var(--accent-text)}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--ink);overflow-wrap:anywhere}
.doc pre{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);overflow-x:auto}
.doc pre code{border:0;padding:0;background:none;font-size:.84rem;line-height:1.55;white-space:pre;overflow-wrap:normal}
.doc table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:.9rem;display:block;overflow-x:auto}
.doc th,.doc td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line)}
.doc td:first-child code{white-space:nowrap}
.doc th{color:var(--muted);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.doc details{margin:0 0 10px;border-top:0;padding-top:0}
.doc details p{margin-top:8px;line-height:2}
.mission{color:var(--ink);font-size:1.08rem;font-weight:600}
.work{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.work li{display:grid;align-content:start;gap:3px;margin:0;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.work b{color:var(--ink)}
.work span{font-size:.92rem}
@media (max-width:600px){.work{grid-template-columns:1fr}}
.timeline{list-style:none;padding:0;margin:4px 0 14px;display:grid;gap:0;border-left:2px solid var(--accent-soft)}
.timeline li{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:6px 0 6px 16px;position:relative}
.timeline li::before{content:'';position:absolute;left:-6px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.timeline b{color:var(--ink)}
.status{padding:12px 16px;border-radius:14px;background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent)}
.ops{display:grid;gap:12px}
.op{padding:16px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line);scroll-margin-top:16px}
.op-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.op-head h4{margin:0;font-size:1rem}
.op p{margin:0 0 10px;color:var(--ink)}
.op dl{grid-template-columns:120px 1fr;font-size:.88rem;margin:0}
.op dd{font-family:inherit;line-height:1.55}
.tier{font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--soft-ink)}
.tier-pro{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

footer{text-align:center;margin-top:28px;color:var(--muted);font-size:.9rem}
footer a{color:var(--soft-ink);text-decoration:none}
footer a:hover{color:var(--accent-text);text-decoration:underline}

@media (max-width:600px){
  main{padding-top:36px}
  .drop{padding:20px;min-height:340px}
  .filehead{flex-wrap:wrap}
  .filehead .ghost{width:100%}
  .shelf-groups,.caps dl{grid-template-columns:1fr}
  .guide{padding:20px 18px}
  .pro{padding:20px 18px}
  .doc{padding:20px 16px}
  .op dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}