/* Generated by tools/diffs.mjs from the app's src/renderer/style.css: the change page's and the demo
   page's head, the box under it and the player it draws a step's view in, scoped under the mock window.
   Do not edit: change the app's sheet or the tool and run it again. The colours are kit.css's. */
.idkw .v4 { --v-ink:var(--ink); --v-faint:var(--ink-faint); --v-rule:var(--rule); --v-box:var(--surface-2); }
.idkw .player { --p-ground:var(--surface); --p-deep:var(--ground); --p-ink:var(--ink); --p-soft:var(--ink-soft); --p-faint:var(--ink-faint); --p-rule:var(--rule); --p-edge:var(--rule-soft); --p-kind:var(--p-work); }
.idkw .player[data-kind="call"] { --p-kind:var(--p-call); }
.idkw .player[data-kind="rally"] { --p-kind:var(--p-rally); }
.idkw .v4.vset { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; min-width:0; }
.idkw .v4.vnamed { min-width:0; max-width:100%; border:1px solid var(--v-rule); border-radius:8px; background:var(--v-box); color:var(--v-ink); font-family:var(--mono); font-size:12.5px; line-height:1.55; }
.idkw .v4.vvalue { color:var(--v-ink); font-family:var(--mono); font-size:12.5px; line-height:1.55; }
.idkw .v4 .vhead { display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline; justify-content:space-between; padding:5px 10px; border-bottom:1px solid var(--v-rule); }
.idkw .v4 .vname { font-weight:600; }
.idkw .v4 .vtype { font-size:11px; }
.idkw .v4 .vbody { padding:6px 8px; overflow-x:auto; }
.idkw .v4 .vblk { display:flex; flex-direction:column; align-items:flex-start; border-radius:4px; }
.idkw .v4 .vbr { font-weight:600; padding:0 2px; }
.idkw .v4 .vrow { display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline; padding:1px 8px 1px 16px; border-radius:4px; }
.idkw .v4 .vinl { display:inline-flex; flex-wrap:wrap; gap:0 5px; align-items:baseline; }
.idkw .v4 .vpair { border-radius:3px; padding:0 2px; }
.idkw .v4 .vix, .idkw .v4 .varr, .idkw .v4 .vcm, .idkw .v4 .vmore { color:var(--v-faint); }
.idkw .v4 .vix { min-width:1.1em; }
.idkw .v4 .vrow:has(> .vix) { flex-wrap:nowrap; }
.idkw .v4 .vrow > .vix { flex:none; }
.idkw .v4 .vrow > .vix ~ * { min-width:0; }
.idkw .v4 .vcm { margin-inline-start:-5px; }
.idkw .v4 .vfield, .idkw .v4 [data-type="record"] { color:var(--v-rec); }
.idkw .v4 .vkey, .idkw .v4 [data-type="dict"] { color:var(--v-dict); }
.idkw .v4 [data-type="list"] { color:var(--v-list); }
.idkw .v4 .vtext, .idkw .v4 [data-type="text"] { color:var(--v-text); }
.idkw .v4 .vnum, .idkw .v4 [data-type="number"] { color:var(--v-num); }
.idkw .v4 .vyn, .idkw .v4 [data-type="yesno"] { color:var(--v-yn); }
.idkw .v4 .vbig { display:inline-block; padding:0 4px; border-radius:3px; font-size:17px; font-weight:600; }
.idkw .v4 .lit { background:var(--v-lit); color:var(--v-lit-ink); }
.idkw .v4 .lit * { color:inherit; }
.idkw .player { container-type:inline-size; display:flex; flex-direction:column; gap:14px; min-width:0; padding:18px 20px 20px; border:1px solid var(--p-edge); border-radius:14px; background:var(--p-ground); color:var(--p-ink); font-family:var(--sans); font-size:15px; line-height:1.5; }
.idkw .player p { margin:0; }
.idkw .player .playtop { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px 20px; align-items:start; }
.idkw .player .playwords { min-width:0; }
.idkw .player .playhead { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--p-faint); }
.idkw .player .playkind { font-weight:600; color:var(--p-kind); }
.idkw .player .playline { margin-top:6px; max-width:56ch; font-size:1.2rem; font-weight:700; line-height:1.3; text-wrap:pretty; }
.idkw .player .playctl { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.idkw .player .playbtn { padding:5px 13px; border:1px solid var(--p-rule); border-radius:99px; background:none; color:var(--p-ink); font:600 13px var(--sans); transition:border-color .15s, background .15s; }
.idkw .player .playbtn:hover { border-color:var(--p-faint); }
.idkw .player .playbtn.playgo { border-color:transparent; background:var(--p-accent); color:var(--p-accent-ink); }
.idkw .player .playdots { display:flex; flex-wrap:wrap; gap:5px; }
.idkw .player .playdot { width:20px; height:7px; padding:0; border:0; border-radius:4px; background:var(--p-rule); }
.idkw .player .playdot.past { background:color-mix(in oklab, var(--p-accent) 40%, var(--p-rule)); }
.idkw .player .playdot.on { background:var(--p-accent); }
.idkw .player button:focus-visible { outline:2px solid var(--p-accent); outline-offset:2px; }
.idkw .player .playstage { display:flex; flex-direction:column; gap:10px; min-width:0; }
.idkw .player .playstop { padding:6px 10px; border:1px solid color-mix(in oklab, var(--p-warn) 45%, transparent); border-radius:8px; background:color-mix(in oklab, var(--p-warn) 12%, transparent); font-size:13px; }
.idkw .player .playstop b { font-weight:600; }
.idkw .player .callstage { display:grid; gap:0 12px; align-items:start; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.4fr); }
.idkw .player .callstage .down { display:none; }
@container (max-width:640px) {
.idkw .player .callstage { grid-template-columns:minmax(0, 1fr); gap:8px; }
.idkw .player .callstage .across { display:none; }
.idkw .player .callstage .down { display:inline; }
}
@container (max-width:720px) {
.idkw .player .playtop { grid-template-columns:minmax(0, 1fr); }
.idkw .player .playctl { justify-content:flex-start; }
}
.idkw .player .callparty { display:flex; flex-direction:column; gap:8px; min-width:0; padding:10px 12px; border:1.5px solid var(--p-rule); border-radius:10px; background:var(--p-deep); }
.idkw .player .callparty > b { font-size:1.02rem; font-weight:700; }
.idkw .player .callparty.on { border-color:var(--p-call); box-shadow:0 0 0 3px color-mix(in oklab, var(--p-call) 22%, transparent); }
.idkw .player .calllbl { font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--p-faint); }
.idkw .player .calllbl.callstep { color:var(--p-call); }
.idkw .player .calldim { font-size:12.5px; color:var(--p-faint); }
.idkw .player .callwire { align-self:center; min-width:0; overflow:hidden; padding:4px 0; }
.idkw .player .callmsg { display:flex; flex-direction:column; gap:5px; min-width:0; padding:8px 12px; border-block:1.5px dashed var(--p-rule); }
.idkw .player .calldir { font:600 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--p-faint); }
.idkw .player .callmsg.answer .calldir { text-align:end; }
.idkw .player .callmsg.on { border-block:2px solid var(--p-call); background:color-mix(in oklab, var(--p-call) 10%, transparent); }
.idkw .player .callmsg.on .calldir { color:var(--p-call); }
.idkw .player .callmsg.arrive.ask { animation:call-from-start .34s cubic-bezier(.2,.8,.2,1); }
.idkw .player .callmsg.arrive.answer { animation:call-from-end .34s cubic-bezier(.2,.8,.2,1); }
@container (max-width:640px) {
.idkw .player .callmsg { border-block:0; border-inline-start:1.5px dashed var(--p-rule); margin-inline-start:18px; }
.idkw .player .callmsg.on { border-block:0; border-inline-start:2px solid var(--p-call); }
.idkw .player .callmsg.answer .calldir { text-align:start; }
.idkw .player .callmsg.arrive.ask { animation-name:call-from-above; }
.idkw .player .callmsg.arrive.answer { animation-name:call-from-below; }
}
@keyframes call-from-start { from { opacity:0; transform:translateX(-28px); } }
@keyframes call-from-end { from { opacity:0; transform:translateX(28px); } }
@keyframes call-from-above { from { opacity:0; transform:translateY(-16px); } }
@keyframes call-from-below { from { opacity:0; transform:translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
.idkw .player .callmsg.arrive.ask, .idkw .player .callmsg.arrive.answer { animation:none; }
}
.idkw .player .callnothing { font:400 12.5px var(--mono); color:var(--p-faint); }
.idkw .player .rallylanes { display:grid; grid-template-columns:1fr 1fr; padding:0 4px 6px; border-bottom:1.5px solid var(--p-rule); font-weight:700; }
.idkw .player .rallylanes b:last-child { text-align:end; }
.idkw .player .rallyturns { display:flex; flex-direction:column; gap:8px; }
.idkw .player .rallyturn { display:flex; }
.idkw .player .rallyturn.b { justify-content:flex-end; }
.idkw .player .rallyturn.later { opacity:.38; }
.idkw .player .rallybub { display:flex; flex-direction:column; gap:6px; min-width:0; max-width:min(78%, 560px); padding:8px 10px; border:1.5px solid var(--p-rule); border-radius:12px; background:var(--p-deep); }
.idkw .player .rallybub { cursor:pointer; }
.idkw .player .rallyturn.a .rallybub { border-end-start-radius:2px; }
.idkw .player .rallyturn.b .rallybub { border-end-end-radius:2px; }
.idkw .player .rallyturn.on .rallybub { border-color:var(--p-rally); box-shadow:0 0 0 3px color-mix(in oklab, var(--p-rally) 22%, transparent); }
.idkw .player .rallylabel { align-self:flex-start; padding:0; border:0; background:none; font:600 11.5px var(--mono); letter-spacing:.05em; text-transform:uppercase; text-align:start; color:var(--p-faint); }
.idkw .player .rallyturn.b .rallylabel { align-self:flex-end; }
.idkw .player .rallyturn.on .rallylabel { color:var(--p-rally); }
.idkw .player .rallyhold { font-size:12.5px; color:var(--p-soft); }
.idkw .player .rallyflow { padding:0; border:0; background:none; font:inherit; color:var(--p-rally); text-decoration:underline dotted; text-underline-offset:3px; }
.idkw .player .rallyloop { position:relative; display:flex; flex-direction:column; gap:8px; padding:26px 10px 10px; border-inline:2px solid color-mix(in oklab, var(--p-rally) 55%, transparent); border-radius:10px; }
.idkw .player .rallylooptext { position:absolute; top:4px; inset-inline:0; text-align:center; font:500 11px var(--mono); letter-spacing:.06em; color:var(--p-rally); }
.idkw .player .rallyends { font-size:13px; text-align:center; color:var(--p-soft); }
@media (prefers-reduced-motion: reduce) {
.idkw .player .playbtn { transition:none; }
}
.idkw .player .playdot.d { position:relative; }
.idkw .player .playdot.d::after { content:""; position:absolute; left:50%; top:-6px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--revised); }
.idkw .player .playgone { display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-left:2px solid var(--warn-line); opacity:.72; }
.idkw .player .playgone > .sid { font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--p-faint); }
.idkw .player .playstop.dnew { border-color:var(--revised-line); }
.idkw .player .playstop.dgone { opacity:.72; }
.idkw .player .rallybub.dnew { box-shadow:inset 2px 0 0 var(--revised-line); }
.idkw .v4.vnamed.dnew { border-left:2px solid var(--revised-line); }
.idkw .v4.vnamed.dgone { border-left:2px solid var(--warn-line); opacity:.72; }
.idkw .v4.vnamed.dgone .vbody { text-decoration:line-through; text-decoration-color:var(--warn); }
.idkw .v4 .dtag { display:inline-block; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:0 6px; border-radius:3px; background:var(--revised-soft); color:var(--revised); border:1px solid var(--revised-line); }
.idkw .v4 .dtag.out { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.idkw .v4 .vrow.dnew { border-left:2px solid var(--revised-line); padding-left:14px; }
.idkw .v4 .vrow.dnew .vix { color:var(--revised); font-weight:700; }
.idkw .v4 .vrow.dgone { border-left:2px solid var(--warn-line); padding-left:14px; opacity:.72; text-decoration:line-through; text-decoration-color:var(--warn); }
.idkw .v4 .vrow.dgone .vix { color:var(--warn); font-weight:700; }
.idkw .v4 .vrow.vchg { flex-direction:column; align-items:stretch; padding:0; }
.idkw .v4 .dwas, .idkw .v4 .dnow { display:grid; grid-template-columns:14px minmax(0, 1fr); gap:4px; align-items:baseline; padding:1px 0 1px 8px; }
.idkw .v4 .dwas { border-left:2px solid var(--warn-line); opacity:.72; }
.idkw .v4 .dwas > b { color:var(--warn); }
.idkw .v4 .dwas :is(.vbig, .vtext, .vnum, .vyn, .vrow) { text-decoration:line-through; text-decoration-color:var(--warn); }
.idkw .v4 .dnow { border-left:2px solid var(--revised-line); margin-top:3px; }
.idkw .v4 .dnow > b { color:var(--revised); }
.idkw .v4 .dnow.lit > b { color:inherit; }
.idkw .v4 .vrow.vchg .dwas > span, .idkw .v4 .vrow.vchg .dnow > span { display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline; }
.idkw .v4 .vpair .dwas, .idkw .v4 .vpair .dnow { display:inline; padding:0; margin:0; border:0; }
.idkw .v4 .vpair .dnow, .idkw .v4 .vpair.dnew { background:var(--revised-soft); box-shadow:inset 0 -2px 0 var(--revised-line); }
.idkw .v4 .vpair .dnow.lit, .idkw .v4 .vpair.dnew.lit { background:var(--v-lit); box-shadow:inset 0 -2px 0 currentColor; }
.idkw .v4 .vpair.dgone { opacity:.72; text-decoration:line-through; text-decoration-color:var(--warn); }
.idkw .v4 .vrow.vmod > .dtag { flex:none; align-self:center; }
.idkw .cdpage { max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:22px; padding:32px 36px 96px; }
.idkw .cdpage :is(.eyebrow, .scrh) button, .idkw .dbox button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; text-align:inherit; margin:0; }
.idkw .cdpage :is(.eyebrow, .scrh) button:focus-visible, .idkw .dbox button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.idkw .cdpage .sp, .idkw .dbox .sp { flex:1; }
.idkw .cdpage .head { display:flex; flex-direction:column; gap:10px; }
.idkw .cdpage .eyebrow { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font:12.5px var(--sans); color:var(--ink-faint); }
.idkw .cdpage .eyebrow .cmt { font-family:var(--mono); font-size:12px; color:var(--ink-soft); }
.idkw .cdpage .eyebrow button.cmt:hover, .idkw .cdpage .eyebrow button.tasklink:hover { color:var(--accent); text-decoration:underline; }
.idkw .cdpage .eyebrow button.tasklink { color:var(--accent); }
.idkw .cdpage .kind { font:600 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:4px; border:1px solid var(--rule); color:var(--ink-soft); background:var(--surface-2); }
.idkw .cdpage .kind.feature { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.idkw .cdpage .kind.fix { color:var(--fix); border-color:var(--fix-line); background:var(--fix-soft); }
.idkw .cdpage .kind.removal { color:var(--warn); border-color:var(--warn-line); background:var(--warn-soft); }
.idkw .cdpage .state { font:600 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.idkw .cdpage .state.building, .idkw .cdpage .state.merged { color:var(--fix); }
.idkw .cdpage .state.shelved { text-decoration:line-through; }
.idkw .cdpage .title { font:600 31px/1.18 var(--serif); margin:0; letter-spacing:-.005em; text-wrap:balance; }
.idkw .cdpage .brief { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 16px; margin:2px 0 0; }
.idkw .cdpage .brief dt { font:600 13px/1.95 var(--sans); color:var(--ink-faint); text-align:right; }
.idkw .cdpage .brief dd { margin:0; font:18px/1.5 var(--serif); color:var(--ink-soft); }
.idkw .cdpage .brief dt:first-of-type { color:var(--ink-soft); }
.idkw .cdpage .brief dd:first-of-type { color:var(--ink); }
.idkw .cdpage .brief.fix dt:first-of-type { color:var(--fix); }
.idkw .cdpage .brief.feature dt:first-of-type { color:var(--accent); }
.idkw .cdpage .brief.removal dt:first-of-type { color:var(--warn); }
.idkw .cdpage .lbl, .idkw .dbox .lbl { font:600 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.idkw .cdpage .followsline { font:12.5px/1.5 var(--sans); color:var(--ink-faint); }
.idkw .cdpage .notice { margin:0; font:13px/1.5 var(--sans); color:var(--ink-soft); }
.idkw .cdpage .acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.idkw .cdpage button.btn { border:1px solid var(--rule); border-radius:8px; padding:7px 14px; font:13.5px var(--sans); min-height:38px; color:var(--ink); }
.idkw .cdpage button.btn:hover { background:var(--surface-2); }
.idkw .cdpage .btn.pri { background:var(--accent); border-color:var(--accent); color:var(--ground); font-weight:600; }
.idkw .cdpage .btn.pri:hover { filter:brightness(1.08); }
.idkw .cdpage .vers { display:inline-flex; gap:2px; }
.idkw .cdpage .vers .ver { font:12px var(--mono); padding:5px 8px; border-radius:6px; color:var(--ink-faint); }
.idkw .cdpage .vers .ver.on { background:var(--surface-2); color:var(--ink); }
.idkw .cdpage .nodiff { margin:0; font:14px/1.5 var(--sans); color:var(--ink-faint); }
.idkw .cdpage .scr { border:1px solid var(--rule); border-radius:12px; background:var(--surface); overflow:hidden; }
.idkw .cdpage .scrh { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px 8px 14px; border-bottom:1px solid var(--rule-soft); font-family:var(--sans); }
.idkw .cdpage .scrh .stitle { font:13px var(--sans); color:var(--ink-soft); }
.idkw .cdpage .np { display:inline-flex; border:1px solid var(--rule); border-radius:999px; padding:2px; gap:2px; }
.idkw .cdpage .np button { font:12.5px var(--sans); color:var(--ink-soft); padding:5px 14px; border-radius:999px; min-height:30px; }
.idkw .cdpage .np button.on { background:var(--ink); color:var(--ground); font-weight:600; }
.idkw .cdpage .scr .replica-slot, .idkw .cdpage .scr .replica-problem { margin:0; }
.idkw .cdpage .qs { border:1px solid var(--rule); border-radius:12px; background:var(--surface); overflow:hidden; }
.idkw .cdpage .qs .lbl { display:block; padding:10px 14px; border-bottom:1px solid var(--rule-soft); }
.idkw .cdpage .q { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 18px; padding:10px 14px; font:14.5px/1.45 var(--sans); }
.idkw .cdpage .q + .q { border-top:1px solid var(--rule-soft); }
.idkw .cdpage .q .qa { color:var(--ink-soft); }
.idkw .cdpage .q .qw { grid-column:2; font-size:13px; color:var(--ink-faint); }
.idkw .dbox { border:1px solid var(--rule); border-radius:12px; background:var(--surface); overflow:hidden; --proc-ink:var(--proc); container-type:inline-size; }
.idkw .dbox .dbh { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 10px; border-bottom:1px solid var(--rule-soft); font-family:var(--sans); }
.idkw .dbox .dt { display:inline-flex; gap:7px; align-items:baseline; padding:7px 12px; border-radius:7px; font:600 13.5px var(--sans); color:var(--ink-faint); min-height:36px; }
.idkw .dbox .dt:hover { color:var(--ink); }
.idkw .dbox .dt .n { font:600 11.5px var(--mono); color:var(--ink-faint); }
.idkw .dbox .dt.on { background:var(--surface-2); color:var(--ink); }
.idkw .dbox .walk { display:inline-flex; align-items:center; border:1px solid var(--rule); border-radius:8px; overflow:hidden; }
.idkw .dbox .walk button { width:36px; height:34px; font-size:17px; color:var(--ink-soft); display:inline-flex; align-items:center; justify-content:center; }
.idkw .dbox .walk button:hover { background:var(--surface-2); color:var(--ink); }
.idkw .dbox .walk .wc { font:12px var(--mono); color:var(--ink-soft); padding:0 6px; min-width:62px; text-align:center; font-variant-numeric:tabular-nums; }
.idkw .dbox .crumbs { display:flex; flex-wrap:wrap; gap:4px 6px; align-items:baseline; padding:12px 18px 2px; font:13px var(--sans); color:var(--ink-faint); }
.idkw .dbox .crumbs button { color:var(--accent); }
.idkw .dbox .crumbs button:hover { text-decoration:underline; }
.idkw .dbox .crumbs .here { color:var(--ink); font-weight:600; }
.idkw .dbox .crumbs .ar { color:var(--ink-faint); }
.idkw .dbox .stage { display:block; flex:none; min-height:auto; padding:10px 14px 16px; transform-origin:50% 0; outline:none; }
.idkw .dbox .stage.in { animation:dbzin .28s cubic-bezier(.2,.7,.2,1); }
.idkw .dbox .stage.out { animation:dbzout .24s cubic-bezier(.2,.7,.2,1); }
.idkw .dbox .stage.fade { animation:dbfd .2s ease-out; }
@keyframes dbzin { from { opacity:.15; transform:scale(.955); } to { opacity:1; transform:none; } }
@keyframes dbzout { from { opacity:.15; transform:scale(1.035); } to { opacity:1; transform:none; } }
@keyframes dbfd { from { opacity:.2; } to { opacity:1; } }
.idkw .dbox .dbf { display:flex; gap:6px 14px; flex-wrap:wrap; align-items:center; padding:9px 16px; border-top:1px solid var(--rule-soft); font:12px var(--sans); color:var(--ink-faint); }
.idkw .dbox .dbf kbd { font:11px var(--mono); border:1px solid var(--rule); border-radius:4px; padding:0 5px; color:var(--ink-soft); background:var(--ground); }
.idkw .dbox .mk { display:inline-block; width:14px; flex:none; text-align:center; font:700 13px/1.5 var(--mono); color:var(--ink-faint); }
.idkw .dbox .mk.add { color:var(--revised); }
.idkw .dbox .mk.chg { color:var(--flag); }
.idkw .dbox .mk.del { color:var(--warn); }
.idkw .dbox .din, .idkw .dbox .dout { padding:0; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.idkw .dbox .hit { box-shadow:inset 3px 0 0 var(--accent); }
.idkw .dbox .flash { animation:dbflash 1.2s ease-out; }
@keyframes dbflash { 0% { box-shadow:0 0 0 4px var(--accent-line), inset 3px 0 0 var(--accent); } 100% { box-shadow:0 0 0 0 transparent, inset 3px 0 0 var(--accent); } }
.idkw .dbox .fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; padding:6px 0 4px; }
.idkw .dbox .fcard { display:flex; flex-direction:column; gap:7px; border:1px solid var(--rule); border-radius:10px; padding:12px 14px 11px; background:var(--surface); font-family:var(--sans); transition:border-color .15s, transform .15s; }
.idkw .dbox button.fcard:hover { border-color:var(--accent-line); transform:translateY(-1px); }
.idkw .dbox .fcard.chg { border-color:var(--flag-line); }
.idkw .dbox .fcard.add { border-color:var(--revised-line); background:color-mix(in oklab, var(--revised-soft) 50%, var(--surface)); }
.idkw .dbox .fcard.del { border-color:var(--warn-line); background:color-mix(in oklab, var(--warn-soft) 50%, var(--surface)); }
.idkw .dbox .fct { display:flex; gap:6px; align-items:baseline; }
.idkw .dbox .fn { font:600 16.5px/1.3 var(--serif); color:var(--ink); }
.idkw .dbox .fcard.del .fn { text-decoration:line-through; color:var(--warn); }
.idkw .dbox .fl { font:14px/1.45 var(--sans); color:var(--ink-soft); }
.idkw .dbox .ff { display:flex; align-items:center; gap:8px; font:12px var(--sans); color:var(--ink-faint); }
.idkw .dbox .chev { color:var(--ink-faint); font-family:var(--sans); }
.idkw .dbox .run { display:flex; gap:8px; align-items:baseline; width:100%; padding:8px; border-radius:7px; font:12px var(--mono); color:var(--ink-faint); }
.idkw .dbox .run:hover { color:var(--accent); background:var(--surface-2); }
.idkw .dbox .peekl { display:flex; flex-wrap:wrap; gap:6px; padding:2px 8px 8px; }
.idkw .dbox .peekl span { font:12.5px var(--sans); color:var(--ink-faint); border:1px solid var(--rule-soft); border-radius:999px; padding:3px 10px; }
.idkw .dbox .conn { margin-top:10px; padding:12px 8px 4px; border-top:1px solid var(--rule-soft); }
.idkw .dbox .conn p { font:16.5px/1.55 var(--serif); margin:6px 0 0; }
.idkw .dbox .quiet { color:var(--ink-faint); }
.idkw .dbox .hs { display:inline-flex; gap:2px; flex:none; }
.idkw .dbox .hs i { width:7px; height:7px; border-radius:1.5px; background:var(--rule); }
.idkw .dbox .hs i.a { background:var(--revised); }
.idkw .dbox .hs i.c { background:var(--flag); }
.idkw .dbox .hs i.d { background:var(--warn); }
.idkw .dbox .hs i.g { background:var(--ink-faint); }
.idkw .dbox .fhead { display:flex; flex-direction:column; gap:8px; padding:6px 8px 12px; border-bottom:1px solid var(--rule-soft); margin-bottom:4px; border-radius:8px; }
.idkw .dbox .fhn { display:flex; gap:6px; align-items:baseline; }
.idkw .dbox .fname { font:600 20px/1.3 var(--serif); }
.idkw .dbox .fname.gone { text-decoration:line-through; color:var(--warn); }
.idkw .dbox .cl { display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; align-items:baseline; padding:4px 6px; border-radius:7px; }
.idkw .dbox .cl .t { font:15px/1.5 var(--sans); color:var(--ink); }
.idkw .dbox .slist { display:flex; flex-direction:column; }
.idkw .dbox .slist > * + * { border-top:1px solid var(--rule-soft); }
.idkw .dbox .srow { display:grid; grid-template-columns:26px 16px minmax(0,1fr); gap:0 6px; padding:11px 8px; border-radius:8px; }
.idkw .dbox .sn { font:600 12px/1.9 var(--mono); color:var(--ink-faint); }
.idkw .dbox .srow > .mk { padding-top:2px; }
.idkw .dbox .sm { min-width:0; }
.idkw .dbox .stx { font:17px/1.5 var(--serif); }
.idkw .dbox .srow.same .stx { color:var(--ink-faint); font-size:15.5px; }
.idkw .dbox .srow.add { background:color-mix(in oklab, var(--revised-soft) 60%, transparent); }
.idkw .dbox .srow.del { background:color-mix(in oklab, var(--warn-soft) 55%, transparent); }
.idkw .dbox .srow.del .stx { text-decoration:line-through; color:var(--ink-soft); }
.idkw .dbox .srow.eq .stx { color:var(--ink-soft); }
.idkw .dbox .slab { font:600 12.5px/1.5 var(--sans); color:var(--ink-faint); margin-bottom:1px; }
.idkw .dbox .sx { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin-top:8px; font:12.5px var(--sans); }
.idkw .dbox .dive { display:inline-flex; gap:6px; align-items:baseline; border:1px solid var(--flag-line); background:var(--flag-soft); color:var(--flag); border-radius:999px; padding:5px 12px; font:600 12px var(--sans); min-height:30px; }
.idkw .dbox .dive b { font-family:var(--mono); }
.idkw .dbox .dive:hover { box-shadow:0 0 0 2px var(--flag-line); }
.idkw .dbox .dive.plain { border-color:var(--rule); background:var(--surface-2); color:var(--ink-soft); }
.idkw .dbox .dive.plain:hover { box-shadow:0 0 0 2px var(--rule); }
.idkw .dbox .dive .cz { color:var(--warn); }
.idkw .dbox .fin { display:inline-flex; gap:5px; align-items:baseline; color:var(--ink-faint); padding:5px 6px; border-radius:6px; min-height:30px; }
.idkw .dbox .fin:hover { color:var(--accent); }
.idkw .dbox .fk { color:var(--ink-faint); }
.idkw .dbox .fchip, .idkw .dbox .lchip { display:inline-flex; gap:5px; align-items:baseline; border:1px solid var(--rule); border-radius:999px; padding:4px 11px 4px 8px; color:var(--ink-soft); font:12.5px var(--sans); min-height:30px; }
.idkw .dbox button.fchip:hover, .idkw .dbox button.lchip:hover { border-color:var(--accent-line); color:var(--accent); }
.idkw .dbox .lchip.ch { border-color:var(--flag-line); color:var(--flag); }
.idkw .dbox .lchip .ar, .idkw .dbox .fchip .ar { color:var(--ink-faint); }
.idkw .dbox .shead { display:grid; grid-template-columns:26px minmax(0,1fr); gap:0 8px; padding:6px 8px 4px; }
.idkw .dbox .pbox { border:1px solid var(--rule); border-radius:10px; background:var(--ground); overflow:hidden; margin-top:12px; }
.idkw .dbox .pbox.sq { border-color:var(--seq-line); background:var(--seq-ground); }
.idkw .dbox .pbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 8px 7px 14px; border-bottom:1px solid var(--rule-soft); }
.idkw .dbox .pk { font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--proc); }
.idkw .dbox .pbox.sq .pk { color:var(--seq); }
.idkw .dbox .ps { display:inline-flex; border:1px solid var(--rule); border-radius:8px; padding:2px; gap:2px; background:var(--surface); }
.idkw .dbox .ps button { font:600 11.5px var(--mono); padding:5px 11px; border-radius:6px; color:var(--ink-soft); min-height:30px; }
.idkw .dbox .ps button.on.p { background:var(--flag-soft); color:var(--proc); }
.idkw .dbox .ps button.on.s { background:var(--seqkey); color:var(--seqkey-ink); }
.idkw .dbox .pl { display:grid; grid-template-columns:20px 16px minmax(0,1fr); gap:0 6px; padding:7px 14px; font:15px/1.5 var(--sans); }
.idkw .dbox .pl + .pl, .idkw .dbox .pl + .run, .idkw .dbox .run + .pl { border-top:1px solid var(--rule-soft); }
.idkw .dbox .pl .pn { font:600 11px/2 var(--mono); color:var(--proc); }
.idkw .dbox .pl.same { color:var(--ink-soft); }
.idkw .dbox .pl.add, .idkw .dbox .sl.add { background:color-mix(in oklab, var(--revised-soft) 60%, transparent); }
.idkw .dbox .pl.del, .idkw .dbox .sl.del { background:color-mix(in oklab, var(--warn-soft) 55%, transparent); }
.idkw .dbox .pbox .run { border-radius:0; padding:7px 14px 7px 56px; }
.idkw .dbox .sl { display:grid; grid-template-columns:16px 140px minmax(0,1fr); gap:0 8px; padding:2px 14px; font:12.5px/1.7 var(--mono); }
.idkw .dbox .sl .who { color:var(--seq); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.idkw .dbox .sl.ctl .w2 { color:var(--seq); }
.idkw .dbox .sl.when { font-weight:600; color:var(--seq); padding-top:8px; padding-bottom:6px; grid-template-columns:16px minmax(0,1fr); }
.idkw .dbox .sl.same { color:var(--ink-soft); }
.idkw .dbox .sl.del .w2, .idkw .dbox .pl.del > span:last-child { text-decoration:line-through; color:var(--ink-soft); }
.idkw .dbox .cause { display:inline-block; font:600 9.5px/1.7 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--warn); border:1px solid var(--warn-line); background:var(--warn-soft); border-radius:4px; padding:0 5px; margin-right:7px; vertical-align:1px; }
.idkw .dbox .sbody { padding-bottom:6px; }
.idkw .dbox .sbody .run { padding:5px 14px 5px 38px; }
.idkw .dbox .flist { display:flex; flex-direction:column; }
.idkw .dbox .flist > * + * { border-top:1px solid var(--rule-soft); }
.idkw .dbox .frow { display:grid; grid-template-columns:16px minmax(0,1fr) auto 12px; gap:4px 10px; align-items:start; width:100%; padding:13px 8px; border-radius:9px; font-family:var(--sans); }
.idkw .dbox .frow:hover { background:var(--surface-2); }
.idkw .dbox .frow .mk, .idkw .dbox .frow .chev { padding-top:2px; }
.idkw .dbox .ft { font:600 16.5px/1.35 var(--serif); }
.idkw .dbox .frt { display:flex; flex-wrap:wrap; gap:2px 5px; margin-top:5px; font:12px var(--sans); color:var(--ink-faint); }
.idkw .dbox .frt .lit { color:var(--flag); font-weight:600; }
.idkw .dbox .frow .fs { font:12.5px var(--sans); color:var(--ink-soft); padding-top:3px; text-align:right; }
.idkw .dbox .route { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.idkw .dbox .route .stop { border:1px solid var(--rule); border-radius:999px; padding:3px 10px; font:12.5px var(--sans); color:var(--ink-soft); }
.idkw .dbox .route .stop.lit { border-color:var(--flag-line); background:var(--flag-soft); color:var(--flag); }
.idkw .dbox .route .arr { color:var(--ink-faint); font:12px var(--sans); }
.idkw .dbox .note { padding:10px 8px 2px; font:12.5px var(--sans); color:var(--ink-faint); }
.idkw .dbox .dview { margin-top:12px; }
.idkw .dbox .rsame { display:flex; flex-direction:column; gap:4px; padding:12px 8px 10px; }
.idkw .dbox .rsame .big { font:600 19px/1.35 var(--serif); }
.idkw .dbox .rsame .sub { font:13.5px var(--sans); color:var(--ink-faint); }
.idkw .dbox .mode { display:inline-flex; border:1px solid var(--rule); border-radius:8px; padding:2px; gap:2px; background:var(--surface); margin-right:4px; }
.idkw .dbox .mode button { font:600 12px var(--sans); padding:6px 11px; border-radius:6px; color:var(--ink-soft); min-height:30px; }
.idkw .dbox .mode button:hover { color:var(--ink); }
.idkw .dbox .mode button.on { background:var(--surface-2); color:var(--ink); }
.idkw .dbox .dout + .din { margin-inline-start:.3em; }
.idkw .dbox .whole { display:flex; flex-direction:column; gap:5px; }
.idkw .dbox .whole > span { display:block; width:fit-content; max-width:100%; }
.idkw .dbox .sbs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 20px; }
.idkw .dbox .sbs > div { min-width:0; }
.idkw .dbox .sbs .rw { border-radius:6px; padding:2px 8px; margin:0 -8px; }
.idkw .dbox .sbs .bef.rw { background:color-mix(in oklab, var(--warn-soft) 70%, transparent); color:var(--ink-soft); }
.idkw .dbox .sbs .aft.rw { background:color-mix(in oklab, var(--revised-soft) 70%, transparent); }
.idkw .dbox .sbs .bef .dout { text-decoration:none; }
.idkw .dbox .colhead { display:grid; gap:0 6px; }
.idkw .dbox .colhead.st { grid-template-columns:26px 16px minmax(0,1fr); padding:2px 8px 6px; }
.idkw .dbox .colhead.pr { grid-template-columns:20px 16px minmax(0,1fr); padding:8px 14px 2px; }
.idkw .dbox .colhead.sq { grid-template-columns:16px 140px minmax(0,1fr); gap:0 8px; padding:8px 14px 2px; }
.idkw .dbox .slist > .colhead + * { border-top:0; }
.idkw .dbox .colhead .sbs .lbl:first-child { color:var(--warn); }
.idkw .dbox .colhead .sbs .lbl:last-child { color:var(--revised); }
@container (max-width:600px) {
.idkw .dbox .sbs { grid-template-columns:minmax(0,1fr); }
.idkw .dbox .colhead { display:none; }
.idkw .dbox .sbs .bef::before, .idkw .dbox .sbs .aft::before { display:block; font:600 10px var(--sans); letter-spacing:.12em; text-transform:uppercase; margin-bottom:2px; }
.idkw .dbox .sbs .bef::before { content:"Before"; color:var(--warn); }
.idkw .dbox .sbs .aft::before { content:"After"; color:var(--revised); }
}
@media (max-width:640px) {
.idkw .cdpage { padding:20px 16px 64px; }
.idkw .cdpage .title { font-size:25px; }
.idkw .cdpage .brief { grid-template-columns:1fr; gap:0; }
.idkw .cdpage .brief dt { text-align:left; line-height:1.6; }
.idkw .cdpage .brief dd { font-size:17px; margin-bottom:6px; }
.idkw .cdpage .q { grid-template-columns:1fr; }
.idkw .cdpage .q .qw { grid-column:1; }
.idkw .dbox .stage { padding:8px 8px 14px; }
.idkw .dbox .srow { grid-template-columns:22px 14px minmax(0,1fr); padding:10px 4px; }
.idkw .dbox .cl { grid-template-columns:1fr; gap:2px; }
.idkw .dbox .sl { grid-template-columns:16px minmax(0,1fr); }
.idkw .dbox .sl .who, .idkw .dbox .sl .w2 { grid-column:2; }
.idkw .dbox .frow { grid-template-columns:16px minmax(0,1fr) 12px; }
.idkw .dbox .frow .fs { grid-column:2; grid-row:2; text-align:left; padding-top:0; }
.idkw .dbox .frow .chev { grid-column:3; grid-row:1; }
.idkw .dbox .dbf .keys { display:none; }
}
@media (prefers-reduced-motion: reduce) {
.idkw .dbox .stage.in, .idkw .dbox .stage.out, .idkw .dbox .stage.fade, .idkw .dbox .flash { animation:none; }
.idkw .dbox .fcard { transition:none; }
}