*{box-sizing:border-box} :root{--ink:#171717;--acid:#eaff00;--paper:#f3f2ec;--line:#c9c9c0}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}button,input,textarea{font:inherit}button,a,input,summary,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #5262df;outline-offset:4px}button{color:inherit}a{color:inherit}.masthead{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);padding:25px 4vw}.brand{font-size:30px;font-weight:950;line-height:.86;letter-spacing:-1.8px;text-decoration:none;position:relative}.brand-dot{font-size:13px;position:absolute;top:0;right:-16px;letter-spacing:0}.header-note{font-size:13px;line-height:1.7;margin-left:auto;margin-right:70px}.header-note span{color:#6c6c65}.edition{font-size:10px;line-height:1.5;border-left:1px solid var(--ink);padding-left:20px;letter-spacing:1px}.edition strong{font-size:20px;letter-spacing:-1px}main{max-width:1560px;margin:auto;padding:0 4vw}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:43px 0 35px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 18px}h1{font-size:clamp(48px,5.5vw,76px);line-height:1.08;letter-spacing:-4px;margin:0;font-weight:900}h1 br{display:none}h1 em{font-style:normal;background:var(--acid);padding:0 8px}.intro-copy{font-size:14px;line-height:1.8;margin:0 0 4px}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);border:2px solid var(--ink)}.control-panel{padding:25px 23px;border-right:2px solid var(--ink);background:#fffef9}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.panel-title h2{font-size:15px;margin:0}.text-button{border:0;border-bottom:1px solid currentColor;padding:2px 0;background:none;font-size:11px}.patterns{border:0;margin:0;padding:0}.patterns legend,.color-title h3{font-size:12px;font-weight:700;padding:0;margin:0 0 11px}.pattern-options{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.pattern-options label{position:relative;cursor:pointer}.pattern-options input{position:absolute;opacity:0;width:1px;height:1px}.pattern-options input:focus-visible+span{outline:3px solid #5262df;outline-offset:3px}.pattern-options span{display:flex;align-items:center;flex-direction:column;gap:9px;font-size:10px;padding:12px 1px 10px;border:1px solid var(--line)}.pattern-options input:checked+span{background:var(--acid);border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--ink)}.sample{display:block;width:31px;height:27px}.dots{background:radial-gradient(circle,#171717 2.8px,transparent 3px) 0 0/10px 10px}.stripes{background:repeating-linear-gradient(90deg,#171717 0 4px,transparent 4px 9px)}.checker{background:conic-gradient(#171717 25%,transparent 0 50%,#171717 0 75%,transparent 0) 0 0/14px 14px}.grid{background:linear-gradient(#171717 1px,transparent 1px),linear-gradient(90deg,#171717 1px,transparent 1px);background-size:9px 9px}.color-title{display:flex;align-items:baseline;justify-content:space-between;margin-top:26px}.colors{display:grid;grid-template-columns:1fr 1fr;gap:10px}.colors>div>label{display:block;font-size:10px;color:#65655f;margin-bottom:6px}.color-field{display:flex;align-items:center;border:1px solid var(--line);padding:6px;gap:5px}.color-field input[type=color]{width:25px;height:27px;border:0;background:none;padding:0;flex-shrink:0;cursor:pointer}.color-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-field input[type=color]::-webkit-color-swatch{border:1px solid #aaa}.color-field input[type=text]{width:100%;min-width:0;border:0;background:transparent;font:11px ui-monospace,monospace;padding:3px 0}.field-help{font-size:10px;color:#66665f;line-height:1.7;margin:9px 0 0}.slider-control{margin-top:23px}.slider-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.slider-title label{font-size:12px;font-weight:700}.number-unit{display:flex;align-items:center;gap:3px;font:11px ui-monospace,monospace}.number-unit input{width:54px;padding:4px 2px;border:0;border-bottom:1px solid #777;background:transparent;text-align:right;font:13px ui-monospace,monospace;border-radius:0}.number-unit span{color:#777}.slider-control input[type=range]{width:100%;margin:0;accent-color:#171717;height:18px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#72726a;margin-top:3px}.feedback{font-size:11px;line-height:1.6;min-height:35px;margin:13px 0 0}.feedback.error{color:#a0260d}.print-panel{background:#deded4;min-width:0;display:flex;flex-direction:column}.print-top,.print-bottom{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-family:ui-monospace,monospace;padding:18px 25px;gap:12px}.print-top i{display:inline-block;width:7px;height:7px;background:var(--ink);border-radius:50%;margin-right:5px}.print-top{font-weight:700}.artboard-wrap{margin:8px 25px;position:relative}.artboard{aspect-ratio:4/3;background-color:var(--acid);background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:0 4px 8px #17171714}.crop{position:absolute;width:10px;height:10px;pointer-events:none}.crop-a{top:-8px;left:-8px;border-top:1px solid;border-left:1px solid}.crop-b{top:-8px;right:-8px;border-top:1px solid;border-right:1px solid}.crop-c{bottom:-8px;left:-8px;border-bottom:1px solid;border-left:1px solid}.crop-d{bottom:-8px;right:-8px;border-bottom:1px solid;border-right:1px solid}.print-bottom{padding-top:15px;padding-bottom:21px;color:#55554e}.export-panel{margin-top:auto;background:var(--ink);color:var(--paper);padding:24px 25px}.export-heading{display:flex;gap:14px;align-items:center}.section-number{font-size:40px;font-weight:900;color:#73746a;letter-spacing:-2px}.export-heading h2{margin:0;font-size:19px;letter-spacing:-.5px}.export-heading p{margin:6px 0 0;color:#aaa99f;font-size:11px}.export-actions{display:flex;gap:10px;margin-top:20px}.export-actions button{padding:14px 17px;font-size:12px;font-weight:700;display:flex;justify-content:space-between;flex:1;border:1px solid var(--acid);background:var(--acid);color:var(--ink);gap:15px}.export-actions button:last-child{background:transparent;color:var(--acid)}.export-actions button:hover{background:#fff;color:#171717;border-color:#fff}.export-actions span{font-size:16px}details{margin-top:15px}summary{font-size:10px;color:#bcbcb2;cursor:pointer;width:fit-content}textarea{width:100%;height:120px;background:#25251f;color:var(--acid);border:1px solid #555;padding:10px;font:10px/1.6 ui-monospace,monospace;resize:vertical;margin-top:12px}details p{font-size:10px;color:#bcbcb2;line-height:1.5}.guide{display:grid;grid-template-columns:1fr 2fr;gap:30px;padding:47px 0}.guide-label{font:10px ui-monospace,monospace;letter-spacing:2px}.guide h2{font-size:23px;line-height:1.4;letter-spacing:-1px;margin:14px 0 0}.guide ol{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.guide li{border-top:1px solid var(--ink);padding-top:15px}.guide b{font-size:12px}.guide li p{font-size:11px;line-height:1.8;color:#64645d}footer{border-top:2px solid var(--ink);padding:24px 4vw;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:start;gap:35px;font-size:10px}footer strong{font-size:10px}footer p{margin:0;color:#64645d;line-height:1.7}footer>span{text-align:right;font:9px ui-monospace,monospace;letter-spacing:1px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}input[aria-invalid=true]{outline:2px solid #a0260d}@media(min-width:1400px){.workspace{grid-template-columns:360px minmax(0,1fr)}.control-panel{padding:28px}.slider-control{margin-top:32px}}@media(max-width:900px){.workspace{grid-template-columns:290px minmax(0,1fr)}.control-panel{padding:22px 16px}.print-top,.print-bottom{padding-left:18px;padding-right:18px}.artboard-wrap{margin-left:18px;margin-right:18px}.export-panel{padding:22px 18px}.intro-copy{font-size:12px}.guide{grid-template-columns:1fr}.guide h2 br{display:none}.export-heading h2{font-size:16px}.section-number{font-size:30px}.export-actions{flex-direction:column}.print-panel{justify-content:center}.export-panel{margin-top:20px}}@media(max-width:640px){.masthead{padding:22px 20px}.brand{font-size:27px}.header-note{display:none}.edition{font-size:8px}.edition strong{font-size:17px}main{padding:0 18px}.intro{padding:30px 0 25px;align-items:center;gap:18px}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:14px}h1{font-size:45px;letter-spacing:-3px}h1 br{display:block}h1 em{display:inline-block;margin-top:5px;padding:0 5px}.intro-copy{font-size:10px;line-height:1.9;max-width:145px}.workspace{display:flex;flex-direction:column}.control-panel{border-right:0;border-bottom:2px solid var(--ink);padding:23px}.print-panel{order:-1;border-bottom:2px solid var(--ink)}.control-panel{border-bottom:0}.print-top,.print-bottom{font-size:8px;padding:17px}.artboard-wrap{margin:5px 17px}.export-panel{margin-top:0;padding:21px 17px}.export-actions{flex-direction:row;gap:8px}.export-actions button{font-size:11px;padding:13px 12px}.export-heading h2{font-size:17px}.section-number{font-size:34px}.panel-title{margin-bottom:23px}.pattern-options span{padding:13px 1px 11px;font-size:11px}.color-field input[type=text]{font-size:12px}.field-help{font-size:10px}.slider-control{margin-top:24px}.number-unit input{padding:7px 2px}.slider-control input[type=range]{height:26px}.guide{padding:32px 0;gap:23px}.guide h2{font-size:21px}.guide ol{grid-template-columns:1fr;gap:17px}.guide li{padding-top:13px}.guide li p{margin:7px 0 0;font-size:12px}.guide b{font-size:13px}footer{grid-template-columns:1fr;gap:12px;padding:23px 20px}footer>span{text-align:left}.feedback{margin-bottom:0;min-height:22px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}