*,*::before,*::after{box-sizing:inherit}
html{box-sizing:border-box;height:100%;-webkit-text-size-adjust:none;text-size-adjust:none;font-family:calluna,serif;font-feature-settings:'pnum' on, 'lnum' on;font-size:19px;font-variant-numeric:lining-nums;font-weight:300;line-height:1.47369;color:#000;background-color:#fff;cursor:default;-webkit-tap-highlight-color:transparent}
::-webkit-scrollbar{background-color:transparent;width:12px}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.2)}
::-webkit-scrollbar-thumb:hover{background-color:#ac1c40}
body{height:100%;margin:0;display:flex;flex-direction:column;color:#000;overscroll-behavior:none;overflow:hidden}
::selection{color:white;background-color:#ac1c40}
p,table,hr{margin:16px 0}
a,a:visited,summary{color:#ac1c40;text-decoration-color:#fbdfd9;cursor:pointer}
a:hover,a:focus,summary:hover,summary:focus{color:#ff3d26;text-decoration-color:#ff3d26}
b,strong{font-weight:300}
h1,h2,h3,h4,h5,h6{margin-top:16px;margin-bottom:16px;font-family:calluna,serif;font-weight:300;letter-spacing:-0.03em}
h1{margin:0;color:#2c2b2b;font-size:36px;line-height:48px}
@media (max-width: 900px){h1{font-size:28px;line-height:40px}}
h2{margin:0;color:#2c2b2b;font-size:28px;line-height:40px}
ul,ol{margin:8px 0;padding-left:40px}
ul li,ol li{margin:8px 0 8px 0}
ul li::marker,ol li::marker{color:#ac1c40;font-weight:300}
.flexspacer{flex:1;pointer-events:none}
main,footer,header,nav{display:block}
header{flex:none;padding:0 20px}
header>*{display:flex;flex-direction:row;max-width:900px;margin:0 auto}
.is-phone header>*{flex-direction:column}
header .title{flex:1;margin:8px 0}
header .author{color:#ac1c40;font-size:28px;white-space:nowrap}
@media (max-width: 900px){header .author{font-size:20px;line-height:28px}}
header .home{flex:0;margin:22px 0 0 32px}
@media (max-width: 900px){header .home{text-align:right;margin-top:15px}}
.is-touch header .home{display:none}
header .home a{opacity:1;transition:opacity .1s}
@media (prefers-reduced-motion){header .home a{transition:none}}
header .home a:hover,header .home a:focus{opacity:0.667}
.is-phone header{display:none}
main{flex:1;display:block;overflow-wrap:anywhere;overflow:hidden}
footer{flex:none;padding:16px 24px;color:#767676;font-size:14px;line-height:20px}
footer>*{margin:0 auto;max-width:900px}
footer strong{color:#000}
.is-touch footer,.is-phone footer{display:none}
img,svg{border:none;page-break-inside:avoid;vertical-align:middle}
main>.content{margin:0 auto;height:100%;display:flex;flex-direction:column;align-items:center}
.is-phone main>.content{margin:unset}
.root{display:grid;max-height:100%;grid-template-columns:[grid] auto [clues] auto;grid-template-rows:1fr [message] auto [controls] auto;overflow:hidden}
.is-phone .root{grid-template-columns:[grid] auto}
.is-phone .root,.is-touch .root{flex:0 1 100%;align-self:stretch}
.grid-container{grid-area:1 / 1 / 1 / 1;overflow:auto;scroll-padding:40px;scrollbar-color:#c3c3c3 #fff;scrollbar-width:thin}
.grid-content{position:relative}
.cell{width:32px;height:32px;stroke:#a3a3a3;fill:white;transition:fill .1s;cursor:pointer}
.cell.selection{fill:#fbf5f4}
.cell.selection.solved{fill:#f6f6f6}
.cell.cursor{fill:#ac1c40}
.cell.cursor.solved{fill:#595858}
@media (prefers-reduced-motion){.cell{transition:none}}
.letter{font-size:22px;font-weight:300;line-height:22px;text-anchor:middle;transition:fill .1s;user-select:none;pointer-events:none}
.letter.error{fill:#ff3d26}
.letter.solved{fill:#767676}
.letter.cursor{fill:white}
@media (prefers-reduced-motion){.letter{transition:none}}
.number{font-size:15px;font-weight:300;font-variant-position:super;font-feature-settings:'pnum' on, 'lnum' on, 'sups' on;user-select:none;pointer-events:none}
.number.cursor{fill:white}
.selection-border-front{stroke:#ac1c40;stroke-width:2px;fill:none;transition:x 0.1s, y 0.1s, width 0.1s, height 0.1s, opacity 0.2s;pointer-events:none}
@media (prefers-reduced-motion){.selection-border-front{transition:none}}
.selection-border-back{fill:#ac1c40;transition:x 0.1s, y 0.1s, width 0.1s, height 0.1s, opacity 0.2s;pointer-events:none}
@media (prefers-reduced-motion){.selection-border-back{transition:none}}
.clues{grid-column:clues;margin-left:32px;max-width:400px;padding:10px 20px 10px 0;overflow-y:auto;user-select:none;scroll-padding:40px}
.clues ol{margin-left:4px}
.clues li{position:relative;padding-right:10px;cursor:pointer}
.clues li:hover{color:#ac1c40}
.clues li:hover.selection{color:#000}
.clues li::before{content:"";position:absolute;left:-40px;top:0;right:0;bottom:0;z-index:-1;opacity:0;background-color:#fbf5f4;border:1px solid #ac1c40;border-radius:3px;box-shadow:0 0 3px rgba(172,28,64,0.75);transition:opacity 0.1s}
@media (prefers-reduced-motion){.clues li::before{transition:none}}
.clues li.selection::before{opacity:1}
.is-phone .clues{display:none}
.message{grid-area:message / 1 / message / -1;border:1px solid #c3c3c3;border-radius:8px;background-color:#f6f6f6;box-shadow:0 2px 3px rgba(0,0,0,0.05);text-align:center;overflow:hidden;visibility:hidden;opacity:0;max-height:0;transition:visibility 0s 0.350s, max-height 0.350s 0s, opacity 0.350s 0s}
.message>*{margin:0.5em}
.message.open{margin:16px 4px;visibility:visible;opacity:1;max-height:4em;transition-delay:0s, 0s, 0s}
@media (prefers-reduced-motion){.message{transition:none}}
.under-grid{grid-row:controls;margin:16px 0 0 20px;font-family:calluna,serif;font-variant-caps:all-small-caps;font-feature-settings:"c2sc" 1;text-transform:uppercase}
.under-grid a{user-select:none}.
is-touch .under-grid,.is-phone .under-grid{display:none}
.under-clues{grid-column:clues;grid-row:controls;margin:16px 20px 0 32px;font-family:calluna,serif;font-variant-caps:all-small-caps;font-feature-settings:"c2sc" 1;text-transform:uppercase}
.under-clues a{user-select:none}
.is-touch .under-clues,.is-phone .under-clues{display:none}
.curtain{display:none;position:absolute;left:0;top:0;right:0;bottom:0;z-index:1}
.curtain.open{display:block;background-color:rgba(255,255,255,0.7);backdrop-filter:blur(3px)}
.mobile-pane{flex:none;display:none;align-self:stretch;flex-direction:column;z-index:2;background-color:#f6f6f6}
.is-phone .mobile-pane,.is-touch .mobile-pane,.mobile-pane.open{display:flex}
.mobile-pane.open{border-top:1px solid #ac1c40;box-shadow:0 -1px 3px rgba(172,28,64,0.75)}
.mobile-pane.open .when-closed{display:none}
.mobile-pane:not(.open){cursor:pointer}
.mobile-pane:not(.open) .when-open{display:none}
.mobile-pane .when-has-selection{display:none}
.mobile-pane .when-no-selection{display:none}
.mobile-pane.open.has-selection .when-has-selection{display:unset}
.mobile-pane.open.has-selection .when-no-selection{display:none}
.mobile-pane.open:not(.has-selection) .when-has-selection{display:none}
.mobile-pane.open:not(.has-selection) .when-no-selection{display:unset}
.mobile-pane .logo-area{display:flex;flex-direction:row}
.mobile-pane .logo-area>.logo{flex:1;margin:8px}
.mobile-pane .logo-area>.menu-button{flex:0 0 48px}
.mobile-pane .title{display:flex}
.mobile-pane .title .menu-button{flex:0 0 auto;margin:0;width:32px;height:42px;cursor:pointer}
.mobile-pane .menu-button{stroke:#000;stroke-width:2px;fill:none}
.mobile-pane h1{margin:8px 8px 8px 4px;font-size:22px;line-height:28px}
.mobile-pane .author{color:#ac1c40}
.mobile-pane p{margin:8px}
.mobile-pane p.subtle{color:#767676;font-size:14px;line-height:20px}
.mobile-pane a{user-select:none}
.mobile-pane .commands{margin:40px 8px;font-family:calluna,serif;font-variant-caps:all-small-caps;font-feature-settings:"c2sc" 1;text-transform:uppercase}
.mobile-pane .mobile-clue{display:flex;flex-direction:column}
.mobile-pane .mobile-clue p{margin:8px}
.mobile-pane .mobile-clue input{margin:0 8px;border-style:none none solid none;border-width:0 0 2px 0;border-radius:0;border-color:white;background-color:white;font-family:calluna,serif;font-variant-caps:titling-caps;text-transform:uppercase;letter-spacing:.2em;color:#000;font-size:19px;line-height:28px}
.mobile-pane .mobile-clue input:focus{border-color:#ac1c40;outline:none}
.mobile-pane .mobile-clue input::placeholder{color:#c3c3c3}
.mobile-pane .mobile-clue .commands{margin:0;display:flex;color:#a3a3a3}
.mobile-pane .mobile-clue .commands>*{margin:8px}.
mobile-pane .mobile-clue .commands>.error-indicator{margin:8px 0;padding:0 8px;border-radius:9999px}
.mobile-pane .mobile-clue .commands>.error-indicator.error{animation:1s error-pulse}
@keyframes error-pulse{10%{color:white;background-color:#ac1c40}30%{color:initial;background-color:initial}40%{color:white;background-color:#ac1c40}}

