@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink:#24211d; --muted:#766f65; --paper:#fbf8f1; --line:#dcd5c9; --orange:#e56635; --yellow:#edbd3d; --green:#416859; --cream:#f2ede3; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; }
.shell { max-width:1240px; margin:auto; padding:32px 40px 64px; }.hero { position:relative; padding:15px 0 58px; }.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; }.brand { color:var(--ink); text-decoration:none; font-size:22px; font-weight:600; letter-spacing:-1.3px; }.brand span { color:var(--orange); }.eyebrow { font:500 10px "DM Mono",monospace; letter-spacing:1.5px; color:var(--orange); margin:58px 0 14px; }.hero h1 { font:600 clamp(43px,5.2vw,76px)/.97 "Playfair Display",serif; letter-spacing:-3px; margin:0; max-width:750px; }.hero h1 em { color:var(--orange); }.intro { margin:22px 0 0; color:var(--muted); line-height:1.55; max-width:455px; font-size:16px; }
.studio { display:grid; grid-template-columns:385px 1fr; border:1px solid var(--line); background:white; min-height:570px; }.controls { padding:31px; border-right:1px solid var(--line); }.step-head { display:flex; gap:12px; align-items:center; margin-bottom:15px; }.step-head span { font:500 10px "DM Mono"; color:var(--orange); }.step-head h2 { margin:0; font-size:14px; font-weight:600; }.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; height:151px; border:1px dashed #bcb3a6; cursor:pointer; transition:.2s; background:#fffdfa; }.dropzone:hover,.dropzone.drag { border-color:var(--orange); background:#fff6ed; }.dropzone input { position:absolute; width:1px; height:1px; opacity:0; }.upload-icon { width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-size:20px; margin-bottom:9px; }.dropzone strong { font-size:13px; }.dropzone small { color:var(--muted); font-size:11px; margin-top:5px; }.file-info { margin-top:9px; font:11px "DM Mono"; color:var(--green); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.setting-head { margin-top:31px; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }.field-row label { color:var(--muted); font-size:11px; line-height:1.7; } select,.unit-input { font:13px "DM Sans"; color:var(--ink); border:1px solid var(--line); height:39px; background:white; width:100%; padding:0 10px; outline-color:var(--orange); }select { appearance:auto; }.unit-input { display:flex; align-items:center; padding-right:10px; }.unit-input input { width:100%; border:0; font:13px "DM Sans"; outline:0; }.unit-input span { font:10px "DM Mono"; color:var(--muted); }.check { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); margin:3px 0 24px; }.check input { accent-color:var(--orange); }.primary { display:flex; justify-content:space-between; align-items:center; border:0; width:100%; padding:14px 15px; background:var(--ink); color:#fff; font:600 13px "DM Sans"; cursor:pointer; transition:.2s; }.primary:not(:disabled):hover { background:var(--orange); }.primary:disabled { opacity:.42; cursor:not-allowed; }.primary span { font-size:18px; }.privacy { color:#8b847a; font-size:10px; margin:12px 0 0; text-align:center; }
.field-note { margin:-7px 0 18px; color:#8b847a; font-size:10px; line-height:1.4; }
.preview-area { background:var(--cream); padding:29px; display:flex; flex-direction:column; justify-content:center; min-width:0; }.empty-state { text-align:center; position:relative; padding:95px 15px; overflow:hidden; }.empty-icon { font-size:34px; color:var(--orange); position:relative; }.empty-state h2 { position:relative; font:600 25px/1.18 "Playfair Display"; margin:14px auto 8px; max-width:340px; letter-spacing:-.7px; }.empty-state p { position:relative; font-size:13px; color:var(--muted); margin:0; }.empty-shape { position:absolute; width:105px; height:105px; border-radius:50%; opacity:.8; }.shape-one { background:var(--yellow); top:20px; right:22%; }.shape-two { background:#9eb3a3; bottom:14px; left:16%; }.preview-topline { display:flex; justify-content:space-between; font:500 10px "DM Mono"; color:var(--muted); letter-spacing:1px; margin-bottom:12px; }.preview-topline strong { color:var(--orange); font-weight:500; }.canvas-wrap { display:flex; justify-content:center; align-items:center; min-height:340px; }.canvas-wrap canvas { max-width:100%; max-height:390px; background:#fff; box-shadow:0 9px 23px rgba(66,53,34,.13); }.summary { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; border-top:1px solid #d7cfc3; padding-top:17px; margin-top:18px; gap:20px; }.summary div span { display:block; font:10px "DM Mono"; letter-spacing:.8px; color:var(--muted); }.summary div strong { display:block; margin-top:4px; font-size:14px; }.summary button { background:var(--orange); color:white; border:0; padding:11px 14px; font:600 12px "DM Sans"; cursor:pointer; }.summary button:hover { background:#cc5529; }
.how { padding:68px 0 0; }.how .eyebrow { margin:0 0 24px; }.how>div { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.how article { padding:20px 30px 0 0; }.how article:not(:first-child) { border-left:1px solid var(--line); padding-left:30px; }.how b { font:500 11px "DM Mono"; color:var(--orange); }.how h3 { margin:10px 0 3px; font:600 18px "Playfair Display"; }.how p { font-size:13px; margin:0; color:var(--muted); }
@media (max-width:720px) { .shell{padding:22px 18px 44px}.hero{padding-bottom:38px}.hero h1{letter-spacing:-2px}.studio{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.preview-area{padding:20px}.canvas-wrap{min-height:260px}.summary{grid-template-columns:1fr 1fr}.summary button{grid-column:1/-1}.how>div{grid-template-columns:1fr}.how article:not(:first-child){border-left:0;padding-left:0}.how article{padding:20px 0;border-bottom:1px solid var(--line)} }