.st-page {
    --st-ink:#192e32;
    --st-muted:#5b6e70;
    --st-line:#dce5e2;
    --st-accent:#126b5c;
    --st-soft:#ecf4ee;
    background:#f6f8f4;
    color:var(--st-ink);
    padding:36px 24px 72px;
    font-family:inherit;
    line-height:1.6;
}
.st-page * {
    box-sizing:border-box;
}
.st-page [hidden] {
    display:none!important;
}
.st-shell {
    max-width:1200px;
    margin:0 auto;
}
.st-page h1,.st-page h2,.st-page p {
    color:inherit;
}
.st-page h1 {
    font-size:clamp(30px,3.3vw,44px);
    line-height:1.12;
    letter-spacing:-1.8px;
    max-width:1050px;
    margin:12px 0 16px;
    font-weight:750;
}
.st-page h2 {
    font-size:26px;
    line-height:1.25;
    letter-spacing:-.5px;
    margin:0 0 16px;
}
.st-page p {
    margin:0 0 18px;
}
.st-page a {
    color:var(--st-accent);
}
.st-page :where(button,select) {
    font:inherit;
}
.st-page button {
    cursor:pointer;
}
.st-page button:disabled {
    opacity:.45;
    cursor:default;
}
.st-page :focus-visible {
    outline:3px solid #e6aa30;
    outline-offset:3px;
}
.st-breadcrumb {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:13px;
    margin-bottom:22px;
    color:var(--st-muted);
}
.st-breadcrumb a {
    text-decoration:none;
}
.st-header {
    margin-bottom:26px;
}
.st-page .st-eyebrow {
    font-size:11px;
    font-weight:750;
    letter-spacing:1.6px;
    color:var(--st-accent);
    margin:0 0 12px;
    line-height:1.5;
}
.st-dot {
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--st-accent);
    margin-right:9px;
}
.st-page .st-lead {
    font-size:18px;
    max-width:850px;
    color:var(--st-muted);
    line-height:1.65;
    margin-bottom:20px;
}
.st-jumps {
    display:flex;
    gap:24px;
    flex-wrap:wrap;
    font-size:13px;
    font-weight:650;
}
.st-jumps a {
    text-decoration:none;
    border-bottom:1px solid #b7cdc4;
    padding-bottom:4px;
}
.st-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    background:#fff;
    border:1px solid var(--st-line);
    border-radius:24px;
    box-shadow:0 14px 45px #1b423408;
    overflow:hidden;
}
.st-play {
    padding:28px 32px;
}
.st-play-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
    gap:16px;
}
.st-play-heading h2 {
    font-size:19px;
    margin:0;
}
.st-grid-label {
    font-size:12px;
    border:1px solid var(--st-line);
    padding:4px 11px;
    border-radius:8px;
    color:var(--st-muted);
}
.st-toolbar {
    display:flex;
    gap:20px;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:22px;
    flex-wrap:wrap;
}
.st-toolbar fieldset {
    padding:0;
    margin:0;
    border:0;
    min-width:0;
}
.st-toolbar legend,.st-mode {
    font-size:11px;
    font-weight:650;
    color:var(--st-muted);
    float:none;
    width:auto;
    margin:0 0 8px;
}
.st-sizes {
    display:flex;
    gap:4px;
    flex-wrap:wrap;
}
.st-sizes button {
    border:1px solid var(--st-line);
    background:#fff;
    color:var(--st-ink);
    padding:6px 8px;
    border-radius:7px;
    font-size:12px;
    line-height:1.5;
    min-height:36px;
}
.st-sizes button[aria-pressed=true] {
    background:var(--st-ink);
    color:#fff;
    border-color:var(--st-ink);
}
.st-mode {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
}
.st-mode select {
    border:1px solid var(--st-line);
    background:#fff;
    border-radius:7px;
    color:var(--st-ink);
    font-size:12px;
    min-height:36px;
    padding:6px 24px 6px 10px;
    max-width:220px;
}
.st-instruments {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:16px 0;
    border-top:1px solid var(--st-line);
    border-bottom:1px solid var(--st-line);
    margin-bottom:22px;
}
.st-instruments>div {
    text-align:center;
    border-right:1px solid var(--st-line);
}
.st-instruments>div:last-child {
    border:0;
}
.st-instruments span {
    display:block;
    font-size:11px;
    color:var(--st-muted);
    margin-bottom:3px;
}
.st-instruments strong {
    font-size:24px;
    font-weight:650;
    font-variant-numeric:tabular-nums;
    line-height:1.2;
}
.st-instruments [data-next] {
    color:var(--st-accent);
}
.st-board-wrap {
    position:relative;
    max-width:420px;
    margin:auto;
}
.st-board {
    display:grid;
    grid-template-columns:repeat(var(--st-size,5),minmax(0,1fr));
    gap:6px;
    aspect-ratio:1;
    touch-action:manipulation;
}
.st-cell {
    border:1px solid #d9e2df;
    background:#f7f9f6;
    border-radius:9px;
    color:var(--st-ink);
    font-size:clamp(20px,3.3vw,31px);
    line-height:1;
    font-weight:600;
    padding:0;
    min-width:0;
    transition:background .12s,border-color .12s;
}
.st-board.st-dense {
    gap:4px;
}
.st-dense .st-cell {
    font-size:clamp(14px,2.5vw,24px);
    border-radius:6px;
}
.st-cell:hover {
    background:#e8f1ea;
    border-color:#94baac;
}
.st-cell.st-found {
    background:#e3eee7;
    border-color:transparent;
    color:#82978b;
    opacity:1;
    cursor:default;
}
.st-cell.st-wrong {
    background:#fde6df!important;
    border-color:#c75535!important;
    color:#9a321b!important;
}
.st-cell[data-color="0"] {
    color:#195b99;
}
.st-cell[data-color="1"] {
    color:#a43e26;
}
.st-cell[data-color="2"] {
    color:#70509a;
}
.st-cell[data-color="3"] {
    color:#1b7056;
}
.st-cell.st-found[data-color] {
    color:#82978b;
}
.st-board.st-paused .st-cell {
    visibility:hidden;
}
.st-pause-overlay {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    background:var(--st-soft);
    border:1px solid var(--st-line);
    border-radius:12px;
}
.st-status {
    text-align:center;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    color:var(--st-muted);
    margin-top:10px;
}
.st-progress {
    display:block;
    appearance:none;
    width:100%;
    height:4px;
    border:0;
    background:#edf2ed;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:20px;
}
.st-progress::-webkit-progress-bar {
    background:#edf2ed;
}
.st-progress::-webkit-progress-value {
    background:var(--st-accent);
}
.st-progress::-moz-progress-bar {
    background:var(--st-accent);
}
.st-actions {
    display:flex;
    gap:10px;
    justify-content:center;
}
.st-primary,.st-secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:11px 20px;
    border-radius:9px;
    font-size:13px;
    font-weight:650;
    text-decoration:none;
    line-height:1.4;
    min-height:44px;
}
.st-primary {
    background:var(--st-accent);
    color:#fff;
    border:1px solid var(--st-accent);
}
.st-secondary {
    background:transparent;
    color:var(--st-ink)!important;
    border:1px solid var(--st-line);
}
.st-page .st-shortcuts {
    font-size:11px;
    text-align:center;
    color:var(--st-muted);
    margin:14px 0 0;
}
.st-journal {
    padding:28px;
    background:#f0f5ef;
    border-left:1px solid var(--st-line);
}
.st-best {
    display:flex;
    flex-direction:column;
    padding:22px;
    background:var(--st-ink);
    border-radius:14px;
    color:#fff;
    gap:10px;
    margin-bottom:28px;
}
.st-best>span:first-child {
    font-size:12px;
    color:#c5dbd1;
}
.st-best strong {
    font-size:38px;
    letter-spacing:-1px;
    line-height:1.2;
    font-variant-numeric:tabular-nums;
}
.st-best>span:last-child {
    font-size:11px;
    color:#c5dbd1;
}
.st-journal-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}
.st-journal-heading h2 {
    font-size:17px;
    margin:0;
}
.st-summary {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:20px;
}
.st-summary strong,.st-summary span {
    display:block;
}
.st-summary strong {
    font-size:20px;
    line-height:1.3;
    font-variant-numeric:tabular-nums;
}
.st-summary span {
    font-size:11px;
    color:var(--st-muted);
}
.st-page .st-empty {
    font-size:13px;
    color:var(--st-muted);
    padding:24px 0;
}
.st-history {
    list-style:none;
    padding:0;
    margin:0 0 20px;
    max-height:250px;
    overflow:auto;
}
.st-history li {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    border-top:1px solid var(--st-line);
    padding:11px 0;
    font-size:12px;
}
.st-history small {
    display:block;
    color:var(--st-muted);
    font-size:10px;
}
.st-history strong {
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.st-page .st-privacy {
    font-size:11px;
    color:var(--st-muted);
    line-height:1.7;
    margin:0 0 14px;
}
.st-clear {
    border:0;
    border-bottom:1px solid #bbccc1;
    background:transparent;
    padding:2px 0;
    color:var(--st-muted);
    font-size:11px!important;
}
.st-guide {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    padding:64px 0 48px;
    scroll-margin-top:100px;
}
.st-guide p {
    font-size:15px;
    color:var(--st-muted);
}
.st-steps {
    list-style:none;
    padding:0;
    margin:28px 0 0;
}
.st-steps li {
    display:flex;
    gap:16px;
    padding:14px 0;
    border-top:1px solid var(--st-line);
}
.st-steps li>span {
    font-size:12px;
    color:var(--st-accent);
    padding-top:3px;
    font-weight:700;
}
.st-steps li p {
    margin:0;
}
.st-reading {
    display:flex;
    flex-direction:column;
    gap:28px;
}
.st-science {
    background:#e8f0e8;
    padding:26px;
    border-radius:16px;
}
.st-science p:last-child {
    margin:0;
}
.st-faq {
    border-top:1px solid var(--st-line);
    padding:36px 0 48px;
}
.st-faq h2 {
    margin-bottom:22px;
}
.st-faq details {
    border-bottom:1px solid var(--st-line);
    padding:16px 0;
}
.st-faq summary {
    cursor:pointer;
    font-size:16px;
    font-weight:650;
}
.st-faq details p {
    font-size:14px;
    color:var(--st-muted);
    max-width:850px;
    margin:14px 0 4px;
}
.st-games {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    background:var(--st-ink);
    color:#fff;
    padding:32px;
    border-radius:18px;
    margin-bottom:48px;
}
.st-games .st-eyebrow {
    color:#bedfcd;
}
.st-games p {
    font-size:14px;
    color:#c5dbd1;
    margin-bottom:0;
}
.st-game-list {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    align-items:center;
}
.st-game-list a {
    flex:1;
    min-width:90px;
    text-decoration:none;
    color:#fff;
    font-size:12px;
    font-weight:650;
}
.st-game-list img {
    display:block;
    width:64px;
    height:64px;
    object-fit:contain;
    border-radius:14px;
    margin-bottom:10px;
}
.st-game-list span {
    display:block;
}
.st-game-list span span {
    display:inline;
}
.st-theories {
    padding:16px 0 0;
    scroll-margin-top:100px;
}
.st-section-heading {
    display:flex;
    gap:24px;
    justify-content:space-between;
    align-items:center;
    margin-bottom:28px;
}
.st-section-heading p {
    font-size:14px;
    color:var(--st-muted);
    margin:0;
}
.st-section-heading .st-eyebrow {
    margin-bottom:12px;
}
.st-section-heading>a {
    flex-shrink:0;
}
.st-theory-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.st-theory-list a {
    background:#fff;
    border:1px solid var(--st-line);
    border-radius:10px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    color:var(--st-ink);
    text-decoration:none;
    font-size:13px;
    min-height:58px;
}
.st-theory-list a:hover {
    background:var(--st-soft);
    border-color:#94baac;
}
.st-theory-list a>span:last-child {
    color:var(--st-accent);
}
.st-notice {
    padding:20px;
    background:#fff3d6;
    border-radius:12px;
}
@media(min-width:1400px) {
    .st-play {
        padding:30px 42px;
    }
}
@media(max-width:991px) {
    .st-workspace {
        grid-template-columns:minmax(0,1fr) 260px;
    }
    .st-play {
        padding:24px;
    }
    .st-journal {
        padding:22px;
    }
    .st-guide {
        gap:35px;
    }
    .st-theory-list {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .st-toolbar {
        gap:12px;
    }
    .st-sizes button {
        padding:6px;
    }
    .st-games {
        gap:24px;
    }
    .st-section-heading {
        align-items:flex-start;
    }
}
@media(max-width:767px) {
    .st-page {
        padding:28px 16px 48px;
    }
    .st-page--io {
        padding-top:100px;
    }
    .st-breadcrumb {
        font-size:11px;
        gap:8px;
        margin-bottom:24px;
    }
    .st-page h1 {
        letter-spacing:-1px;
    }
    .st-page .st-lead {
        font-size:16px;
    }
    .st-workspace {
        grid-template-columns:1fr;
        border-radius:18px;
    }
    .st-play {
        padding:22px 18px;
    }
    .st-journal {
        border-left:0;
        border-top:1px solid var(--st-line);
        padding:22px;
    }
    .st-best {
        margin-bottom:22px;
        padding:20px;
    }
    .st-best strong {
        font-size:32px;
    }
    .st-history {
        max-height:220px;
    }
    .st-guide {
        grid-template-columns:1fr;
        gap:28px;
        padding:44px 0 32px;
    }
    .st-page h2 {
        font-size:23px;
    }
    .st-guide .st-play-heading h2 {
        font-size:18px;
    }
    .st-section-heading {
        flex-direction:column;
        gap:18px;
    }
    .st-theory-list {
        grid-template-columns:1fr;
    }
    .st-games {
        grid-template-columns:1fr;
        padding:24px;
        gap:24px;
    }
    .st-mode select {
        max-width:100%;
    }
    .st-toolbar {
        align-items:stretch;
    }
    .st-toolbar fieldset {
        width:100%;
    }
    .st-sizes {
        display:grid;
        grid-template-columns:repeat(7,1fr);
    }
    .st-sizes button {
        padding:8px 2px;
        font-size:12px;
    }
    .st-mode {
        width:100%;
    }
    .st-instruments strong {
        font-size:24px;
    }
    .st-jumps {
        font-size:12px;
        gap:16px;
    }
    .st-cell {
        font-size:clamp(20px,5vw,30px);
    }
    .st-dense .st-cell {
        font-size:clamp(14px,4vw,22px);
    }
    .st-shortcuts {
        display:none;
    }
    .st-actions {
        margin-bottom:0;
    }
    .st-game-list a {
        min-width:70px;
    }
    .st-board {
        gap:5px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .st-cell {
        transition:none;
    }
}
.st-page--io {
    padding-top:114px;
}
@media(max-width:767px) {
    .st-page--io {
        padding-top:100px;
    }
}
/* Mode-specific fields keep the same target and input controls. */
.st-workspace { scroll-margin-top: 88px; }
.st-page .st-mode-description { color: var(--st-muted); font-size: 12px; min-height: 38px; margin: -8px 0 16px; }
.st-sizes { gap: 3px; }
.st-sizes button { padding-left: 7px; padding-right: 7px; }
.st-cell > span { display: inline-block; pointer-events: none; }
.st-board--size .st-cell > span { transform: scale(var(--st-number-scale, 1)); }
.st-board--letters.st-dense .st-cell { font-size: 18px; }
.st-board--spin { animation: st-rotate 60s linear infinite; animation-play-state: paused; transform: scale(.72); }
.st-board--spin[data-state=running] { animation-play-state: running; }
@keyframes st-rotate { from { transform: scale(.72) rotate(0); } to { transform: scale(.72) rotate(360deg); } }
.st-board--blink .st-cell > span { animation: st-blink 4s step-end infinite; animation-play-state: paused; }
.st-board--blink[data-state=running] .st-cell > span { animation-play-state: running; }
@keyframes st-blink { 0%, 74.99% { opacity: 1; } 75%, 99.99% { opacity: 0; } }
.st-board--honeycomb { padding-right: calc(50% / (var(--st-size) + .5)); gap: 3px; }
.st-board--honeycomb .st-cell { clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); border-radius: 0; background: #e1ece4; border: 0; }
.st-board--honeycomb .st-offset { transform: translateX(50%); }
.st-board--honeycomb .st-cell:focus-visible { background: #ffe4a0; }
.st-board--marbles { gap: 9px; }
.st-board--marbles .st-cell { border-radius: 50%; background: radial-gradient(circle at 30% 25%,#fff 0,#f0f8f1 35%,#c9e0d2 100%); box-shadow: inset -2px -3px 5px #20664712,0 3px 5px #234e3d12; animation: st-float 5s ease-in-out infinite; animation-delay: var(--st-delay); animation-play-state: paused; }
.st-board--marbles[data-state=running] .st-cell { animation-play-state: running; }
@keyframes st-float { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.st-motion-off .st-board--spin,.st-motion-off .st-board--blink .st-cell > span,.st-motion-off .st-board--marbles .st-cell { animation: none; transform: none; }
.st-streak { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.st-streak strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.st-streak span { font-size: 12px; color: var(--st-muted); }
.st-curve { padding: 16px 0; border-top: 1px solid var(--st-line); margin: 16px 0; }
.st-curve h3 { font-size: 15px; margin: 0 0 8px; }
.st-curve svg { width: 100%; height: auto; display: block; color: var(--st-accent); fill: var(--st-accent); }
.st-curve small { color: var(--st-muted); font-size: 10px; }
.st-takeaways { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding: 30px; background: #e8f0e8; border-radius: 16px; margin: 32px 0 20px; }
.st-takeaways h2 { font-size: 22px; }
.st-takeaways ul { padding-left: 20px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.st-takeaways li { font-size: 13px; color: var(--st-muted); padding-left: 3px; }
.st-resource-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 46px; }
.st-choose,.st-variants,.st-tools,.st-reading-links { padding: 8px 0 40px; }
.st-table-wrap { overflow: auto; border: 1px solid var(--st-line); border-radius: 14px; background: #fff; }
.st-table-wrap table { border-collapse: collapse; width: 100%; font-size: 13px; }
.st-table-wrap th,.st-table-wrap td { padding: 15px 18px; border-bottom: 1px solid var(--st-line); vertical-align: top; text-align: left; }
.st-table-wrap thead { background: #e8f0e8; }
.st-table-wrap tbody th { font-weight: 600; width: 28%; }
.st-table-wrap tr:last-child th,.st-table-wrap tr:last-child td { border-bottom: 0; }
.st-table-wrap button { background: none; border: 0; color: var(--st-accent); font-size: 13px; font-weight: 650; text-align: left; padding: 0; min-width: 150px; }
.st-variant-list,.st-tool-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.st-variant { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 24px; background: #fff; color: var(--st-ink); border: 1px solid var(--st-line); border-radius: 14px; gap: 12px; }
.st-variant:hover,.st-variant[aria-pressed=true] { border-color: var(--st-accent); background: #f0f6f0; }
.st-variant-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--st-soft); color: var(--st-accent); font-size: 24px; }
.st-variant strong { font-size: 16px; }
.st-variant > span:not(.st-variant-symbol):not(.st-variant-arrow) { color: var(--st-muted); font-size: 13px; line-height: 1.6; }
.st-variant-arrow { position: absolute; top: 25px; right: 24px; color: var(--st-accent); }
.st-benchmarks { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 32px; margin: 0 0 44px; border: 1px solid var(--st-line); background: #fff; border-radius: 16px; scroll-margin-top: 90px; }
.st-benchmarks p,.st-tools > p,.st-reading-links > p { font-size: 14px; color: var(--st-muted); }
.st-benchmarks dl { margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.st-benchmarks dl > div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--st-line); padding-bottom: 12px; }
.st-benchmarks dt { font-size: 13px; font-weight: 500; color: var(--st-muted); }
.st-benchmarks dd { margin: 0; font-size: 23px; font-weight: 650; font-variant-numeric: tabular-nums; }
.st-tool-list a { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--st-line); border-radius: 12px; padding: 22px; text-decoration: none; color: var(--st-ink); }
.st-tool-list a:hover { border-color: var(--st-accent); }
.st-tool-list strong { font-size: 16px; }
.st-tool-list a > span { color: var(--st-muted); font-size: 13px; }
.st-cpt { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border: 1px solid var(--st-line); border-radius: 16px; background: #fff; padding: 30px; margin-bottom: 40px; scroll-margin-top: 90px; }
.st-cpt p { font-size: 14px; color: var(--st-muted); }
.st-cpt-target { display: grid; place-items: center; width: 100%; height: 180px; color: var(--st-ink); background: var(--st-soft); border: 1px solid var(--st-line); border-radius: 14px; font-size: 70px; font-weight: 650; }
.st-cpt-target:disabled { opacity: 1 !important; }
.st-cpt .st-cpt-status { font-size: 12px; text-align: center; min-height: 42px; margin: 12px 0; }
.st-cpt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 0; }
.st-cpt-stats dt { font-size: 12px; color: var(--st-muted); }
.st-cpt-stats dd { font-size: 24px; font-variant-numeric: tabular-nums; margin: 0; }
.st-reading-links ul { padding-left: 20px; font-size: 14px; }
.st-reading-links li { margin: 8px 0; }
.st-final { padding: 40px 0 0; border-top: 1px solid var(--st-line); margin-top: 40px; }
.st-final p { max-width: 800px; color: var(--st-muted); font-size: 15px; }
.st-final .st-resource-bar { margin-bottom: 0; }
@media(max-width:991px) {
    .st-variant-list,.st-tool-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .st-takeaways { grid-template-columns: 1fr; gap: 14px; }
}
@media(max-width:767px) {
    .st-sizes { grid-template-columns: repeat(4,1fr); }
    .st-sizes button { min-height: 38px; }
    .st-takeaways { padding: 22px; }
    .st-takeaways ul { grid-template-columns: 1fr; gap: 12px; }
    .st-variant-list,.st-tool-list { grid-template-columns: 1fr; }
    .st-variant { padding: 20px; }
    .st-benchmarks,.st-cpt { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
    .st-board--letters.st-dense .st-cell { font-size: 13px; }
    .st-board--marbles { gap: 5px; }
    .st-table-wrap table { font-size: 12px; }
    .st-table-wrap th,.st-table-wrap td { padding: 12px; }
    .st-cpt .st-actions { flex-wrap: wrap; }
}
@media print {
    @page { margin: 16mm; }
    body * { visibility: hidden !important; }
    .st-print-sheet,.st-print-sheet * { visibility: visible !important; }
    .st-page [data-print-sheet][hidden] { display: block !important; position: absolute; top: 0; left: 0; width: 100%; color: #000; background: #fff; padding: 0 12mm; }
    .st-print-sheet h1 { font-size: 22pt; }
    .st-print-sheet p { font-size: 11pt; }
    .st-print-board { display: grid; grid-template-columns: repeat(var(--st-size),1fr); width: 160mm; max-width: 100%; aspect-ratio: 1; border-top: 1px solid #000; border-left: 1px solid #000; margin: 10mm auto; break-inside: avoid; }
    .st-print-board span { display: grid; place-items: center; border-bottom: 1px solid #000; border-right: 1px solid #000; font-size: 17pt; }
    .st-page { padding: 0; }
    .st-workspace { display: block !important; border: 0; box-shadow: none; }
    .st-shell > :not(.st-workspace),.st-workspace > :not(.st-print-sheet) { display: none !important; }
    footer,header,.header,.footer { display: none !important; }
}
.st-board--size.st-dense .st-cell { font-size: calc(140px / var(--st-size)); }
@media(max-width:767px) {
    .st-dense .st-cell { font-size: clamp(12px,3.5vw,22px); }
    .st-board--size.st-dense .st-cell { font-size: calc(100px / var(--st-size)); }
}
.st-variants { scroll-margin-top: 90px; }
.st-conversion { position: relative; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(240px,1fr); gap: 40px; color: #fff; background: radial-gradient(ellipse at 85% 0,#2c7560 0,transparent 55%),#183b34; border-radius: 22px; padding: 40px; margin: 28px 0 36px; box-shadow: 0 16px 35px #143b3020; scroll-margin-top: 90px; overflow: hidden; animation: st-conversion-in .35s ease-out; }
.st-conversion .st-eyebrow { color: #bfe6cd; display: flex; align-items: center; gap: 9px; }
.st-conversion-check { display: grid; place-items: center; border: 1px solid #83bd9c; border-radius: 50%; width: 23px; height: 23px; letter-spacing: 0; }
.st-conversion h2 { font-size: clamp(25px,3vw,36px); max-width: 580px; letter-spacing: -.8px; margin: 16px 0; }
.st-conversion p { color: #d1e3d9; font-size: 14px; max-width: 600px; }
.st-conversion-result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12px; margin-bottom: 18px; color: #d4e9dc; }
.st-conversion-result > span { border: 1px solid #ffffff26; border-radius: 7px; padding: 5px 10px; }
.st-conversion-result strong { color: #fff; font-variant-numeric: tabular-nums; }
.st-conversion-result .st-conversion-record { color: #f7df9f; border-color: #f7df9f55; }
.st-conversion ul { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.st-conversion ul span { color: #c4e6b4; margin-right: 9px; }
.st-conversion-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st-conversion .st-conversion-signup { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; background: #e3efaa; color: #19382f; border: 1px solid #e3efaa; border-radius: 10px; font-size: 15px; font-weight: 700; padding: 14px 23px; min-height: 50px; text-decoration: none; box-shadow: 0 4px 10px #102e301a; }
.st-conversion-signup:hover { background: #f0f6ce; transform: translateY(-1px); }
.st-conversion-actions button { border: 0; background: none; color: #d1e3d9; border-bottom: 1px solid #ffffff50; font-size: 12px; padding: 4px 0; }
.st-conversion .st-conversion-note { font-size: 11px; line-height: 1.7; color: #b2cdc0; margin: 14px 0 0; }
.st-conversion-note a { color: #fff; text-underline-offset: 3px; }
.st-conversion-path { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #ffffff1f; padding-left: 32px; }
.st-conversion-orbit { position: relative; width: 116px; height: 116px; display: grid; place-items: center; align-self: center; border-radius: 50%; border: 1px solid #c8e2b433; margin: 0 0 22px; }
.st-conversion-orbit > span { display: grid; place-items: center; width: 72px; height: 72px; background: linear-gradient(145deg,#dceea7,#98c9ac); border-radius: 23px; color: #25523d; font-size: 34px; box-shadow: 0 6px 24px #051c352b; transform: rotate(-8deg); }
.st-conversion-orbit i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #dceea7; top: 8px; right: 12px; }
.st-conversion-orbit i:last-child { width: 7px; height: 7px; top: auto; right: auto; left: 0; bottom: 19px; background: #79bba0; }
.st-conversion-path ol { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.st-conversion-path li { display: flex; align-items: center; gap: 12px; color: #c5dccf; }
.st-conversion-path li > span { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid #b1d5bd55; border-radius: 50%; font-size: 11px; }
.st-conversion-path .is-done > span { background: #c9e7b6; color: #254332; border-color: #c9e7b6; }
.st-conversion-path > p { font-size: 10px; color: #a9c7b8; line-height: 1.7; margin: 0; }
@keyframes st-conversion-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:767px) {
    .st-conversion { grid-template-columns: 1fr; padding: 26px 22px; gap: 24px; }
    .st-conversion h2 { font-size: 27px; }
    .st-conversion-path { border-left: 0; border-top: 1px solid #ffffff1f; padding: 22px 0 0; }
    .st-conversion-orbit { display: none; }
    .st-conversion-path ol { flex-direction: row; align-items: flex-start; gap: 10px; }
    .st-conversion-path li { flex: 1; font-size: 11px; flex-direction: column; align-items: flex-start; gap: 8px; }
    .st-conversion-actions { align-items: stretch; flex-direction: column; }
    .st-conversion-actions button { align-self: flex-start; }
}
@media(prefers-reduced-motion:reduce) { .st-conversion { animation: none; } .st-conversion-signup:hover { transform: none; } }
.st-journal .st-history { max-height: 160px; }