@font-face{font-family:Prata;src:url('fonts/Prata-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Jost;src:url('fonts/Jost-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Jost;src:url('fonts/Jost-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
:root{--ground:#12110e;--fg:rgb(244 241 234);--soft:rgb(244 241 234 / .62);--line:rgb(244 241 234 / .14);--accent:rgb(212 149 95);--white:rgb(244 241 234);--square:#191814}
*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--ground);color:var(--fg);font:16px/1.5 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{cursor:default}[hidden]{display:none!important}.shell{max-width:1020px;padding:28px 36px 30px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{font-size:10px;font-weight:500;letter-spacing:2px;margin:0}h1,h2{font:400 52px/1.2 Prata,Georgia,serif;letter-spacing:-2px;margin:8px 0 0}h1>span{color:var(--accent)}.tagline{margin:10px 0 25px;color:var(--soft)}.text-button{border:0;background:none;padding:8px 0;min-height:44px;font-size:14px}.text-button:hover:not(:disabled){text-decoration:underline;text-underline-offset:5px}.text-button:disabled{opacity:.35}.game-layout{display:grid;grid-template-columns:minmax(0,550px) minmax(190px,1fr);gap:42px}.turn-bar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--fg);padding:12px 0;font-size:15px;gap:10px}#turn{display:flex;align-items:center;gap:8px}#move-number{font-size:11px;color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums}.turn-dot,.sample{display:inline-block;width:11px;height:11px;flex-shrink:0;border:1px solid var(--fg);border-radius:50%}.white{background:var(--white)}.black{background:var(--fg)}.thinking .turn-dot{animation:breathe 1.2s infinite}.direction-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 0 13px 18px}.direction{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:6px 8px;border:1px solid var(--line);font-size:11px}.direction-name{font-weight:500}.direction-owner{font-size:10px}.held-white{background:var(--white)}.held-black{background:var(--fg);color:var(--ground);border-color:var(--fg)}.open{color:var(--soft)}.board-wrap{position:relative;padding-left:18px}#board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));aspect-ratio:1;border:1px solid var(--fg);gap:1px;padding:4px;background:var(--line);touch-action:manipulation}.cell,.example-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border:0;background:var(--ground);isolation:isolate;touch-action:manipulation}.dark-square{background:var(--square)}.cell.cross-row:before{content:'';position:absolute;height:2px;left:0;right:0;top:calc(50% - 1px);background:rgb(244 241 234 / 0.15);z-index:0;pointer-events:none}.cell.cross-column:after{content:'';position:absolute;width:2px;top:0;bottom:0;left:calc(50% - 1px);background:rgb(244 241 234 / 0.15);z-index:0;pointer-events:none}.cell.ray-white{background:rgb(244 241 234 / .07)}.cell.ray-black{background:rgb(0 0 0 / .35)}.stone{display:block;border-radius:50%;width:57%;height:57%;border:1.8px solid var(--fg);z-index:2;box-shadow:0 2px 3px rgb(0 0 0 / .5);pointer-events:none}.white-stone{background:var(--white);box-shadow:inset 0 2px 0 #fff,0 2px 3px rgb(0 0 0 / .5)}.black-stone{background:var(--fg);box-shadow:inset 0 2px 0 #ffffff20,0 2px 3px rgb(0 0 0 / .5)}.centre-mark{position:relative;display:block;width:27%;aspect-ratio:1;border:2px solid var(--fg);border-radius:50%;background:var(--ground);z-index:2;pointer-events:none}.centre-mark:after{content:'';position:absolute;width:25%;height:25%;top:37.5%;left:37.5%;border-radius:50%;background:var(--fg)}.cell.selected{outline:2px solid var(--accent);outline-offset:-3px}.cell.legal{background-image:radial-gradient(circle at center,rgb(244 241 234 / 0.51) 0 8%,transparent 9%)}.cell.capture{background-image:radial-gradient(circle at center,transparent 0 48%,var(--accent) 49% 52%,transparent 53%)}.cell.preview{box-shadow:inset 0 0 0 2px rgb(212 149 95 / 0.4)}.cell.last-from{box-shadow:inset 0 0 0 1px rgb(212 149 95 / 0.47)}.cell.last-to{box-shadow:inset 0 0 0 2px rgb(212 149 95 / 0.6)}.cell:focus-visible{z-index:3;outline:3px solid var(--accent);outline-offset:-3px}.files{display:grid;grid-template-columns:repeat(7,1fr);padding:0 4px;text-align:center;height:24px;align-items:end;color:var(--soft);font-size:10px}#ranks{position:absolute;top:4px;bottom:24px;left:0;display:grid;grid-template-rows:repeat(7,1fr);align-items:center;font-size:10px;color:var(--soft)}.reserves{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 0 18px}.reserve{background:none;text-align:left;border:1px solid var(--line);padding:9px 11px;min-height:60px}.reserve-title{display:flex;align-items:center;gap:7px;font-size:13px}.reserve-title strong{margin-left:auto;font-size:18px;font-weight:500}.reserve-caption{display:block;font-size:10px;color:var(--soft);margin-top:2px}.reserve:not(:disabled):hover,.reserve.selected{border-color:var(--accent);background:rgb(244 241 234 / .05)}.reserve:disabled .reserve-title{opacity:.65}#hint{font-size:13px;min-height:40px;color:var(--soft);margin:14px 0 6px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}#mode-label{font-size:11px;color:var(--soft)}.note{border-top:1px solid var(--fg);padding-top:15px}.note>p:not(.eyebrow){font:400 26px/1.4 Prata,Georgia,serif;letter-spacing:-.6px;margin:17px 0}.note>span{display:block;font-size:14px;color:var(--soft)}.note>.text-button{font-size:12px;margin-top:8px}.score-panel,.last-play,.history-area{border-top:1px solid var(--line);margin-top:22px;padding-top:14px}.score-panel>div{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:14px}.score-panel>div>span{display:flex;align-items:center;gap:7px}.score-panel strong{font-weight:500;font-size:19px}.score-panel small{font-size:12px;font-weight:400;color:var(--soft)}.last-play>p:last-child{color:var(--soft);font-size:14px;margin:10px 0}#history{list-style:none;margin:10px 0 0;padding:0;max-height:150px;overflow:auto;scrollbar-width:thin;font-size:12px;font-variant-numeric:tabular-nums}#history li{display:grid;grid-template-columns:20px 1fr;gap:5px;padding:5px 0;border-bottom:1px solid rgb(244 241 234 / 0.07)}#history li>span:first-child{color:var(--soft)}#empty-history,.prototype{font-size:12px;color:var(--soft)}.prototype{border-top:1px solid var(--line);padding-top:14px;margin-top:20px}#opening-choice{border:1px solid var(--accent);margin:0 0 14px 18px;padding:12px 14px;background:rgb(244 241 234 / .05)}#opening-choice>p:first-child{margin:0 0 9px;font-size:14px}.choice-buttons{display:flex;gap:10px}.choice-buttons button{border:1px solid var(--fg);background:var(--ground);min-height:44px;flex:1;font-size:13px;padding:8px}.choice-buttons button:last-child{background:var(--fg);color:var(--ground)}#opening-choice .small{margin:8px 0 0}.small{font-size:13px;color:var(--soft);margin:14px 0}dialog{position:fixed;width:min(92vw,490px);margin:auto;max-height:90dvh;overflow:auto;border:1px solid var(--fg);padding:30px;background:var(--ground);color:var(--fg)}dialog::backdrop{background:rgb(244 241 234 / 0.36);backdrop-filter:blur(3px)}h2{font-size:31px;letter-spacing:-1px;margin:16px 0 20px}.close{position:absolute;right:10px;top:7px;width:44px;height:44px;background:none;border:0;font-size:27px}.rules-list{padding-left:22px;font-size:15px}.rules-list li{padding:10px 0 10px 4px;border-top:1px solid var(--line)}.rules-list strong{display:block}.primary{width:100%;min-height:48px;padding:12px;margin-top:12px;border:1px solid var(--fg);background:var(--fg);color:var(--ground)}.primary:hover{background:#fff}.example-link{border:0;border-bottom:1px solid var(--line);background:none;padding:10px 0;min-height:44px;font-size:14px}label{display:block;font-size:13px;margin:17px 0 5px}select{width:100%;padding:11px;background:var(--ground);border:1px solid var(--line);font-size:14px}#example-board{display:grid;grid-template-columns:repeat(7,1fr);aspect-ratio:1;gap:1px;padding:3px;background:var(--line);max-width:330px;margin:auto;border:1px solid var(--fg)}#example-copy{font-size:14px;min-height:65px}body:has(dialog[open]){overflow:hidden}@keyframes breathe{50%{opacity:.3}}
@media(max-width:700px){.shell{max-width:520px;padding:18px 18px 24px}h1{font-size:41px;margin-top:6px}.eyebrow{font-size:9px}.tagline{font-size:14px;margin:9px 0 18px}header>.text-button{font-size:12px}.game-layout{display:block}aside{display:none}.turn-bar{padding:11px 0;font-size:14px}.direction{padding:5px 7px;display:block;text-align:center}.direction-name{display:block;font-size:10px}.direction-owner{font-size:10px}.direction-strip{margin-bottom:11px}.reserves{gap:8px;margin-top:11px}.reserve{padding:7px 8px;min-height:61px}.reserve-title{font-size:12px;gap:5px}.reserve-caption{font-size:10px;line-height:1.3}.reserve-title strong{font-size:17px}#hint{margin:11px 0 4px;min-height:40px;font-size:12px}#mode-label{font-size:10px}.toolbar .text-button{font-size:12px}.stone{border-width:1.4px}.centre-mark{border-width:1.5px}#opening-choice{padding:10px 11px}#opening-choice>p:first-child{font-size:13px}dialog{padding:25px}h2{font-size:28px}}
@media(max-width:350px){.shell{padding:14px 10px}.reserve-title{font-size:11px}.reserve-caption{font-size:9px}.direction{padding:4px}.tagline{margin-bottom:14px}#board{padding:3px}.board-wrap{padding-left:16px}.direction-strip,.reserves,#opening-choice{margin-left:16px}}
@media(min-width:701px) and (max-height:900px){.shell{max-width:940px;padding-top:20px}h1{font-size:43px}.tagline{margin:8px 0 19px}.game-layout{grid-template-columns:minmax(340px,min(490px,calc(100dvh - 355px))) minmax(200px,1fr);gap:36px}.note>p:not(.eyebrow){font-size:24px}#history{max-height:100px}.score-panel,.last-play,.history-area{margin-top:17px;padding-top:12px}.prototype{margin-top:15px}.turn-bar{padding:10px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* zei.st: the dark ground, soft shapes and cards of the landing */
html{background:var(--ground);color-scheme:dark}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a:focus-visible{border-radius:6px}
dialog{background:rgb(28 26 22 / .97);border:1px solid rgb(244 241 234 / .08);border-radius:28px;box-shadow:0 40px 80px -30px rgb(0 0 0 / .8)}
dialog::backdrop{background:rgb(8 7 6 / .55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn,.primary{border-radius:999px;border:1px solid rgb(244 241 234 / .2);background:none;color:var(--fg);transition:background .3s}
.btn:hover{background:rgb(244 241 234 / .06)}
.btn.solid,dialog .btn,.primary,.play .btn{background:var(--fg);color:var(--ground);border-color:var(--fg)}
.btn.solid:hover,dialog .btn:hover,.primary:hover,.play .btn:hover{background:#fff}
select{border-radius:12px;background:#1c1a16;border-color:rgb(244 241 234 / .14)}

#board{border-color:rgb(244 241 234 / .3);border-radius:14px;overflow:hidden}
.white-stone{background:var(--fg);border-color:var(--fg);box-shadow:inset 0 2px 0 #fff,0 2px 5px rgb(0 0 0 / .55)}
.black-stone{background:#0b0a08;border-color:var(--fg);box-shadow:inset 0 2px 0 rgb(255 255 255 / .08),0 2px 5px rgb(0 0 0 / .55)}
.black,.turn-dot.black-dot,.sample.black-piece{background:#0b0a08;border-color:var(--fg)}
.white,.turn-dot,.sample.white-piece{background:var(--fg)}
.held-black{background:#0b0a08;color:var(--fg);border-color:rgb(244 241 234 / .4)}
.held-white{background:var(--fg);color:var(--ground)}
.direction,.reserve,#opening-choice,.rule-example,.mini{border-radius:14px}
.choice-buttons button{border-radius:999px;border-color:rgb(244 241 234 / .2);background:none}
.choice-buttons button:last-child{background:var(--fg);color:var(--ground)}
.turn-bar,.note{border-top-color:rgb(244 241 234 / .3)}
#example-board{border-radius:12px;overflow:hidden;border-color:rgb(244 241 234 / .3)}