@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800;900&display=swap";*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:#111;background:#f5f2ea;margin:0;font-family:Inter,system-ui,sans-serif}.app{min-height:100vh}header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;background:#f5f2eaeb;border-bottom:1px solid #d8d2c7;align-items:center;gap:32px;height:72px;padding:0 5vw;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;font-weight:800;display:flex}.brand b{font-weight:400}.mark{color:#f5f2ea;background:#111;border-radius:50%;place-items:center;width:30px;height:30px;font:700 10px DM Mono;display:grid}nav{gap:25px;margin-left:auto;display:flex}nav a{color:#555;text-transform:uppercase;font:500 11px DM Mono;text-decoration:none}.pill{border:1px solid #bcb6aa;border-radius:99px;padding:7px 10px;font:500 9px DM Mono}.hero{grid-template-columns:1.1fr .9fr;align-items:center;gap:7vw;padding:95px 7vw 80px;display:grid}.eyebrow,small,label{letter-spacing:.12em;color:#777;font:600 10px DM Mono}.hero h1{letter-spacing:-.065em;margin:16px 0 24px;font-size:clamp(52px,7vw,100px);line-height:.9}.hero h1 em{color:#a04d36;font-style:normal}.hero p{color:#5c5954;max-width:570px;font-size:17px;line-height:1.6}.heroCard{aspect-ratio:1;background:#171717;max-width:520px;padding:20px;transform:rotate(2deg);box-shadow:18px 18px #d7d0c3}.miniGrid{grid-template-columns:1fr 1fr;gap:10px;height:100%;display:grid}.mini{background:#eee6d7;flex-direction:column;justify-content:center;padding:20px;font-family:Georgia;display:flex}.mini:nth-child(2){background:#dfe6eb}.mini:nth-child(3){background:#eadbd6}.mini:nth-child(4){background:#e5e9dc}.mini span{letter-spacing:.15em;font:600 10px DM Mono}.mini strong{margin-top:20px;font-size:clamp(28px,4vw,58px);line-height:.9}.editor{background:#ede9e0;border:1px solid #cfc8bc;grid-template-columns:1fr 1fr;margin:0 5vw 110px;display:grid}.panel{padding:38px}.panelHead{justify-content:space-between;align-items:start;display:flex}.panelHead span{color:#888;font:10px DM Mono}h2{letter-spacing:-.04em;margin:8px 0 25px;font-size:32px}.panel textarea{resize:vertical;background:#f8f5ee;border:1px solid #c9c1b4;outline:none;width:100%;min-height:120px;padding:18px;font:600 20px Inter}.wordPicker{margin:28px 0}.words{flex-wrap:wrap;gap:7px;margin-top:10px;display:flex}.words button,.seg button{cursor:pointer;background:0 0;border:1px solid #c7c0b5;padding:8px 11px;font:500 11px DM Mono}.words .selected{color:#fff;background:#111}.controls{grid-template-columns:1fr auto;align-items:center;gap:11px 18px;margin:25px 0;display:grid}.controls label{grid-column:1}.controls .seg{grid-column:1/3;display:flex}.seg button{flex:1}.seg .on{color:#fff;background:#111}.controls input{accent-color:#111;grid-column:1/3;width:100%}.controls label b{float:right;color:#222}.generate{color:#fff;cursor:pointer;background:#111;border:0;justify-content:center;align-items:center;gap:12px;width:100%;padding:17px 20px;font:600 12px DM Mono;display:flex}.generate small{color:#aaa;margin-left:auto}.generate:disabled{opacity:.55}.status{color:#555;padding-top:12px;font:10px DM Mono}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.preview{background:#151515;flex-direction:column;min-height:700px;padding:25px;display:flex}.previewTop{color:#aaa;justify-content:space-between;margin-bottom:18px;font:9px DM Mono;display:flex}.canvasWrap{flex:1;place-items:center;min-height:620px;display:grid;position:relative}.canvasWrap canvas{max-width:90%;max-height:620px;box-shadow:0 20px 45px #0008}.previewBadge{color:#aaa;font:9px DM Mono;position:absolute;bottom:12px;left:12px}.examples,.how{padding:0 7vw 110px}.sectionTitle{justify-content:space-between;align-items:end;margin-bottom:30px;display:flex}.sectionTitle h2{margin-bottom:0}.sectionTitle p{color:#777;font-size:13px}.cards{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.example{text-align:left;cursor:pointer;background:0 0;border:0;padding:0}.paper{aspect-ratio:1.25;background:#e9e1d2;border:1px solid #d1c8b9;flex-direction:column;justify-content:space-between;padding:24px;transition:all .2s;display:flex}.example:hover .paper{transform:translateY(-6px);box-shadow:8px 8px #d6cec0}.paper span{font:10px DM Mono}.paper strong{max-width:80%;font:700 27px/1.05 Georgia}.try{color:#777;justify-content:space-between;padding:12px 0;font:600 9px DM Mono;display:flex}.steps{border-top:1px solid #cfc8bc;grid-template-columns:repeat(3,1fr);display:grid}.step{border-right:1px solid #cfc8bc;min-height:180px;padding:28px 20px 0}.step:last-child{border:0}.step span{color:#999;font:10px DM Mono}.step h3{letter-spacing:.08em;margin:25px 0 10px;font-size:14px}.step p{color:#666;max-width:300px;font-size:13px;line-height:1.6}footer{color:#777;border-top:1px solid #d5cec2;justify-content:space-between;padding:25px 5vw;font:9px DM Mono;display:flex}@media (width<=800px){header{padding:0 18px}nav{display:none}.pill{margin-left:auto}.hero{grid-template-columns:1fr;padding:60px 22px}.heroCard{max-width:none}.editor{grid-template-columns:1fr;margin:0 15px 70px}.preview{min-height:500px}.canvasWrap{min-height:420px}.canvasWrap canvas{max-height:420px}.cards,.steps{grid-template-columns:1fr}.examples,.how{padding:0 22px 70px}.sectionTitle{display:block}.sectionTitle p{margin-top:12px}footer{flex-direction:column;gap:20px;padding:20px}.panel{padding:25px}}