/* ---------- THE COMIC FACES ----------
   Vendored with their licences beside them, the way the house already vendors
   what it uses: Bangers and Permanent Marker under public/vendor/fonts, and
   the open shelf's five under public/vendor/comic/fonts with SOURCES.md
   naming every one (five under the OFL, Luckiest Guy under Apache 2.0).
   font-display:swap so a page is never blank waiting on a face, and every one
   falls back to something with weight rather than to a serif.

   They are LETTERING, not chrome: a face here is the hand in a balloon or the
   shape of a sound effect. Nothing in the app's own furniture wears one,
   which is why they live here and not in tokens.css.

   BANGERS IS NOT ON THE PULLDOWN. A sound effect is word art and stays in
   Bangers whatever hand the balloons take, because the two are different jobs
   on the page (data/comic-fonts.js says the same thing from the other side). */
@font-face{font-family:"Bangers";src:url("/vendor/fonts/bangers/Bangers-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Permanent Marker";src:url("/vendor/fonts/permanentmarker/PermanentMarker-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("/vendor/comic/fonts/comicneue/ComicNeue-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("/vendor/comic/fonts/comicneue/ComicNeue-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Kalam";src:url("/vendor/comic/fonts/kalam/Kalam-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Kalam";src:url("/vendor/comic/fonts/kalam/Kalam-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Luckiest Guy";src:url("/vendor/comic/fonts/luckiestguy/LuckiestGuy-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Creepster";src:url("/vendor/comic/fonts/creepster/Creepster-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Architects Daughter";src:url("/vendor/comic/fonts/architectsdaughter/ArchitectsDaughter-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

/* ---------- WHICH HAND THIS COMIC LETTERS IN ----------
   The renderer marks each drawing of a page with its comic's face as one
   class off the project record (lib/comic-render.js), and these six rules
   turn that class into the one property the balloon words read. One mark per
   drawing rather than one per balloon: a font written onto every line of
   speech would be an inline style per word in the book.

   The sheet, the cover and the page thumbnails are the one renderer, so all
   three change together. --cf-hand is the only thing these rules set, and the
   fallbacks below it are the same shape the old single rule carried. */
.cf-page-svg{--cf-hand:"Permanent Marker"}
.cf-font-marker{--cf-hand:"Permanent Marker"}
.cf-font-comicneue{--cf-hand:"Comic Neue"}
.cf-font-kalam{--cf-hand:"Kalam"}
.cf-font-luckiestguy{--cf-hand:"Luckiest Guy"}
.cf-font-creepster{--cf-hand:"Creepster"}
.cf-font-architectsdaughter{--cf-hand:"Architects Daughter"}

/* Comic Forge: an artist's room over the house, not a private theme.

   REBUILT 2026-09-01 (COMIC-FORGE-REBUILD.md, lane 1). What left this sheet
   with the room it dressed: the floating tool cluster and its three popovers,
   the Tool Box's four sub-tabs, the nine-choice create form, the status
   footer, the project panel's shelf, the page rows with their arrows, and the
   comic's own cast form. What arrived: covers, the naming row, the issue line,
   the page thumbnails and their layout strip, THE LINE's box and the MORE
   fold.

   THE KEEP'S LOOK EVERYWHERE: dark, calm, pictures where fields were. Mark's
   ruling 2026-09-02, "I'm sick of mono type": no mono on any chrome in this
   room, anywhere, kicker or chip or press included; mono stays only on
   lettering drawn on the page itself. Every colour a token from tokens.css;
   the two exceptions here are the sticker palettes, which are a property of
   the sound and not of the room.

   FOUR FAMILIES ARE BUILT AT RUNTIME and cannot be grepped, so they stay:
   .cf-balloon-<kind> and .cf-balloon-words-<kind> off the speech kind,
   .cf-blend-<mode> off an art layer's blend, and .cf-sfx-<family> off a
   sticker's container. */
.cf-room{min-height:100%;display:grid;grid-template-rows:minmax(0,1fr);color:var(--text);background:color-mix(in srgb,var(--bg) 54%,transparent)}
.cf-work{min-height:480px;display:grid;place-items:center;padding:clamp(24px,5vw,58px);overflow:auto}
/* THE SHEET FITS ON ONE SCREEN UNDER THE STRIP, ALWAYS (Mark, 2026-09-02: a
   sheet taller than his screen hid everything under it). The work area gives
   the page a short top, and the sheet formula subtracts --cf-chrome, the
   height that really stands above and below the sheet: the top bar, the
   canvas title, the strip, and the work area's own padding. A zoomed-in
   sheet scrolls inside the surface. */
.cf-work:has(>.cf-page-live){place-items:stretch;padding-top:14px;padding-bottom:0}
.cf-page-live{--cf-chrome:176px}
.cf-live{width:min(900px,100%)}
.cf-page-live{align-self:start;width:100%;max-width:1600px;margin:0 auto}
.cf-loading{display:flex;align-items:center;gap:10px;font-size:var(--t-small);color:var(--muted)}
.cf-loading span{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
/* THE MIDDLE WITH NOTHING OPEN: one line and one press, and that is the whole
   screen (the plan: no form, no count, no shelf drawn twice). */
.cf-nothing{display:grid;justify-items:center;gap:18px;text-align:center}
.cf-nothing p{margin:0;color:var(--muted);font-size:var(--t-body);line-height:var(--lh-read)}
.cf-button{min-height:38px;padding:0 16px;border:1px solid var(--edge);border-radius:var(--r-md);font:inherit;font-size:var(--t-small);font-weight:var(--w-med)}
.cf-button-main{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.cf-button:disabled{opacity:.5}

/* ---------- THE LEFT PANEL: THE BOOK ----------
   Your comics, the issues, the pages, Export: one scrolling column of rows.
   Rebuilt 2026-09-02 to the shape the tools people love already share (Clip
   Studio's Page Manager, Comic Life's organizer, Scrivener's binder, Webtoon's
   dashboard), all of which are the same panel.

   THE HOUSE BODY FACE AT THE HOUSE SIZES, and no mono anywhere in this column
   (Mark, 2026-09-02: "why am I looking at this ugly mono type, clear and
   blue"). MARK'S SECOND RULING, SAME DAY, "I'm sick of mono type": no mono on
   chrome anywhere in the comic room, Tool Box included; mono stays only on
   lettering drawn on the page.

   THE ACCENT LANDS ON EXACTLY THREE THINGS: the open comic, the open issue,
   the open page. Everything else is muted, edge and inset. A panel where the
   plus, the add, the export and the selection are all blue is a panel where
   the selection is invisible, which is what this one was.

   THE ROWS ARE THE HOUSE'S OWN ROWS: the Reader's mark row (styles/reader.css)
   is a div holding a full-width press and a cross beside it, which is how a
   cross stands next to a row-sized press without nesting two buttons; the
   Novel Forge's list (styles/audiobook.css) is where the muted-to-text hover
   and the .on selection come from. */
.cf-side{display:grid;gap:20px;align-content:start;padding:14px 10px 24px}
.cf-side-loading{margin:0;color:var(--muted);font-size:var(--t-small)}
.cf-side-error{margin:0;color:var(--danger);font-size:var(--t-tiny);line-height:var(--lh-body)}
/* a block is a kicker, its list, and the one press that adds to it */
.cf-block{display:grid;gap:6px}
.cf-kick{margin:0;padding:0 2px;color:var(--muted);font-size:var(--t-sub);font-weight:var(--w-semi);text-transform:none;letter-spacing:normal}
/* the one add press each list ends with: quiet, and never a filled button */
.cf-add{justify-self:start;margin-top:2px;padding:5px 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font:inherit;font-size:var(--t-small);cursor:pointer}
.cf-add:hover:not(:disabled),.cf-add.on{background:var(--sel);color:var(--text)}
.cf-add:disabled{opacity:.4;cursor:default}
/* THE HOVER CROSS, one shape for a comic, an issue and a page. It is there
   only under the pointer or a keyboard focus, because a list of ten rows each
   wearing a permanent cross is a list that looks like it is asking to be
   emptied; it turns to the danger tone on its own hover so the press says
   what it does before it is pressed. */
.cf-x{flex:none;align-self:center;padding:2px 6px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:var(--t-body);line-height:1;cursor:pointer;opacity:0}
.cf-comic:hover .cf-x,.cf-comic:focus-within .cf-x,.cf-issue:hover .cf-x,.cf-issue:focus-within .cf-x,.cf-page:hover .cf-x,.cf-page:focus-within .cf-x{opacity:1}
.cf-x:hover:not(:disabled){background:var(--sel);color:var(--danger)}
.cf-x:disabled{opacity:0;cursor:default}
/* THE FIELD THAT REPLACES A NAME while it is being typed. It takes the row's
   own width and nothing else in the row answers while it stands. */
.cf-rename{width:100%;min-width:0;padding:4px 6px;border:var(--bd) solid var(--accent-line);border-radius:var(--r-sm);background:var(--inset);color:var(--text);font:inherit;font-size:var(--t-small);outline:none}
.cf-rename:focus{border-color:var(--accent)}

/* ---------- YOUR COMICS: covers with their names ---------- */
.cf-comics{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px 8px}
.cf-comic{position:relative;display:grid;gap:4px;min-width:0}
.cf-comic-go{padding:0;border:0;background:none;cursor:pointer}
.cf-comic-sheet{display:grid;place-items:center;overflow:hidden;aspect-ratio:6.625/10.25;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:var(--sf-paper);box-shadow:var(--sh-card)}
/* THE COVER IS A PICTURE AND ANSWERS NO PRESS OF ITS OWN. The press it sits
   inside is the whole cover; the drawing inside it takes no pointer, so a
   click on a frame in a thumbnail opens the comic rather than the frame. */
.cf-comic-sheet>svg{width:100%;height:100%;pointer-events:none}
.cf-blank{display:block;width:100%;height:100%;background:var(--sf-paper)}
.cf-comic-name{overflow:hidden;padding:0;border:0;background:none;color:var(--ink2);font:inherit;font-size:var(--t-small);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cf-comic:hover .cf-comic-sheet{border-color:var(--ink4)}
.cf-comic:hover .cf-comic-name{color:var(--text)}
.cf-comic.on .cf-comic-sheet{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--sh-card)}
.cf-comic.on .cf-comic-name{color:var(--accent);font-weight:var(--w-med)}
/* the cross sits over the top corner of a cover, where nothing is drawn */
.cf-comic .cf-x{position:absolute;top:2px;right:2px;background:var(--panel)}
/* A COMIC WITH NO PROJECT RECORD WEARS ONE QUIET LINE (the leftovers lane).
   Muted and in the house body face at the small size, under the name, so it
   reads as a note about the comic rather than as a control competing with it:
   the accent in this column belongs to the open comic, issue and page and to
   nothing else. It is not a chip, a pill or a filled press. */
.cf-file{padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:var(--t-tiny);text-align:left;cursor:pointer}
.cf-file:hover:not(:disabled){color:var(--text);text-decoration:underline}
.cf-file:disabled{cursor:default;opacity:.6}
.cf-cover-add{cursor:pointer;padding:0;border:0;background:none;text-align:left}
.cf-cover-add .cf-comic-sheet{background:var(--inset);border-style:dashed}
.cf-cover-add:hover .cf-comic-sheet{border-color:var(--ink4)}
.cf-plus{color:var(--muted);font-size:var(--t-lead);line-height:1}
/* the naming row: a field, Make it, a cross (the Keep's own folder pattern) */
.cf-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px}
.cf-name-field{min-width:0;padding:7px 9px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:var(--inset);color:var(--text);font:inherit;font-size:var(--t-small);outline:none}
.cf-name-field:focus{border-color:var(--accent)}
.cf-name-ok{padding:6px 9px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:none;color:var(--text);font:inherit;font-size:var(--t-small);cursor:pointer}
.cf-name-ok:hover:not(:disabled){background:var(--sel)}
.cf-name-ok:disabled{opacity:.45;cursor:default}
.cf-name-x{padding:0 7px;border:0;background:none;color:var(--muted);font-size:var(--t-body);line-height:1;cursor:pointer}
.cf-name-x:hover{color:var(--danger)}

/* ---------- THE ISSUES: a vertical list, #1 then the name ---------- */
.cf-issues{display:grid;gap:1px}
.cf-issue{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 5px;border-radius:var(--r-sm);cursor:grab}
.cf-issue:active{cursor:grabbing}
.cf-issue:hover{background:var(--sel)}
.cf-issue-sheet{flex:none;display:grid;place-items:center;overflow:hidden;width:22px;aspect-ratio:6.625/10.25;border:var(--bd) solid var(--edge);border-radius:2px;background:var(--sf-paper)}
.cf-issue-sheet>svg{width:100%;height:100%;pointer-events:none}
/* the number is tabular so ten of them stack in one straight column */
.cf-issue-no{flex:none;color:var(--muted);font-size:var(--t-small);font-variant-numeric:tabular-nums}
.cf-issue-name{flex:1;min-width:0;overflow:hidden;padding:2px 0;border:0;background:none;color:var(--ink2);font:inherit;font-size:var(--t-small);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cf-issue:hover .cf-issue-name{color:var(--text)}
.cf-issue.on .cf-issue-sheet{border-color:var(--accent)}
.cf-issue.on .cf-issue-no,.cf-issue.on .cf-issue-name{color:var(--accent)}
.cf-issue.on .cf-issue-name{font-weight:var(--w-med)}

/* ---------- THE PAGES: one column, the first one the Cover ---------- */
.cf-pages{display:grid;gap:1px}
.cf-page{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 5px;border-radius:var(--r-sm);cursor:grab}
.cf-page:active{cursor:grabbing}
.cf-page:hover{background:var(--sel)}
/* THE COVER IS PINNED and says so with the pointer: it is not picked up, so
   it never wears the grab hand the pages behind it wear. */
.cf-page-cover{cursor:default}
.cf-page-go{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:inherit}
.cf-page-sheet{flex:none;display:grid;place-items:center;overflow:hidden;width:30px;aspect-ratio:6.625/10.25;border:var(--bd) solid var(--edge);border-radius:2px;background:var(--sf-paper);box-shadow:var(--sh-card)}
.cf-page-sheet>svg{width:100%;height:100%;pointer-events:none}
.cf-page-folio{min-width:0;overflow:hidden;color:var(--ink2);font-size:var(--t-small);text-overflow:ellipsis;white-space:nowrap}
.cf-page:hover .cf-page-folio{color:var(--text)}
.cf-page.on .cf-page-sheet{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--sh-card)}
.cf-page.on .cf-page-folio{color:var(--accent);font-weight:var(--w-med)}
/* THE LINE THE ROW WOULD LAND ON, while one is in the air. A line between two
   rows says "between these", which is what a reorder is; lighting the row
   under the pointer would say "onto this one", which is what dropping on a
   folder means everywhere else in a computer. */
.cf-drop-before{box-shadow:inset 0 2px 0 0 var(--accent)}
.cf-drop-after{box-shadow:inset 0 -2px 0 0 var(--accent)}
/* the layout strip: fifteen pictures, one press each */
.cf-layout-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;padding:9px;border:1px solid var(--accent-line);border-radius:var(--r-md);background:var(--accent-soft)}
.cf-layout-pick{padding:3px;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--panel);color:var(--muted);cursor:pointer}
.cf-layout-pick:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cf-layout-pick:disabled{opacity:.4;cursor:default}
/* AN EMPTY PAGE SAYS WHAT TO DO ON THE SHEET ITSELF: the layouts to pick from
   and one frame as the other road, centred on the paper. */
.cf-sheet-empty{position:absolute;inset:0;display:grid;place-content:center;gap:14px;padding:24px;text-align:center}
.cf-sheet-empty p{margin:0;font-size:var(--t-small);color:var(--sf-gray)}
.cf-sheet-empty .cf-layout-strip{width:min(100%,520px);grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}
.cf-sheet-empty .cf-canvas-tool{justify-self:center}
/* Export, at the very foot, one quiet word in the same face as everything
   else in this column. It was a mono pill; nothing in the panel is a pill. */
.cf-side-export{justify-self:start;padding:6px 10px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:none;color:var(--muted);font:inherit;font-size:var(--t-small);cursor:pointer}
.cf-side-export:hover:not(:disabled){background:var(--sel);color:var(--text)}
.cf-side-export:disabled{opacity:.4;cursor:default}

/* ---------- THE MIDDLE: THE SHEET, AND NOTHING OVER IT ---------- */
.cf-page-instrument{display:flex;flex-direction:column;gap:12px}
.cf-page-surface{display:grid;place-items:center;min-height:420px;padding:0;overflow:auto;container-type:inline-size}
/* the sheet's wrapper hugs the SVG exactly. The SVG has only a viewBox, no
   intrinsic size, so the wrapper is sized DEFINITELY: the largest box of the
   sheet's own ratio (--sheet-r, written by the room from the same numbers the
   renderer uses) that fits both the surface's width and the room's height
   allowance. The SVG then fills it edge to edge, same ratio, no letterbox. */
.cf-sheet-spot{position:relative;display:block;width:calc(min(100cqw,calc((100dvh - var(--cf-chrome))*var(--sheet-r,0.64777)))*var(--sheet-zoom,1));aspect-ratio:var(--sheet-r,0.64777)}
.cf-sheet-spot>.cf-page-svg{width:100%;height:100%;max-width:none;max-height:none}
/* ---------- TWO FACING PAGES ----------
   The spread is the same spot holding a pair, so its ratio is DOUBLED and its
   width formula is the one above with that doubled ratio: the pair fits the
   same surface width and the same height allowance one sheet did, and zoom
   still multiplies it. Each half then takes half the width at the single
   sheet's own ratio, which is what makes the two pages the same size as each
   other and the gutter the only thing between them. */
.cf-sheet-spot-spread{width:calc(min(100cqw,calc((100dvh - var(--cf-chrome))*var(--sheet-r,0.64777)*2))*var(--sheet-zoom,1));aspect-ratio:calc(var(--sheet-r,0.64777)*2)}
.cf-spread{display:grid;grid-template-columns:1fr 1fr;align-items:start;width:100%;height:100%}
.cf-spread-page{position:relative;aspect-ratio:var(--sheet-r,0.64777)}
.cf-spread-page>.cf-page-svg{width:100%;height:100%;max-width:none;max-height:none}
/* the half a shut book's cover faces: it holds the cover on the right, where a
   cover stands, instead of letting it slide to the middle of the surface */
.cf-spread-blank{background:none}
.cf-page-svg{display:block;width:auto;max-width:100%;height:auto;filter:drop-shadow(0 14px 34px var(--shad)) drop-shadow(0 2px 5px var(--shad));color:var(--sf-pencil);touch-action:none;user-select:none}
/* a thumbnail is a picture of a page: no shadow of its own, no pointer */
.cf-page-svg-thumb{max-height:none;filter:none;pointer-events:none}
/* THE ONE QUIET ROW UNDER THE SHEET, in the storyboard's manner (Mark,
   2026-09-02, pointing at .sf-strip in styles/forge-script.css: "I asked for
   something like this. I want it"). The count line stands at the left and
   everything that can be pressed gathers at the right: Undo, the two turns,
   the one-or-two switch, and the zoom pair with the live percent between
   them. It wraps rather than scrolls, because a row that scrolls sideways
   hides half its presses on a narrow window. */
/* THE STRIP ABOVE THE SHEET IS SCRIPT FORGE'S STRIP (forge-script.css .sf-strip
   and .sf-zoom), said in the same tokens: the count in tiny muted type on
   the left, small square-cornered presses on the right, no bar, no ground.
   Mark, 2026-09-02: "go study Script Forge and come back". */
.cf-page-quiet{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--s2) var(--s5);padding:0 var(--s2) var(--s2);font-size:var(--t-tiny);color:var(--muted);font-variant-numeric:tabular-nums}
.cf-page-quiet .cf-canvas-tool{min-height:0;padding:var(--s1) var(--s3);border:var(--bd) solid var(--edge);border-radius:var(--r-sm);font:inherit;font-size:var(--t-label);line-height:1;letter-spacing:0}
.cf-page-quiet .cf-canvas-tool:hover:not(:disabled),.cf-page-quiet .cf-canvas-tool.on{color:var(--text);border-color:var(--ink4);background:none}
/* the count line: the storyboard's own size, colour and lining figures, so
   the two rooms read as the same row */
.cf-count{margin-right:auto;color:var(--muted);font-size:var(--t-tiny);font-variant-numeric:tabular-nums}
.cf-turn,.cf-brief-switch,.cf-spread-switch,.cf-zoom{display:flex;align-items:center;gap:var(--s1)}
/* the percent holds its width so the row does not shuffle as it counts */
.cf-zoom-n{min-width:6ch}
.cf-canvas-tool{min-height:32px;padding:0 11px;border:1px solid var(--edge);border-radius:var(--r-sm);background:none;color:var(--muted);font:inherit;font-size:var(--t-small);cursor:pointer}
.cf-canvas-tool:hover:not(:disabled),.cf-canvas-tool.on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.cf-canvas-tool:disabled{opacity:.38;cursor:default}

/* ---------- THE SHEET ITSELF ----------
   Comic boards and pages are physical production artifacts. They borrow the
   screenplay's one fixed paper-and-ink pair instead of creating a second
   paper. The strokes go comic-fat, roughly double a table rule, because a
   printed panel border is a drawn line. */
.cf-svg-paper{fill:color-mix(in srgb,var(--sf-paper) 96%,var(--sf-pencil))}
.cf-svg-grid{pointer-events:none;opacity:.28}
.cf-svg-grid-line{fill:none;stroke:var(--sf-gray);stroke-width:1}
.cf-svg-trim,.cf-svg-safe{fill:none;pointer-events:none}
.cf-svg-trim{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:8 7}
.cf-svg-safe{stroke:var(--sf-gray);stroke-width:1.4;stroke-dasharray:5 7}
.cf-svg-frame{fill:color-mix(in srgb,var(--sf-paper) 92%,var(--sf-pencil));stroke:var(--sf-pencil);stroke-width:5;stroke-linejoin:round;cursor:move}
.cf-svg-panel{outline:none}
.cf-svg-panel:hover .cf-svg-frame,.cf-svg-panel:focus .cf-svg-frame{stroke:var(--accent);stroke-width:6}
.cf-svg-panel.on .cf-svg-frame{fill:color-mix(in srgb,var(--sf-paper) 93%,var(--accent));stroke:var(--accent);stroke-width:7}
.cf-svg-order{fill:var(--accent);font-family:var(--font-mono);font-size:20px;font-weight:var(--w-bold)}
.cf-svg-description{fill:var(--sf-gray);font-family:var(--font-ui);font-size:15px;font-style:italic;font-weight:var(--w-med);opacity:.9}
.cf-svg-handle{fill:var(--accent);stroke:var(--sf-paper);stroke-width:4;cursor:nwse-resize}
/* a kept picture carried over a frame lights it as the landing */
.cf-svg-panel.cf-frame-drop .cf-svg-frame{stroke:var(--accent);stroke-dasharray:14 8}
/* the page accepts a dragged balloon or sticker */
.cf-page-svg.cf-drop-live{outline:2px dashed var(--accent);outline-offset:3px}
/* imported masters and revisioned layer placement */
.cf-svg-panel.with-art .cf-svg-frame,.cf-svg-panel.with-art.on .cf-svg-frame{fill:none}
.cf-svg-order-art{paint-order:stroke;stroke:var(--sf-paper);stroke-width:5;stroke-linejoin:round}
.cf-blend-multiply{mix-blend-mode:multiply}.cf-blend-screen{mix-blend-mode:screen}.cf-blend-overlay{mix-blend-mode:overlay}

/* ---------- THE BALLOONS ON THE PAGE ----------
   INK ON PAPER, NOT APP CHROME, and it needs no raw-colour exception to say
   so: --sf-paper and --sf-pencil are declared once at :root in tokens.css
   rather than inside a theme block, so they already mean "the printed page"
   and stay the same in Day and Night. A themed token here would letter a night
   page in pale ink on pale paper.

   The words ride a foreignObject because SVG text does not wrap, and a balloon
   that cannot wrap its line is not a balloon. */
.cf-balloon{outline:none;cursor:move;filter:drop-shadow(0 3px 5px var(--shad))}
.cf-balloon-skin{fill:var(--sf-paper);stroke:var(--sf-pencil);stroke-width:4.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cf-balloon:hover .cf-balloon-skin,.cf-balloon:focus .cf-balloon-skin{stroke:var(--accent);stroke-width:5.5}
.cf-balloon.on .cf-balloon-skin{stroke:var(--accent);stroke-width:6.5}
/* a caption is a box of narration laid over the art, so it reads as a card
   rather than a spoken shape */
.cf-balloon-caption .cf-balloon-skin,.cf-balloon-narration .cf-balloon-skin{fill:color-mix(in srgb,var(--sf-paper) 92%,var(--sf-pencil))}
/* sound has no skin at all: the letters ARE the drawing */
.cf-balloon-sfx .cf-balloon-skin{display:none}
.cf-balloon-words{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:9px 11px;overflow:hidden;color:var(--sf-pencil);font-family:var(--cf-hand,"Permanent Marker"),"Comic Sans MS",var(--font-ui);font-size:23px;line-height:1.18;text-align:center;text-wrap:balance}
.cf-balloon-words-caption,.cf-balloon-words-narration{justify-content:flex-start;text-align:left}
.cf-balloon-words-thought{font-style:italic}
.cf-balloon-words-sfx{font-family:var(--font-trajan);font-size:44px;font-weight:var(--w-bold);letter-spacing:.03em;text-transform:uppercase}
.cf-balloon-words-device{font-family:var(--font-mono);font-size:23px;letter-spacing:.02em}
/* typing in the balloon, on the page (actions/comic/canvas.js arms this) */
.cf-balloon-words[contenteditable]{cursor:text;user-select:text}
.cf-balloon-words[contenteditable]:focus{outline:2px dashed var(--accent);outline-offset:3px}

/* ---------- SOUND, DRAWN ----------
   An sfx is word art, not a container: Bangers, uppercase, filled and double
   stroked, tilted, on a seeded starburst with a hard offset shadow beneath.
   paint-order puts the stroke behind the fill, which is what keeps a heavy
   outline from eating the letterform; without it a 9px stroke on a 40px word
   closes the counters and BOOM becomes a blob.

   The FILL and the burst colour are inline, off the record, because which ink
   a given sound wears is a property of the sound (comic-render.js says why).
   Everything else about the word is here. */
.cf-sfx-word{font-family:"Bangers","Impact","Arial Black",sans-serif;stroke-width:9;paint-order:stroke fill;stroke-linejoin:round;letter-spacing:.02em}
.cf-sfx-shadow{font-family:"Bangers","Impact","Arial Black",sans-serif;fill:var(--sf-pencil);opacity:.72;letter-spacing:.02em}
.cf-sfx-burst{stroke:var(--sf-pencil);stroke-width:4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cf-balloon-sfx{filter:drop-shadow(0 4px 7px var(--shad))}

/* ---------- WHO IS IN THE FRAME ----------
   Pencilled credits in the frame's corner, so they wear the printed-page
   tokens like the balloons and the frames do. The comic's own cast is not
   drawn any more (the cast is the house's one record), but a bundle imported
   from a project file can still carry cast_state_ids and the page must letter
   what it is handed. */
.cf-cast-chip-disc{fill:var(--sf-paper);stroke:var(--sf-pencil);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.92}
.cf-cast-chip-mark{fill:var(--sf-pencil);font-family:var(--font-mono);font-size:15px;font-weight:var(--w-bold);letter-spacing:.02em}
.cf-svg-panel.with-art .cf-cast-chip-disc{opacity:.82}

/* ---------- THE RIGHT PANEL: THE TOOL BOX ----------
   THE LINE, WORDS and MORE. Three blocks, one kicker each, no hint
   paragraphs, and every label a plain word. */
/* The panel is a flex column with its own padding (house-shell.css); the grid
   here is only the three blocks' rhythm, and align-content:start keeps a
   short block from being stretched down the whole column. */
.cf-toolbox{display:grid;align-content:start;gap:18px}
/* THE CREW IN ITS OWN LEFT TAB (2026-09-02): the block keeps its Tool Box shape. */
.cf-crew-side{display:grid;align-content:start;gap:18px}
.cf-crew-side .cf-tool-block{display:grid;align-content:start;gap:12px}
.cf-tool-block{display:grid;align-content:start;gap:9px}
/* THE SWITCH: two pills, one row, equal halves, so neither reads as the
   primary and the lit one is simply the pass on the sheet. */
.cf-pass-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cf-tool-kicker{font-size:var(--t-sub);font-weight:var(--w-semi);color:var(--muted);text-transform:none;letter-spacing:normal}
.cf-look-box,.cf-line-box{width:100%;padding:9px 10px;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--inset);color:var(--text);font-family:var(--font-ui);font-size:var(--t-small);line-height:var(--lh-read);resize:vertical;outline:none}
.cf-look-box:focus,.cf-line-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* THE ART DIRECTOR'S i, beside the pulldown rather than inside it: a select
   row cannot be pressed for a second thing. Round and quiet, so it reads as
   an aside to the control it stands next to and never as its own press. */
.cf-look-pick{display:flex;gap:6px;align-items:center}
.cf-look-pick .imgad-select{flex:1;min-width:0}
/* THE COST i sits at the end of the brush row the way the look i sits at the
   end of the pulldown row: the chips take the width, the press takes its own
   26px and no more. */
.cf-look-pick .imgad-chips{flex:1;min-width:0}
/* THE PACE ICON on each chip in THE LOOK (brain for the deep pass, bolt for
   the quick draft, partials.js) stands before the label with a little air
   around it, never stretched: the chip is a row and the svg is a flex child
   like the label beside it. */
[data-comic-style-brush]{display:inline-flex;align-items:center;gap:5px}
[data-comic-style-brush] svg{flex:none}
.cf-look-i{width:26px;height:26px;flex:none;border:1px solid var(--edge);border-radius:var(--r-round);background:none;color:var(--muted);font:inherit;font-size:var(--t-small);cursor:pointer}
.cf-look-i:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
/* THE CREW: the Cellar's own row shape (cellar.css .cast-row and friends,
   which is a house dress and not a room's), with only the seam between a row
   and the box that opens under it belonging here. */
.cf-crew-seat{display:grid;gap:6px}
/* THE FACE IS ITS OWN PRESS, into the one character editor on the COMIC's
   record (Mark, 2026-09-02). It carries no chrome of its own: the ring on
   .cast-face is the whole of what it looks like, so a row still reads as one
   row and the second target is felt rather than drawn. */
.cast-face-open{flex:none;background:transparent;padding:0;border:0;border-radius:var(--r-round);cursor:pointer}
.cast-face-open:hover .cast-face{border-color:var(--accent)}
.cast-face-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* WHOEVER HOLDS THE CHAIR IS MARKED IN THE ROW (Mark, 2026-09-02). The ask
   box under a row is gone and .cf-crew-ask with it; what stands in its place
   is one lit row, the accent on the left edge, so a person can see at a
   glance which of the three the conversation on the right is with. The panel
   header says it in words; this says it where the press was made. */
.cf-crew-seat.is-chair{border-left:2px solid var(--accent);padding-left:6px;margin-left:-8px}
.cf-crew-seat.is-chair .cast-name{color:var(--accent)}
/* WRITE THE PAGE, in MORE. The same box THE LINE is, because both are places
   a person writes prose, and its two presses sit on the fold's own row. */
.cf-page-writer{display:grid;gap:7px}
.cf-page-writer textarea{width:100%;padding:9px 10px;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--inset);color:var(--text);font-family:var(--font-ui);font-size:var(--t-small);line-height:var(--lh-read);resize:vertical;outline:none}
.cf-page-writer textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* WORDS: the switch, the lettering pulldown, the six balloons and the twelve
   stickers drawn not imported, and the line that is written and not yet
   placed. The switch takes THE LOOK's own two-pill shape, because it is the
   same control doing the same job and a second geometry for it would read as
   a different kind of thing. */
.cf-words-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center}
.cf-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.cf-tool-item{display:grid;gap:5px;justify-items:center;padding:7px 5px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--inset);color:var(--muted);cursor:grab}
.cf-tool-item:hover:not(:disabled){border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.cf-tool-item:active:not(:disabled){cursor:grabbing}
.cf-tool-item:disabled{opacity:.4;cursor:default}
.cf-tool-item-name{overflow:hidden;max-width:100%;font-size:var(--t-label);text-overflow:ellipsis;white-space:nowrap}
.cf-tool-thumb{width:100%;height:auto;max-height:62px;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--panel)}
.cf-tool-thumb rect,.cf-tool-thumb polygon{fill:currentColor;opacity:.62}
.cf-tool-item:hover:not(:disabled) .cf-tool-thumb rect,.cf-tool-item:hover:not(:disabled) .cf-tool-thumb polygon{opacity:.9}
.cf-tool-grid-bubbles{grid-template-columns:repeat(3,minmax(0,1fr))}
.cf-tool-thumb-bubble{max-height:54px}
.cf-tool-thumb-bubble ellipse,.cf-tool-thumb-bubble rect,.cf-tool-thumb-bubble circle,.cf-tool-thumb-bubble path{fill:currentColor;opacity:.62}
.cf-tool-item:hover:not(:disabled) .cf-tool-thumb-bubble ellipse,.cf-tool-item:hover:not(:disabled) .cf-tool-thumb-bubble rect,.cf-tool-item:hover:not(:disabled) .cf-tool-thumb-bubble circle,.cf-tool-item:hover:not(:disabled) .cf-tool-thumb-bubble path{opacity:.9}
/* the thumb overrides are SCOPED to the shelf: a bare .cf-sfx-word here once
   overrode the PAGE's word art too, and its 19px mono beat the SVG's own
   font-size attribute, shrinking every placed sound to a whisper under its
   full-size shadow (caught on pixels 2026-08-31) */
.cf-tool-grid-sfx{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cf-tool-item-sfx{padding:4px}
.cf-sfx-thumb{max-height:38px;background:none;border:0}
.cf-sfx-thumb .cf-sfx-burst{opacity:.85}
.cf-sfx-thumb .cf-sfx-word{font-family:var(--font-mono);font-size:19px;font-weight:800;letter-spacing:.02em;stroke-width:4;paint-order:stroke;stroke-linejoin:round}

/* A LINE WRITTEN AND NOT YET ON THE PAGE, with its one press. Restored in
   lane 5 exactly as it stood before lane 1 took it away with the BUBBLES tab:
   WRITE THE PAGE lands speech with no balloon, so a written line needs a road
   onto the page and this row is it. Drawn only when something is waiting. */
.cf-tool-waiting-list{display:grid;gap:5px}
.cf-tool-waiting{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;padding:6px 7px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--inset)}
.cf-tool-waiting-words{display:block;min-width:0;overflow:hidden;color:var(--muted);font-size:var(--t-label);text-overflow:ellipsis;white-space:nowrap}
.cf-tool-waiting-words b{margin-right:6px;color:var(--accent);font-size:var(--t-small);font-weight:var(--w-med)}
.cf-tool-place{padding:4px 9px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:none;color:var(--text);font:inherit;font-size:var(--t-small);cursor:pointer}
.cf-tool-place:hover:not(:disabled){background:var(--accent);color:var(--onAccent)}

/* ---------- MORE ----------
   A fold, closed. Everything a pro reaches for and a thirteen year old never
   does, in plain rows and small forms in the house's manner. */
.cf-more{padding-top:14px;border-top:1px solid var(--edge)}
.cf-more>summary{cursor:pointer;list-style:none;color:var(--muted);font-size:var(--t-sub);font-weight:var(--w-semi);text-transform:none;letter-spacing:normal}
.cf-more>summary::-webkit-details-marker{display:none}
.cf-more>summary:hover{color:var(--accent)}
.cf-more-body{display:grid;gap:9px;margin-top:13px}
.cf-more-body .cf-tool-kicker:not(:first-child){margin-top:8px}
.cf-more-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cf-more-danger:hover:not(:disabled){color:var(--danger);border-color:var(--danger);background:none}
.cf-more-none{margin:0;color:var(--muted);font-size:var(--t-label);line-height:var(--lh-body)}
.cf-import{position:relative;display:inline-block;overflow:hidden;min-height:32px;padding:7px 11px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);cursor:pointer;color:var(--muted);font:inherit;font-size:var(--t-small)}
.cf-import:hover{color:var(--accent);border-color:var(--accent-line)}
.cf-import input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
/* the exact numbers, the guides and the crop forms */
.cf-frame-form,.cf-layout-form{display:grid;gap:8px}
.cf-number-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cf-number-grid label,.cf-layout-form label{display:grid;gap:5px}
.cf-number-grid span,.cf-layout-form span{color:var(--muted);font-size:var(--t-small)}
.cf-number-grid input,.cf-layout-form input{width:100%;min-width:0;padding:8px 9px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--inset);color:var(--text);font:var(--w-med) var(--t-small)/1.3 var(--font-ui);outline:none}
.cf-number-grid input:focus,.cf-layout-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cf-layout-form{grid-template-columns:1fr 1fr}
.cf-layout-form .cf-canvas-tool{grid-column:1/-1}
/* the reading order */
.cf-reading-order{display:grid;gap:5px}
.cf-reading-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px;border:1px solid transparent;border-radius:var(--r-md)}
.cf-reading-row.on{border-color:var(--accent-line);background:var(--accent-soft)}
.cf-reading-row>button{display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:7px;background:none;border:0;color:inherit;cursor:pointer;text-align:left}
.cf-reading-row>button b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--inset);color:var(--accent);font-size:var(--t-small);font-weight:var(--w-med)}
.cf-reading-row>button span{overflow:hidden;color:var(--muted);font-size:var(--t-label);text-overflow:ellipsis;white-space:nowrap}
.cf-reading-row>div{display:flex;gap:3px}
.cf-reading-row>div button{width:27px;height:27px;border:1px solid var(--edge);border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.cf-reading-row>div button:hover:not(:disabled){color:var(--accent);border-color:var(--accent-line)}
.cf-reading-row>div button:disabled{opacity:.28;cursor:default}
/* the folds inside MORE */
.cf-card-fold{border-top:1px solid var(--edge);padding-top:13px}
.cf-card-fold>summary{cursor:pointer;font-size:var(--t-sub);font-weight:var(--w-semi);text-transform:none;letter-spacing:normal;color:var(--muted)}
.cf-card-fold>summary:hover{color:var(--text)}
/* the layer stack */
.cf-layer-list{display:grid;gap:6px}
.cf-layer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px;border:1px solid transparent;border-radius:var(--r-md)}
.cf-layer-row.on{border-color:var(--accent-line);background:var(--accent-soft)}
.cf-layer-row.is-hidden{opacity:.56}
.cf-layer-row>button{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;background:none;border:0;color:inherit;cursor:pointer;text-align:left}
.cf-layer-row img{width:42px;height:42px;border:1px solid var(--edge);border-radius:var(--r-sm);object-fit:cover;background:var(--inset)}
.cf-layer-row span,.cf-layer-row b,.cf-layer-row small{display:block;min-width:0}
.cf-layer-row b{overflow:hidden;font-size:var(--t-tiny);text-overflow:ellipsis;white-space:nowrap}
.cf-layer-row small{margin-top:2px;color:var(--muted);font-size:var(--t-label)}
.cf-layer-row em{color:var(--accent);font-size:var(--t-small);font-weight:var(--w-med);font-style:normal}
.cf-layer-row>div{display:flex;gap:3px}
.cf-layer-row>div button{width:28px;height:28px;border:1px solid var(--edge);border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.cf-layer-row>div button:hover:not(:disabled){color:var(--accent);border-color:var(--accent-line)}
.cf-layer-row>div button:disabled{opacity:.28;cursor:default}
/* the art forms: the field names are a contract with actions/comic/art.js */
.cf-art-import-form,.cf-art-transform-form,.cf-art-properties,.cf-art-replace{display:grid;gap:10px}
.cf-art-import-form label:not(.cf-art-choice),.cf-art-transform-form label,.cf-art-properties label:not(.cf-art-choice),.cf-art-replace label{display:grid;gap:5px}
.cf-art-import-form label>span,.cf-art-transform-form label>span,.cf-art-properties label>span,.cf-art-replace label>span,.cf-art-field-label{color:var(--muted);font-size:var(--t-small)}
.cf-art-import-form input:not([type=radio]),.cf-art-transform-form input,.cf-art-properties input:not([type=radio]),.cf-art-replace input{width:100%;min-width:0;padding:8px 9px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--inset);color:var(--text);font:var(--w-med) var(--t-small)/1.3 var(--font-ui);outline:none}
.cf-art-import-form input:focus,.cf-art-transform-form input:focus,.cf-art-properties input:focus,.cf-art-replace input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cf-file-seat input::file-selector-button{margin-right:9px;padding:6px 9px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:none;color:var(--accent);font:inherit;font-size:var(--t-small);cursor:pointer}
.cf-art-choices{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.cf-art-choice{position:relative;cursor:pointer}
.cf-art-choice input{position:absolute;opacity:0;pointer-events:none}
.cf-art-choice span{display:block;padding:6px 9px;border:1px solid var(--edge);border-radius:var(--r-pill);color:var(--muted);font-size:var(--t-label)}
.cf-art-choice input:checked+span{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.cf-art-form-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cf-art-facts{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.cf-art-facts span{padding:5px 7px;border:1px solid var(--edge);border-radius:var(--r-pill);color:var(--muted);font-size:var(--t-label)}
.cf-art-transform-form,.cf-art-properties,.cf-art-replace{padding-top:13px}
/* the master download, a quiet link wearing the tool button's shape */
.cf-art-download{display:block;margin-top:9px;text-align:center;text-decoration:none}

/* THE BRIEF'S OWN RULES moved to public/styles/comic-brief.css (Mark's
   ruling, 2026-09-02, on the mono type), this sheet was already near 600
   lines, and the brief's document face is a big enough change to want its
   own home rather than crowding this one further. Linked beside this sheet
   in index.html, same version tag. */

/* ---------- TEACH MODE (Mark's ruling, 2026-09-02) ----------
   THE CANVAS SHOWS THE ROOM AND NOTHING OVER IT. There is no narration card
   here any more: the words are in the thread on the right, said by whoever
   holds the chair, and the two presses that walk the demo stand under the
   line that was just said. So all this stylesheet owns of the demo is the
   LIGHT on the control the person must press next.

   NOTHING IS DISABLED AND NOTHING IS HIDDEN. The lit control is the only
   thing the demo does to the room, and it is a soft accent pulse rather than
   a colour swap, so the control still reads as itself. The pulse is stopped
   for anybody who has asked for less motion, and the ring stays: the person
   who cannot see movement still has to be able to see WHICH press. */

/* THE ONE CONTROL THE PERSON MUST PRESS NEXT. */
.teach-next{position:relative;outline:2px solid var(--accent);outline-offset:3px;
  border-radius:var(--r-pill);animation:teach-pulse 1.6s ease-in-out infinite}
@keyframes teach-pulse{
  0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}
  50%{box-shadow:0 0 0 8px transparent}
}
/* THE FRAME IS LIT THROUGH ITS SURFACE, because the sheet is one SVG drawn by
   lib/comic-render.js and a lib may not learn a room's demo. The first frame
   in reading order is the one the step names. */
.cf-teach-frame .cf-svg-panel:first-of-type .cf-svg-frame{stroke:var(--accent);
  animation:teach-pulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .teach-next,.cf-teach-frame .cf-svg-panel:first-of-type .cf-svg-frame{animation:none}
}
/* THE SWITCH AT THE RIGHT END OF ANN'S HEADER. It wears the house's own chip
   on a 13px pill, the shape the WORDS and line-art switches already are; this
   only pushes it to the end of the row and keeps it from being squeezed. */
.house-ann-teach{margin-left:auto;flex:none}

@media(max-width:760px){
  .cf-work{min-height:0;padding:24px 18px}
  .cf-page-surface{min-height:330px}
  .cf-sheet-spot{width:min(100cqw,550px)}
  .cf-sheet-spot-spread{width:min(100cqw,1100px)}
}
@media(max-width:560px){
  .cf-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-tool-grid-sfx{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cf-art-form-pair{grid-template-columns:1fr}
  .cf-layer-row>button{grid-template-columns:38px minmax(0,1fr)}
  .cf-layer-row img{width:38px;height:38px}
  .cf-layer-row em{display:none}
}
@media(max-width:430px){.cf-work{padding:20px 14px}}