/* BlakleySharing CipherLab - MIT (c) 2026 ipusiron. */
:root {
  --bg: #f6f4ed;
  --paper: #fffdf7;
  --ink: #152b45;
  --muted: #44576b;
  --line: #aabccb;
  --grid: #d9e4e9;
  --accent: #5e3a87;
  --red: #a33c34;
  --focus: #5e3a87;
  --shadow: #d9d6cc;
  --on-accent: #fffdf7;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1b2d;
  --paper: #172940;
  --ink: #eaf1f6;
  --muted: #c5d4df;
  --line: #668098;
  --grid: #30485f;
  --accent: #c9a8f0;
  --red: #ffaaa1;
  --focus: #c9a8f0;
  --shadow: #091523;
  --on-accent: #172940;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  font: 1rem/1.55 system-ui, sans-serif;
}
button, input, select { font: inherit; }
:where(button) {
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  padding: .4rem .7rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}
@media (hover: hover) { button:hover { border-color: var(--accent); } }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a { color: var(--accent); overflow-wrap: anywhere; }
button:disabled { cursor: wait; opacity: .7; }
/* A button that opens another view (dialog or tab): link-like text with an arrow, unlike operation buttons. */
.nav-button { border-color: transparent; background: transparent; color: var(--accent); text-align: start;
  text-decoration: underline; text-underline-offset: .2em; font-weight: 600; }
.nav-button::after { content: "→"; content: "→" / ""; display: inline-block; margin-inline-start: .3em; text-decoration: none; }
@media (hover: hover) { .nav-button:hover { border-color: var(--accent); } }
.page-header, main, footer { width: min(100% - 2rem, 1000px); margin-inline: auto; }
.page-header { padding: 1.4rem 0 .6rem; }
.masthead { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 2.7rem); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
h1 span, h2, h3 { color: var(--accent); }
.header-tools { display: flex; gap: .3rem; align-self: flex-end; }
.startup-control-group { min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.startup-note { margin: .5rem 0; padding: .5rem .75rem; border-left: 4px solid var(--accent); background: var(--paper); }
.startup-note p { margin: 0; }
.startup-note a { display: inline-flex; min-height: 44px; align-items: center; }
.graph-loading { fill: var(--muted); font: 20px system-ui, sans-serif; }

.icon-button { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-weight: 700; }
.tabs, .panel { background: var(--paper); border: 1px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; padding: .3rem; }
.tabs button { border: 0; min-width: 0; padding: .3rem .15rem; font-size: .875rem; line-height: 1.4; }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom: 3px solid var(--accent); font-weight: 700; }
.panel { padding: .65rem; margin: 1rem 0; min-width: 0; overflow-wrap: anywhere; }
.panel > :first-child { margin-top: 0; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
.result { color: var(--accent); font-weight: 700; overflow-wrap: anywhere; }
footer { padding: 1rem 0 3rem; text-align: center; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
details {
  min-width: 0;
  margin: .75rem 0;
  padding: 0 .6rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--paper);
}
details > summary {
  min-height: 44px;
  margin: 0 -.6rem;
  padding: .6rem;
  border-radius: 7px;
  background: var(--bg);
  cursor: pointer;
  font-weight: 700;
}
details[open] { padding-bottom: .6rem; }
details[open] > summary {
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--muted);
  border-radius: 7px 7px 0 0;
}
details > summary + * { margin-top: 0; }
details > :last-child:not(summary) { margin-bottom: 0; }
dialog {
  width: min(100% - 1rem, 46rem);
  max-width: none;
  max-height: 90dvh;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 8px;
}
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #101a2ab0; }
.help-header {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line);
}
.help-header h2 { margin: 0; }
.help-header button { flex: none; }
.help-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 1rem 1rem; overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .masthead { display: grid; grid-template-columns: 142px minmax(0, 1fr) 142px; gap: 1rem; }
  .masthead h1 { grid-column: 2; }
  .header-tools { grid-column: 3; align-self: start; }
  .panel { padding: 1.1rem; }
  .tabs button { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.math-primer { margin-bottom: 1rem; }
.math-primer > summary { color: var(--accent); }
.sharing-primer { padding: .75rem; border-left: 4px solid var(--accent); background: var(--bg); }
.sharing-primer p { margin: .5rem 0 0; }
.threshold-flow { margin: 0; }
.threshold-current { font-weight: 600; }
.primer-example { margin: 1rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.primer-example h3 { margin: 0 0 .5rem; }
.primer-example p { margin: .5rem 0; }
.primer-example .formula { padding: .45rem .65rem; background: var(--bg); font-weight: 600; }
.primer-equations { table-layout: fixed; }
.primer-equations caption { padding: .35rem 0; text-align: left; font-size: .875rem; font-weight: 600; }
.primer-equations th:first-child { width: 5.5rem; }
.primer-equations th, .primer-equations td { padding: .35rem; }
.primer-equations td:last-child { font-size: .9375rem; }

.stage-card { min-width: 0; margin: 1rem 0; padding: .65rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.stage-card > :first-child { margin-top: 0; }
.coordinate-plane { display: block; width: 100%; max-width: 360px; height: auto; margin: .5rem auto; background: var(--paper); }
.share-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; }
.share-edit-plot { min-width: 0; }
.share-edit-layout > details { margin: 0; }
.edit-share-choice { grid-template-columns: minmax(0, 1fr) minmax(4rem, 1fr); align-items: center; gap: .5rem; }
.edit-actions { display: grid; gap: .5rem; margin: .75rem 0; }
.edit-step-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; }
.edit-step-row > span { font-size: .875rem; }
.edit-disabled-note { margin: 0 0 .75rem; font-size: .875rem; }
@media (min-width: 720px) {
  .share-edit-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
}
.grid-line { stroke: var(--grid); stroke-width: 1; }
.grid-axis { stroke: var(--muted); stroke-width: 1.2; }
.grid-label { fill: var(--ink); font: 12px system-ui, sans-serif; }
.grid-base { fill: var(--muted); opacity: .35; }
.grid-mark { fill: var(--accent); }
.grid-axis-label { fill: var(--ink); font: 600 16px system-ui, sans-serif; }
.grid-pointer-surface { fill: transparent; pointer-events: all; }
.grid-tooltip { pointer-events: none; }
.grid-tooltip-box { fill: var(--paper); stroke: var(--muted); stroke-width: 1.2; }
.grid-tooltip-label { fill: var(--ink); font: 14px system-ui, sans-serif; }
.grid-hover-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; pointer-events: none; }
.grid-overlap { fill: var(--paper); stroke: var(--accent); stroke-width: 1.7; }
.grid-secret { fill: var(--paper); stroke: var(--red); stroke-width: 2; }
.grid-selected { fill: none; stroke: var(--accent); stroke-width: 2; }
.grid-candidate-column { fill: var(--accent); opacity: .09; }
.graph-guide {
  fill: none; stroke: var(--accent); opacity: .8; stroke-width: 2;
  stroke-dasharray: 6 4; stroke-linecap: round; stroke-linejoin: round;
}
.real-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.rule-arrow { stroke: var(--accent); fill: var(--accent); stroke-width: 1.4; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .875rem; }
.legend span { color: var(--accent); }
.three-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.mod-approaches { min-width: 0; margin: .75rem 0 0; padding: .35rem; border: 1px solid var(--line); }
.mod-approaches legend { padding: 0 .25rem; font-weight: 600; }
.mod-approaches .choice { display: flex; width: 100%; }
.mod-explanation { margin: .5rem 0; overflow-wrap: anywhere; }
.mod-note { font-size: .875rem; }
figure { min-width: 0; margin: 0; }
figcaption { font-weight: 700; color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .7rem 0; }
.actions button[aria-pressed="true"], .slice-list button[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.actions output { min-width: 3.8rem; text-align: center; font-variant-numeric: tabular-nums; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0; }
#pit-card-c .settings-grid > label:first-child { grid-column: span 2; }
label { min-width: 0; display: grid; gap: .2rem; }
input:not([type="checkbox"]):not([type="radio"]), select {
  min-height: 44px; width: 100%; min-width: 0; padding: .4rem; border: 1px solid var(--muted);
  border-radius: 6px; color: var(--ink); background: var(--paper); font-size: 1rem;
}
.choice { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: .4rem .5rem; gap: .5rem; cursor: pointer; }
.choice input { width: 18px; height: 18px; min-width: 0; min-height: 0; margin: 0; padding: 0; flex: 0 0 18px; accent-color: var(--accent); }
.formula { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.danger-text { color: var(--red); font-weight: 700; }
.legend, .formula, .result { min-width: 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .4rem; border: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
th { background: var(--bg); }
.matrix-frame { max-width: 100%; }
.matrix-frame table { table-layout: fixed; width: 100%; }
.matrix-frame th, .matrix-frame td { padding: .3rem .1rem; font-size: .875rem; text-align: center; }
.matrix-all-step { margin: .8rem 0; }
.slice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .45rem; }
.slice-list button { padding: .2rem; min-width: 0; font-size: .875rem; overflow-wrap: anywhere; }
.slice-list svg { width: 100%; max-width: 76px; display: block; margin: auto; }
.slice-dot { fill: var(--accent); }
.slice-list button[aria-pressed="true"] .slice-dot { fill: var(--on-accent); }
.slice-list button[aria-pressed="true"] .grid-line { stroke: var(--on-accent); opacity: .3; }
.scene { display: block; width: min(100%, 360px); height: auto; aspect-ratio: 1; touch-action: pan-y; margin: auto; }
.camera-controls { justify-content: center; }
details details { margin: .5rem 0; }
@media (max-width: 719px) {
  .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .15rem; padding: .2rem; }
  #tab-intersections, #tab-dimensions { grid-column: span 2; }
  #tab-compare { grid-column: span 3; }
  #tab-pitfalls { grid-column: span 1; }
  .responsive-table thead { display: none; }
  .responsive-table tr { display: block; margin: .6rem 0; border: 1px solid var(--line); }
  .responsive-table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .4rem; border: 0; }
  .responsive-table td::before { content: attr(data-label); font-weight: 600; }
}
@media (min-width: 720px) {
  .three-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stage-card { padding: 1rem; }
}

.three-d {
  display: block;
  width: min(100%, 360px);
  aspect-ratio: 1;
  height: auto;
  margin-inline: auto;
  touch-action: pan-y;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.three-background, .three-label-paper { fill: var(--paper); }
.three-box-back { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.three-box-front { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.three-plane-paper { fill: var(--paper); fill-opacity: .28; stroke: none; }
.three-plane-hatched, .three-plane-edge { stroke: var(--accent); stroke-width: 1.3; }
.three-plane-corner, .three-hatch-dot { fill: var(--accent); }
.three-plane-hatched { fill-opacity: .5; }
.three-plane-edge { fill: none; }
.three-hatch { fill: none; stroke: var(--accent); stroke-width: .8; }
.three-slice-board {
  fill: var(--accent);
  fill-opacity: .07;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-dasharray: 7 4;
}
.three-intersection-line { fill: none; stroke: var(--accent); stroke-width: 3; }
.three-real-slice-ring { fill: var(--paper); stroke: var(--accent); stroke-width: 2.4; }
.three-real-slice-dot { fill: var(--accent); }
.three-secret-ring { fill: var(--paper); stroke: var(--red); stroke-width: 3; }
.three-secret-dot { fill: var(--red); }
.three-axis-label, .three-slice-label {
  fill: var(--ink);
  font: 20px Meiryo, "Yu Gothic", sans-serif;
}
.three-slice-label { font-weight: 700; }
.slice-candidate-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.slice-list button[aria-pressed="true"] .slice-candidate-ring { stroke: var(--on-accent); }

.slice-overlap { fill: none; stroke: var(--accent); stroke-width: 1; }
.slice-list button[aria-pressed="true"] .slice-overlap { stroke: var(--on-accent); }


.danger-model { border-left: 6px solid var(--red); padding: .6rem .7rem; margin: .8rem 0; background: var(--bg); }
.danger-badge { display: inline-block; color: var(--red); border: 1px solid var(--red); border-radius: 4px; padding: .25rem .5rem; font-weight: 700; }
.danger-model h4 { margin-top: .5rem; }
.static-slices { margin-top: .8rem; }
.static-slices figure { border: 1px solid var(--line); padding: .25rem; border-radius: 6px; }
.static-slices figcaption { font-size: .875rem; overflow-wrap: anywhere; }

.compare-layout { display: grid; gap: 1rem; min-width: 0; }
.compare-layout > section { min-width: 0; }
.compare-layout h4 { margin: .5rem 0; color: var(--accent); }
.compare-poly-context { fill: var(--muted); opacity: .24; }
.compare-poly-point { fill: var(--accent); }
.compare-poly-guide { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .6; }
.compare-observed-ring { fill: none; stroke: var(--muted); stroke-width: 1.8; }
.compare-correspondence tbody tr[data-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.compare-correspondence button { min-width: 52px; font-weight: 700; }
.compare-correspondence button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); }
.compare-polynomial-text { display: block; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.compare-zero-badge { grid-column: 2; display: block; margin-top: .35rem; padding: .25rem .4rem; border: 1px dashed var(--accent); color: var(--accent); }
.compare-legend { font-size: .875rem; }
@media (min-width: 720px) {
  .compare-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "poly slice" "table table"; }
  .compare-poly-panel { grid-area: poly; }
  .compare-table-panel { grid-area: table; }
  .compare-slice-panel { grid-area: slice; }
  .compare-correspondence th:first-child { width: 5rem; }
  .compare-correspondence th:nth-last-child(-n+2) { width: 4rem; }
}

.lesson a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; max-width: 100%; }
.lesson blockquote { margin: .75rem 0; padding-left: .75rem; border-left: 3px solid var(--accent); }
.lesson caption { text-align: left; font-weight: 700; margin: .5rem 0; }

#lesson-2 th:first-child { min-width: 4rem; }

/* Reading cues stay close to the operation or result they explain. */
.reading-guide { padding: .6rem .7rem; border-left: 3px solid var(--accent); background: var(--bg); }
.reading-guide:empty { display: none; }
.beginner-glossary { margin: .8rem 0 1.2rem; }
.beginner-glossary dt { margin-top: .7rem; font-weight: 700; color: var(--accent); }
.beginner-glossary dd { margin: .15rem 0 0; }