:root {
  --ink: #040404;
  --ink-soft: #090909;
  --panel: #111112;
  --panel-light: #171718;
  --paper: #f3f3f3;
  --muted: #96969b;
  --subtle: #646469;
  --line: rgba(255, 255, 255, .13);
  --line-strong: rgba(255, 255, 255, .24);
  --lime: #d8f233;
  --lime-soft: rgba(216, 242, 51, .11);
  --violet: #9180ff;
  --danger: #ff756d;
  --display: "Bebas Neue", "Noto Sans KR", sans-serif;
  --body: "Inter", "Noto Sans KR", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body { min-width: 320px; margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:not(:disabled), select, input[type="range"], input[type="color"] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
textarea { resize: vertical; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: rgba(0, 0, 0, .24); color: var(--paper); outline: 0; }
input, select { min-height: 40px; padding: 0 11px; }
textarea { padding: 11px; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
code { color: var(--lime); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 12px; transform: translateY(-200%); border-radius: 8px; background: var(--lime); color: #000; font-weight: 800; transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.eyebrow { display: block; margin: 0; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.eyebrow.lime { color: var(--lime); }

.studio-shell { display: grid; min-height: 100svh; grid-template-columns: 254px minmax(0, 1fr); background: radial-gradient(circle at 70% -20%, rgba(216,242,51,.045), transparent 36%), var(--ink); }
.studio-rail { position: sticky; top: 0; display: flex; height: 100svh; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: rgba(7,7,8,.96); }
.studio-brand { display: flex; align-items: center; gap: 10px; min-height: 88px; padding: 0 24px; border-bottom: 1px solid var(--line); color: var(--paper); text-decoration: none; }
.studio-brand strong { display: block; font-family: var(--display); font-size: 31px; font-weight: 400; letter-spacing: .055em; line-height: .7; }
.studio-brand em { display: block; margin-top: 7px; color: var(--muted); font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .15em; }
.brand-mark { position: relative; display: grid; width: 28px; height: 29px; place-items: center; overflow: hidden; transform: skewX(-13deg); border: 2px solid var(--paper); }
.brand-mark:before { position: absolute; width: 16px; height: 16px; border: 2px solid var(--paper); border-radius: 50%; content: ""; transform: translateY(9px); }
.brand-mark i { position: absolute; z-index: 1; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--lime); transform: translate(2px, 2px) skewX(13deg); }
.brand-mark b { position: absolute; bottom: 2px; left: -5px; z-index: 2; width: 40px; height: 3px; background: var(--paper); }

.rail-nav { display: grid; gap: 4px; padding: 20px 12px; }
.nav-item { position: relative; display: grid; width: 100%; min-height: 45px; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.66); font-size: 12px; font-weight: 700; text-align: left; transition: color .25s, background .25s; }
.rail-nav a.nav-item { color: rgba(255,255,255,.66); text-decoration: none; }
.rail-nav a.nav-item:hover { color: var(--lime); }
.quick-entry .nav-icon { color: var(--lime); }
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--paper); }
.nav-item.is-active { background: var(--lime-soft); color: var(--lime); }
.nav-item.is-active:before { position: absolute; top: 13px; left: 0; width: 2px; height: 20px; border-radius: 0 4px 4px 0; background: var(--lime); content: ""; }
.nav-icon { width: 20px; color: currentColor; font-size: 16px; text-align: center; }
.nav-item kbd { color: rgba(255,255,255,.25); font-family: var(--body); font-size: 9px; }
.nav-item.is-active kbd { color: rgba(216,242,51,.5); }
.rail-project { margin: auto 18px 16px; padding: 17px 13px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
.rail-project strong { display: block; margin: 9px 0 10px; font-size: 11px; line-height: 1.45; }
.autosave-dot { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 700; }
.autosave-dot i, .privacy-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.rail-foot { display: grid; gap: 10px; padding: 17px 24px; border-top: 1px solid var(--line); color: rgba(255,255,255,.28); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.small-link, .text-button { padding: 0; border: 0; background: none; color: var(--paper); font-size: 10px; font-weight: 800; letter-spacing: .02em; text-align: left; }
.small-link { color: var(--lime); }
.text-button { color: var(--lime); }
.text-button:hover, .small-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.studio-stage { min-width: 0; }
.studio-topbar { position: sticky; z-index: 20; top: 0; display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(4,4,4,.82); backdrop-filter: blur(18px); }
.crumbs { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.crumbs b { color: rgba(255,255,255,.24); }.crumbs strong { color: var(--paper); }
.top-actions { display: flex; align-items: center; gap: 14px; }
.privacy-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.icon-button { display: inline-grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.03); color: var(--paper); font-size: 13px; font-weight: 800; }
.icon-button:hover { border-color: var(--lime); color: var(--lime); }
.avatar { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(216,242,51,.55); border-radius: 50%; background: var(--lime-soft); color: var(--lime); font-size: 9px; font-weight: 900; }
.studio-main { min-height: calc(100svh - 64px); }
.studio-view { display: none; min-width: 0; max-width: 1540px; margin: 0 auto; padding: clamp(28px, 4vw, 64px) clamp(20px, 4vw, 62px); }
.studio-view.is-active { display: block; animation: view-in .35s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(30px, 4vw, 56px); }
.dashboard-heading h1, .view-heading h1, .editor-topbar h1 { max-width: 720px; margin: 11px 0 0; font-family: var(--display); font-size: clamp(62px, 7.8vw, 126px); font-weight: 400; letter-spacing: .015em; line-height: .83; text-transform: uppercase; }
.dashboard-heading h1 span, .view-heading h1 span, .editor-topbar h1 span { color: var(--lime); }
.dashboard-pulse { display: flex; min-width: 145px; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 80px; background: rgba(255,255,255,.025); }
.pulse-ring { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(216,242,51,.6); border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(216,242,51,.08), 0 0 22px rgba(216,242,51,.14); }
.pulse-ring:after { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 11px var(--lime); content: ""; animation: blink 2.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; transform: scale(.7); } }
.pulse-core { display: none; }.dashboard-pulse p { margin: 0; color: var(--paper); font-size: 8px; font-weight: 900; letter-spacing: .12em; line-height: 1.4; }

.command-deck { position: relative; overflow: hidden; padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(216,242,51,.35); border-radius: 20px; background: linear-gradient(112deg, rgba(216,242,51,.1), rgba(255,255,255,.035) 40%, rgba(4,4,4,.02)); box-shadow: 0 26px 80px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.08); }
.command-deck:before { position: absolute; top: -160px; right: -150px; width: 420px; height: 420px; border: 1px solid rgba(216,242,51,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(216,242,51,.025), 0 0 0 80px rgba(216,242,51,.014); content: ""; pointer-events: none; }
.command-header, .section-title, .panel-head, .token-head, .editor-topbar, .timeline-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.command-header h2, .section-title h2, .panel-head h2, .token-head h2 { margin: 6px 0 0; font-size: 18px; letter-spacing: -.035em; }
.command-input-wrap { position: relative; z-index: 1; margin: 25px 0 15px; }
.command-input-wrap textarea { min-height: 105px; padding: 21px 44px 18px 20px; border-color: rgba(255,255,255,.22); border-radius: 14px; background: rgba(0,0,0,.28); color: var(--paper); font-size: clamp(14px, 1.4vw, 17px); letter-spacing: -.02em; line-height: 1.6; }
.command-input-wrap textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(216,242,51,.08); }
.prompt-caret { position: absolute; right: 19px; bottom: 17px; width: 8px; height: 16px; background: var(--lime); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.command-controls { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.attach-button, .control-chip, .secondary-button, .primary-button, .disabled-button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(7,7,7,.2); color: var(--paper); font-size: 10px; font-weight: 900; letter-spacing: .025em; text-decoration: none; transition: transform .2s var(--ease), border-color .2s, background .2s, color .2s; }
.attach-button:hover, .control-chip:hover, .secondary-button:hover { border-color: var(--lime); background: var(--lime-soft); color: var(--lime); transform: translateY(-1px); }
.attach-button span { color: var(--lime); font-size: 18px; font-weight: 400; }.control-chip { padding: 0 12px; }.control-chip.is-listening { border-color: var(--lime); background: var(--lime-soft); color: var(--lime); }
.select-control { display: grid; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.select-control select { min-width: 132px; min-height: 39px; padding-top: 0; padding-bottom: 0; color: var(--paper); font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.ratio-control { display: flex; gap: 4px; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.2); }.ratio-button { min-width: 39px; height: 31px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 900; }.ratio-button:hover { color: var(--paper); }.ratio-button.is-selected { background: rgba(255,255,255,.12); color: var(--paper); }
.primary-button { border-color: var(--lime); background: var(--lime); color: #070707; box-shadow: 0 5px 22px rgba(216,242,51,.16); }.primary-button:hover { transform: translateY(-1px); background: #eaff79; box-shadow: 0 10px 28px rgba(216,242,51,.26); }.primary-button b { font-size: 15px; font-weight: 400; }.primary-button.compact { min-height: 34px; }.primary-button.full, .secondary-button.full, .disabled-button.full { width: 100%; }.secondary-button.full { min-height: 42px; }.disabled-button { border-color: var(--line); background: rgba(255,255,255,.04); color: rgba(255,255,255,.38); cursor: not-allowed; }
.consent-line { position: relative; z-index: 1; margin: 16px 0 0; color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.6; }.consent-line span { color: var(--lime); }

.quick-grid { margin-top: clamp(45px, 6vw, 84px); }.section-title { align-items: end; margin-bottom: 18px; }.section-title h2 { font-family: var(--display); font-size: 43px; font-weight: 400; letter-spacing: .02em; line-height: .85; text-transform: uppercase; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.project-card { position: relative; display: flex; min-height: 200px; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #121212; text-align: left; }.project-card:before { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.05) 90%); content: ""; }.project-card:hover { border-color: rgba(216,242,51,.6); }.project-card:hover .project-image { transform: scale(1.04); }.project-image { position: absolute; inset: 0; width: 100%; height: 100%; background-position: center; background-size: cover; transition: transform .8s var(--ease); }.project-card>*:not(.project-image) { position: relative; z-index: 1; }.project-card small { color: var(--lime); font-size: 9px; font-weight: 900; letter-spacing: .1em; }.project-card strong { margin: 7px 0 4px; font-size: 15px; }.project-card span { color: rgba(255,255,255,.6); font-size: 10px; }

.view-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); align-items: end; gap: 48px; margin-bottom: 43px; }.view-heading>p { max-width: 440px; margin: 0 0 4px; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.85; }.view-heading h1 { margin-top: 10px; }
.panel { border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); box-shadow: 0 16px 48px rgba(0,0,0,.16); }.panel-head { align-items: center; }.status-pill, .demo-badge, .render-note { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 8px; border: 1px solid rgba(216,242,51,.36); border-radius: 99px; background: rgba(216,242,51,.08); color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .1em; }.demo-badge { color: var(--muted); border-color: var(--line); background: rgba(255,255,255,.04); }.render-note { color: var(--muted); border-color: var(--line); background: transparent; }

.brand-layout { display: grid; grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr); gap: 18px; }.brand-sources { align-self: start; padding: 20px; }.source-drop { display: flex; min-height: 210px; flex-direction: column; align-items: center; justify-content: center; margin: 19px 0; padding: 20px; border: 1px dashed rgba(216,242,51,.48); border-radius: 12px; background: radial-gradient(circle at 50% 10%, rgba(216,242,51,.12), transparent 55%), rgba(0,0,0,.16); text-align: center; }.source-drop.is-dragging { border-style: solid; background: rgba(216,242,51,.14); }.source-icon { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: 13px; border-radius: 50%; background: var(--lime); color: #000; font-size: 24px; }.source-drop strong { font-size: 12px; }.source-drop p { max-width: 250px; margin: 8px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.55; }.field-label { position: relative; display: grid; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }.field-label textarea { font-size: 11px; }.field-label input, .field-label select { font-size: 11px; font-weight: 700; letter-spacing: 0; }.source-list { display: grid; gap: 7px; margin: 12px 0; }.source-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 9px; }.source-file b { overflow: hidden; color: var(--paper); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.source-file span { color: var(--lime); font-size: 8px; }.panel-note { margin: 13px 0 0; color: rgba(255,255,255,.45); font-size: 9px; line-height: 1.65; }
.token-workspace { min-width: 0; }.token-head { align-items: center; margin-bottom: 14px; }.token-head>div:last-child { display: flex; gap: 8px; }.brand-preview { position: relative; min-height: 267px; overflow: hidden; padding: 18px; background: linear-gradient(125deg, #151515, #101010 55%, #202211); }.brand-preview:after { position: absolute; top: -100px; right: -70px; width: 260px; height: 260px; border: 1px solid rgba(216,242,51,.32); border-radius: 50%; box-shadow: 0 0 0 22px rgba(216,242,51,.035), 0 0 0 65px rgba(216,242,51,.02); content: ""; }.brand-preview-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .11em; }.mini-logo { color: var(--paper); font-family: var(--display); font-size: 25px; letter-spacing: .08em; }.brand-preview-content { position: relative; z-index: 1; max-width: 440px; margin-top: 46px; }.brand-preview-content h3 { margin: 8px 0 9px; font-family: var(--display); font-size: clamp(37px, 5vw, 74px); font-weight: 400; line-height: .85; letter-spacing: .02em; }.brand-preview-content p { max-width: 400px; margin: 0 0 17px; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.6; }.preview-cta, .preview-ghost { min-height: 31px; margin-right: 6px; padding: 0 11px; border-radius: 5px; font-size: 8px; font-weight: 900; letter-spacing: .06em; }.preview-cta { border: 1px solid var(--lime); background: var(--lime); color: #000; }.preview-ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--paper); }
.token-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }.token-card { min-height: 176px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }.token-card-title { display: flex; gap: 9px; align-items: center; margin-bottom: 15px; }.token-card-title span { color: var(--lime); font-size: 9px; font-weight: 900; }.token-card-title h3 { margin: 0; font-size: 12px; }.color-token-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }.color-token-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 8px; font-weight: 700; text-align: center; }.color-token-grid input { width: 100%; height: 37px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: transparent; }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.field-grid .wide { grid-column: 1 / -1; }.field-grid output { position: absolute; right: 7px; bottom: 12px; color: var(--lime); font-size: 8px; }.field-grid input[type="range"] { padding: 0; accent-color: var(--lime); }

.editor-view { max-width: none; padding: 27px clamp(18px, 2.6vw, 42px) 42px; }.editor-topbar { align-items: end; margin-bottom: 25px; }.editor-topbar h1 { margin-top: 9px; font-size: clamp(42px, 4.5vw, 74px); }.editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.editor-grid { display: grid; min-height: min(720px, calc(100svh - 190px)); gap: 12px; }.campaign-editor-grid { grid-template-columns: minmax(218px, .44fr) minmax(440px, 1.3fr) minmax(228px, .48fr); }.editor-left, .editor-right { display: flex; min-width: 0; flex-direction: column; padding: 17px; }.chat-thread { display: grid; flex: 1; align-content: start; gap: 12px; min-height: 260px; margin: 20px 0 15px; overflow: auto; }.chat-message { max-width: 92%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.55; }.chat-message.user { justify-self: end; border-color: rgba(216,242,51,.37); background: rgba(216,242,51,.09); color: var(--paper); }.chat-message b { display: block; margin-bottom: 4px; color: var(--lime); font-size: 8px; letter-spacing: .1em; }.chat-compose { display: grid; grid-template-columns: 1fr 34px; gap: 7px; align-items: end; }.chat-compose textarea { min-height: 74px; font-size: 10px; }.send-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--lime); border-radius: 50%; background: var(--lime); color: #000; font-size: 20px; font-weight: 400; }
.editor-canvas-area { display: flex; min-width: 0; flex-direction: column; }.canvas-toolbar { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }.output-tabs { display: flex; max-width: calc(100% - 100px); overflow: auto; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); }.canvas-tab { flex: 0 0 auto; min-height: 28px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; }.canvas-tab.is-active { background: rgba(255,255,255,.12); color: var(--paper); }.canvas-toolbar>span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .08em; }.canvas-viewport { position: relative; display: grid; min-height: 0; flex: 1; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: radial-gradient(circle at 50% 48%, #1a1a1a, #090909 65%); }.campaign-canvas { position: relative; width: min(100%, 640px); min-height: 330px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #101010; box-shadow: 0 32px 70px rgba(0,0,0,.5); }.campaign-canvas:before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 32px 32px; content: ""; opacity: .3; pointer-events: none; }.canvas-landing { min-height: 480px; }.canvas-social { width: min(74%, 440px); aspect-ratio: 1; min-height: 0; }.canvas-banner { width: min(95%, 700px); aspect-ratio: 16 / 8; min-height: 0; }.canvas-email { width: min(76%, 460px); min-height: 500px; background: #f2f0eb; color: #111; }.canvas-storyboard { width: min(95%, 700px); min-height: 430px; }
.campaign-art { position: absolute; inset: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, rgba(2,2,2,.98) 2%, rgba(2,2,2,.5) 48%, rgba(2,2,2,.1)), var(--campaign-image); background-position: center; background-size: cover; filter: saturate(.78) contrast(1.1); }.canvas-social .campaign-art { background-image: linear-gradient(0deg, rgba(2,2,2,.92), rgba(2,2,2,.08)), var(--campaign-image); }.canvas-email .campaign-art { top: 38px; right: 25px; bottom: auto; left: auto; width: 36%; height: 220px; border-radius: 0; background-image: var(--campaign-image); background-position: center; background-size: cover; filter: none; }.canvas-banner .campaign-art { background-image: linear-gradient(90deg, rgba(2,2,2,.96), rgba(2,2,2,.1) 74%), var(--campaign-image); }.canvas-content { position: relative; z-index: 2; display: flex; height: 100%; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 5%, 42px); }.canvas-content small { color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .15em; }.canvas-content h2 { max-width: 600px; margin: 10px 0; font-family: var(--display); font-size: clamp(44px, 9vw, 104px); font-weight: 400; line-height: .82; letter-spacing: .015em; text-transform: uppercase; }.canvas-content p { max-width: 330px; margin: 0 0 18px; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.6; }.canvas-cta { display: inline-flex; width: fit-content; min-height: 34px; align-items: center; padding: 0 12px; border: 1px solid var(--lime); background: var(--lime); color: #000; font-size: 8px; font-weight: 900; letter-spacing: .05em; }.canvas-price { position: absolute; top: 20px; right: 20px; z-index: 3; color: var(--paper); font-size: 11px; font-weight: 800; }.canvas-social .canvas-content h2 { font-size: clamp(40px, 10vw, 79px); }.canvas-banner .canvas-content { justify-content: center; }.canvas-banner .canvas-content h2 { font-size: clamp(38px, 7vw, 70px); }.canvas-email .canvas-content { justify-content: flex-end; color: #111; }.canvas-email .canvas-content small { color: #758700; }.canvas-email .canvas-content h2 { font-family: var(--display); font-size: clamp(37px, 7vw, 63px); }.canvas-email .canvas-content p { color: rgba(0,0,0,.67); }.canvas-email .canvas-cta { background: #111; color: #f3f3f3; border-color: #111; }.canvas-email .canvas-price { color: #111; }.canvas-storyboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; }.story-frame { position: relative; overflow: hidden; min-height: 0; background: #171717; }.story-frame:before { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82), transparent 55%), var(--campaign-image); background-position: center; background-size: cover; content: ""; filter: saturate(.75); }.story-frame:nth-child(2):before { transform: scale(1.25); filter: saturate(.2) contrast(1.3); }.story-frame:nth-child(3):before { transform: scale(1.1); filter: saturate(1.1) hue-rotate(18deg); }.story-frame b { position: absolute; bottom: 10px; left: 10px; color: var(--paper); font-size: 9px; }.comparison-overlay { position: absolute; z-index: 5; inset: 10%; display: grid; grid-template-columns: 1fr 3px 1fr; align-items: center; border: 1px solid rgba(216,242,51,.55); border-radius: 10px; background: rgba(4,4,4,.26); backdrop-filter: blur(2px); pointer-events: none; }.comparison-overlay div { height: 100%; background: var(--lime); box-shadow: 0 0 20px var(--lime); }.comparison-overlay span { justify-self: center; padding: 5px 7px; border-radius: 4px; background: rgba(0,0,0,.7); color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.pack-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }.pack-summary strong { display: block; margin-top: 3px; font-size: 10px; }.pack-metrics { display: flex; gap: 8px; color: var(--muted); font-size: 8px; }.pack-metrics b { color: var(--lime); }
.editor-right { gap: 11px; }.inspector-section { padding-top: 4px; }.slider-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 800; }.slider-label output { color: var(--lime); }.inspector-section input[type="range"], .motion-inspector input[type="range"] { height: 4px; padding: 0; accent-color: var(--lime); }

.motion-editor-grid { display: grid; grid-template-columns: minmax(250px, .53fr) minmax(430px, 1.34fr) minmax(230px, .5fr); gap: 12px; }.motion-source, .motion-inspector { min-width: 0; padding: 17px; }.file-button { margin: 18px 0 10px; }.srt-input { min-height: 286px; color: rgba(255,255,255,.79); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; line-height: 1.7; white-space: pre; }.analysis-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 12px 0; }.analysis-cell { padding: 8px 6px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); text-align: center; }.analysis-cell b { display: block; color: var(--lime); font-size: 15px; }.analysis-cell span { color: var(--muted); font-size: 7px; font-weight: 800; }
.motion-workbench { display: flex; min-width: 0; flex-direction: column; gap: 9px; }.motion-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.playback-controls { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; }.play-button { display: grid; width: 32px; height: 32px; place-items: center; padding-left: 3px; border: 1px solid var(--lime); border-radius: 50%; background: var(--lime); color: #000; font-size: 11px; }.motion-viewport { display: grid; min-height: 455px; flex: 1; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: radial-gradient(circle at 50% 40%, #1b1b1b, #080808 67%); }.motion-preview { position: relative; width: min(80%, 390px); max-height: 58vh; overflow: hidden; border: 1px solid rgba(255,255,255,.15); background: radial-gradient(circle at 52% 34%, #28301a, #0c0d0c 45%, #030303 100%); box-shadow: 0 28px 70px rgba(0,0,0,.7); }.motion-preview.ratio-9-16 { aspect-ratio: 9 / 16; }.motion-preview.ratio-1-1 { width: min(80%, 460px); aspect-ratio: 1; }.motion-preview.ratio-16-9 { width: min(90%, 650px); aspect-ratio: 16 / 9; }.motion-preview:before { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.025) 32px), linear-gradient(145deg, rgba(216,242,51,.12), transparent 40%); content: ""; }.motion-grain { position: absolute; inset: -50%; opacity: .18; background-image: radial-gradient(#fff 0.65px, transparent .7px); background-size: 4px 4px; mix-blend-mode: soft-light; animation: grain .3s steps(2) infinite; }.motion-logo { position: absolute; top: 6%; left: 7%; color: rgba(255,255,255,.74); font-family: var(--display); font-size: clamp(21px, 4vw, 34px); letter-spacing: .08em; }.motion-graphic { position: absolute; z-index: 2; top: 50%; left: 50%; width: 76%; transform: translate(-50%, -50%); text-align: center; }.motion-graphic .graphic-label { display: inline-block; margin-bottom: 11px; color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .17em; }.motion-graphic .graphic-title { margin: 0; color: var(--paper); font-family: var(--display); font-size: clamp(38px, 9vw, 82px); font-weight: 400; letter-spacing: .015em; line-height: .82; }.motion-graphic .graphic-value { color: var(--lime); font-family: var(--display); font-size: clamp(60px, 14vw, 125px); line-height: .75; }.motion-graphic .compare-bars { display: grid; gap: 7px; margin-top: 18px; }.motion-graphic .compare-bars i { display: block; height: 9px; border-radius: 99px; background: rgba(255,255,255,.18); }.motion-graphic .compare-bars i:last-child { width: 86%; background: var(--lime); }.motion-graphic .sequence-numbers { display: flex; justify-content: center; gap: 7px; }.motion-graphic .sequence-numbers i { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); font-size: 9px; font-style: normal; font-weight: 900; }.motion-graphic .cta-shape { display: inline-flex; min-height: 35px; align-items: center; padding: 0 13px; border-radius: 2px; background: var(--lime); color: #060606; font-size: 9px; font-weight: 900; letter-spacing: .06em; }.motion-graphic.is-entering { animation: graphic-in .55s var(--ease) both; }.motion-graphic.is-leaving { animation: graphic-out .34s ease both; }@keyframes graphic-in { from { opacity: 0; transform: translate(-50%, -42%) scale(.92); filter: blur(8px); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }@keyframes graphic-out { to { opacity: 0; transform: translate(-50%, -57%) scale(1.04); filter: blur(5px); } }@keyframes grain { 50% { transform: translate(2%, -1%); } }
.motion-caption { position: absolute; right: 9%; bottom: 12%; left: 9%; z-index: 2; color: rgba(255,255,255,.88); font-size: clamp(11px, 1.8vw, 16px); font-weight: 700; line-height: 1.43; text-align: center; text-shadow: 0 2px 16px #000; }.motion-progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; height: 3px; background: rgba(255,255,255,.17); }.motion-progress i { display: block; width: 0%; height: 100%; background: var(--lime); }.motion-safe { position: absolute; z-index: 3; right: 7%; left: 7%; display: none; border: 1px dashed rgba(216,242,51,.65); pointer-events: none; }.motion-preview.show-safe .motion-safe { display: block; }.safe-top { top: 8%; bottom: 72%; }.safe-bottom { top: 72%; bottom: 8%; }
.motion-timeline { overflow: hidden; padding: 12px; }.timeline-head { align-items: center; }.timeline-head strong { display: block; margin-top: 3px; font-family: ui-monospace, monospace; font-size: 11px; }.timeline-head>span { color: var(--muted); font-size: 8px; }.timeline-scroll { position: relative; overflow-x: auto; padding-top: 11px; }.timeline-ruler { position: relative; min-width: 600px; height: 19px; border-top: 1px solid var(--line); background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%); }.timeline-ruler span { position: absolute; top: 4px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 7px; }.timeline-tracks { position: relative; display: grid; min-width: 600px; grid-template-columns: 43px 1fr; gap: 6px 7px; }.track-label { display: flex; align-items: center; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .08em; }.track-row { position: relative; height: 26px; border-radius: 5px; background: rgba(255,255,255,.035); }.timeline-cue { position: absolute; top: 3px; height: 20px; overflow: hidden; padding: 0 5px; border: 1px solid rgba(216,242,51,.56); border-radius: 4px; background: rgba(216,242,51,.13); color: var(--lime); font-size: 7px; font-weight: 800; line-height: 18px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.timeline-cue.graphic { border-color: rgba(145,128,255,.6); background: rgba(145,128,255,.16); color: #c2b9ff; }.timeline-cue.is-selected { box-shadow: 0 0 0 1px var(--lime), 0 0 12px rgba(216,242,51,.3); }.timeline-playhead { position: absolute; z-index: 5; top: -3px; bottom: -4px; left: 50px; width: 1px; background: #fff; box-shadow: 0 0 8px #fff; pointer-events: none; }
.motion-inspector { display: flex; flex-direction: column; gap: 12px; }.inspector-empty { display: grid; min-height: 130px; place-items: center; padding: 16px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: center; }.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.motion-template-stack { display: grid; gap: 6px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); }.motion-template-stack>button { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--paper); font-size: 9px; font-weight: 800; text-align: left; }.motion-template-stack>button:hover { border-color: var(--lime); color: var(--lime); }.danger-button { min-height: 34px; border: 1px solid rgba(255,117,109,.5); border-radius: 7px; background: rgba(255,117,109,.06); color: var(--danger); font-size: 9px; font-weight: 800; }.render-limitation { margin: 0; padding: 10px; border-left: 2px solid var(--lime); background: rgba(216,242,51,.055); color: var(--muted); font-size: 9px; line-height: 1.6; }.render-limitation b { color: var(--paper); }

.logo-studio-grid { display: grid; min-height: min(720px, calc(100svh - 190px)); grid-template-columns: minmax(240px, .51fr) minmax(410px, 1.35fr) minmax(240px, .53fr); gap: 12px; }.logo-brief, .logo-controls { display: flex; min-width: 0; flex-direction: column; gap: 11px; padding: 17px; }.logo-brief .panel-head, .logo-controls .panel-head { margin-bottom: 2px; }.logo-brief .file-button { margin: 2px 0 0; }.reference-file { min-height: 24px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }.logo-workbench { display: flex; min-width: 0; flex-direction: column; gap: 10px; }.logo-canvas { position: relative; display: grid; min-height: 460px; place-items: center; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 13px; background: radial-gradient(circle at 50% 42%, #242624, #0b0b0b 64%); }.logo-canvas:before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 32px 32px; content: ""; opacity: .55; }.logo-canvas:after { position: absolute; width: 52%; aspect-ratio: 1; border: 1px solid rgba(216,242,51,.15); border-radius: 50%; box-shadow: 0 0 0 32px rgba(216,242,51,.025), 0 0 90px rgba(216,242,51,.08); content: ""; }.logo-canvas-meta, .logo-canvas-caption { position: absolute; z-index: 3; color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .15em; }.logo-canvas-meta { top: 16px; left: 17px; }.logo-canvas-caption { right: 17px; bottom: 15px; color: var(--muted); }.logo-stage { position: relative; z-index: 2; width: min(92%, 620px); transform-origin: 50% 50%; }.logo-stage svg { display: block; width: 100%; height: auto; box-shadow: 0 30px 70px rgba(0,0,0,.52); }.logo-canvas.is-motion-preview .logo-stage { animation: logo-reveal 3.9s cubic-bezier(.19,.78,.18,1) infinite; }.logo-canvas.is-motion-preview .logo-symbol { transform-box: fill-box; transform-origin: center; animation: logo-symbol 3.9s cubic-bezier(.19,.78,.18,1) infinite; }.logo-canvas.is-motion-preview .logo-underline { stroke-dasharray: 465; stroke-dashoffset: 465; animation: logo-line 3.9s cubic-bezier(.19,.78,.18,1) infinite; }@keyframes logo-reveal { 0%,9% { opacity: 0; transform: scale(.93); filter: blur(8px); } 22%,72% { opacity: 1; transform: scale(1); filter: blur(0); } 88%,100% { opacity: .18; transform: scale(1.035); filter: blur(2px); } }@keyframes logo-symbol { 0%,11% { opacity: 0; transform: scale(.72) rotate(-12deg); } 28%,77% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: .3; transform: scale(1.06) rotate(2deg); } }@keyframes logo-line { 0%,22% { stroke-dashoffset: 465; } 43%,78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -465; } }.logo-directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.logo-direction { min-height: 86px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); color: var(--muted); text-align: left; }.logo-direction:hover, .logo-direction.is-selected { border-color: var(--lime); background: var(--lime-soft); color: var(--paper); }.logo-direction b { display: block; margin-bottom: 7px; color: var(--paper); font-size: 8px; letter-spacing: .09em; }.logo-direction.is-selected b { color: var(--lime); }.logo-direction span { display: block; font-size: 8px; line-height: 1.45; }.motion-addon { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 9px; min-height: 68px; padding: 11px; border: 1px solid rgba(216,242,51,.38); border-radius: 9px; background: rgba(216,242,51,.055); cursor: pointer; }.motion-addon input { width: 16px; height: 16px; margin: 0; accent-color: var(--lime); }.motion-addon b, .motion-addon small { display: block; }.motion-addon b { color: var(--paper); font-size: 10px; }.motion-addon small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }.motion-addon strong { color: var(--lime); font-size: 11px; }.logo-price-box { display: flex; align-items: end; justify-content: space-between; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); }.logo-price-box span { color: var(--muted); font-size: 8px; font-weight: 800; }.logo-price-box b { display: block; margin-top: 4px; color: var(--paper); font-size: 10px; }.logo-price-box>strong { color: var(--lime); font-size: 19px; letter-spacing: -.04em; }.logo-export-button { min-height: 35px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--paper); font-size: 9px; font-weight: 800; }.logo-export-button:hover { border-color: var(--lime); color: var(--lime); }

.template-heading { margin-bottom: 26px; }.template-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }.filter-button { min-height: 33px; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 900; }.filter-button.is-active, .filter-button:hover { border-color: var(--lime); background: var(--lime-soft); color: var(--lime); }.template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }.template-card { position: relative; display: flex; min-height: 228px; flex-direction: column; overflow: hidden; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(140deg, rgba(255,255,255,.055), rgba(255,255,255,.01)); }.template-card:before { position: absolute; top: -58px; right: -54px; width: 150px; height: 150px; border: 1px solid var(--template-color, var(--lime)); border-radius: 50%; box-shadow: 0 0 0 18px color-mix(in srgb, var(--template-color, var(--lime)) 8%, transparent); content: ""; opacity: .75; }.template-card:hover { border-color: var(--template-color, var(--lime)); transform: translateY(-3px); }.template-card small { position: relative; color: var(--template-color, var(--lime)); font-size: 8px; font-weight: 900; letter-spacing: .13em; }.template-card h2 { position: relative; max-width: 160px; margin: 18px 0 8px; font-family: var(--display); font-size: 35px; font-weight: 400; letter-spacing: .02em; line-height: .85; text-transform: uppercase; }.template-card p { position: relative; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.template-card button { position: relative; width: fit-content; min-height: 30px; margin-top: auto; padding: 0; border: 0; background: transparent; color: var(--paper); font-size: 9px; font-weight: 900; }.template-card button:hover { color: var(--template-color, var(--lime)); }

.export-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.export-card { min-height: 265px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgba(216,242,51,.1), rgba(255,255,255,.025) 50%); }.export-card:nth-child(2) { background: linear-gradient(135deg, rgba(145,128,255,.14), rgba(255,255,255,.025)); }.export-card.muted { background: rgba(255,255,255,.025); }.export-number { color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .12em; }.export-card h2 { margin: 24px 0 9px; font-family: var(--display); font-size: 44px; font-weight: 400; line-height: .86; text-transform: uppercase; }.export-card p { min-height: 71px; margin: 0 0 18px; color: rgba(255,255,255,.66); font-size: 11px; line-height: 1.65; }.export-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; text-align: center; }.export-history { margin-top: 15px; padding: 19px; }.version-history-list { display: grid; gap: 6px; margin-top: 17px; }.version-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; min-height: 37px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.02); }.version-row b { color: var(--lime); font-size: 9px; }.version-row span { color: var(--muted); font-size: 9px; }.version-row time { color: rgba(255,255,255,.42); font-size: 8px; }

.shortcut-dialog { width: min(360px, calc(100vw - 40px)); padding: 25px; border: 1px solid rgba(216,242,51,.42); border-radius: 16px; background: #121212; color: var(--paper); box-shadow: 0 30px 100px #000; }.shortcut-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }.shortcut-dialog h2 { margin: 8px 0 17px; font-family: var(--display); font-size: 47px; font-weight: 400; line-height: .8; }.shortcut-dialog dl { margin: 0; }.shortcut-dialog dl>div { display: grid; grid-template-columns: 100px 1fr; gap: 9px; padding: 10px 0; border-top: 1px solid var(--line); }.shortcut-dialog dt { color: var(--lime); font-size: 10px; font-weight: 900; }.shortcut-dialog dd { margin: 0; color: var(--muted); font-size: 10px; }.dialog-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--paper); font-size: 22px; }.toast { position: fixed; z-index: 100; bottom: 23px; left: 50%; padding: 12px 15px; transform: translate(-50%, 20px); border: 1px solid rgba(216,242,51,.5); border-radius: 8px; background: rgba(12,12,12,.95); box-shadow: 0 15px 40px rgba(0,0,0,.5); color: var(--lime); font-size: 10px; font-weight: 800; opacity: 0; pointer-events: none; transition: .28s var(--ease); }.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 1230px) {
  .studio-shell { grid-template-columns: 210px minmax(0, 1fr); }.studio-brand, .rail-foot { padding-right: 17px; padding-left: 17px; }.nav-item { grid-template-columns: 20px 1fr auto; }.campaign-editor-grid { grid-template-columns: minmax(195px, .48fr) minmax(400px, 1.35fr); }.editor-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; }.editor-right .panel-head, .editor-right .primary-button { grid-column: 1 / -1; }.motion-editor-grid { grid-template-columns: minmax(220px, .55fr) minmax(400px, 1.4fr); }.motion-inspector { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); }.motion-inspector .panel-head, .motion-inspector .motion-template-stack, .motion-inspector .render-limitation { grid-column: 1 / -1; }.motion-inspector #sceneInspectorFields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.motion-inspector #sceneInspectorFields .field-label:first-child { grid-column: span 2; }.motion-inspector #sceneInspectorFields .two-fields { grid-column: span 1; }.motion-inspector #sceneInspectorFields .danger-button { grid-column: 1 / -1; }.logo-studio-grid { grid-template-columns: minmax(220px, .55fr) minmax(390px, 1.35fr); }.logo-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; }.logo-controls .panel-head, .logo-controls .motion-addon, .logo-controls .logo-price-box, .logo-controls .render-limitation { grid-column: 1 / -1; }
  .template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 930px) {
  .studio-shell { display: block; }.studio-rail { position: sticky; z-index: 30; top: 0; display: grid; height: auto; grid-template-columns: auto 1fr; border-right: 0; border-bottom: 1px solid var(--line); }.studio-brand { min-height: 58px; padding: 0 18px; border-bottom: 0; }.studio-brand strong { font-size: 25px; }.studio-brand em, .rail-project, .rail-foot { display: none; }.rail-nav { display: flex; align-items: center; gap: 0; padding: 0; overflow-x: auto; }.nav-item { display: flex; width: auto; min-height: 58px; flex: 0 0 auto; gap: 5px; padding: 0 10px; border-radius: 0; font-size: 9px; }.nav-item.is-active:before { top: auto; bottom: 0; width: 24px; height: 2px; left: 50%; transform: translateX(-50%); border-radius: 4px 4px 0 0; }.nav-item kbd { display: none; }.nav-icon { font-size: 13px; }.studio-topbar { min-height: 51px; padding: 0 19px; }.privacy-status { display: none; }.studio-main { min-height: calc(100svh - 109px); }.project-grid, .export-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.brand-layout { grid-template-columns: 1fr; }.brand-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.brand-sources .panel-head, .brand-sources .source-drop, .brand-sources .source-list, .brand-sources>button, .brand-sources .panel-note { grid-column: 1 / -1; }.brand-sources .source-drop { margin: 0; min-height: 150px; }.campaign-editor-grid, .motion-editor-grid, .logo-studio-grid { grid-template-columns: 1fr; }.editor-left { min-height: 290px; }.editor-right, .motion-inspector, .logo-controls { grid-column: auto; }.motion-source { min-height: auto; }.motion-editor-grid .motion-workbench { min-height: 720px; }.logo-controls { display: flex; }.logo-canvas { min-height: 420px; }.template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.view-heading { grid-template-columns: 1fr; gap: 20px; }.view-heading>p { margin-bottom: 0; }.dashboard-heading { align-items: start; }.dashboard-pulse { display: none; }
}
@media (max-width: 600px) {
  .studio-brand { min-width: 106px; padding-right: 12px; padding-left: 15px; }.studio-brand .brand-mark { width: 23px; height: 24px; }.studio-brand strong { font-size: 21px; }.nav-item { min-width: 57px; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 6px; font-size: 7px; }.nav-icon { font-size: 12px; }.studio-topbar { padding: 0 15px; }.top-actions { gap: 8px; }.crumbs { font-size: 9px; }.studio-view { padding: 28px 15px 45px; }.dashboard-heading h1, .view-heading h1 { font-size: clamp(55px, 17vw, 81px); }.command-deck { padding: 17px; border-radius: 14px; }.command-header h2 { font-size: 16px; }.command-input-wrap { margin: 19px 0 12px; }.command-input-wrap textarea { min-height: 115px; padding: 15px 29px 15px 14px; font-size: 13px; }.command-controls { display: grid; grid-template-columns: 1fr 1fr; }.attach-button, .control-chip, .select-control, .ratio-control, .primary-button { min-width: 0; }.select-control select { min-width: 0; width: 100%; }.ratio-control { justify-content: center; }.command-controls .primary-button { grid-column: 1 / -1; min-height: 44px; }.consent-line { font-size: 8px; }.project-grid { grid-template-columns: 1fr; }.project-card { min-height: 160px; }.brand-sources { display: flex; flex-direction: column; }.token-head { align-items: flex-start; flex-direction: column; }.token-groups { grid-template-columns: 1fr; }.color-token-grid { grid-template-columns: repeat(4, 1fr); }.brand-preview { min-height: 250px; }.brand-preview-content { margin-top: 54px; }.editor-view { padding: 23px 12px 38px; }.editor-topbar { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }.editor-topbar h1 { font-size: 48px; }.editor-actions { justify-content: flex-start; }.editor-right { display: flex; }.canvas-toolbar { align-items: flex-start; flex-direction: column; }.output-tabs { max-width: 100%; width: 100%; }.canvas-viewport { min-height: 420px; }.canvas-landing { min-height: 410px; }.canvas-content h2 { font-size: 58px; }.canvas-social { width: min(90%, 380px); }.canvas-email { width: min(90%, 390px); }.canvas-storyboard { min-height: 310px; }.pack-summary { flex-wrap: wrap; }.pack-metrics { order: 3; width: 100%; }.motion-editor-grid .motion-workbench { min-height: 650px; }.motion-viewport { min-height: 420px; }.motion-preview { width: min(87%, 340px); }.motion-preview.ratio-16-9 { width: 92%; }.motion-toolbar { flex-wrap: wrap; }.motion-inspector { display: flex; }.motion-inspector #sceneInspectorFields { display: grid; grid-template-columns: 1fr 1fr; }.motion-inspector #sceneInspectorFields .field-label:first-child, .motion-inspector #sceneInspectorFields .field-label:nth-child(3), .motion-inspector #sceneInspectorFields .field-label:nth-child(4), .motion-inspector #sceneInspectorFields .danger-button { grid-column: 1 / -1; }.motion-inspector #sceneInspectorFields .two-fields { grid-column: 1 / -1; }.srt-input { min-height: 190px; }.logo-canvas { min-height: 330px; padding: 16px; }.logo-directions { grid-template-columns: 1fr; }.logo-direction { min-height: 70px; }.motion-addon { grid-template-columns: 17px 1fr; }.motion-addon>strong { grid-column: 2; }.logo-price-box { padding: 12px; }.logo-price-box>strong { font-size: 17px; }.template-grid, .export-grid { grid-template-columns: 1fr; }.template-card { min-height: 185px; }.export-card { min-height: 230px; }.export-card p { min-height: 0; }.shortcut-dialog { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }