@import "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cormorant:ital,wght@0,400;0,500;0,600&family=Outfit:wght@400;500;600;700&display=swap";:root{--gold:#d4b06a;--ivory:#f4ede0;--muted:#a8a092;--panel:#15110f;--panel-soft:#211a16;--field:#0d0c0b;--paper:#fbf6ee;color:var(--paper);background:#111;font-family:Outfit,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 12% 18%,#d4b06a1f,#0000 28rem),radial-gradient(circle at 86% 82%,#4c162957,#0000 30rem),#111;min-width:320px;min-height:100vh;margin:0}button,input,textarea{font:inherit}.app-shell{min-height:100vh;padding:28px}.studio{grid-template-columns:minmax(320px,420px) minmax(560px,1fr);align-items:start;gap:36px;max-width:1280px;margin:0 auto;display:grid}.control-panel{background:linear-gradient(160deg,#1b1512f7,#0a0908f5);border:1px solid #d4b06a33;border-radius:24px;gap:20px;max-height:calc(100vh - 48px);padding:26px;display:grid;position:sticky;top:24px;overflow:auto;box-shadow:0 28px 80px #0000007a}.eyebrow,.panel-section h2{color:var(--gold);letter-spacing:.16em;text-transform:uppercase;margin:0;font-size:.76rem;font-weight:700}h1{margin:10px 0 0;font-family:DM Serif Display,serif;font-size:clamp(2.3rem,4vw,3.55rem);font-weight:400;line-height:.94}.intro{color:#cfc3b6;margin:14px 0 0;line-height:1.55}.upload-card,.panel-section{background:#ffffff0a;border:1px solid #ffffff14;border-radius:18px;gap:14px;padding:16px;display:grid}.upload-card{border-style:dashed;border-color:#d4b06a6b}.upload-card label{cursor:pointer;color:#100c06;background:var(--gold);border-radius:999px;width:fit-content;padding:10px 15px;font-weight:800}.upload-card span,.range-field span{color:#bfb4aa;font-size:.9rem}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.field-grid{gap:12px;display:grid}.text-field,.range-field{gap:7px;display:grid}.text-field span,.color-field span{color:#dfd3bf;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;font-weight:700}.text-field input,.text-field textarea{resize:vertical;background:var(--field);width:100%;color:var(--paper);border:1px solid #ffffff1a;border-radius:13px;outline:none;padding:11px 13px;transition:border-color .18s,box-shadow .18s}.text-field input:focus,.text-field textarea:focus{border-color:#d4b06ad1;box-shadow:0 0 0 4px #d4b06a17}.compact-section{gap:16px}.color-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.color-field{gap:8px;display:grid}.color-field input{cursor:pointer;background:0 0;border:0;border-radius:12px;width:100%;height:42px}.range-field input{accent-color:var(--gold)}.actions{gap:12px;display:grid}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:15px;padding:14px 17px;font-weight:800;transition:transform .18s,filter .18s}.primary-button{color:#0e0a05;background:linear-gradient(135deg,#f3d787,#d4b06a);box-shadow:0 18px 38px #d4b06a2b}.secondary-button{color:var(--paper);background:#ffffff14}.primary-button:hover,.secondary-button:hover{filter:brightness(1.05);transform:translateY(-2px)}.preview-column{justify-items:center;min-height:calc(100vh - 56px);padding:20px 0;display:grid}.canvas-preview{--accent:#d4b06a;--headline-color:#f4ede0;--muted-color:#a8a092;--overlay-alpha:.78;aspect-ratio:9/16;background-color:#0a0708;background-image:var(--background-image);background-position:50%;background-size:cover;border-radius:4px;width:min(540px,100vw - 56px);font-family:Cormorant Garamond,serif;position:relative;overflow:hidden;box-shadow:0 30px 80px #000000b3}.canvas-preview:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg, rgba(0, 0, 0, var(--overlay-alpha)) 0%, rgba(0, 0, 0, var(--overlay-mid-alpha)) 35%, #0000001a 60%, #14050f00 100%);position:absolute;inset:0}.canvas-preview>:not(.fallback-aura){z-index:2}.fallback-aura{z-index:0;background:radial-gradient(circle at 72% 42%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 31%), linear-gradient(145deg, #080707, #211015 58%, #080707);position:absolute;inset:0}.name-block{align-items:stretch;gap:16px;display:flex;position:absolute;top:48px;left:38px}.name-bar{background:var(--accent);align-self:stretch;width:1.5px}.name-text{color:var(--accent);letter-spacing:4.5px;text-transform:uppercase;font-family:Cormorant,serif;font-size:18px;font-weight:500;line-height:1.55}.name-role{color:#b9a98a;letter-spacing:3.8px;text-transform:uppercase;margin-top:2px;font-family:Cormorant,serif;font-size:13.5px;font-weight:400}.pill{border:1px solid var(--accent);color:var(--accent);letter-spacing:3.5px;text-transform:uppercase;border-radius:999px;padding:9px 24px 8px;font-family:Cormorant,serif;font-size:13px;font-weight:500;position:absolute;top:248px;left:38px}.headline{color:var(--headline-color);letter-spacing:-1.2px;font-family:DM Serif Display,serif;font-size:76px;line-height:.96;position:absolute;top:308px;left:38px}.headline .line{display:block}.headline .accent-line{color:var(--accent);margin-top:4px;font-style:italic;font-weight:400}.rule{background:var(--accent);width:64px;height:3px;position:absolute;top:670px;left:38px}.subtitle{color:var(--muted-color);font-family:Cormorant Garamond,serif;font-size:22px;font-style:italic;font-weight:400;line-height:1.45;display:grid;position:absolute;top:700px;left:38px}.cta{flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;bottom:56px;left:50%;transform:translate(-50%)}.arrow{border:1px solid var(--accent);width:38px;height:38px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;display:flex}.arrow svg{width:14px;height:14px}.watch{color:var(--accent);letter-spacing:.8px;white-space:nowrap;font-family:Cormorant Garamond,serif;font-size:16px;font-style:italic}.handle{color:var(--accent);align-items:center;gap:8px;display:flex;position:absolute;bottom:26px;right:24px}.handle svg{width:20px;height:20px}.handle span{letter-spacing:.4px;font-family:Cormorant,serif;font-size:16px;font-weight:500}@media (width<=980px){.app-shell{padding:18px}.studio{grid-template-columns:1fr}.control-panel{max-height:none;position:static}.preview-column{min-height:auto}.canvas-preview{transform-origin:top}}@media (width<=620px){.preview-column{overflow:auto}.canvas-preview{width:540px;transform:scale(calc((100vw - 36px) / 540));margin-bottom:calc(-960px * (1 - ((100vw - 36px) / 540)))}}