@font-face{font-family:"Plex Mono";src:url("fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("fonts/IBMPlexSans-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{color-scheme:light;--bg:#fff;--ink:#000;--text:#111;--sub:#5e5e5e;--line:#d4d4d4;--guide:#8f8f8f;--frame:#1c1c1c;--band:rgba(0,0,0,.05);--scrim:rgba(255,255,255,.84);--mono:"Plex Mono",monospace;--sans:"Plex Sans",sans-serif}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#000;--ink:#fff;--text:#ededed;--sub:#a6a6a6;--line:#2f2f2f;--guide:#8f8f8f;--frame:#ededed;--band:rgba(255,255,255,.06);--scrim:rgba(0,0,0,.8)}}
:root[data-theme=dark]{color-scheme:dark;--bg:#000;--ink:#fff;--text:#ededed;--sub:#a6a6a6;--line:#2f2f2f;--guide:#8f8f8f;--frame:#ededed;--band:rgba(255,255,255,.06);--scrim:rgba(0,0,0,.8)}

*{box-sizing:border-box;border-radius:0}
html,body{touch-action:manipulation}
body{margin:0;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);font:16px/1.45 var(--sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.35;cursor:default}
button:focus-visible,select:focus-visible,.sheet summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.readout{position:fixed;top:calc(max(0px,env(safe-area-inset-top)) + 18px);left:50%;transform:translateX(-50%);font:500 13px/1 var(--mono);letter-spacing:.02em;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
#restart-btn{position:fixed;top:max(0px,env(safe-area-inset-top));left:8px;z-index:2}

/* The board: a square of cells, a count at the end of each row and under each column. */
#board-shell{position:absolute;inset:56px 0 116px;display:flex;overflow:hidden}
.board-stage{flex:none;margin:auto}
.board{--gut:18px;--foot:24px;position:relative;display:grid;grid-template-columns:repeat(var(--w),var(--cell)) var(--gut);grid-template-rows:repeat(var(--h),var(--cell)) var(--foot);padding-left:var(--gut);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.grid-row{display:contents}
.cell{position:relative;display:grid;place-items:center;width:var(--cell);height:var(--cell);border-right:1px solid var(--guide);border-bottom:1px solid var(--guide);color:var(--ink);cursor:pointer;transition:border-color .6s}
.cell.end{border-right-color:transparent}
.grid-row.last .cell{border-bottom-color:transparent}
.cell svg{width:64%;height:64%;fill:currentColor;pointer-events:none}
.cell.tree{cursor:default}
.cell .dot{transition:opacity .6s}
.cell:focus{outline:none}
.cell:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;z-index:2}

/* A tent that breaks a rule (touching another, or with no tree beside it) is hatched and ringed. */
.cell.broken{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--guide) 5px 6.5px)}
.cell.broken::before{content:"";position:absolute;inset:2px;border:2px dashed var(--ink);pointer-events:none}
.cell.evidence{outline:1px solid var(--ink);outline-offset:-5px}
.cell.hint-target::after{content:"";position:absolute;inset:4px;border:3px double var(--ink);pointer-events:none;animation:pulse 650ms 2}

.clue{display:grid;place-items:center;font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.clue.row-clue{justify-self:stretch;margin:6px 0 6px 2px}
.clue.col-clue{align-self:stretch;margin:4px 6px 0}
.clue.met{color:var(--sub)}
.clue.over{background:var(--ink);color:var(--bg)}
.clue.evidence{outline:1px solid var(--ink)}

/* The frame around the cells; at the solve it also carries the rope from each tent to its tree. */
.ties{position:absolute;left:var(--gut);top:0;width:calc(var(--cell)*var(--w));height:calc(var(--cell)*var(--h));border:1px solid var(--ink);margin:-1px 0 0 -1px;box-sizing:content-box;pointer-events:none;overflow:visible}
.ties line{vector-effect:non-scaling-stroke;stroke:var(--ink);stroke-width:1.5;stroke-linecap:square;opacity:0;transition:opacity .6s .2s}
.board.solved .cell{border-color:transparent;cursor:default}
.board.solved .cell .dot{opacity:0}
.board.solved .ties line{opacity:1}

.completion{position:fixed;left:50%;bottom:max(64px,calc(env(safe-area-inset-bottom) + 64px));transform:translateX(-50%);display:flex;justify-content:center;animation:next-reveal .45s .15s both}
.completion[hidden]{display:none}
/* The shared frame clears borders on its icons, so the box is an outline. */
#next-btn{outline:1px solid var(--ink);outline-offset:-1px}
@keyframes next-reveal{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes pulse{50%{opacity:.3}}

#feedback{position:fixed;bottom:62px;left:16px;right:16px;min-height:36px;margin:0;display:grid;place-items:center;text-align:center;color:var(--sub);font:14px/1.3 var(--sans);pointer-events:none}
.toolbar{position:fixed;bottom:max(6px,env(safe-area-inset-bottom));left:8px;right:8px;display:flex;justify-content:space-between}
.toolbar>div{display:flex}
.ib{display:inline-grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;border:0;background:none;padding:12px;color:var(--ink);transition:opacity .15s,transform .1s}
.ib svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ib:active{transform:scale(.94)}
.board,.board *,header,.toolbar,.toolbar *,button,button *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Sheets */
.sheet{width:min(32rem,calc(100vw - 16px));max-height:calc(100dvh - 16px);border:1px solid var(--frame);padding:0;background:var(--bg);color:var(--text)}
.sheet[open]{display:flex;flex-direction:column}
.sheet::backdrop{background:var(--scrim)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;flex:none;border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0;font:500 16px/1.3 var(--mono)}
.sheet-head form{margin:0}
.sheet-x{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px}
.sheet-body{padding:20px 24px;overflow:auto;min-height:0;overscroll-behavior:contain}
.sheet-body p{max-width:60ch;margin:0 0 16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line)}
.row[hidden]{display:none}
.row select{max-width:65%;min-height:44px;background:var(--bg);border:0;padding:4px 8px}
.row button{min-height:44px;background:none;border:0;padding:8px}
.row button:not(:disabled){text-decoration:underline;text-underline-offset:4px}
.sheet-foot{padding:12px 24px;border-top:1px solid var(--line);flex:none;color:var(--sub);font-size:14px}
.sheet-foot a{color:inherit}
.text-action{min-height:44px;padding:8px 12px;border:1px solid var(--line);background:none;font:500 14px/1.3 var(--mono);color:var(--text)}
.controls{border-top:1px solid var(--line);padding-top:16px}
.controls p{margin:0 0 6px}
.help-more{border-top:1px solid var(--line);margin-top:16px;padding-top:4px}
.help-more summary{cursor:pointer;min-height:44px;padding:12px 0;color:var(--sub)}
.help-more p{font-size:14px}
.sheet-body .help-more p:last-child{margin-bottom:0}
kbd{font:500 14px/1 var(--mono)}
@media(max-width:480px){.sheet-head{padding:8px 12px}.sheet-body{padding:16px}}

@media(orientation:landscape) and (max-height:500px){
  #board-shell{inset:44px 72px 64px}
  .toolbar{left:auto;right:8px;top:12px;bottom:12px;flex-direction:column;width:48px}
  .toolbar>div{flex-direction:column}
  #feedback{left:64px;right:136px;bottom:14px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{animation:none!important;transition:none!important}
@media(forced-colors:active){
  .cell{border-color:GrayText;color:CanvasText}
  .cell.broken{background:none}
  .cell.broken::before,.cell.hint-target::after{border-color:Highlight}
  .clue.over{background:CanvasText;color:Canvas;forced-color-adjust:none}
  .ties{border-color:CanvasText}
  .ties line{stroke:CanvasText}
  .cell:focus-visible{outline-color:Highlight}
  .sheet{border-color:CanvasText}
}