:root {
    font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#223b3d;
    background:#f7f5ee;
    font-synthesis:none;
    --teal:#167d8d;
    --line:#bacbc7;
    --ink:#234b4e
}

* {
    box-sizing:border-box
}

body {
    margin:0
}

button,a,input {
    -webkit-tap-highlight-color:transparent
}

button {
    font:inherit;
    cursor:pointer;
    color:inherit
}

button:disabled {
    cursor:default;
    opacity:.4
}

button:focus-visible,a:focus-visible,input:focus-visible+span {
    outline:3px solid #bd7940;
    outline-offset:4px
}

button {
    touch-action:manipulation
}

.masthead {
    max-width:1240px;
    margin:auto;
    padding:30px 48px;
    display:flex;
    align-items:center;
    gap:24px;
    border-bottom:1px solid #e2e4da
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:27px;
    font-weight:750;
    letter-spacing:-1px;
    text-decoration:none;
    color:var(--ink)
}

.brand-dot {
    color:var(--teal);
    margin-left:-12px
}

.edition {
    margin-left:auto;
    font-size:10px;
    letter-spacing:2.1px;
    color:#657c78
}

main {
    max-width:950px;
    margin:auto;
    padding:45px 44px 24px
}

.intro {
    margin-bottom:32px
}

.eyebrow {
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:700;
    color:var(--teal);
    margin:0 0 12px
}

h1 {
    font-family:Georgia,serif;
    font-size:48px;
    font-weight:400;
    letter-spacing:-1.6px;
    line-height:1.1;
    margin:0 0 12px
}

.intro>p:last-child {
    color:#6d7c76;
    margin:0;
    font-size:15px
}

.game {
    background:#fffefa;
    border:1px solid #e1e5da;
    border-radius:20px;
    padding:26px 30px 12px;
    box-shadow:0 10px 40px #21494406
}

.game-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:26px
}

fieldset {
    border:0;
    display:flex;
    margin:0;
    padding:4px;
    background:#eef1e9;
    border-radius:10px
}

fieldset label {
    position:relative;
    cursor:pointer
}

fieldset input {
    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    margin:0
}

fieldset span {
    display:block;
    padding:9px 20px;
    font-size:13px;
    border-radius:7px
}

fieldset input:checked+span {
    color:white;
    background:var(--teal);
    box-shadow:0 2px 4px #0a536522
}

.quiet {
    border:0;
    background:none;
    padding:8px 0;
    font-size:13px;
    color:#496661
}

.quiet>span {
    font-size:20px;
    vertical-align:-1px;
    margin-right:5px
}

.play-area {
    display:grid;
    grid-template-columns:minmax(0,1fr) 190px;
    gap:32px;
    align-items:start
}

#board {
    display:grid;
    grid-template-columns:repeat(9,minmax(0,1fr));
    aspect-ratio:1;
    border:2px solid var(--ink);
    border-radius:5px;
    overflow:hidden;
    background:var(--ink)
}

.cell {
    border:0;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    border-radius:0;
    background:#fffefa;
    padding:0;
    font-size:clamp(16px,2.7vw,27px);
    font-weight:450;
    color:var(--teal);
    min-width:0
}

.cell:nth-child(3n) {
    border-right:2px solid var(--ink)
}

.cell:nth-child(9n) {
    border-right:0
}

.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom:2px solid var(--ink)
}

.cell:nth-child(n+73) {
    border-bottom:0
}

.cell.given {
    font-weight:650;
    color:#263e3d
}

.cell.related {
    background:#eef4ef
}

.cell.same {
    background:#dcece7
}

.cell.selected {
    background:var(--teal);
    color:white;
    box-shadow:inset 0 0 0 2px #0c5763
}

.cell.conflict {
    color:#b44037;
    text-decoration:underline;
    text-underline-offset:5px
}

.cell.selected.conflict {
    color:#ffe2b8
}

.cell:focus-visible {
    outline:3px solid #bd7940;
    outline-offset:-4px;
    position:relative
}

.board-caption {
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    color:#698078;
    margin-top:14px
}

.controls {
    padding-top:4px
}

.controls .eyebrow {
    font-size:9px;
    margin-bottom:9px
}

#instructions {
    font-size:13px;
    line-height:1.65;
    margin:0 0 20px;
    color:#677f77
}

#numbers {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:10px
}

.number {
    aspect-ratio:1;
    border:1px solid #dbe5dd;
    border-radius:9px;
    background:#f0f5ef;
    color:var(--ink);
    font-size:25px
}

.number:hover:not(:disabled),.secondary:hover:not(:disabled) {
    background:#dcece7;
    border-color:#96b9ad
}

.secondary {
    border:1px solid #dbe5dd;
    border-radius:8px;
    background:transparent;
    padding:10px;
    font-size:16px
}

.secondary span {
    font-size:12px
}

#erase {
    width:100%;
    margin-bottom:16px
}

.history {
    display:flex;
    gap:8px
}

.history button {
    flex:1;
    padding:9px 4px
}

.keyboard-hint {
    font-size:10px;
    line-height:1.7;
    color:#718479;
    margin:20px 0 0
}

#status {
    min-height:36px;
    font-size:12px;
    color:#497366;
    margin:18px 0 0;
    line-height:1.5
}

footer {
    display:flex;
    align-items:center;
    gap:13px;
    padding:24px 3px;
    color:#748277
}

footer p {
    font-size:11px;
    line-height:1.7;
    margin:0
}

.footer-mark {
    font-size:30px;
    color:#8aa991
}

#offline-status {
    margin-left:auto;
    font-size:10px;
    max-width:240px;
    text-align:right
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

[hidden] {
    display:none!important
}

@media(max-width:640px) {
    .masthead {
        padding:20px
    }

    .edition {
        font-size:8px;
        letter-spacing:1px
    }

    main {
        padding:28px 14px 18px
    }

    h1 {
        font-size:38px
    }

    .intro {
        margin-bottom:25px;
        padding-left:4px
    }

    .game {
        padding:17px 12px 6px;
        border-radius:14px
    }

    .game-toolbar {
        margin-bottom:18px;
        gap:8px
    }

    fieldset span {
        padding:8px 12px;
        font-size:12px
    }

    .play-area {
        grid-template-columns:minmax(0,1fr) 94px;
        gap:12px
    }

    .cell {
        font-size:clamp(15px,4.8vw,25px)
    }

    .controls {
        padding:0
    }

    .controls .eyebrow {
        font-size:8px;
        letter-spacing:.4px
    }

    #instructions {
        font-size:10px;
        line-height:1.5;
        margin-bottom:10px
    }

    #numbers {
        gap:4px
    }

    .number {
        font-size:18px;
        border-radius:5px;
        min-height:35px
    }

    .history {
        gap:4px;
        flex-direction:column
    }

    .secondary {
        padding:6px
    }

    .history button {
        padding:5px
    }

    #erase {
        margin-bottom:7px
    }

    .keyboard-hint {
        display:none
    }

    .board-caption {
        font-size:9px
    }

    #status {
        font-size:11px
    }

    footer {
        gap:9px
    }

    #offline-status {
        max-width:130px
    }

    .brand {
        font-size:23px
    }
}

@media(prefers-reduced-motion:no-preference) {
    button {
        transition:background-color .12s
    }
}

.number {
    min-width:0;
    width:100%
}

.controls {
    min-width:0
}

@media(max-width:360px) {
    .edition {
        display:none
    }

    .masthead {
        justify-content:space-between
    }

    .play-area {
        grid-template-columns:minmax(0,1fr) 44px;
        gap:10px
    }

    .controls>div:first-child {
        display:none
    }

    #numbers {
        grid-template-columns:1fr;
        gap:4px
    }

    .number {
        aspect-ratio:auto;
        min-height:30px;
        font-size:18px
    }

    .secondary span {
        font-size:9px
    }

    .secondary {
        font-size:12px;
        padding:6px 0
    }

    .history button {
        padding:6px 0
    }

    .game-toolbar {
        gap:5px
    }

    fieldset span {
        padding:8px 10px
    }
}