@font-face{font-family:Areal;src:url(fonts/ABCAreal-Regular.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:Areal;src:url(fonts/ABCAreal-Medium.woff2) format("woff2");font-weight:500;font-display:block}

:root{--out:cubic-bezier(.23,1,.32,1);--side:clamp(280px,32vw,372px);--hit:0px}
:root,:root[data-scheme=dark]{--bg:#000;--fg:#fff;--g1:#a6a6a6;--g2:#7a7a7a;--g3:#333;color-scheme:dark}
:root[data-scheme=light]{--bg:#fff;--fg:#000;--g1:#525252;--g2:#737373;--g3:#d9d9d9;color-scheme:light}
@media (pointer:coarse){:root{--hit:14px}}

*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--fg);overflow:hidden;overscroll-behavior:none;
  font:400 13px/1.3 Areal,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;
  transition:background-color 200ms ease,color 200ms ease}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:0;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas.drag{cursor:grabbing}canvas.hit{cursor:pointer}
a{color:inherit;text-decoration:none}
button{all:unset;cursor:pointer;color:var(--g2);transition:color 120ms ease,transform 160ms var(--out)}
button:active{transform:scale(.97)}
button[aria-pressed=true]{color:var(--fg)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
@media (hover:hover) and (pointer:fine){button:hover{color:var(--fg)}a:hover .arrow{transform:translate(2px,-2px)}}
[hidden]{display:none!important}

#skip{position:fixed;z-index:6;top:8px;left:50%;transform:translate(-50%,-200%);background:var(--bg);color:var(--fg);padding:6px 10px}
#skip:focus-visible{transform:translate(-50%,0)}

.chrome{position:fixed;z-index:2;font-variant-numeric:tabular-nums;pointer-events:none;
  background:var(--bg);padding:3px 6px 4px;margin:-3px -6px -4px;transition:opacity 180ms ease,background-color 200ms ease}
.chrome button{pointer-events:auto}
#title{top:calc(16px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));font-weight:500;letter-spacing:-.035em;font-size:14px}
#title span{color:var(--g2);font-weight:400;letter-spacing:-.022em;margin-left:8px}
#title svg{width:19.5px;height:10.5px;margin-right:7px;fill:currentColor} /* 1.5px a tile, so the 13x7 mark lands on whole pixels at 2x */
#back{top:calc(16px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));font-weight:500;letter-spacing:-.035em;font-size:14px;color:var(--fg);pointer-events:auto}
#back::after{content:"";position:absolute;inset:calc(-1*var(--hit))}
body.canback #title{visibility:hidden}
#where{bottom:calc(16px + env(safe-area-inset-bottom));left:calc(18px + env(safe-area-inset-left));font-weight:500;font-size:14px;letter-spacing:-.035em}
#where:empty{display:none}
#tools{bottom:calc(16px + env(safe-area-inset-bottom));right:calc(18px + env(safe-area-inset-right));display:flex;gap:14px;align-items:baseline}
#tools button{padding:var(--hit) 2px;margin:calc(-1*var(--hit)) -2px}
#zoom{color:var(--g2);min-width:4ch;text-align:right}
#mineWrap{top:calc(16px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));font-weight:500;letter-spacing:-.035em;font-size:14px}
#mine{color:var(--fg);padding:var(--hit) 2px;margin:calc(-1*var(--hit)) -2px}
#hint{bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:var(--g2);white-space:nowrap}
#hint.gone,body.sel #hint{opacity:0}
body.sel .chrome.fades{opacity:0;pointer-events:none}
body.sel .chrome.fades button{pointer-events:none}

#cap{position:fixed;left:0;top:0;z-index:2;pointer-events:none;background:var(--bg);color:var(--fg);padding:3px 6px 4px;
  font-size:12px;letter-spacing:-.022em;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity 120ms ease;will-change:transform}
#cap.on{opacity:1}

/* Bottom sheet by default; a side panel when there's room. app.js uses the same rule to frame the image. */
#panel{position:fixed;z-index:3;left:0;right:0;bottom:0;max-height:46dvh;background:var(--bg);overflow:hidden auto;scrollbar-width:none;
  padding:0 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;
  visibility:hidden;pointer-events:none;transition:transform 200ms var(--out),visibility 0s linear 120ms,background-color 200ms ease}
#panel.open{visibility:visible;pointer-events:auto;transition:transform 200ms var(--out),visibility 0s,background-color 200ms ease}
#panel.dragging{transition:none}
#grab{flex:none;height:calc(30px + var(--hit));display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
#grab span{width:36px;height:3px;background:var(--g3)}
#keys{display:none}
#panel>*{opacity:0;transform:translateY(8px);filter:blur(4px);
  transition:opacity 120ms ease-out,transform 120ms ease-out,filter 120ms ease-out}
#panel.open>*{opacity:1;transform:none;filter:none;
  transition:opacity 280ms var(--out),transform 280ms var(--out),filter 280ms var(--out);
  transition-delay:calc(var(--i,0)*36ms + 90ms)}
#panel>:nth-child(2){--i:0}#panel>:nth-child(3){--i:1}#panel>:nth-child(4){--i:2}#panel>:nth-child(5){--i:3}#panel>:nth-child(6){--i:4}#panel>:nth-child(7){--i:5}#panel>:nth-child(8){--i:6}#panel>:nth-child(9){--i:7}#panel>:nth-child(10){--i:8}#panel>:nth-child(11){--i:9}
#panel.instant>*{transition:none!important}
#kicker{color:var(--g2);display:flex;justify-content:space-between;gap:12px}
#name{font-weight:500;font-size:clamp(25px,2.4vw,34px);line-height:1.02;letter-spacing:-.05em;overflow-wrap:anywhere;hyphens:auto}
#why{color:var(--g1);font-size:14px;line-height:1.32;overflow-wrap:anywhere}
#why:empty,#tags:empty,#added:empty{display:none}
#tags,#added{color:var(--g2);font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.links{display:flex;flex-direction:column;border-top:1px solid var(--g3);flex:none}
.links a,.links button{display:flex;justify-content:space-between;gap:12px;padding:calc(8px + var(--hit)/2) 0;border-bottom:1px solid var(--g3);transition:color 120ms ease}
.links a span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.links .primary{font-weight:500;letter-spacing:-.03em;font-size:14px}
.links .second{color:var(--g2)}
@media (hover:hover) and (pointer:fine){.links .second:hover{color:var(--fg)}}
.arrow{display:inline-block;transition:transform 160ms var(--out)}
#keys{color:var(--g2);font-size:12px}
#swatches{display:flex;gap:calc(6px + var(--hit)/2);flex:none}
#swatches button{position:relative;width:14px;height:14px;border:1px solid var(--g3)}
#swatches button::after{content:"";position:absolute;inset:calc(-3px - var(--hit)/4)}
#more{display:flex;flex-direction:column;gap:6px;flex:none;color:var(--g2);font-size:12px}
#moreList{display:grid;grid-template-columns:repeat(6,40px);justify-content:space-between}
#moreList button{display:flex;align-items:center;justify-content:center;height:40px}
#moreList .thumb{display:block;background-repeat:no-repeat;filter:grayscale(1);transition:filter 120ms ease}
#moreList button:focus-visible .thumb{filter:none}
@media (hover:hover) and (pointer:fine){#moreList button:hover .thumb{filter:none}}
#moveMenu{display:flex;flex-direction:column;gap:6px;flex:none}
#moveFilter{all:unset;box-sizing:border-box;width:100%;padding:calc(6px + var(--hit)/2) 0;border-bottom:1px solid var(--fg);color:var(--fg);font-size:16px;letter-spacing:-.03em}
#moveFilter::placeholder{color:var(--g2)}
#moveList{list-style:none;padding:0;max-height:26dvh;overflow:auto;scrollbar-width:none}
#moveList button{display:block;width:100%;padding:calc(7px + var(--hit)/2) 0;color:var(--g1)}
#moveList button:focus-visible{color:var(--fg);outline:0}
@media (hover:hover) and (pointer:fine){#moveList button:hover{color:var(--fg)}}

@media (min-width:760px),(min-aspect-ratio:7/5){
  #panel{left:auto;top:0;width:var(--side);max-height:none;background:none;justify-content:flex-end;gap:14px;
    padding:calc(18px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 0}
  #grab{display:none}
  #keys{display:block}
  #moveList{max-height:32dvh}
}
@media (max-width:759px){
  #hint,#zoom,#title span{display:none}
}
@media (max-width:939px){#hint{display:none}} /* it would run into the tools row */
@media (pointer:coarse){#keys{display:none}#hint{display:none}}

/* A rail, not a modal: the canvas stays in view and answers as you type. It opens from the keyboard, so nothing in it animates. */
#search{position:fixed;z-index:3;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--fg)}
#searchHead{flex:none;display:flex;align-items:baseline;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 18px 12px calc(18px + env(safe-area-inset-left));border-bottom:1px solid var(--g3)}
#searchInput{all:unset;flex:1;min-width:0;font-weight:500;font-size:clamp(25px,2.4vw,34px);line-height:1.1;letter-spacing:-.05em;caret-color:var(--fg)}
#searchInput::placeholder{color:var(--g2)}
#searchInput:focus-visible{outline:0}
#searchCount{color:var(--g2);font-variant-numeric:tabular-nums}
#searchClose{padding:var(--hit) 2px;margin:calc(-1*var(--hit)) -2px}
#searchList{flex:1;min-height:0;overflow:hidden auto;scrollbar-width:none;overscroll-behavior:contain}
#searchEmpty{padding:14px 18px;color:var(--g2)}
.sr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;height:52px;padding:0 18px;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto 52px}
.sr .thumb{display:block;justify-self:center;background-repeat:no-repeat;filter:grayscale(1)}
.sr .thumb.tile{background:var(--g3)}
.sr .txt{min-width:0}
.sr .name,.sr .sub,.sr .meta{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sr .name{color:var(--g2);font-size:14px;letter-spacing:-.03em}
.sr mark{background:none;color:var(--fg)}
.sr .sub,.sr .meta{color:var(--g2);font-size:12px}
.sr .meta{max-width:110px;font-variant-numeric:tabular-nums}
.sr.on{background:var(--fg)}
.sr.on,.sr.on *{color:var(--bg)}
.sr.on .thumb,.sr.hue .thumb{filter:none}
#searchKeys{flex:none;padding:9px 18px 10px;color:var(--g2);font-size:12px;border-top:1px solid var(--g3)}
#searchKey{margin-left:5px;opacity:.6}
@media (pointer:coarse){#searchKeys,#searchKey{display:none}}
@media (hover:hover) and (pointer:fine){#searchClose{display:none}}
@media (min-width:760px),(min-aspect-ratio:7/5){#search{right:auto;width:clamp(300px,34vw,440px);border-right:1px solid var(--g3)}}

/* Above the tools row, not on it. The thumb is 14px wide with a 1px line, and the bars inset by half of that so they line up with it. */
#time{left:calc(18px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right));bottom:calc(40px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:end;pointer-events:auto}
body.sel #time{visibility:hidden}
#timePlay{min-width:4ch;padding:var(--hit) 2px;margin:calc(-1*var(--hit)) -2px}
#timeLabel{color:var(--g1);white-space:nowrap}
#timeTrack{position:relative;height:calc(24px + var(--hit))}
#timeBars{position:absolute;inset:0 7px;display:flex;align-items:flex-end;gap:1px}
#timeBars span{flex:1 1 0;min-width:0;background:var(--g2)}
#timeBars span.off{background:var(--g3)}
#timeRange{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:ew-resize;touch-action:none}
#timeRange::-webkit-slider-runnable-track{height:100%;background:none}
#timeRange::-moz-range-track{height:100%;background:none}
#timeRange::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:100%;background:linear-gradient(var(--fg),var(--fg)) center/1px 100% no-repeat}
#timeRange::-moz-range-thumb{width:14px;height:100%;border:0;border-radius:0;background:linear-gradient(var(--fg),var(--fg)) center/1px 100% no-repeat}
@media (max-width:759px){
  #time{left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));grid-template-columns:auto 1fr;gap:6px 14px}
  #timeTrack{grid-column:1/-1;grid-row:2}
  #timeLabel{justify-self:end}
}
@media (min-width:760px),(min-aspect-ratio:7/5){#search:not([hidden])~#time{left:calc(clamp(300px,34vw,440px) + 18px)}}

#toast{position:fixed;z-index:4;left:50%;bottom:calc(44px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:baseline;white-space:nowrap;
  background:var(--bg);color:var(--fg);padding:5px 9px 6px;border:1px solid var(--g3);
  opacity:0;transform:translate(-50%,6px);pointer-events:none;transition:opacity 160ms ease-out,transform 160ms ease-out}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast button{color:var(--fg);font-weight:500;padding:var(--hit) 4px;margin:calc(-1*var(--hit)) -4px}
#notice{position:fixed;z-index:5;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:10px;white-space:nowrap;
  background:var(--bg);color:var(--fg);padding:5px 9px 6px;border:1px solid var(--fg)}
#notice button{color:var(--fg);font-weight:500;padding:var(--hit) 4px;margin:calc(-1*var(--hit)) -4px}

#list{position:fixed;z-index:5;inset:0;overflow:auto;background:var(--bg);color:var(--fg);padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));font-size:14px}
#list button{padding:var(--hit) 2px;margin:calc(-1*var(--hit)) -2px}
#list .listHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
#list h2{font-weight:500;font-size:clamp(25px,2.4vw,34px);letter-spacing:-.05em}
#list h3{font-weight:500;font-size:16px;letter-spacing:-.035em;margin:18px 0 6px}
#list ul{list-style:none;padding:0}
#list li{padding:3px 0}
#list a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--g3)}

#mineDialog{margin:auto;padding:0;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:none;background:var(--bg);color:var(--fg);border:1px solid var(--g3)}
#mineDialog::backdrop{background:rgb(0 0 0/.6)}
#mineForm{display:flex;flex-direction:column;gap:14px;padding:18px}
#mineTitle{font-weight:500;font-size:clamp(25px,2.4vw,34px);line-height:1.02;letter-spacing:-.05em}
#mineIntro,#mineMsg{color:var(--g1);font-size:14px;line-height:1.32}
#mineMsg:empty{display:none}
#mineForm label{display:flex;flex-direction:column;color:var(--g2);font-size:12px}
#mineForm input{all:unset;box-sizing:border-box;width:100%;padding:calc(6px + var(--hit)/2) 0;border-bottom:1px solid var(--g3);color:var(--fg);font-size:16px;letter-spacing:-.03em}
#mineForm input:focus{border-color:var(--fg)}
#mineActions{display:flex;justify-content:space-between;align-items:center;gap:14px}
#mineSubmit{padding:calc(6px + var(--hit)/2) 10px calc(7px + var(--hit)/2);background:var(--fg);color:var(--bg);font-weight:500;letter-spacing:-.03em;font-size:14px}
#mineSubmit:disabled{opacity:.5;cursor:default}
#mineClose{padding:var(--hit) 2px;margin:calc(-1*var(--hit)) -2px}

@media (prefers-reduced-motion:reduce){
  #panel>*,#panel.open>*{transform:none!important;filter:none!important;transition-delay:0ms!important}
  #toast,#toast.on{transform:translate(-50%,0)}
}