:root{
  color-scheme:light;
  --bg:#ECECEA; --block:#FFFFFF; --ink:#000; --mid:#5e5e5b; --line:#c9c9c6; --red:#FC3D21;
  --hv:"Helvetica Neue",Helvetica,Arial,sans-serif; --mk:"Reenie Beanie","Bradley Hand","Segoe Print",cursive; --pencil:#4b4b48;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#141413; --block:#1f1f1e; --ink:#f2f2f0; --mid:#9a9a97; --line:#3a3a38; } }
:root[data-theme="dark"]{ color-scheme:dark; --bg:#141413; --block:#1f1f1e; --ink:#f2f2f0; --mid:#9a9a97; --line:#3a3a38; }
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*,*::before,*::after{box-sizing:inherit;}
body{margin:0; font-family:var(--hv); font-weight:400; color:var(--ink); background:var(--bg); line-height:1.4; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:var(--bg); z-index:12;}
a{color:var(--ink); text-decoration:none;} a:hover{color:var(--red);}
.wrap{max-width:1400px; margin:0 auto; padding:0 24px 80px;}
@media (max-width:640px){.wrap{padding:0 14px 60px;}}

/* header */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:11; background:var(--bg); display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:13px; border-bottom:1px solid var(--line); gap:12px;}
header .brand{display:flex; gap:10px; align-items:center;}
header .brand i{display:block; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--ink);}
header .brand b{font-weight:500;} header .brand span{color:var(--mid);}
header nav{display:flex; gap:22px; color:var(--mid);}
header nav a{color:var(--mid);} header nav a.join{color:var(--ink); font-weight:500;} header nav a:hover{color:var(--red);}
@media (max-width:640px){header .brand span{display:none;} header nav{gap:14px;}}

/* intro */
.intro{padding:56px 0 28px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}
.intro h1{margin:0; font-size:clamp(30px,4vw,46px); font-weight:500; letter-spacing:-.03em; line-height:1.05; max-width:22ch;}
.intro p{margin:0; font-size:13px; color:var(--mid); max-width:38ch;}
.intro p b{color:var(--ink); font-weight:500;}

/* board */
.boardbar{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--mid); padding:10px 0 12px;}
.boardbar .state{display:flex; align-items:center; gap:8px;}
.boardbar .state i{display:block; width:8px; height:8px; background:var(--ink);}
.boardbar .state.messy i{background:var(--red);}
.btn{font-family:var(--hv); font-size:12px; font-weight:500; background:var(--ink); color:var(--bg); border:1px solid var(--ink); padding:8px 14px; cursor:pointer; border-radius:0;}
.btn:hover{background:var(--red); border-color:var(--red); color:#000;}
.btn:focus-visible{outline:2px solid var(--red); outline-offset:3px;}
.btn.ghost{background:transparent; color:var(--ink);} .btn.ghost:hover{background:var(--ink); color:var(--bg);}
#board{position:relative; height:800px; touch-action:none;}
.blk{position:absolute; left:0; top:0; width:200px; height:200px; background:var(--block); border:1px solid var(--line); padding:16px; display:flex; flex-direction:column; justify-content:flex-start; gap:14px; cursor:grab; user-select:none; touch-action:none; transition:transform .25s ease, box-shadow .2s;}
.blk.moving{transition:none; cursor:grabbing; z-index:9; box-shadow:0 14px 24px -14px rgba(0,0,0,.45);}
.blk.knolling{transition:left .45s cubic-bezier(.2,.8,.2,1), top .45s cubic-bezier(.2,.8,.2,1), transform .45s;}
.blk:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
.blk .lab{font-size:11px; color:var(--mid);}
.mk{font-family:var(--mk); color:var(--pencil); line-height:1.1; letter-spacing:.005em; opacity:.95; font-size:1.18em;} .mk.red{color:var(--red); opacity:.85;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mk{color:#c9c9c4;} }
.aside{font-family:var(--mk); font-size:17px; color:var(--mid); transform:rotate(-2deg); display:inline-block; opacity:.85;}
.blk{border-color:var(--ink);} .blk.dash{border-color:var(--mid);}
.blk .cray{display:flex; gap:8px; align-items:flex-end;}
.blk .cray button{width:16px; height:52px; border:1px solid var(--ink); background:var(--c); cursor:pointer; padding:0; clip-path:polygon(50% 0,100% 16%,100% 100%,0 100%,0 16%); transition:transform .12s;}
.blk .cray button[aria-pressed="true"]{transform:translateY(-8px) rotate(-6deg);} .blk .cray button:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
#marker{position:absolute; left:0; top:0; z-index:7; pointer-events:none; overflow:visible;}
body.drawing{user-select:none; touch-action:none;} body.drawing .blk{pointer-events:none;} body.drawing #cray button,body.drawing #wipe{pointer-events:auto;}
.blk.form{padding:0; border:0;}
.blk.f-circle{border-radius:50%; background:var(--red);}
.blk.f-square{background:var(--ink);}
.blk.f-tri{background:var(--ink); clip-path:polygon(50% 0,100% 100%,0 100%);}
.blk h3{margin:0 0 6px; font-size:20px; font-weight:500; letter-spacing:-.02em; line-height:1.1;}
.blk p{margin:0; font-size:13px; color:var(--mid);}
.blk.red{background:var(--red); border-color:var(--red); color:#000;} .blk.red .lab,.blk.red p{color:#000;}
.blk.ink{background:var(--ink); border-color:var(--ink); color:var(--bg);} .blk.ink .lab{color:var(--mid);}
.blk.dash{border-style:dashed; border-color:var(--mid); background:transparent; align-items:center; justify-content:center; text-align:center; color:var(--mid); font-size:13px;}
.blk.big{align-items:center; justify-content:center; gap:0; cursor:pointer;}
.blk.big .lab{position:absolute; left:14px; top:12px;} .blk.big .cap{position:absolute; right:14px; bottom:12px; font-size:11px; color:var(--mid);}
.blk.big svg{width:84%; height:84%; display:block; overflow:visible;}
.spin{transform-origin:50% 50%; animation:spin 22s linear infinite;}
.blk.big.fast .spin{animation-duration:1.6s;}
@keyframes spin{to{transform:rotate(360deg);}}
.count{font-size:72px; font-weight:500; letter-spacing:-.05em; line-height:.9;}
.sticker{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
.blk .big-text{font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:1.15;}
.leakchar{position:absolute; font-size:26px; font-weight:500; pointer-events:none; z-index:8; transition:top 1.1s cubic-bezier(.5,0,.9,.8), left 1.1s ease, transform 1.1s ease; will-change:top;}
.floor-note{position:absolute; left:0; bottom:-26px; font-size:11px; color:var(--mid);}

/* lists */
.sec{padding:56px 0 0;}
.sec .head{display:flex; justify-content:space-between; font-size:13px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.sec .head b{font-weight:500;} .sec .head span{color:var(--mid);}
.row{display:grid; grid-template-columns:90px 160px minmax(0,1fr) 120px; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px;}
.row.dim{color:var(--mid);} .row .r{color:var(--red); text-align:right;} .row .end{text-align:right;}
.row s{color:var(--mid);}
@media (max-width:640px){.row{grid-template-columns:70px minmax(0,1fr) 90px;} .row > :nth-child(2){display:none;}}

/* notes */
.notes{padding:72px 0 0; border-top:1px solid var(--line); margin-top:64px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px 48px; align-items:start;}
.notes .k{font-size:12px; font-weight:500; margin:6px 0 0; color:var(--mid); display:flex; flex-direction:column; gap:6px;}
.notes .k .aside{font-size:15px; transform:none;}
.notes .v{max-width:62ch; display:flex; flex-direction:column; gap:40px;}
.notes .v p{margin:0; font-size:clamp(19px,1.9vw,24px); line-height:1.4; font-weight:300; letter-spacing:-.012em;}
.notes .v p b{font-weight:500;}
.notes .v p:nth-child(1){font-size:clamp(28px,3.4vw,44px); line-height:1.1; letter-spacing:-.025em; font-weight:500;}
.notes .v p:nth-child(1) .mk{font-size:.6em; margin-left:.2em;}
.notes .v p .dot{display:inline-block; width:.32em; height:.32em; border-radius:50%; background:var(--red); margin-right:.22em; vertical-align:baseline; position:relative; top:.1em;}
@media (max-width:760px){.notes{grid-template-columns:1fr; gap:16px;}}

/* join */
.join{margin-top:56px; background:var(--block); border:1px solid var(--line); padding:24px; display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:center;}
@media (max-width:760px){.join{grid-template-columns:1fr;}}
.join h2{margin:0 0 4px; font-size:20px; font-weight:500; letter-spacing:-.02em;}
.join p{margin:0; font-size:13px; color:var(--mid);}
.field{display:grid; grid-template-columns:minmax(0,1fr) auto; border:1px solid var(--ink);}
.field label{position:absolute; left:-9999px;}
.field input{font-family:var(--hv); font-size:16px; padding:14px 16px; color:var(--ink); background:transparent; border:0; border-radius:0; min-width:0;}
.field input:focus{outline:2px solid var(--red); outline-offset:-2px;} .field input::placeholder{color:var(--mid);}
.field .btn{border:0; border-left:1px solid var(--ink); padding:14px 24px; font-size:14px;}
.status{display:flex; gap:24px; margin-top:12px; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--mid); grid-column:2;}
@media (max-width:760px){.status{grid-column:1;}}
.status span.on{color:var(--ink); display:flex; align-items:center; gap:8px;} .status span.on::after{content:""; display:block; width:8px; height:8px; background:var(--red);}
.err{font-family:var(--mk); font-size:15px; color:var(--red); margin:8px 0 0; min-height:18px; grid-column:2;}
@media (max-width:760px){.err{grid-column:1;}}

footer{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:40px; font-size:12px; color:var(--mid);}
footer p{margin:0;}
@media (prefers-reduced-motion:reduce){.spin{animation:none;} .blk,.blk.knolling,.leakchar{transition:none;}}

/* ===== issue pages ===== */
.issue{max-width:62ch; padding:64px 0 24px;}
.issue-head{display:flex; gap:24px; font-size:12px; color:var(--mid); margin-bottom:28px;}
.lab-sm{font-weight:500; letter-spacing:.02em;}
.issue-title{font-size:clamp(32px,5vw,56px); font-weight:500; letter-spacing:-.03em; line-height:1; margin:0 0 18px;}
.issue-dek{font-size:22px; color:var(--pencil); margin:0 0 36px;}
.issue-body{font-size:clamp(18px,1.8vw,21px); line-height:1.5; font-weight:300;}
.issue-body h2,.issue-body h3{font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--mid); margin:48px 0 10px; padding-top:14px; border-top:1px solid var(--line);}
.issue-body p{margin:0 0 18px;} .issue-body a{text-decoration:underline; text-underline-offset:3px;}
.issue-body blockquote{margin:24px 0; padding-left:18px; border-left:2px solid var(--red); font-style:normal; color:var(--pencil);}
.issue-body img,.issue-body figure{max-width:100%; margin:24px 0;} .issue-body figcaption{font-size:12px; color:var(--mid);}
.issue-end{font-size:22px; margin:48px 0 0;}
.pagination{display:flex; justify-content:space-between; font-size:13px; padding:18px 0;}
a.row{text-decoration:none; color:inherit;} a.row:hover span{color:var(--red);}
.gh-portal-triggerbtn-wrapper{display:none!important;}

.kg-width-wide{max-width:calc(62ch + 160px); margin-left:-80px; margin-right:-80px;}
.kg-width-full{width:100vw; margin-left:calc(50% - 50vw);}
@media (max-width:760px){.kg-width-wide{margin-left:0; margin-right:0; max-width:100%;}}

@media (max-width:700px){#board{touch-action:auto;} .blk{touch-action:auto; cursor:default;} .boardbar{display:none;}}