/* ShamirSharing CipherLab - MIT (c) 2026 ipusiron. */
:root { --bg:#f6f4ed; --paper:#fffdf7; --ink:#152b45; --muted:#44576b; --line:#aabccb; --grid:#d9e4e9; --blue:#17598a; --red:#a33c34; --focus:#0b5ed7; --shadow:#d9d6cc; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#0d1b2d; --paper:#172940; --ink:#eaf1f6; --muted:#c5d4df; --line:#668098; --grid:#30485f; --blue:#80c7ff; --red:#ffaaa1; --focus:#a5d8ff; --shadow:#091523; }
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; 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; }
button { cursor:pointer; min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
button:hover { border-color:var(--blue); }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
a { color:var(--blue); }
.page-header, main, footer { width:min(100% - 2rem, 1000px); margin-inline:auto; }
.page-header { padding:1.8rem 0 1rem; }
.masthead { display:grid; grid-template-columns:132px minmax(0,1fr) 132px; align-items:start; gap:1rem; }
.masthead > div:first-child { grid-column:2; text-align:center; }
h1 { margin:0; font-size:clamp(1.4rem, 4vw, 2.7rem); line-height:1.15; overflow-wrap:anywhere; }
h1 span { color:var(--blue); }
.header-tools { display:flex; gap:.3rem; flex:none; grid-column:3; justify-self:end; }
.icon-button { width:44px; height:44px; padding:0; border-radius:50%; font-weight:700; }
.subtitle, .tagline { max-width:45rem; margin-inline:auto; text-align:center; font-size:1.08rem; }
.subtitle { margin-block:.9rem .2rem; font-weight:600; }
.tagline { margin-block:.2rem 1rem; }
.panel, .tabs { 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; margin-bottom:1rem; }
.tabs button { border:0; min-width:0; padding:.3rem; }
.tabs button[aria-selected="true"] { color:var(--blue); border-bottom:3px solid var(--blue); font-weight:700; }
.panel { padding:1rem; margin:1rem 0; min-width:0; }
.stage-card { min-width:0; margin:0 0 1rem; padding:1rem; border:1px solid var(--line); border-left:4px solid var(--blue); background:var(--paper); overflow-wrap:anywhere; }
.stage-card:last-child { margin-bottom:0; }
.stage-card h2 { margin:0 0 .75rem; color:var(--blue); font-size:1.3rem; }
.hand-primer { margin:.75rem 0 1rem; padding:.55rem .75rem; border-left:3px solid var(--blue); background:var(--bg); }
.hand-primer p { margin:.3rem 0; }
.field-primer h3 { margin:.2rem 0 .6rem; font-size:1.12rem; }
.field-primer h4 { margin:.9rem 0 .3rem; }
.field-primer p, .field-primer ul { margin:.3rem 0 .7rem; }
.field-primer ul { padding-left:1.5rem; }
.field-primer li + li { margin-top:.35rem; }
.hand-formula { font-weight:700; overflow-wrap:anywhere; }
summary { cursor:pointer; font-weight:700; }
footer { padding:1rem 0 3rem; text-align:center; }
dialog { width:min(100% - 1rem,46rem); max-width:none; max-height:90vh; max-height:90dvh; padding:0; overflow:hidden; color:var(--ink); background:var(--paper); border:2px solid var(--blue); border-radius:8px; }
dialog[open] { display:flex; flex-direction:column; }
.help-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; background:var(--paper); border-bottom:1px solid var(--line); }
.help-header h2 { margin:0; }
.help-header button { padding:.35rem .8rem; flex:none; }
.help-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 1rem 1rem; }
.help-list { padding-left:1.5rem; }
.help-list li { margin:.6rem 0; }
#help-theory { margin:1.5rem 0 .5rem; padding:.75rem; border:1px solid var(--line); }
#help-theory summary { color:var(--blue); }
#help-theory .lesson-card { min-width:0; }
dialog::backdrop { background:#101a2ab0; }
@media (max-width:600px) { .masthead { display:flex; flex-direction:column; align-items:center; } .header-tools { align-self:flex-end; } .tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } .tabs button { font-size:.86rem; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin:1rem 0; }
.settings-grid label { display:grid; gap:.2rem; min-width:0; }
input, select { width:100%; min-width:0; min-height:44px; padding:.4rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:6px; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:.7rem 0; }
.actions button { padding:.4rem .7rem; }
.actions button[aria-pressed="true"] { color:var(--paper); background:var(--blue); border-color:var(--blue); }
.table-frame { max-width:100%; overflow:auto; border:1px solid var(--line); background:var(--paper); }
table { border-collapse:collapse; width:max-content; min-width:100%; font-variant-numeric:tabular-nums; }
th, td { padding:.35rem .55rem; border:1px solid var(--line); text-align:center; white-space:nowrap; }
th { background:var(--bg); }
#linear-dealer { margin:1rem 0; padding:.65rem .8rem; border:1px solid var(--line); }
.linear-step-heading { font-size:1.1rem; }
.linear-candidate-label { display:grid; gap:.2rem; min-width:5rem; }
#linear-analogy, #linear-two-graph { display:block; width:min(100%,320px); height:auto; margin:.5rem 0 1rem; border:1px solid var(--line); background:var(--paper); }
.hand-graph-frame { max-width:100%; overflow-x:auto; margin:.5rem 0 1rem; }
#hand-few-graph, #hand-enough-graph, #real-comparison-graph { display:block; width:520px; height:auto; border:1px solid var(--line); background:var(--paper); }
.hand-graph-axis { stroke:var(--muted); stroke-width:1.5; }
.hand-graph-guide { fill:none; stroke:var(--muted); stroke-width:1.25; opacity:.35; }
.hand-graph-guide-active { stroke:var(--blue); stroke-width:2.25; opacity:1; }
.hand-graph-value { fill:var(--muted); opacity:.55; }
.hand-graph-value.hand-graph-active { fill:var(--blue); opacity:1; }
.hand-graph-share { fill:var(--blue); stroke:var(--paper); stroke-width:2; }
.hand-graph-secret { fill:var(--red); stroke:var(--paper); stroke-width:2; }
.hand-graph-label { fill:var(--ink); font:12px system-ui,sans-serif; }
.hand-graph-point-label { paint-order:stroke; stroke:var(--paper); stroke-width:4px; stroke-linejoin:round; }
.hand-graph-secret-label { fill:var(--red); font-weight:700; }
.real-comparison-curve { fill:none; stroke:var(--blue); stroke-width:2.5; }
.linear-analogy-axis { stroke:var(--muted); stroke-width:1.5; }
.linear-analogy-line { stroke-width:2.5; }
.linear-analogy-0 { stroke:var(--red); }
.linear-analogy-1 { stroke:var(--blue); }
.linear-analogy-2 { stroke:var(--muted); }
.linear-analogy-active { stroke:var(--focus); stroke-width:3.5; stroke-dasharray:5 4; }
.linear-analogy-active-label { fill:var(--focus); font-weight:700; }
.linear-analogy-point { fill:var(--ink); stroke:var(--paper); stroke-width:1.5; }
.linear-analogy-label, .linear-analogy-axis-label { fill:var(--ink); font:12px system-ui,sans-serif; }
.linear-two-branch { stroke:var(--blue); stroke-width:2.5; }
.linear-two-secret { fill:var(--red); stroke:var(--paper); stroke-width:1.5; }
.linear-two-share { fill:var(--blue); stroke:var(--paper); stroke-width:1.5; }
.linear-two-point-label { paint-order:stroke; stroke:var(--paper); stroke-width:4px; stroke-linejoin:round; }
@media (max-width:600px) { .linear-candidate-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .linear-candidate-controls .linear-candidate-label { grid-column:1/-1; } }
.result { color:var(--blue); font-weight:700; overflow-wrap:anywhere; }
.share-data { margin:.75rem 0 1rem; overflow-wrap:anywhere; }
.share-data p { margin:.35rem 0; }
@media (min-width:700px) { .settings-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:600px) { .panel { padding:.5rem; } .stage-card { padding:.65rem; } }
#byte-table th, #byte-table td { min-width:38px; padding:.35rem .4rem; font-family:ui-monospace,Consolas,monospace; }
.byte-column-label { display:grid; gap:.2rem; width:min(100%,260px); margin:.75rem 0; }
#byte-formula { overflow-wrap:anywhere; }
#byte-calculation { margin:.5rem 0 1rem; }
#byte-calculation th, #byte-calculation td { font-family:ui-monospace,Consolas,monospace; }
.pitfall-card, .lesson-card { margin:1rem 0; padding:1rem; border:1px solid var(--line); background:var(--paper); }
.pitfall-card { border-left:5px solid var(--red); }
.pitfall-card h2, .lesson-card h3 { margin-top:0; }
.pitfall-card h2 { font-size:1.3rem; }
.demo-step { padding:.55rem .7rem; margin:.6rem 0; background:var(--bg); border:1px solid var(--grid); }
.demo-step p { margin:.2rem 0; overflow-wrap:anywhere; }
.demo-step:nth-child(2) { border-left:3px dashed var(--red); }
.demo-details { margin-top:1rem; }
.demo-details summary { cursor:pointer; color:var(--blue); }
.demo-details p { overflow-wrap:anywhere; }
.source-links a { margin-right:.4rem; }
@media (max-width:600px) { .pitfall-card, .lesson-card { padding:.65rem; } }