:root{
  color-scheme:light dark;
  --paper:#f4efe4;--sheet:#fbf8f1;--well:#ebe5d7;
  --ink:#1e1b16;--ink-2:#595247;--ink-3:#877f71;
  --rule:#ddd4c3;--rule-2:#c2b7a2;
  --ribbon:#9e3326;--ribbon-hover:#852a1f;--on-ribbon:#fbf3ea;
  --ok:#476a3a;--warn:#93560f;--danger:#a1352a;
  --shadow:0 18px 50px rgb(40 30 15 / .2);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"URW Palladio L",Georgia,serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media(prefers-color-scheme:dark){:root{
  --paper:#1a1814;--sheet:#23201a;--well:#2b2720;
  --ink:#ebe4d5;--ink-2:#b4ab9a;--ink-3:#857d6f;
  --rule:#353027;--rule-2:#4b4438;
  --ribbon:#d4705c;--ribbon-hover:#e0836f;--on-ribbon:#1a1410;
  --ok:#9cbf86;--warn:#e0a55a;--danger:#e8846f;
  --shadow:0 18px 50px rgb(0 0 0 / .55);
}}

/* Base */
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font:16px/1.5 var(--serif);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:2px solid var(--ribbon);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Buttons */
button{font-family:var(--sans);font-size:14px;line-height:1.2;border:1px solid transparent;background:none;border-radius:3px;padding:9px 14px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
button:hover{background:var(--well)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--ribbon);color:var(--on-ribbon);font-weight:600;padding:11px 18px}
button.primary:hover{background:var(--ribbon-hover)}
button.secondary{border-color:var(--ink-2)}
.quiet{color:var(--ink-2)}
.quiet:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.text-button{padding:0;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px}
.text-button:hover{background:none;color:var(--ink)}
.small-button{font-size:13px;padding:7px 12px;border-color:var(--rule-2)}
.danger{color:var(--danger)}

/* Masthead */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(5vw,20px);padding-top:max(14px,env(safe-area-inset-top));border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:8px}
.wordmark{font-size:25px;line-height:1;letter-spacing:-.01em}
.wordmark span{letter-spacing:.02em;color:var(--ribbon)}
.tagline{font-style:italic;font-size:15px;color:var(--ink-3);padding-left:12px;border-left:1px solid var(--rule)}
.topbar nav{display:flex;align-items:center;gap:2px}

/* Page */
main{max-width:1240px;margin:0 auto;padding:0 max(5vw,20px)}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:48px 0 28px}
h1{font-size:46px;line-height:1.05;font-weight:normal;letter-spacing:-.015em}
.lede{margin-top:10px;font-size:18px;font-style:italic;color:var(--ink-2)}
#notice{margin-bottom:20px;padding:12px 16px;border-left:3px solid var(--ok);background:var(--sheet);font-family:var(--sans);font-size:14px;line-height:1.5}
#notice.error{border-left-color:var(--danger)}
.workspace{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:560px;border-top:2px solid var(--ink)}

/* Library column */
.library{display:flex;flex-direction:column;padding:22px 24px 22px 0;border-right:1px solid var(--rule)}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.section-title h2{font-size:20px;font-weight:normal;font-variant-caps:all-small-caps;letter-spacing:.08em}
.count{font-family:var(--serif);font-size:15px;color:var(--ink-3)}
.search input{width:100%;padding:8px 2px;border:0;border-bottom:1px solid var(--rule-2);border-radius:0;background:transparent;font-family:var(--sans);font-size:14px}
.search input:focus{outline:none;border-bottom-color:var(--ribbon)}
.games{display:grid;gap:2px;margin:16px 0 24px}
.game-card{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:10px 34px 10px 8px;text-align:left;border-radius:2px;font-family:var(--serif)}
.game-card.active{background:var(--sheet);box-shadow:inset 0 0 0 1px var(--rule)}
.game-card.active::after{content:"";position:absolute;top:-1px;right:12px;width:10px;height:26px;background:var(--ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%)}
.game-card strong{display:block;font-size:16px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.game-card small{display:block;margin-top:3px;font-family:var(--sans);font-size:12.5px;color:var(--ink-3)}
.spine{flex:none;display:grid;place-items:center;width:30px;height:46px;border-radius:2px 3px 3px 2px;color:#f3ead8;font:18px var(--serif);background:linear-gradient(to bottom,transparent 6px,#ffe6b45c 6px 7px,transparent 7px calc(100% - 7px),#ffe6b45c calc(100% - 7px) calc(100% - 6px),transparent calc(100% - 6px)),var(--spine,#6b4a2f);box-shadow:inset 3px 0 0 rgb(0 0 0 / .2),inset -1px 0 0 rgb(255 255 255 / .12)}
.local-note{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule)}
.local-note strong{font-weight:normal;font-size:16px;font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--ink-2)}
.local-note p{margin-top:4px;font-size:14px;font-style:italic;line-height:1.5;color:var(--ink-3)}

/* Detail column */
.detail{min-width:0;padding:28px 0 32px 40px}
.empty{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center}
.fork{width:120px;height:100px;margin-bottom:22px;fill:none;stroke-linecap:round}
.fork .untaken{stroke:var(--rule-2);stroke-width:2;stroke-dasharray:1 6}
.fork .taken{stroke:var(--ink-2);stroke-width:2}
.fork .start{fill:var(--ink-2)}
.fork .end{fill:var(--paper);stroke:var(--rule-2);stroke-width:2}
.fork .here{fill:var(--ribbon)}
.empty h2{font-size:30px;font-weight:normal;letter-spacing:-.01em}
.empty p{max-width:420px;margin:12px 0 24px;font-size:17px;line-height:1.55;color:var(--ink-2)}
.empty small{margin-top:14px;font-family:var(--sans);font-size:13px;color:var(--ink-3)}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}
.identity{margin-bottom:8px;font-family:var(--mono);font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.detail h2{font-size:38px;line-height:1.1;font-weight:normal;letter-spacing:-.015em;overflow-wrap:anywhere}
.detail-sub{margin-top:8px;font-size:16px;font-style:italic;color:var(--ink-2)}
.tabs{display:flex;gap:28px;margin-bottom:16px;border-bottom:1px solid var(--rule)}
.tab{margin-bottom:-1px;padding:8px 0 10px;border-radius:0;border-bottom:2px solid transparent;font-family:var(--serif);font-size:18px;font-variant-caps:all-small-caps;letter-spacing:.07em;color:var(--ink-3)}
.tab:hover{background:none;color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--ink)}
.tab .count{margin-left:3px;letter-spacing:0;font-variant-caps:normal}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.toolbar p{font-size:15px;font-style:italic;color:var(--ink-2)}

/* Saves and versions are drawn as a path: one node per stop. */
.save-list{position:relative;padding-left:30px}
.save-list:has(.no-saves){padding-left:0}
.save-row,.version-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--rule)}
.save-row:last-child,.version-row:last-child{border-bottom:0}
.save-row::before,.version-row::before{content:"";position:absolute;z-index:1;left:-26px;top:20px;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink-3);background:var(--paper)}
.save-row:not(:last-child)::after,.version-row:not(:last-child)::after{content:"";position:absolute;left:-21px;top:26px;bottom:-26px;width:2px;background:var(--rule)}
.save-row.kind-auto::before{left:-25px;top:21px;width:10px;height:10px;border-color:var(--rule-2)}
.save-row:not(.kind-auto)::before{border-color:var(--ribbon);background:var(--ribbon)}
.version-row.is-active::before{border-color:var(--ink);background:var(--ink)}
.save-row strong,.version-row strong{display:block;font-size:17px;font-weight:600;line-height:1.3}
.save-row small,.version-row small{display:block;margin-top:3px;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink-3)}
.compat{display:block;margin-top:4px;font-family:var(--sans);font-size:13px;color:var(--ok)}
.compat.blocked{color:var(--warn)}
.badge{margin-left:6px;padding:0 5px;border:1px solid var(--rule-2);border-radius:2px;font-family:var(--sans);font-size:13px;font-weight:600;font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--ink-3);vertical-align:2px}
.row-actions{flex:none;display:flex;gap:2px}
.row-actions button{padding:6px 10px;font-size:13px;color:var(--ink-2)}
.row-actions .secondary{color:var(--ink)}
.row-actions .danger{color:var(--danger)}
.no-saves{padding:40px 0;font-size:17px;font-style:italic;line-height:1.6;text-align:center;color:var(--ink-2)}
.update-note{max-width:68ch;margin-top:24px;padding:2px 0 2px 16px;border-left:2px solid var(--rule-2);font-size:15px;font-style:italic;line-height:1.6;color:var(--ink-2)}

footer{display:flex;justify-content:space-between;gap:16px;padding:20px 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);font-family:var(--sans);font-size:13px;color:var(--ink-3)}
footer button{font-size:13px}

/* Dialogs */
dialog{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--rule-2);border-radius:4px;background:var(--sheet);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop{background:rgb(20 16 10 / .45)}
#modal-body{padding:28px 30px 24px}
dialog h2{margin-bottom:12px;font-size:28px;font-weight:normal;letter-spacing:-.01em}
dialog p,dialog li{margin-bottom:10px;font-size:16px;line-height:1.6;color:var(--ink-2)}
dialog ol{margin:0 0 12px;padding-left:22px}
dialog li{margin-bottom:8px}
dialog li::marker{color:var(--ribbon);font-variant-numeric:oldstyle-nums}
dialog .form-row{display:grid;gap:6px;margin:16px 0}
dialog label{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-2)}
dialog input,dialog select,dialog textarea{width:100%;padding:10px 12px;border:1px solid var(--rule-2);border-radius:3px;background:var(--paper);font-family:var(--sans);font-size:15px}
dialog input[type=checkbox]{width:auto;accent-color:var(--ribbon)}
dialog textarea{height:280px;font:12px/1.6 var(--mono);white-space:pre;tab-size:2}
.modal-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.modal-error{margin:10px 0;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--danger)}
.modal-error:empty{margin:0}
.metadata{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;font-family:var(--sans);font-size:13px;color:var(--ink-3)}
.variable-grid{display:grid;gap:8px;max-height:300px;overflow:auto;padding-right:4px}
.variable-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.variable-row label{font-family:var(--mono);font-size:13px;font-weight:normal;overflow-wrap:anywhere}
.variable-row input,.variable-row select{padding:7px 10px;font-size:14px}

/* Reader */
.player{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);background:var(--paper)}
.player-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:56px;padding:8px 16px;border-bottom:1px solid var(--rule)}
#leave-player{justify-self:start}
.now-playing{min-width:0;text-align:center}
.now-playing strong{display:block;overflow:hidden;font-size:18px;font-weight:normal;font-style:italic;white-space:nowrap;text-overflow:ellipsis}
.now-playing span{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-3)}
.reader-actions{justify-self:end;display:flex;align-items:center;gap:12px}
#save-status{font-family:var(--sans);font-size:13px;color:var(--ink-3)}
#runtime{flex:1;min-height:0;background:#fff}
#runtime iframe{display:block;width:100%;height:100%;border:0;background:#fff}
#runtime-status{padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--well);font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--warn)}

@media(max-width:860px){
  .tagline,#save-status{display:none}
  .workspace{grid-template-columns:220px minmax(0,1fr)}
  .detail{padding-left:24px}
  .detail-head{flex-direction:column;gap:16px}
  .save-row,.version-row{flex-direction:column;align-items:flex-start;gap:6px}
  .row-actions{flex-wrap:wrap;margin-left:-10px}
}
@media(max-width:600px){
  .topbar{padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top))}
  .wordmark{font-size:22px}
  .brand img{width:30px;height:30px}
  .topbar nav button{padding:8px;font-size:13px}
  #restore-backup{display:none}
  main{padding:0 16px}
  .intro{display:block;padding:28px 0 20px}
  h1{font-size:34px}
  .lede{font-size:16px}
  .intro .primary{width:100%;margin-top:18px;padding:13px}
  .workspace{display:block}
  .library{padding:16px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .library .search,.local-note{display:none}
  .games{display:flex;gap:8px;margin:0 -16px;padding:2px 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory}
  .game-card{flex:0 0 auto;width:auto;min-width:190px;max-width:240px;scroll-snap-align:start}
  .detail{padding:22px 0}
  .detail h2{font-size:30px}
  .detail-head>.primary{width:100%}
  .empty{padding:36px 0}
  .empty h2{font-size:26px}
  .empty p{font-size:16px}
  .toolbar{align-items:flex-start}
  .player-toolbar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:6px 8px}
  .now-playing strong{font-size:16px}
  .reader-actions button{padding:8px 10px;font-size:13px}
  footer{flex-direction:column;align-items:flex-start;gap:8px}
  #modal-body{padding:22px 20px 18px}
  dialog h2{font-size:24px}
  .metadata{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}