:root{--paper:#f7f2df;--ink:#0b121d;--muted:#4e5c6f;--cyan:#00c8d8;--orange:#f97e00;--lime:#abd64d;--pink:#fb7cbd;--violet:#9881e9;--line:#252e3d;--font-display:"Arial Black","Helvetica Neue",sans-serif;--font-body:"Aptos","Segoe UI",sans-serif;--font-mono:"Cascadia Mono",monospace;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--radius-tile:.35rem;--dur-fast:.16s;--dur-med:.3s;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-in-out:cubic-bezier(.4,0,.2,1)}@supports (color:lab(0% 0 0)){:root{--paper:lab(95.503% -.507385 9.61101);--ink:lab(5.16467% -.198916 -8.23053);--muted:lab(38.4118% -2.13762 -12.5247);--cyan:lab(73.442% -44.0465 -23.494);--orange:lab(66.4599% 45.3661 82.9443);--lime:lab(80.7098% -29.4161 60.2878);--pink:lab(68.7142% 54.6185 -10.5411);--violet:lab(59.7129% 26.5488 -49.9653);--line:lab(18.6568% -.710383 -10.8543)}}
*{box-sizing:border-box}html,body{background:var(--paper);min-height:100%;color:var(--ink);font-family:var(--font-body);margin:0;overflow-x:clip}button,input,textarea,select{font:inherit}button{border:2px solid var(--ink);background:var(--ink);min-height:44px;color:var(--paper);cursor:pointer;border-radius:var(--radius-tile);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);padding:.65rem 1rem;font-weight:800}button:hover{box-shadow:4px 4px 0 var(--orange);transform:translate(-2px,-2px)}button:active{box-shadow:none;transform:translate(0)}button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--violet);outline-offset:3px}.paper{background:var(--paper);color:var(--ink)}.skip{z-index:99;background:var(--ink);color:var(--paper);padding:.7rem;position:fixed;top:-5rem;left:1rem}.skip:focus{top:1rem}header{border-bottom:2px solid var(--ink);z-index:20;background:color-mix(in oklch,var(--paper) 94%,transparent);grid-template-columns:1fr auto 1fr;align-items:center;height:76px;padding:0 1.2rem;display:grid;position:relative}.mark{font:900 1rem var(--font-display);letter-spacing:.06em;align-items:center;gap:.8rem;display:flex}.mark i{background:conic-gradient(var(--cyan) 0 25%,var(--orange) 0 50%,var(--lime) 0 75%,var(--pink) 0);border:2px solid var(--ink);width:32px;height:32px;transform:rotate(12deg)}.term{text-align:center;display:grid}.term span,.scope span,.scope b,.legend>span,.composer-head span,footer span{font:700 .68rem var(--font-mono);letter-spacing:.13em}.term strong{font-size:1.15rem}nav{justify-content:flex-end;gap:.6rem;display:flex}.scope{z-index:10;background:var(--paper);border:2px solid var(--ink);width:min(360px,100vw - 48px);box-shadow:7px 7px 0 var(--cyan);padding:1rem;position:absolute;top:96px;left:24px;transform:rotate(-.8deg)}.scope p{margin:.5rem 0;line-height:1.45}.scope b{color:var(--muted)}.canvas{background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:26px 26px;height:calc(100dvh - 146px);min-height:620px;position:relative;overflow:hidden}.threads{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.threads path{fill:none;stroke:var(--ink);stroke-width:2px;stroke-dasharray:6 8;opacity:.28;animation:18s linear infinite thread-register}.island{--x:50%;--y:50%;left:var(--x);top:var(--y);aspect-ratio:1;text-align:center;width:clamp(130px,14vw,210px);color:var(--ink);animation:island-entry .65s var(--ease-out) both,island-breathe 6s var(--ease-in-out) infinite alternate;border-radius:50%;place-content:center;padding:1rem;display:grid;position:absolute}.island:hover,.island.selected{box-shadow:8px 8px 0 var(--ink);transform:scale(1.07)rotate(-2deg)}.island span,.island small{font:.68rem var(--font-mono)}.island strong{font:900 clamp(1rem,2vw,1.55rem) var(--font-display);overflow-wrap:anywhere}.island-0{background:var(--cyan)}.island-1{background:var(--orange)}.island-2{background:var(--lime)}.island-3{background:var(--pink)}.island-4{background:var(--violet);color:var(--paper)}.usage{--x:50%;--y:50%;left:var(--x);top:var(--y);background:var(--paper);border:1px solid var(--ink);width:150px;min-height:70px;box-shadow:4px 4px 0 var(--ink);font:700 .72rem var(--font-mono);animation:tile-migrate .8s var(--ease-out) both;pointer-events:none;padding:.75rem;position:absolute;transform:rotate(-2deg)}.usage-1{transform:rotate(3deg)}.usage-2{transform:rotate(-4deg)}.usage-3{transform:rotate(2deg)}.empty-patch{color:var(--ink);border:2px dashed var(--ink);background:0 0;place-content:center;width:150px;height:110px;display:grid;position:absolute;bottom:9%;right:5%}.empty-patch b{font-size:2rem}.legend{z-index:12;background:var(--paper);border:2px solid var(--ink);width:min(330px,100vw - 48px);max-height:calc(100dvh - 210px);box-shadow:-7px 7px 0 var(--orange);padding:1.2rem;position:absolute;top:108px;right:24px;overflow:auto;transform:rotate(.6deg)}h1{font:900 clamp(2rem,4vw,4.2rem)/.9 var(--font-display);overflow-wrap:anywhere;margin:.6rem 0;font-style:normal}.legend p{line-height:1.5}.legend small{font-family:var(--font-mono)}.legend-actions{gap:.5rem;margin-top:1rem;display:flex}.tile-stack{gap:.7rem;margin-top:1rem;display:grid}.tile-stack blockquote{border-left:5px solid var(--cyan);background:color-mix(in oklch,var(--cyan) 18%,var(--paper));margin:0;padding:.8rem;font-size:.9rem}.tile-stack small{color:var(--muted);margin-top:.4rem;display:block}.composer{z-index:40;background:var(--paper);border:2px solid var(--ink);width:min(760px,100vw - 24px);max-height:86dvh;box-shadow:0 -10px 0 var(--lime);opacity:0;transition:transform var(--dur-med) var(--ease-out),opacity var(--dur-med) var(--ease-out);padding:1.2rem;position:fixed;bottom:0;left:50%;overflow:auto;transform:translate(-50%,110%)}.composer.open{opacity:1;transform:translate(-50%,-12px)}.composer-head{border-bottom:2px solid var(--ink);justify-content:space-between;align-items:center;padding-bottom:.8rem;display:flex}.close{color:var(--ink);background:0 0}.fields{grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;display:grid}.fields .wide{grid-column:1/-1}label{font:700 .76rem var(--font-mono);gap:.4rem;display:grid}input,textarea,select{border:2px solid var(--ink);width:100%;min-height:46px;color:var(--ink);background:#fff;border-radius:0;padding:.75rem}textarea{resize:vertical;min-height:100px}.register{background:var(--orange);width:100%;color:var(--ink);margin-top:1rem}footer{border-top:2px solid var(--ink);background:var(--paper);grid-template-columns:1fr 1fr auto;align-items:center;gap:1rem;height:70px;padding:.6rem 1.2rem;display:grid}footer b{text-overflow:ellipsis;white-space:nowrap;max-width:38vw;font:.72rem var(--font-mono);display:block;overflow:hidden}footer p{color:#b10800;color:lab(37.7095% 62.5755 57.1867);margin:0}footer>div:last-child{align-items:center;gap:.8rem;display:flex}footer a{color:var(--ink);font-weight:800}@keyframes island-entry{0%{opacity:0;transform:scale(.2)rotate(-18deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes island-breathe{0%{filter:saturate(.9)}to{filter:saturate(1.16)}}@keyframes tile-migrate{0%{opacity:0;transform:translateY(80px)rotate(12deg)}to{opacity:1}}@keyframes thread-register{to{stroke-dashoffset:-140px}}@media (max-width:900px){header{grid-template-columns:1fr auto}.term{display:none}.scope{top:92px}.legend{max-height:300px;top:auto;bottom:90px}.canvas{min-height:760px}.island{width:150px}.usage{width:120px}.empty-patch{bottom:42%}footer{grid-template-columns:1fr;height:auto;min-height:100px}footer b{max-width:85vw}}@media (max-width:600px){header{grid-template-columns:1fr;gap:.6rem;height:auto;padding:.8rem}.mark{justify-content:center}nav{justify-content:stretch}nav button{flex:1}.scope{width:auto;margin:1rem;position:relative;top:auto;left:auto;transform:none}.canvas{height:620px;min-height:620px}.island{width:110px}.island strong{font-size:.9rem}.usage{display:none}.legend{width:auto;max-height:none;margin:1rem;position:relative;top:auto;bottom:auto;right:auto;transform:none}.fields{grid-template-columns:1fr}.fields .wide{grid-column:auto}.composer{max-height:92dvh}.legend-actions{flex-wrap:wrap}.legend-actions button{flex:1}footer{padding:1rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.canvas>.island:first-of-type{top:30%!important;left:38%!important}