:root{--ink:#20312e;--muted:#52665e;--paper:#f5f4ec;--line:#cdd5c7;--accent:#254b3e;--surface:#fffef7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;line-height:1.65}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:.2em}.skip{position:absolute;top:-100px;left:1rem;background:white;color:#111;padding:.75rem;z-index:10}.skip:focus{top:1rem}:focus-visible{outline:3px solid #b34f20;outline-offset:4px}.site-header,main,footer{max-width:1200px;margin:auto;padding-left:2rem;padding-right:2rem}.site-header{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:.75rem;font-weight:750;text-decoration:none}.brand span{font-size:1.5rem}.edition{font:600 .75rem/1.4 ui-monospace,monospace;letter-spacing:.13em}.intro{padding:3.5rem 0 2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;align-items:end}.eyebrow{grid-column:1/-1;color:var(--muted);margin:0 0 1rem;font-size:.875rem}.intro h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.16;letter-spacing:-.055em;margin:0}.lead{max-width:28rem;color:var(--muted);margin:1rem 0 0;font-size:1.1rem}.workspace{display:grid;grid-template-columns:280px 1fr;gap:2rem;border-top:2px solid var(--ink);padding-top:1.5rem}.tools h2{font:600 .85rem/1.5 ui-monospace,monospace;color:var(--muted);margin:0 0 1rem}.tools h2 span{font-family:system-ui,sans-serif;color:var(--ink);margin-left:.75rem}.palette{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.75rem}.palette button{display:flex;align-items:center;gap:.5rem;padding:.65rem .75rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:3px;font-size:.875rem;min-height:46px}.palette button:last-child{grid-column:1/-1}.palette button[aria-pressed=true]{border:2px solid var(--accent);padding:calc(.65rem - 1px) calc(.75rem - 1px);font-weight:750}.swatch{width:20px;height:20px;flex-shrink:0;border:1px solid #748178;border-radius:2px}.white{background:#fff}.black{background:#000}.red{background:#f00}.green{background:#0f0}.blue{background:#00f}.gray{background:#808080}.steps{background:linear-gradient(to right,#000 0% 9.09%,#1a1a1a 9.09% 18.18%,#333 18.18% 27.27%,#4d4d4d 27.27% 36.36%,#666 36.36% 45.45%,#808080 45.45% 54.54%,#999 54.54% 63.63%,#b3b3b3 63.63% 72.72%,#ccc 72.72% 81.81%,#e6e6e6 81.81% 90.9%,#fff 90.9% 100%)}.primary{width:100%;border:0;border-radius:3px;padding:.8rem 1rem;background:var(--accent);color:white;font-weight:650;min-height:48px}.hint{font-size:.8rem;color:var(--muted);margin:.75rem 0}kbd{background:#e6e9df;padding:.1rem .3rem;border-radius:2px;font-family:inherit}.plain{background:transparent;border:0;border-bottom:1px solid var(--muted);color:var(--ink);padding:.3rem 0;min-height:44px}.preview-column{min-width:0}.preview-label{display:flex;gap:.5rem;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:.5rem;flex-wrap:wrap}.screen{position:relative;width:100%;aspect-ratio:16/10;border:1px solid #8a958a;box-shadow:0 8px 0 #e1e4da}.screen:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;box-shadow:none}.exit{display:none;position:absolute;top:1rem;right:1rem;border:1px solid #fff;background:#16231fe6;color:white;padding:.65rem .85rem;border-radius:3px;font-size:.8rem}.screen:fullscreen .exit{display:block}.status{min-height:3.3em;font-size:.875rem;margin-top:1rem;margin-bottom:.5rem}.caption{font-size:.8rem;color:var(--muted);margin:0}.guide{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}.guide h2,.notes h2{font-size:1.25rem;letter-spacing:-.03em}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1.5rem}.step{font:500 1.6rem/1 ui-monospace,monospace;color:#65816b}.guide h3{font-size:1rem;margin:.75rem 0 .5rem}.guide p,.notes p{font-size:.9rem;color:var(--muted);margin:.5rem 0 1rem}.notes{max-width:52rem;margin:2.5rem 0 3rem}.source{font-size:.8rem!important}footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.25rem;padding-bottom:2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}@media(max-width:760px){.site-header,main,footer{padding-left:1.25rem;padding-right:1.25rem}.intro{grid-template-columns:1fr;padding-top:2.5rem;gap:.5rem}.workspace{grid-template-columns:1fr;gap:1.5rem}.tools{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.tools h2:first-child{grid-column:1/-1}.palette{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin-bottom:1.25rem}.palette button{padding:.6rem .5rem;justify-content:center;flex-direction:column}.palette button[aria-pressed=true]{padding:calc(.6rem - 1px) calc(.5rem - 1px)}.palette button:last-child{grid-column:span 2;flex-direction:row}.tools h2:nth-of-type(2),.hint,.plain{grid-column:1/-1}.primary{grid-column:1/-1}.plain{justify-self:start}.guide-grid{grid-template-columns:1fr;gap:1rem}.guide-grid article{display:grid;grid-template-columns:2.5rem 1fr;gap:0 1rem}.step{grid-row:1/3;padding-top:.8rem}.guide h3{margin:.5rem 0}.guide p{margin-top:0}.edition{font-size:.65rem}.screen{aspect-ratio:4/3}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}