:root{
  --sunk:#32241A; --ground:#3B2C22; --surface-2:#44342A; --surface-3:#4E3D31; --surface-4:#59473A; --surface-5:#655243;
  --rule:#5A483A; --rule-2:#6C594A;
  --text:#F7EFE2; --text-dim:#D6C7B3; --text-far:#B8A791;
  --apricot:#E3A97A; --sage:#8FA79E; --olive:#7D8C5C; --rust:#B0523A;
  --burnt:#CE7B3A; --ochre:#C9A24A; --pine:#42563F;
  --serif:"Iowan Old Style","Palatino Linotype","Hoefler Text",Georgia,"Noto Serif","DejaVu Serif",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --measure:34rem;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--serif);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
canvas{display:block;width:100%;height:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--apricot);outline-offset:2px}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
figure{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--text-dim)}
.far{color:var(--text-far)}

/* ---------------------------------------------------------------- the gate */
#gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--ground);z-index:60;padding:1.5rem;margin:0}
#gate.gone{display:none}
.panel{width:min(30rem,100%);border:1px solid var(--rule-2);background:var(--surface-2);padding:2.4rem 2.2rem 2rem;box-shadow:0 2rem 4rem rgba(0,0,0,.55);transition:opacity .5s ease,border-color .5s ease,background-color .5s ease,box-shadow .5s ease}
#gate.starting .panel{opacity:0;border-color:transparent;background:transparent;box-shadow:none}
#gate.starting .panel .keep{opacity:1}
.panel .keep{transition:opacity .5s ease}
.archname{font-size:2rem;line-height:1.1;margin-bottom:.5rem}
.door{color:var(--text-dim);font-size:.98rem;margin:1rem 0 1.6rem;max-width:26rem}
.pwrow{display:flex;gap:.6rem;align-items:center}
#pw{flex:1;min-width:0;background:var(--surface-3);border:1px solid var(--rule-2);color:var(--text);padding:.6rem .75rem;font-family:var(--sans);font-size:.95rem}
.go{border:1px solid var(--rule-2);background:var(--surface-3);padding:.6rem 1.1rem;font-family:var(--sans);font-size:.92rem}
.go:hover{border-color:var(--text-far)}
.pwnote{font-family:var(--sans);font-size:.8rem;color:var(--text-far);margin-top:.7rem}
.pwerr{font-family:var(--sans);font-size:.85rem;color:var(--rust);margin-top:.7rem;min-height:1.2em}
.signin-key{position:fixed;right:1rem;bottom:1rem;width:2rem;height:2rem;display:grid;place-items:center;color:var(--rule-2);z-index:61;transition:color .2s ease}
.signin-key:hover,.signin-key:focus-visible{color:var(--text-far)}
.signin-key svg{width:1rem;height:1rem}

/* ------------------------------------------------------------ running head */
#head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;padding:.6rem clamp(1rem,4vw,2.5rem);background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule);transition:opacity .9s ease}
body[data-lights="down"] #head{opacity:.12}
body[data-lights="down"] #head:hover{opacity:1}
#head .hname{font-size:.95rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.benchlink,.signout{margin-left:auto;flex:0 0 auto}
.benchlink + .signout{margin-left:0}
.signout{display:flex}
.benchlink,.signout button{display:block;font-family:var(--sans);font-size:.74rem;line-height:1.5;color:var(--text-far);text-decoration:none;padding:.2rem .4rem;opacity:.7}
.benchlink:hover,.signout button:hover{color:var(--text-dim);opacity:1}
.switch{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.switch .lbl{font-family:var(--sans);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-far)}
.switch a{font-family:var(--sans);font-size:.78rem;padding:.2rem .6rem;border:1px solid var(--rule);color:var(--text-far);text-decoration:none}
.switch a[aria-current="true"]{color:var(--text);border-color:var(--rule-2);background:var(--surface-3)}

/* ------------------------------------------------------------- family page */
#family{max-width:min(72rem,100%);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem) 10rem}
.opening{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:2.5rem;align-items:start;padding:3.5rem 0 2rem}
@media (max-width:820px){.opening{grid-template-columns:1fr;gap:1.5rem;padding-top:2rem}}
.subject{font-size:clamp(2.1rem,5vw,3rem);line-height:1.05}
.subject-el{font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--text-dim);margin-top:.2rem}
.subject-facts{font-family:var(--sans);font-size:.8rem;color:var(--text-far);margin-top:.9rem}
.intro{margin-top:1.4rem;max-width:var(--measure);color:var(--text-dim);white-space:pre-line}
.frontis img{width:100%;border:1px solid var(--rule-2);box-shadow:0 1rem 2rem rgba(0,0,0,.4)}
.frontis figcaption{font-family:var(--sans);font-size:.75rem;color:var(--text-far);margin-top:.5rem}
.castkey{display:flex;flex-wrap:wrap;gap:1rem;padding:1.2rem 0 2.4rem;border-bottom:1px solid var(--rule)}
.castkey .who{display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.85rem;color:var(--text-dim)}
.dot{width:1.35rem;height:1.35rem;border-radius:50%;background:var(--spk);flex:0 0 auto;overflow:hidden;display:block}
.dot img{width:100%;height:100%;object-fit:cover;display:block}

.rec{padding:3.2rem 0;border-bottom:1px solid var(--rule);transition:opacity .9s ease;scroll-margin-top:3rem}
.rec:last-of-type{border-bottom:0}
body[data-lights="down"] .rec:not(.playing){opacity:.16}
.rec-head{display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:2rem;align-items:start}
@media (max-width:820px){.rec-head{grid-template-columns:1fr;gap:1rem}}
.rec-el{font-size:clamp(1.4rem,3.2vw,1.9rem);line-height:1.15}
.rec-en{font-size:1rem;color:var(--text-dim);margin-top:.15rem}
.rec-note{margin-top:.8rem;max-width:var(--measure);color:var(--text-dim);font-size:.98rem;white-space:pre-line}
.rec-meta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem;font-family:var(--sans);font-size:.76rem;color:var(--text-far);align-items:center}
.rec-photo img{width:100%;border:1px solid var(--rule-2);box-shadow:0 .7rem 1.6rem rgba(0,0,0,.4)}
.rec-photo figcaption{font-family:var(--sans);font-size:.72rem;color:var(--text-far);margin-top:.4rem}
.wavewrap{display:flex;align-items:center;gap:.9rem;margin:1.6rem 0 .4rem}
.playbtn{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--rule-2);background:var(--surface-3);display:grid;place-items:center;flex:0 0 auto}
.playbtn:hover{border-color:var(--text-far)}
.playbtn svg{width:.9rem;height:.9rem;fill:var(--text)}
.wave{flex:1;height:2.2rem;min-width:0;cursor:pointer}
.wavetime{font-family:var(--mono);font-size:.75rem;color:var(--text-far);white-space:nowrap;font-variant-numeric:tabular-nums}

.lines{margin-top:1.6rem;max-width:46rem}
.line{padding:.5rem 0;transition:opacity .9s ease,font-size .9s ease;cursor:pointer}
.line .who{display:flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;color:var(--spk);margin-bottom:.2rem}
.line .who i{width:.5rem;height:.5rem;border-radius:50%;background:var(--spk);display:block}
.line.asking .spoken{font-family:var(--sans);font-size:.94rem;color:var(--text-dim);line-height:1.55}
.spoken{font-size:1.08rem;line-height:1.62;white-space:pre-line;transition:font-size .9s ease}
.english{font-size:.95rem;line-height:1.55;color:var(--text-dim);margin-top:.25rem;white-space:pre-line}
body[data-lights="down"] .line{opacity:.1}
body[data-lights="down"] .line.now{opacity:1}
body[data-lights="down"] .line.now .spoken{font-size:1.22rem}
.blank{color:var(--text-far);font-style:italic;font-size:.92rem}

.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1.6rem;padding:3rem 0}
.plate img{width:100%;border:1px solid var(--rule-2);box-shadow:0 .6rem 1.4rem rgba(0,0,0,.4)}
.plate .pno{font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;color:var(--text-far);margin-top:.5rem}
.plate figcaption{font-family:var(--sans);font-size:.78rem;color:var(--text-dim);margin-top:.15rem}
.closing{max-width:var(--measure);color:var(--text-dim);padding:1rem 0;white-space:pre-line}

#vignette{position:fixed;inset:0;pointer-events:none;z-index:25;opacity:0;transition:opacity 1.4s ease;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 34%,rgba(0,0,0,.6) 100%)}
body[data-lights="down"] #vignette{opacity:1}

/* -------------------------------------------------------------- the dock */
#transport{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:1rem;padding:.55rem clamp(1rem,4vw,2.5rem);background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--rule);transition:background-color .7s ease,border-color .7s ease}
#transport[hidden]{display:none}
#transport.wayin{z-index:62;background:transparent;border-top-color:transparent;pointer-events:none}
#transport > .tgroup,#transport > .naming,#transport > #tTime,#transport > #tFocus{transition:opacity .7s ease}
#transport.wayin > :not(#tw){opacity:0}
.tgroup{display:flex;align-items:center;gap:.15rem;flex:0 0 auto}
.tb{width:2rem;height:2rem;display:grid;place-items:center;color:var(--text-dim);border-radius:50%;transition:color .14s ease,background-color .14s ease}
.tb:hover{color:var(--text);background:var(--surface-3)}
.tb svg{width:1.05rem;height:1.05rem;display:block}
.tb .arc{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.tb .ten{font-family:var(--sans);font-size:5.6px;fill:currentColor;font-weight:600}
.tb .solid{fill:currentColor}
.speed{background:none;border:0;color:var(--text-far);font-family:var(--sans);font-size:.72rem;margin-left:.3rem;cursor:pointer}
.speed:hover{color:var(--text-dim)}
#tFocus{margin-left:auto;border:1px solid var(--rule-2);border-radius:0;color:var(--apricot)}
#tFocus:hover{background:var(--surface-3)}
#tFocus[hidden]{display:none}
#transport .naming{min-width:0;flex:0 1 14rem;cursor:pointer;display:block;text-decoration:none}
#transport .t-el{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#transport .t-en{display:block;font-family:var(--sans);font-size:.72rem;color:var(--text-far);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tw{flex:1;height:1.7rem;min-width:0;cursor:pointer}
@media (max-width:900px){#transport .naming{flex-basis:10rem}}
@media (max-width:700px){#transport{flex-wrap:wrap;row-gap:.35rem}#transport .naming{flex:1 1 5rem}#tw{flex:1 1 100%;order:9;height:1.4rem}}
@media (max-width:480px){#tTime{display:none}#transport{column-gap:.6rem}.tb{width:1.8rem;height:1.8rem}}

.gowork{font-family:var(--sans);font-size:.78rem;padding:.2rem .7rem;border:1px solid var(--rule-2);color:var(--text-dim);background:var(--surface-3);text-decoration:none;display:inline-block}
.gowork:hover{color:var(--text);border-color:var(--text-far)}
.gowork.primary{color:var(--text);border-color:var(--apricot)}

/* --------------------------------------------------------------- workbench */
.benchpage{font-size:16px}
#bench{display:grid;grid-template-columns:15rem minmax(0,1fr);min-height:100vh}
@media (max-width:900px){#bench{grid-template-columns:1fr}}
#rail{border-right:1px solid var(--rule);background:var(--sunk);padding:1rem .9rem 8rem;position:sticky;top:0;height:100vh;overflow:auto}
@media (max-width:900px){#rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule);padding-bottom:1rem}#rail.collapsed .railbody{display:none}}
.railtoggle{display:none;font-family:var(--sans);font-size:.8rem;color:var(--text-dim);padding:.3rem 0}
@media (max-width:900px){.railtoggle{display:block}}
.railhead{font-family:var(--sans);font-size:.68rem;letter-spacing:.09em;color:var(--text-far);margin:.2rem 0 .7rem}
.railnav a.railhead{font-size:.68rem;letter-spacing:.09em;color:var(--text-far);margin:0}
.railrow{display:block;width:100%;text-align:left;padding:.55rem .5rem;border:1px solid transparent}
.railrow:hover{background:var(--surface-3)}
#savestate{font-family:var(--sans);font-size:.7rem;letter-spacing:.04em;color:var(--text-far);margin:0 0 .35rem;transition:color .2s ease}
#savestate[data-state="writing"],#savestate[data-state="waiting"]{color:var(--text-dim)}
#savestate[data-state="problem"]{color:var(--rust)}
body.reordering{cursor:grabbing;user-select:none}
body.reordering .railrow{cursor:grabbing}
.railrow[aria-current="true"]{background:var(--surface-3);border-color:var(--rule-2)}
.railrow .rt{font-size:.92rem;line-height:1.25;display:block}
.railrow .rt-en{font-family:var(--sans);font-size:.72rem;color:var(--text-far);display:block}
.cover{margin-top:.4rem;height:1.5rem}
.covernums{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.64rem;color:var(--text-far);margin-top:.15rem}
.railnav{margin-bottom:1rem;border-bottom:1px solid var(--rule);padding-bottom:.8rem;display:grid;gap:.15rem}
.railnav a,.railnav button{text-align:left;padding:.4rem .5rem;font-family:var(--sans);font-size:.85rem;color:var(--text-dim);text-decoration:none;display:block}
.railnav a:hover,.railnav button:hover{background:var(--surface-3);color:var(--text)}
.railnav [aria-current="true"]{color:var(--text);background:var(--surface-3)}
.railtop{margin-bottom:1.1rem}
.gowork[aria-current="true"]{color:var(--text);background:var(--surface-4);border-color:var(--rule-2)}
.railfoot{margin-top:.8rem}

#work{padding:1.4rem clamp(1rem,3vw,2rem) 11rem;min-width:0}
.workhead{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.3rem}
.workhead h2{font-size:1.5rem}
.workhead .wh-en{color:var(--text-dim);font-size:.95rem}
.workhead .editbtn{margin-left:auto}
.facts{font-family:var(--sans);font-size:.82rem;color:var(--text-dim);display:grid;gap:.3rem;margin:.2rem 0 .8rem}
.facts .note{font-family:var(--serif);font-size:.98rem;max-width:var(--measure);white-space:pre-line}
.facts figure{display:flex;gap:.8rem;align-items:flex-start;margin:.3rem 0 0}
.facts figure img{width:6rem;border:1px solid var(--rule-2);display:block}
.facts figcaption{font-size:.76rem;color:var(--text-far)}
.photoedit{display:flex;gap:.8rem;align-items:flex-start}
.photoedit img{width:7rem;border:1px solid var(--rule-2);flex:0 0 auto;display:block}
.photoedit .pf{flex:1;display:grid;gap:.4rem;min-width:0}
.formfoot{display:flex;justify-content:flex-end;margin-top:.8rem}
.sitephotos{display:grid;gap:.6rem}
.sitephoto{display:flex;gap:.8rem;align-items:flex-start;padding:.6rem;border:1px solid var(--rule);background:var(--surface-3)}
.sitephoto img{width:5rem;border:1px solid var(--rule-2);display:block;flex:0 0 auto}
.sitephoto .pf{flex:1;display:grid;gap:.4rem;min-width:0}
.flows{display:flex;flex-wrap:wrap;gap:.15rem 1.5rem;margin:1.2rem 0 .4rem;font-family:var(--sans);font-size:.82rem;color:var(--text-dim)}
.flow{display:flex;align-items:baseline;gap:.4rem}
.flow .left{font-family:var(--mono);font-size:.72rem;color:var(--text-far)}
.flow.done{opacity:.45}
.flowhint{font-family:var(--sans);font-size:.82rem;color:var(--text-far);margin:.5rem 0 1rem}
/* The strip stays with her: stuck to the top of the window and over the page,
   so the recording is under her hand however far down the lines she is. */
.wavebar{position:sticky;top:0;z-index:5;background:var(--ground);padding:.55rem 0 .5rem;margin-bottom:.2rem;border-bottom:1px solid var(--rule)}
.benchwave{height:4.2rem;position:relative}
.benchwave .waveview{position:absolute;left:0;top:0;bottom:0}
.wavescroll{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;cursor:pointer;scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}
.wavetrack{position:relative;height:100%}
.wavetrack .flash{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:var(--flash);opacity:0;animation:flash .6s ease-out forwards;pointer-events:none}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.handle{position:absolute;top:0;bottom:0;width:11px;margin-left:-5px;cursor:ew-resize;z-index:3;touch-action:none}
.handle::after{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--spk,var(--apricot))}
.handle::before{content:"";position:absolute;left:1px;top:50%;margin-top:-5px;width:9px;height:10px;background:var(--spk,var(--apricot))}

.seg{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;padding:.7rem .6rem;border:1px solid transparent;position:relative}
.segx{position:absolute;top:.3rem;right:.35rem;padding:0 .3rem;font-size:1rem;line-height:1.3;color:var(--text-far);opacity:.35;transition:opacity .15s ease,color .15s ease}
.seg:hover .segx,.seg.open .segx{opacity:.8}
.segx:hover,.segx:focus-visible{opacity:1;color:var(--rust)}
@media (max-width:700px){.seg{grid-template-columns:1fr;gap:.35rem}.segside{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.6rem}.segwave{flex:1 1 8rem;min-width:8rem;height:1.5rem}.segside .loopbtn{align-self:center}}
.seg.open{border-color:var(--rule-2);background:var(--surface-2)}
.segside{font-family:var(--mono);font-size:.7rem;color:var(--text-far);display:flex;flex-direction:column;gap:.3rem}
.segside .at{display:flex;align-items:center;gap:.35rem}
.segside .at .loopbtn{margin-left:auto}
.segside .spk{display:flex;align-items:center;gap:.3rem;font-family:var(--sans);color:var(--spk)}
.segside .spk i{width:.5rem;height:.5rem;border-radius:50%;background:var(--spk)}
.nudges{display:grid;gap:.15rem}
.nudge{display:flex;align-items:center;justify-content:space-between;gap:.1rem}
.nudge span{font-family:var(--sans);font-size:.62rem;color:var(--text-far)}
.nb{font-family:var(--mono);font-size:.56rem;line-height:1.6;padding:0 .15rem;border:1px solid var(--rule);color:var(--text-far)}
.nb:hover:not(:disabled){border-color:var(--rule-2);color:var(--text)}
.nb:disabled{opacity:.25}
.miniplay{width:1.4rem;height:1.4rem;display:grid;place-items:center;border:1px solid var(--rule);color:var(--text-far)}
.miniplay:hover{color:var(--text);border-color:var(--rule-2)}
.miniplay svg{width:.5rem;height:.5rem;fill:currentColor}
.segwave{height:1.6rem;cursor:pointer;opacity:.75;position:relative}
.segwave .handle::before{left:2px;width:7px;height:8px;margin-top:-4px}
.seg.open .segwave{opacity:1}
.loopbtn{font-family:var(--sans);font-size:.68rem;border:1px solid var(--rule);padding:.1rem .45rem;color:var(--text-far);align-self:flex-start}
.loopbtn:hover{border-color:var(--rule-2);color:var(--text-dim)}
.loopbtn[aria-pressed="true"]{color:var(--apricot);border-color:var(--apricot)}
.fieldlab{font-family:var(--sans);font-size:.66rem;letter-spacing:.05em;color:var(--text-far);margin-bottom:.15rem;text-transform:uppercase}
.fld{width:100%;background:transparent;border:1px solid transparent;color:var(--text);font-family:var(--serif);font-size:1.02rem;line-height:1.55;padding:.25rem .35rem;resize:none;overflow:hidden;display:block}
.fld:hover{border-color:var(--rule)}
.fld:focus{border-color:var(--rule-2);background:var(--surface-3);outline:none}
.fld.en{font-size:.94rem;color:var(--text-dim)}
.fld::placeholder{color:var(--text-far);font-style:italic}
.fldhint{display:none;flex-wrap:wrap;gap:.1rem .9rem;font-family:var(--sans);font-size:.68rem;color:var(--text-far);margin:.15rem .35rem 0}
.fldwrap:focus-within .fldhint{display:flex}
.fldhint .k{font-family:var(--mono);color:var(--text-dim)}
.segfoot{display:flex;gap:.6rem;align-items:center;margin-top:.3rem;font-family:var(--sans);font-size:.72rem;color:var(--text-far);flex-wrap:wrap}
.segfoot button{border:1px solid var(--rule);padding:.1rem .45rem}
.segfoot button:hover{border-color:var(--rule-2);color:var(--text-dim)}
.segfoot button[aria-pressed="true"]{color:var(--rust);border-color:var(--rust)}
.segfoot select{background:var(--surface-3);border:1px solid var(--rule);font-family:var(--sans);font-size:.72rem;color:var(--text-dim)}

#keyline{position:fixed;left:0;right:0;bottom:var(--dockh,0px);z-index:41;display:flex;flex-wrap:wrap;gap:.15rem 1.1rem;padding:.45rem clamp(1rem,3vw,2rem);background:var(--surface-2);border-top:1px solid var(--rule);font-family:var(--sans);font-size:.76rem;color:var(--text-far)}
#keyline[hidden]{display:none}
#keyline .k{font-family:var(--mono);color:var(--text-dim)}
#keyline .ctx{margin-right:auto;color:var(--text-far);opacity:.8}
#keyline .saved{color:var(--text-far);opacity:.8}

.setgrid{display:grid;gap:1.6rem;max-width:44rem}
.setblock{border:1px solid var(--rule);padding:1.1rem 1.2rem;background:var(--surface-2)}
.setblock h3{font-size:1.05rem;margin-bottom:.2rem}
.setblock .why{font-family:var(--sans);font-size:.78rem;color:var(--text-far);margin-bottom:.8rem}
.saverow{display:flex;align-items:center;gap:.7rem;margin-top:1rem;font-family:var(--sans);font-size:.78rem}
.setrow{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.8rem;align-items:start;padding:.35rem 0}
@media (max-width:640px){.setrow{grid-template-columns:1fr;gap:.2rem}}
.setrow > .lab{font-family:var(--sans);font-size:.8rem;color:var(--text-dim);padding-top:.35rem}
.tin{width:100%;background:var(--surface-3);border:1px solid var(--rule);color:var(--text);padding:.4rem .5rem;font-family:var(--sans);font-size:.9rem}
.tin:focus{border-color:var(--rule-2);outline:none}
select.tin{font-family:var(--sans);width:auto}
.people{display:grid;gap:.6rem}
.person{display:flex;align-items:center;gap:.8rem;padding:.6rem;border:1px solid var(--rule);background:var(--surface-3);flex-wrap:wrap}
.person .nm{flex:1;min-width:8rem}
.person .keycap{font-family:var(--mono);font-size:.74rem;color:var(--text-dim);border:1px solid var(--rule-2);padding:.05rem .3rem}
.swatches{display:flex;gap:.3rem;flex-wrap:wrap}
.sw{width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid var(--rule-2)}
.sw[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:1px}
.appears{font-family:var(--sans);font-size:.72rem;color:var(--text-far)}
.gatepreview{border:1px solid var(--rule-2);background:var(--surface-3);padding:1.4rem 1.2rem;margin-bottom:.6rem}
.gatepreview .gatebox{height:2.1rem;margin-top:1.1rem;border:1px solid var(--rule-2);background:var(--surface-4)}
.dropwrap{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.kinds{display:flex;gap:.3rem;margin-bottom:.5rem}
.kind{font-family:var(--sans);font-size:.78rem;padding:.2rem .6rem;border:1px solid var(--rule);color:var(--text-far)}
.kind[aria-pressed="true"]{color:var(--text);border-color:var(--rule-2);background:var(--surface-3)}
.estimate{display:flex;align-items:center;gap:.4rem;font-family:var(--sans);font-size:.8rem;color:var(--text-dim);margin-top:.5rem}
.places{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.place{display:flex;align-items:center;gap:.35rem;border:1px solid var(--rule);padding:.15rem .5rem;font-family:var(--sans);font-size:.8rem}
.place button{color:var(--text-far)}
.place button:hover{color:var(--rust)}
.dropzone{border:1px dashed var(--rule-2);padding:2rem 1rem;text-align:center;font-family:var(--sans);font-size:.9rem;color:var(--text-dim);cursor:pointer;margin-top:1rem}
.dropzone.over{border-color:var(--apricot);color:var(--text)}
.dropzone .sub{font-size:.76rem;color:var(--text-far);margin-top:.4rem}
.queue{display:grid;gap:.3rem;margin-top:.8rem;font-family:var(--sans);font-size:.82rem}
.queue .q{display:flex;justify-content:space-between;gap:1rem;padding:.3rem .5rem;border:1px solid var(--rule)}
.queue .q .st{color:var(--text-far)}
.queue .q.bad .st{color:var(--rust)}
.importrow{margin-top:1rem;font-family:var(--sans);font-size:.8rem;color:var(--text-far);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.problem{font-family:var(--sans);font-size:.82rem;color:var(--rust);margin-top:.5rem}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}}