:root{--ink:#1e1a18;--muted:#756d67;--paper:#fffaf3;--cream:#f5eadc;--orange:#ff7356;--yellow:#ffd965;--line:#dfd5c9;--shadow:0 24px 70px rgba(68,45,28,.12)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,5vw);background:rgba(255,250,243,.9);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:22px;font-weight:850;letter-spacing:-1px}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--orange);color:white;transform:rotate(-6deg)}.top-actions{display:flex;align-items:center;gap:18px}.privacy{font-size:12px;color:#287c58;font-weight:700}.button{border:0;border-radius:12px;background:var(--ink);color:white;font-weight:800;cursor:pointer;box-shadow:0 5px 0 #0003;transition:.15s transform,.15s box-shadow}.button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #0003}.button:active{transform:translateY(3px);box-shadow:0 2px 0 #0003}.small{padding:11px 17px}.hero{text-align:center;padding:72px 20px 42px;background:radial-gradient(circle at 75% 10%,#ffeac5 0,transparent 26%),radial-gradient(circle at 22% 45%,#ffe2dc 0,transparent 25%)}.eyebrow{letter-spacing:.19em;font-size:12px;font-weight:900;color:#a14a38}.hero h1{font-family:Georgia,serif;font-size:clamp(48px,7vw,88px);line-height:.91;letter-spacing:-.055em;margin:14px 0 24px}.hero h1 em{color:var(--orange);font-weight:400}.lede{max-width:580px;margin:auto;color:var(--muted);font-size:18px;line-height:1.55}.studio{max-width:1120px;margin:0 auto 80px;display:grid;grid-template-columns:390px 1fr;border:1px solid var(--line);border-radius:26px;background:white;overflow:hidden;box-shadow:var(--shadow)}.panel{padding:30px}.controls{border-right:1px solid var(--line)}.step{display:flex;align-items:center;gap:10px;font-size:14px;text-transform:uppercase;letter-spacing:.09em;margin:4px 0 16px}.step:not(:first-child){margin-top:30px}.step b{display:grid;place-items:center;background:var(--yellow);width:25px;height:25px;border-radius:50%;font-size:12px}.dropzone{height:165px;border:2px dashed #cbbcac;border-radius:18px;background:#fffcf8;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.dropzone.drag,.dropzone:hover{border-color:var(--orange);background:#fff4ef}.dropzone input{display:none}.upload-icon{font-size:30px;color:var(--orange);margin-bottom:7px}.dropzone strong{font-size:16px}.dropzone small{color:var(--muted);margin-top:6px}.sample-line{display:flex;justify-content:space-between;margin:12px 2px;font-size:12px;color:var(--muted)}.text-btn{border:0;background:none;color:#b7462f;font-weight:800;cursor:pointer}.field-row{display:flex;justify-content:space-between;margin:16px 0 7px;font-size:13px}.field-row output{font-variant-numeric:tabular-nums;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--orange)}.field-label{display:block;font-size:13px;margin:18px 0 8px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;background:var(--cream);border-radius:12px}.segmented button{padding:9px 5px;border:0;background:transparent;border-radius:9px;font-size:12px;cursor:pointer}.segmented button.active{background:white;box-shadow:0 2px 7px #4b34221a;font-weight:800}.text-input{width:100%;border:1px solid var(--line);padding:12px;border-radius:11px;font-weight:700;outline:none}.text-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ff735622}.export{width:100%;padding:15px 17px;display:flex;justify-content:space-between;background:var(--orange);font-size:15px}.status{font-size:12px;color:var(--muted);text-align:center;min-height:18px}.preview-panel{background:#f7efe6;padding:24px 28px 28px;min-width:0}.preview-head,.frame-info{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.1em;font-weight:800}.dot{display:inline-block;width:7px;height:7px;background:#2aad78;border-radius:50%;margin-right:6px}.icon-btn{border:1px solid var(--line);background:white;width:34px;height:34px;border-radius:10px;cursor:pointer}.canvas-wrap{position:relative;width:min(100%,580px);aspect-ratio:1;margin:20px auto 12px;border-radius:20px;overflow:hidden;box-shadow:0 16px 45px #3e2a1a24}.checker{background-color:white;background-image:linear-gradient(45deg,#ece7df 25%,transparent 25%),linear-gradient(-45deg,#ece7df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ece7df 75%),linear-gradient(-45deg,transparent 75%,#ece7df 75%);background-size:26px 26px;background-position:0 0,0 13px,13px -13px,-13px 0}canvas{width:100%;height:100%;display:block}#emptyState{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:8px;text-align:center}#emptyState span{font-size:42px;color:var(--orange)}#emptyState strong{color:var(--ink)}#emptyState small{font-size:12px}.frame-info{color:var(--muted);letter-spacing:0}.filmstrip{display:flex;gap:8px;margin-top:18px;overflow-x:auto;padding-bottom:6px}.thumb{width:62px;height:62px;border:2px solid transparent;border-radius:11px;object-fit:cover;background:white;flex:0 0 auto;cursor:pointer}.thumb.active{border-color:var(--orange)}.feature-strip{max-width:1120px;margin:0 auto 80px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.feature-strip div{padding:28px}.feature-strip div+div{border-left:1px solid var(--line)}.feature-strip strong,.feature-strip span{display:block}.feature-strip span{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.5}footer{display:flex;justify-content:space-between;padding:32px max(24px,5vw);font-size:12px;color:var(--muted);border-top:1px solid var(--line)}@media(max-width:820px){.privacy{display:none}.hero{padding-top:48px}.studio{margin:0 14px 55px;grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.feature-strip{margin:0 14px 55px;grid-template-columns:1fr}.feature-strip div+div{border-left:0;border-top:1px solid var(--line)}footer{display:block;line-height:2}.topbar{padding:0 16px}}
