.csheet-panel,
#toasts {
  --ground: #0a0a0a;
  --ink: #ededed;
  --ink-dim: #a1a1a1;
  --ink-faint: #858585;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);
  --hover: rgba(255, 255, 255, 0.07);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
}
:is(.csheet-panel, #toasts) p { margin: 0; color: inherit; }
:is(.csheet-panel, #toasts) :is(button, input) { font-family: inherit; }
.csheet {
  --sheet-w: 210;
  --sheet-h: 297;
  --cs-red: #e2382b;
  --cs-yellow: #f2d33c;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.csheet [hidden] { display: none !important; }
.csheet-head { order: -3; min-width: 0; }
.csheet-object { order: -2; min-width: 0; margin: 0; }
.csheet-start { order: -1; min-width: 0; }
.csheet-object img { display: block; width: 100%; height: auto; }
.csheet:not([data-open]) :is(.csheet-side, .csheet-foot, .csheet-door, .csheet-frame, .csheet-hint, .csheet-acts, .csheet-exit) { display: none; }
.csheet:not([data-open]) :is(.csheet-bar, .csheet-stage-col, .csheet-panel) { display: none; }
.csheet-add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: 22px;
  font-size: 17px;
  cursor: pointer;
}
.csheet-file-in,
.csheet-folder-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.csheet-ask-note {
  display: none;
  margin: 12px 0 0;
  font: 400 15px/1.4 var(--sans);
  color: var(--ink-dim, #535353);
}
noscript .csheet-ask-note { display: block; }
.csheet-add-folder,
.csheet-paper-swap {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink, #1e1e1e);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong, rgba(44, 44, 44, 0.32));
  cursor: pointer;
}
.csheet-resume { margin-top: 10px; width: 100%; }
.csheet-start .trust { margin-top: 18px; }
.csheet-stage-col { min-width: 0; }
.csheet-stage {
  position: relative;
  box-sizing: border-box;
  height: clamp(420px, 72vh, 860px);
  padding: 24px;
  display: grid;
  place-items: center;
  background: var(--desk, #e9e9e9);
}
.csheet-sheet {
  display: block;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--sheet-w) / var(--sheet-h);
  background: #fff;
  box-shadow: var(--lift, 0 4px 14px rgba(29, 29, 29, 0.3));
}
.csheet[data-black] .csheet-sheet { background: #0a0a0a; }
.csheet[data-open] .csheet-sheet { cursor: pointer; }
.csheet.dragging .csheet-sheet { cursor: grabbing; }
.csheet.dropping .csheet-stage { outline: 2px solid var(--ink, #1e1e1e); outline-offset: -2px; }
.csheet.dropping:not([data-open]) { outline: 2px dashed rgba(226, 56, 43, 0.55); outline-offset: 8px; }
.csheet-drop-say { display: none; }
.csheet-hits { position: absolute; pointer-events: none; }
.csheet-hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: transparent;
  pointer-events: none;
}
.csheet-hit[aria-pressed='true'] { outline: 2px solid #1e1e1e; outline-offset: 1px; }
.csheet-hit:focus-visible { outline: 2px dashed #1e1e1e; outline-offset: 1px; }
.csheet:is([data-black], [data-look='strip']) .csheet-hit:is([aria-pressed='true'], :focus-visible) { outline-color: var(--cs-yellow); }
.csheet[data-moving] .csheet-hit[aria-pressed='true'] { outline-style: dashed; }
.csheet-progress,
.csheet-hint {
  margin: 10px 0 0;
  min-height: 1.45em;
  font: 400 14.5px/1.45 var(--sans);
  color: var(--ink-dim, #535353);
}
.csheet-progress { font-weight: 500; color: var(--ink, #1e1e1e); }
.csheet-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
:is(.csheet-acts, .csheet-bar, .csheet-sheetbar, .csheet-foot) .btn { background: var(--ground, #fafafa); }
:is(.csheet-acts, .csheet-bar, .csheet-sheetbar, .csheet-foot) .btn:hover { border-color: var(--line-strong); }
.csheet .btn.btn-primary { background: var(--brand, #222222); border-color: var(--brand, #222222); color: #f5f5f5; }
.csheet .btn.btn-primary:hover { background: var(--brand-hover, #2d2d2d); border-color: var(--brand-hover, #2d2d2d); }
.csheet-bar {
  order: -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  background: var(--ground, #fafafa);
}
.csheet-bar .hero-cap { flex: 1; min-width: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.csheet[data-open] .csheet-bar .hero-cap { justify-content: center; }
.csheet:not([data-device='computer']) .csheet-png { display: none; }
.csheet-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.csheet-side-title { margin: 6px 0 0; font: 500 13.5px/1.3 var(--sans); color: var(--ink-dim, #696969); }
.csheet-sheets { display: grid; gap: 10px; }
.csheet-thumb {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font: 500 13px/1.2 var(--sans);
  color: var(--ink-dim, #535353);
  cursor: pointer;
}
.csheet-thumb canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(29, 29, 29, 0.18); }
.csheet-thumb[aria-current='true'] { border-color: var(--ink, #1e1e1e); color: var(--ink, #1e1e1e); }
.csheet-thumb.drop { border-color: var(--cs-red); border-style: dashed; }
.csheet-thumb:focus-visible { outline: 2px solid var(--ink, #1e1e1e); outline-offset: 2px; }
.csheet-out-empty { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--ink-faint, #858585); }
.csheet .zine-spare-title { display: none; }
.csheet .zine-spare-in { display: grid; gap: 8px; }
.csheet .zine-spare-say { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-dim, #696969); }
.csheet .zine-spare-row { display: flex; flex-wrap: wrap; gap: 6px; }
.csheet .zine-spare {
  width: 56px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  cursor: grab; background: var(--desk, #e9e9e9);
}
.csheet .zine-spare .zine-pick-thumb { display: block; width: 100%; height: 100%; }
.csheet .zine-spare.dragging { opacity: 0.4; }
.csheet .zine-spare:focus-visible { outline: 2px solid var(--ink, #1e1e1e); outline-offset: 2px; }
.csheet:not([data-device='computer']) :is(.csheet-side-title:first-child, .csheet-sheets) { display: none; }
.csheet:not([data-device='computer']) .csheet-side:has(.csheet-out[hidden]) { display: none; }
.csheet-door {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-top: 14px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line, rgba(30, 30, 30, 0.1));
  border-radius: var(--radius, 10px);
  background: #ffffff url(../paper-grain.png) 0 0 / 256px 256px;
  background-blend-mode: multiply;
  box-shadow: 0 1px 2px rgba(29, 29, 29, 0.05), 0 12px 28px -14px rgba(29, 29, 29, 0.22);
  color: var(--ink, #1e1e1e);
}
.csheet-door > div { display: grid; gap: 14px; justify-items: start; }
.csheet-door-mark { height: 14px; color: var(--ink, #1e1e1e); }
.csheet-door-say {
  margin: 0;
  font: 300 13.5px/1.6 var(--sans);
  letter-spacing: 0.005em;
  color: var(--ink-dim, #696969);
  text-wrap: pretty;
}
.csheet-door-act {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #222222;
  border-radius: var(--radius-btn, 6px);
  background: #222222;
  font: 500 14.5px/1.2 var(--sans);
  color: #ffffff;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.csheet-door-act:hover { background: #2d2d2d; border-color: #2d2d2d; }
.csheet-door-act:visited { color: #ffffff; }
.csheet-door-act:focus-visible { outline: 2px solid var(--ink, #1e1e1e); outline-offset: 2px; }
.csheet-door-note { margin: -4px 0 0; font: 400 13px/1.45 var(--sans); color: var(--ink-dim, #696969); }
.csheet-panel {
  min-width: 0;
  background: var(--app-panel, rgba(22, 22, 22, 0.97));
  border: 1px solid var(--app-on, rgba(255, 255, 255, 0.12));
  border-radius: var(--app-radius, 12px);
  box-shadow: var(--app-shadow, 0 3px 8px rgba(29, 29, 29, 0.18), 0 26px 48px rgba(29, 29, 29, 0.3));
  color: var(--app-ink, #ededed);
  padding: var(--card-pad, 12px 16px 16px);
}
.csheet-panel:not(:has(*)) { display: none; }
.csheet-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; }
.csheet-panel-head p { font-weight: 500; font-size: 16px; }
.csheet-title { width: 100%; min-width: 0; }
.csheet-panel .csheet-paper-swap { color: var(--ink); text-decoration-color: var(--line-strong); }
.csheet-more-toggle { margin: 10px 0 4px; }
.csheet-frame { display: grid; gap: 8px; }
.csheet-loupe { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #050505; }
.csheet-frame-label { margin: 0; font: 500 15px/1.3 var(--mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.csheet-frame-time { margin: 0; font-size: 13px; color: var(--ink-dim); }
.csheet-frame-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.csheet-circle[aria-pressed='true'] { background: var(--cs-red); border-color: var(--cs-red); color: #ffffff; }
.csheet-move[aria-pressed='true'] { border-color: var(--ink, #1e1e1e); }
.csheet:not([data-device='computer']) :is(.csheet-rotate, .csheet-done) { display: none; }
.csheet[data-device='computer'] .csheet-move { display: none; }
html.csheet-open { overflow: hidden; }
.csheet[data-open] {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  padding: 0 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
  gap: 12px;
  background: var(--ground, #fafafa);
}
.csheet[data-open] :is(.csheet-head, .csheet-start, .csheet-object) { display: none; }
html.csheet-open .dialog-backdrop { z-index: 61; }
html.csheet-open .dialog { z-index: 62; }
html.csheet-open #toasts { z-index: 63; }
.csheet[data-open] .csheet-bar { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line, rgba(30, 30, 30, 0.1)); }
.csheet:not([data-device='computer'])[data-open] .csheet-stage-col { order: 0; }
.csheet:not([data-device='computer'])[data-open] .csheet-side { order: 1; }
.csheet:not([data-device='computer'])[data-open] .csheet-foot { order: 2; }
.csheet:not([data-device='computer'])[data-open] .csheet-stage {
  height: auto;
  padding: 8px;
  display: block;
  overflow-x: auto;
  touch-action: pan-x pan-y;
}
.csheet:not([data-device='computer'])[data-open] .csheet-sheet { max-width: none; max-height: none; margin: 0 auto; }
.csheet-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -16px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line, rgba(30, 30, 30, 0.1));
  background: var(--ground, #fafafa);
}
.csheet-sheetbar { display: flex; align-items: center; gap: 8px; }
.csheet-sheetno { flex: 1; text-align: center; font: 500 14.5px/1.2 var(--sans); }
.csheet[data-sel]:not([data-moving]) .csheet-sheetbar { display: none; }
.csheet-foot .csheet-frame { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.csheet-foot .csheet-loupe { width: 72px; height: 72px; }
.csheet-foot .csheet-frame-acts { grid-column: 1 / -1; }
.csheet-foot .csheet-frame-acts .btn { flex: 1; }
.csheet-foot .csheet-frame-time { display: none; }
.csheet:not([data-device='computer'])[data-open]:not([data-panel]) .csheet-panel { display: none; }
.csheet:not([data-device='computer'])[data-open][data-panel] .csheet-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  max-height: 55vh;
  max-height: 55dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 14px 14px 0 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.csheet[data-device='computer'] .csheet-panel-head { display: none; }
.csheet:not([data-device='computer']) .csheet-panel .ctl-opt,
.csheet:not([data-device='computer']) :is(.csheet-bar, .csheet-foot, .csheet-acts, .csheet-panel) .btn,
.csheet:not([data-device='computer']) :is(.csheet-door-act, .csheet-paper-swap) { min-height: 44px; }
.csheet:not([data-device='computer']) .csheet-panel .ctl-slider { min-height: 44px; }
.csheet:not([data-device='computer']) .csheet-panel .ctl-range { height: 44px; }
.csheet[data-device='computer']:not([data-open]) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 48px;
  row-gap: 30px;
  align-items: start;
}
.csheet[data-device='computer']:not([data-open]) .csheet-head { grid-column: 1; grid-row: 1; align-self: end; }
.csheet[data-device='computer']:not([data-open]) .csheet-start { grid-column: 1; grid-row: 2; }
.csheet[data-device='computer']:not([data-open]) .csheet-object { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.csheet[data-device='computer'] .csheet-head h1 { font-size: clamp(44px, 4.6vw, 64px); }
.csheet[data-device='computer'] .csheet-add { display: inline-flex; padding: 0 26px; }
.csheet[data-device='computer'] .csheet-ask-note { display: block; }
.csheet[data-device='computer'] .csheet-resume { width: auto; margin-left: 12px; }
.csheet[data-device='computer'][data-open] {
  padding: 0;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  gap: 0;
  grid-template-columns: 200px minmax(0, 1fr) 344px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'bar bar bar' 'side stage panel';
}
.csheet[data-device='computer'][data-open] .csheet-bar { grid-area: bar; padding: 10px 20px; }
.csheet[data-device='computer'][data-open] .csheet-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 12px 14px 16px;
  border-right: 1px solid var(--line, rgba(30, 30, 30, 0.1));
}
.csheet[data-device='computer'][data-open] .csheet-stage-col {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}
.csheet[data-device='computer'][data-open] .csheet-stage { flex: 1 1 auto; height: auto; min-height: 280px; }
.csheet[data-device='computer'][data-open] :is(.csheet-hint, .csheet-progress) { text-align: center; }
.csheet[data-device='computer'][data-open] .csheet-acts { justify-content: center; }
.csheet[data-device='computer'] .csheet-foot { display: none; }
.csheet[data-device='computer'][data-open] .csheet-panel {
  --ground: #fafafa;
  --ink: #1e1e1e;
  --ink-dim: #535353;
  --ink-faint: #696969;
  --line: rgba(44, 44, 44, 0.13);
  --line-strong: rgba(44, 44, 44, 0.32);
  --hover: rgba(44, 44, 44, 0.05);
  --on: #ffffff;
  --well: #ffffff;
  grid-area: panel;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 22px;
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
}
.csheet[data-device='computer'] .csheet-panel .ctl-seg { background: rgba(44, 44, 44, 0.06); border-color: transparent; }
.csheet[data-device='computer'] .csheet-panel .ctl-seg .ctl-opt.active { box-shadow: 0 1px 2px rgba(29, 29, 29, 0.14); }
.csheet[data-device='computer'] .csheet-panel .ctl-range:is(:hover, :focus-visible)::-webkit-slider-thumb { background: var(--ink); box-shadow: 0 0 0 3px rgba(44, 44, 44, 0.16); }
.csheet[data-device='computer'] .csheet-settings-in > .ctl-title:first-child { display: none; }
.csheet:not([data-device='computer']) .csheet-panel :is(.tool-side-top, .tool-side-facts, .tool-side-head) { display: none; }
.csheet .tool-side-top { display: grid; gap: 8px; }
.csheet .tool-side-title {
  margin: 0;
  font: 400 32px/1.05 'Redaction 50', 'Redaction', Georgia, serif;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.csheet .tool-side-top .csheet-sum-name { margin: 0; font: 500 12.5px/1.3 var(--mono, ui-monospace, monospace); color: var(--ink-dim); overflow-wrap: anywhere; }
.csheet .tool-side-say { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink-dim); text-wrap: pretty; }
.csheet .tool-side-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 16px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 400 13.5px/1.3 var(--sans);
}
.csheet .tool-side-facts dt { color: var(--ink-faint); }
.csheet .tool-side-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.csheet .tool-side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -10px; }
.csheet .tool-side-name { margin: 0; font: 500 16px/1.2 var(--sans); color: var(--ink); }
.csheet .tool-side-reset {
  height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-btn, 6px);
  background: none;
  font: 500 13.5px/1 var(--sans);
  color: var(--ink-dim);
  cursor: pointer;
}
.csheet .tool-side-reset:hover:not(:disabled) { color: var(--ink); background: var(--hover); }
.csheet .tool-side-reset:disabled { opacity: 0.38; cursor: default; }
.csheet .tool-side-reset:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.csheet[data-device='computer'] .csheet-panel .csheet-frame-label { display: none; }
.csheet[data-device='computer'] .csheet-panel .csheet-loupe { background: #e9e9e9; }
.csheet[data-device='computer'][data-open] .csheet-panel .csheet-door { margin-top: auto; flex: 0 0 auto; }