@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--bg:#111315;--panel:#1b1e20;--panel2:#222628;--line:#34393a;--text:#f6f2ec;--muted:#a3aaa8;--accent:#e8a77c;--accent2:#f5c7a6;--teal:#8ab9af}*{box-sizing:border-box}html{font-family:'DM Sans',Arial,sans-serif;color:var(--text);background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 72% 5%,#222322 0,transparent 32%),var(--bg)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.topbar{height:76px;padding:0 max(3vw,24px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#141719}.brand{display:flex;align-items:center;gap:12px}.brand-mark{font-family:'Playfair Display',serif;font-size:38px;line-height:1;color:var(--text)}.brand-mark span{color:var(--accent)}.brand strong{display:block;font-size:14px;letter-spacing:.28em}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.24em;margin-top:3px}.top-note{color:var(--muted);font-size:12px}.dot{display:inline-block;width:7px;height:7px;background:var(--teal);border-radius:50%;margin-right:8px;box-shadow:0 0 10px #8ab9af88}.workspace{display:grid;grid-template-columns:minmax(380px,440px) minmax(0,1fr);gap:0;min-height:calc(100vh - 116px)}.sidebar{border-right:1px solid var(--line);padding:34px 28px 42px;max-height:calc(100vh - 76px);overflow-y:auto}.sidebar-head{padding:0 4px 26px;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--accent);font-weight:700}.sidebar-head h1{font:500 43px/1.08 'Playfair Display',Georgia,serif;letter-spacing:-.03em;margin:12px 0}.sidebar-head h1 em{color:var(--accent);font-weight:500}.sidebar-head p{color:var(--muted);font-size:13px;line-height:1.55;margin:0;max-width:325px}.panel{padding:24px 0 2px;border-bottom:1px solid var(--line)}.panel:last-child{border-bottom:0}.panel-title{display:flex;align-items:center;gap:11px;margin-bottom:16px}.step{display:grid;place-items:center;color:var(--accent);font-size:10px;font-weight:700;border:1px solid #7d665b;border-radius:50%;width:26px;height:26px}.panel-title h2{font:500 23px 'Playfair Display',Georgia,serif;margin:0}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.upload{height:135px;background:#24292a;border:1px dashed #646967;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden;cursor:pointer;transition:border-color .2s,background .2s}.upload:hover,.upload.dragover{border-color:var(--accent);background:#2d2a29}.upload img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;opacity:.65}.upload::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#111a);pointer-events:none}.upload>*:not(input):not(img){position:relative;z-index:1}.upload-icon{font-size:29px;color:var(--accent);line-height:1}.upload b{font-size:11px;letter-spacing:.15em;margin-top:7px}.upload small{font-size:10px;color:#d5d2cd;margin-top:3px}.hint{font-size:11px;line-height:1.5;color:#88918f;margin:10px 0 14px}.section-copy{font-size:12px;color:var(--muted);line-height:1.5;margin:-5px 0 14px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.chip{border:1px solid #3d4546;background:#222728;color:#c8ceca;padding:7px 10px;border-radius:999px;font-size:11px}.chip.active{border-color:var(--accent);background:#5d403488;color:#ffe4cf}.chip:hover{border-color:#a67c65}.region-controls{border:1px solid var(--line);border-radius:12px;background:#202426;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}.region-controls[hidden],.adjusts[hidden]{display:none}.region-controls label,.field,.small-uploads label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}.region-controls select,.region-controls input,.field input{display:block;width:100%;background:#111617;border:1px solid #414849;color:var(--text);border-radius:7px;padding:10px;margin-top:7px;outline:none;font-size:12px;letter-spacing:normal;text-transform:none}.region-controls select:focus,.region-controls input:focus,.field input:focus{border-color:var(--accent)}.text-button{background:transparent;color:var(--accent);border:0;text-decoration:underline;text-underline-offset:3px;padding:4px 0;text-align:left;font-size:11px}.adjusts{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#202426}.adjusts label{display:grid;grid-template-columns:75px 1fr 38px;align-items:center;gap:8px;margin:9px 0;font-size:11px;color:var(--muted)}.adjusts output{text-align:right;color:var(--text)}input[type=range]{accent-color:var(--accent);cursor:pointer}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#141818;border:1px solid var(--line);border-radius:8px;padding:3px;margin-bottom:12px}.segmented button{border:0;background:transparent;color:var(--muted);font-size:11px;padding:7px;border-radius:6px}.segmented button.active{background:#41413e;color:var(--text)}.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.style-card{border:1px solid #3a4142;background:#202526;color:var(--text);border-radius:9px;min-height:92px;padding:9px;text-align:left;display:flex;flex-direction:column}.style-card.active{border-color:var(--accent);background:#3a302c}.style-icon{font:500 28px 'Playfair Display',serif;color:var(--accent);line-height:1;margin-bottom:5px}.scanner-icon{font-family:Arial;color:#88beb5}.editorial-icon{color:#d5c4a5}.style-card b{font-size:11px}.style-card small{color:var(--muted);font-size:9px;margin-top:3px}.field{margin-top:18px}.small-uploads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.small-uploads label{border:1px dashed #525a5a;border-radius:8px;padding:12px 10px;min-height:63px;cursor:pointer}.small-uploads input{display:block;width:100%;margin-top:8px;font-size:10px;color:#c2c9c5;letter-spacing:normal;text-transform:none}.small-uploads input::file-selector-button{display:none}.studio{padding:31px max(3vw,25px) 25px;min-width:0}.studio-top{display:flex;align-items:end;justify-content:space-between;gap:15px}.studio-top h2{font:500 28px 'Playfair Display',Georgia,serif;margin:8px 0 0}.spec{font-size:10px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}.spec i{display:inline-block;width:3px;height:3px;border-radius:50%;background:#78817f;vertical-align:middle;margin:0 7px}.stage-wrap{display:flex;justify-content:center;align-items:center;min-height:520px;position:relative;padding:18px 0}.stage{width:min(303px,38vw);aspect-ratio:9/16;border:1px solid #555f5e;border-radius:13px;overflow:hidden;background:#292d2d;box-shadow:0 20px 70px #0009,0 0 0 8px #252a2a;position:relative;touch-action:none}.stage canvas{display:block;width:100%;height:100%}.stage-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#202726,#101515);pointer-events:none}.stage-overlay[hidden]{display:none}.stage-overlay::before{content:"";position:absolute;width:200px;height:255px;border:1px solid #ffffff25;border-radius:48% 48% 45% 45%;top:30%;left:50%;transform:translateX(-50%)}.stage-badge{position:absolute;top:32px;font-size:9px;letter-spacing:.18em;color:var(--accent);border:1px solid #a9796266;padding:8px 11px;border-radius:999px}.stage-overlay p{position:relative;font:500 27px/1.18 'Playfair Display',serif;margin:0 0 12px}.stage-overlay small{position:relative;color:var(--muted);font-size:10px;max-width:170px;line-height:1.5}.stage-tip{position:absolute;bottom:15px;right:0;color:#7e8885;font-size:11px;max-width:160px;line-height:1.5;text-align:right}.transport{display:flex;align-items:center;gap:13px;border:1px solid var(--line);background:#1c2122;border-radius:11px;padding:12px 14px}.transport .play{border:0;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#1b1c1b;font-size:15px}.transport span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.transport input{flex:1;min-width:50px}.pill{border:1px solid #515957;color:#d9ddda;background:transparent;padding:7px 12px;border-radius:100px;font-size:10px;white-space:nowrap}.pill:hover{border-color:var(--accent)}.timeline-key{display:flex;justify-content:space-between;color:#737f7a;font-size:9px;letter-spacing:.08em;padding:11px 4px 20px}.export-row{border-top:1px solid var(--line);padding:20px 0 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.export-row strong{font:500 20px 'Playfair Display',serif}.export-row p{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.5}.export-actions{display:flex;gap:8px;align-items:center;white-space:nowrap}.export-actions select{background:#222829;border:1px solid #45504d;color:var(--text);border-radius:8px;padding:11px;font-size:11px}.primary{background:var(--accent);border:1px solid var(--accent);color:#181918;font-size:12px;font-weight:700;border-radius:8px;padding:11px 15px}.primary:hover:not(:disabled){background:var(--accent2)}.primary span{margin-left:15px}.progress-area{display:flex;align-items:center;gap:14px;margin-top:18px}.progress-area[hidden]{display:none}.progress-track{height:6px;background:#2e3634;border-radius:6px;flex:1;overflow:hidden}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--accent));transition:width .15s}.progress-area span{font-size:11px;color:var(--muted);width:120px;text-align:right}.status{font-size:11px;color:#9dadab;padding-top:15px;min-height:30px}.status.error{color:#f2a995}.status.success{color:#a3d8b6}footer{border-top:1px solid var(--line);padding:12px 25px;color:#7f8985;font-size:10px;display:flex;justify-content:space-between;gap:20px}footer span{text-align:right}@media(max-width:980px){.workspace{grid-template-columns:minmax(330px,390px) minmax(0,1fr)}.stage-tip{display:none}.spec{display:none}.studio-top h2{font-size:23px}}@media(max-width:760px){.workspace{display:flex;flex-direction:column}.sidebar{max-height:none;border-right:0;border-bottom:1px solid var(--line)}.stage-wrap{min-height:480px}.stage{width:min(270px,70vw)}.studio{padding-top:26px}.top-note{display:none}.export-row{align-items:flex-start;flex-direction:column}.export-actions{width:100%}.export-actions select,.export-actions button{flex:1}.timeline-key{font-size:8px}.transport{gap:8px}.pill{padding:7px}.sidebar-head h1{font-size:39px}}@media(max-width:420px){.sidebar{padding:25px 18px}.studio{padding:26px 18px}.timeline-key span:nth-child(2),.timeline-key span:nth-child(4){display:none}.small-uploads{grid-template-columns:1fr}.region-controls{grid-template-columns:1fr}footer span{display:none}}
