@font-face{font-family:"Berkeley Mono";src:url("/fonts/BerkeleyMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Cabin;src:url("/fonts/cabin.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{--paper:#fbfaf7;--card:#fffefd;--ink:#0b1f1d;--muted:#60706d;--line:#dfe6e2;--green:#005943;--band:#eaf1ed;--mono:"Berkeley Mono",ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 Cabin,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.page{max-width:1320px;margin:0 auto;padding:28px 40px 40px}
.page.single{max-width:900px}
.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.wordmark{font:400 22px/1 var(--mono);letter-spacing:-.03em;text-decoration:none}
.top-links{display:flex;align-items:baseline;gap:18px}
.top .all{color:var(--muted);font-size:15px}
.top .demo{color:var(--green);font-size:15px;font-weight:500}
.intro h1{font:400 clamp(32px,3.4vw,44px)/1.1 var(--mono);letter-spacing:-.04em;margin:40px 0 8px}
.intro p{margin:0 0 28px;color:var(--muted);font-size:18px;text-wrap:pretty}
footer{margin-top:48px;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
footer .wordmark{color:var(--ink);font-size:18px}

/* Drawings */
.art{display:block;width:100%;height:auto;fill:none;stroke:var(--green);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.art *{vector-effect:non-scaling-stroke}
.art .on{fill:var(--green)}
.art .knock{stroke:var(--band)}
.art .bg{fill:var(--band)}
.art .dot{fill:var(--green);stroke:none}

/* Left list */
.layout{display:grid;grid-template-columns:372px minmax(0,1fr);gap:24px;align-items:start}
.rail{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:sticky;top:16px}
.tile{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;text-decoration:none;transition:border-color .15s}
.tile:hover{border-color:#a9c0b6}
.tile[aria-current="true"]{border-color:var(--green);outline:1px solid var(--green);outline-offset:-1px}
.tile .band{background:var(--band);padding:10px 12px;align-self:stretch;display:flex;align-items:center}
.tile .art{stroke-width:1.25}
.tile .txt{padding:10px 14px;min-width:0}
.tile strong{display:block;font:400 16px/1.3 var(--mono);letter-spacing:-.03em}
.tile span{display:block;color:var(--muted);font-size:14px;line-height:1.35;margin-top:2px}

/* Detail */
.skill{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:28px 32px 32px}
.skill[hidden]{display:none}
.single .skill{margin-top:32px}
.skill header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.skill .name{font:400 clamp(26px,2.6vw,34px)/1.15 var(--mono);letter-spacing:-.04em;margin:0}
.skill .tag{margin:6px 0 0;color:var(--muted);font-size:17px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{min-width:104px;min-height:38px;padding:0 14px;border:1px solid var(--green);border-radius:6px;background:var(--card);color:var(--green);font:500 14px/1 Cabin,Arial,sans-serif;cursor:pointer;transition:background-color .15s,color .15s}
.btn:hover{background:var(--band)}
.btn.main{background:var(--green);color:var(--card)}
.btn.main:hover{background:#00493a}
.btn.done{background:var(--green);color:var(--card)}
.about{margin:20px 0 0;font-size:17px;line-height:1.55;max-width:68ch;text-wrap:pretty}
.preview{margin:24px 0 0;background:var(--band);border-radius:6px;padding:20px}
.preview figcaption{margin-top:12px;color:var(--muted);font-size:13px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:24px}
.cols h3{font:500 15px/1.3 Cabin,Arial,sans-serif;margin:0 0 8px}
.cols ul{margin:0;padding:0 0 0 18px;font-size:15px;line-height:1.5}
.cols li{margin-bottom:5px}
.cols li::marker{color:#8ba298}

/* Previews */
.preview figcaption a{color:inherit}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{display:block;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;height:260px}
.shot.wide{grid-column:1/-1;height:auto}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.shot.wide img{height:auto}
.connect{margin-top:24px}
.connect h3{font:500 15px/1.3 Cabin,Arial,sans-serif;margin:0 0 8px}
.connect ol{margin:0;padding:0 0 0 20px;font-size:15px;line-height:1.5;max-width:68ch}
.connect li{margin-bottom:5px}
.connect code{font:400 14px/1.4 var(--mono);overflow-wrap:anywhere}
.credit{margin:20px 0 0;color:var(--muted);font-size:13px}
.pv-table{width:100%;border-collapse:separate;border-spacing:0}
.pv-table th{font-weight:500;font-size:13px;text-align:left;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line)}
.pv-table td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.pv-table tr:last-child td{border-bottom:0}
.pv-table td:nth-child(2){font-family:var(--mono);font-size:13px;letter-spacing:-.02em;white-space:nowrap}
.pv-table .fix{color:var(--green)}
.pv{background:var(--card);border:1px solid var(--line);border-radius:6px;font-size:14px;overflow:hidden}
.pv-mono{font:400 13px/1.65 var(--mono);letter-spacing:-.02em;padding:14px 16px;margin:0;white-space:pre;overflow-x:auto}
.pv-mono.wrap{white-space:pre-wrap}
.pv-mono .c{color:var(--muted)}
.pv-mono .g{color:var(--green)}
.pv-threads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);min-height:190px}
.pv-threads ul{list-style:none;margin:0;padding:8px;border-right:1px solid var(--line)}
.pv-threads li{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:4px;font-size:13px}
.pv-threads li em{font-style:normal;color:var(--muted);white-space:nowrap}
.pv-threads li.need{background:var(--band)}
.pv-threads li.need em{color:var(--green)}
.pv-threads .chat{padding:14px 16px;font-size:13.5px;line-height:1.45}
.pv-threads .chat p{margin:0 0 8px}
.pv-threads .chat b{font-weight:500}
.pv-film{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px}
.pv-film div{min-width:0}
.pv-film .fr{aspect-ratio:16/9;border-radius:3px;background:var(--band);display:grid;place-items:center;padding:6px}
.pv-film .fr.on{background:var(--green)}
.pv-film .fr svg{width:70%;height:auto;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv-film .fr.on svg{stroke:var(--card)}
.pv-film p{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted)}
.pv-time{display:flex;gap:2px;padding:0 12px 12px;font:400 11px/1 var(--mono);color:var(--muted)}
.pv-time i{height:6px;background:var(--line);border-radius:2px;display:block;margin-bottom:5px}
.pv-time i.on{background:var(--green)}
.pv-time span{min-width:0}
.pv-doc{padding:14px 16px}
.pv-doc h4{font:400 15px/1.3 var(--mono);letter-spacing:-.03em;margin:0 0 10px}
.pv-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.pv-opts div{border:1px solid var(--line);border-radius:4px;padding:8px 10px;font-size:13px;line-height:1.35}
.pv-opts div.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.pv-opts b{display:block;font-weight:500}
.pv-opts small{color:var(--muted);font-size:12px}
.pv-opts .rec{color:var(--green)}
.pv-doc .ans{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:8px 10px;font:400 12.5px/1.55 var(--mono);white-space:pre;overflow-x:auto;margin:0}
.pv-map{padding:14px 16px}
.pv-map p{margin:0 0 6px;font-size:14px}
.pv-map svg{display:block;width:100%;height:auto}
.pv-map text{font:400 11px var(--mono);fill:var(--ink);letter-spacing:-.02em}
.pv-map .t2{fill:var(--muted)}

@media (max-width:899px){
  .page{padding:20px 20px 32px}
  .layout{display:block}
  .rail{position:static}
  .panel{display:none}
  .skill{padding:20px}
  .cols{grid-template-columns:1fr;gap:18px}
  .pv-film{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-opts{grid-template-columns:1fr}
  .pv-threads{grid-template-columns:1fr}
  .pv-threads ul{border-right:0;border-bottom:1px solid var(--line)}
  .actions{width:100%}
  .actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.btn,.tile{transition:none}}
.pv-threads.solo{grid-template-columns:minmax(0,1fr);min-height:0}

/* Animated tile icons. The rest state is the finished drawing; everything under
   .play runs once on hover, focus, or scrolling into view on touch. */
.tile .band:has(.ico){padding:6px 8px}
.ico{display:block;width:100%;height:auto;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ico *{transform-box:fill-box;transform-origin:center}
.ico .d{--o:.3;opacity:.3}
.ico .f{fill:var(--green);stroke:none}
.ico .k{stroke:var(--band)}
.ico .ghost{opacity:0}
.ico .lens{fill:var(--band)}
.play .ico{--spring:cubic-bezier(.34,1.5,.64,1);--out:cubic-bezier(.2,0,0,1)}
.play .draw{stroke-dasharray:1;animation:i-draw var(--dur,.5s) var(--out) var(--t,0s) both}
.play .pop{animation:i-pop var(--dur,.42s) var(--spring) var(--t,0s) both}
.play .fade{animation:i-fade var(--dur,.3s) ease-out var(--t,0s) both}
.play .ring{animation:i-ring .85s ease-out var(--t,0s) 2 both}
.play .comet{stroke-dasharray:.16 1;animation:i-comet var(--dur,.8s) cubic-bezier(.45,0,.55,1) var(--t,0s) both}
.play .bar-w{animation:i-wave .34s ease-in-out var(--t,0s) 3 alternate both}
.play .ball{animation:i-ball 1.1s linear both}
.play .sel{animation:i-sel 1.05s var(--out) both}
.play .glass{animation:i-glass 1.15s var(--out) both}
.play .in-l{animation:i-in-l .5s var(--spring) both}
.play .in-r{animation:i-in-r .5s var(--spring) both}
@keyframes i-draw{0%{stroke-dashoffset:1;opacity:0}1%{opacity:var(--o,1)}100%{stroke-dashoffset:0;opacity:var(--o,1)}}
@keyframes i-pop{from{transform:scale(.3);opacity:0}}
@keyframes i-fade{from{opacity:0}}
@keyframes i-ring{from{transform:scale(1);opacity:.9}to{transform:scale(2.9);opacity:0}}
@keyframes i-comet{0%{stroke-dashoffset:.16;opacity:0}12%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes i-wave{from{transform:scaleY(1)}to{transform:scaleY(.25)}}
@keyframes i-ball{
  0%{transform:translateY(-26px) scale(1)}
  28%{transform:translateY(0) scale(1.22,.74);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  56%{transform:translateY(-14px) scale(1)}
  78%{transform:translateY(0) scale(1.12,.86);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  90%{transform:translateY(-4px) scale(1)}
  100%{transform:none}
}
@keyframes i-sel{0%{transform:translateX(-34px)}35%{transform:translateX(-34px)}70%{transform:translateX(34px)}100%{transform:none}}
@keyframes i-glass{0%{transform:translate(-44px,-34px)}40%{transform:translate(-8px,-24px)}55%{transform:translate(-8px,-24px)}100%{transform:none}}
@keyframes i-in-l{from{transform:translateX(-14px);opacity:0}}
@keyframes i-in-r{from{transform:translateX(14px);opacity:0}}
@media (prefers-reduced-motion:reduce){.play *{animation:none!important}}