:root{--ink:#17211b;--paper:#fffdf7;--lime:#c9f04a;--line:#d8ddd7;--muted:#68726c;--cream:#f2f0e8}*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;min-height:100vh}.masthead{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 clamp(20px,5vw,72px)}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font:800 21px/1 system-ui,sans-serif;letter-spacing:.08em}.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--ink);color:var(--paper);font:700 17px/1 serif}.privacy{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.privacy i{width:7px;height:7px;border-radius:50%;background:#70a71a;box-shadow:0 0 0 4px #e7f4cd}main{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:62px 0 70px}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;margin-bottom:44px}.eyebrow{grid-column:1/-1;margin:0 0 14px;color:#71831d;font-size:11px;font-weight:800;letter-spacing:.2em}.intro h1{margin:0;font:900 clamp(42px,6vw,78px)/.98 system-ui,-apple-system,sans-serif;letter-spacing:-.07em}.intro h1 em{color:#819721;font-style:normal}.intro>p:last-child{justify-self:end;max-width:430px;margin:0 0 5px;font:400 15px/1.9 system-ui,sans-serif;color:var(--muted)}.workbench{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr);border:1px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}.editor{padding:38px;border-right:1px solid var(--ink)}.tabs{display:flex;border-bottom:1px solid var(--line);gap:30px;margin-bottom:34px}.tab{border:0;background:none;color:#78817b;font:700 14px/1 ui-monospace,monospace;padding:0 2px 15px;position:relative;cursor:pointer}.tab.active{color:var(--ink)}.tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--lime)}label,.option-label{display:block;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.03em;margin-bottom:9px}textarea,input,select{width:100%;border:1px solid #bfc6c0;border-radius:0;background:#fff;color:var(--ink);font:500 15px/1.5 system-ui,sans-serif;outline:none}textarea{padding:15px 16px;resize:vertical;min-height:155px}input,select{height:47px;padding:0 13px}textarea:focus,input:focus,select:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--lime)}.hidden{display:none}.field-foot,.hint{display:flex;justify-content:space-between;margin:8px 0 0;color:#89918c;font-size:11px}.prefix-field{display:flex;border:1px solid #bfc6c0;background:#fff}.prefix-field:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--lime)}.prefix-field span{display:grid;place-items:center;width:46px;border-right:1px solid var(--line);font-size:19px}.prefix-field input{border:0;box-shadow:none!important}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-grid .wide{grid-column:1/-1}.password-wrap{position:relative}.password-wrap input{padding-right:56px}.password-wrap button{position:absolute;right:1px;top:1px;height:45px;border:0;background:transparent;color:#637067;font:700 11px system-ui;cursor:pointer}.check{display:flex;align-items:center;gap:9px;margin:19px 0 0;font-weight:500}.check input{width:17px;height:17px;accent-color:var(--ink);box-shadow:none}.divider{height:1px;background:var(--line);margin:30px 0}.options{display:grid;grid-template-columns:1fr 1fr;gap:26px}.colors{display:flex;gap:10px}.colors label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:7px 9px;margin:0;font-size:11px;font-weight:500}.swatch{display:block;width:25px;height:25px;background:#17211b;border:1px solid #aeb5b0;overflow:hidden}.swatch.light{background:#fffdf7}.swatch input{opacity:0;width:100%;height:100%;padding:0;cursor:pointer}.preview{background:var(--cream);padding:30px 34px;display:flex;flex-direction:column}.preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.1em}.preview-head span:last-child{background:var(--lime);padding:6px 9px;color:#27300e;letter-spacing:0}.paper{background:#fff;padding:23px 23px 16px;box-shadow:0 4px 20px #24312815;border:1px solid #e2e1dc}.paper canvas{display:block;width:100%;height:auto;aspect-ratio:1}.paper-caption{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e6e6e2;margin-top:15px;padding-top:13px;font-size:10px;color:#7f8782}.paper-caption strong{color:var(--ink);font:800 14px system-ui}.download{margin-top:20px;height:53px;border:1px solid var(--ink);background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font:800 14px ui-monospace,monospace;cursor:pointer}.download:hover:not(:disabled){background:#29352e}.download b{font-size:24px}.download:disabled{opacity:.42;cursor:not-allowed}.error{min-height:18px;margin:10px 0 -8px;color:#a43b2f;font:600 12px/1.5 system-ui}.tip{color:#78827b;font:400 11px/1.6 system-ui;margin:13px 2px 0}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:24px clamp(20px,5vw,72px);color:#808983;font-size:10px;letter-spacing:.04em}@media(max-width:800px){.masthead{height:64px}.privacy{font-size:0}.intro{display:block;margin-bottom:30px}.intro>p:last-child{margin:20px 0 0;max-width:520px}.workbench{grid-template-columns:1fr;box-shadow:5px 5px 0 var(--ink)}.editor{border-right:0;border-bottom:1px solid var(--ink);padding:26px}.preview{padding:26px}.paper{max-width:440px;width:100%;align-self:center}.download{max-width:440px;width:100%;align-self:center}.error,.tip{max-width:440px;width:100%;align-self:center}}@media(max-width:480px){main{width:min(100% - 24px,1180px);padding:38px 0 52px}.intro h1{font-size:42px}.tabs{gap:22px}.editor,.preview{padding:22px 18px}.options,.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.colors{flex-wrap:wrap}.paper{padding:16px 16px 12px}footer{gap:12px;flex-direction:column}.masthead{padding:0 16px}}
