:root {
  --bg: #070b14;
  --panel: #0c1220;
  --panel-2: #101827;
  --panel-3: #151f31;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f3f6fb;
  --muted: #93a0b5;
  --dim: #637087;
  --accent: #a9ff47;
  --accent-dark: #78bf22;
  --purple: #8f7cff;
  --cyan: #47d7ff;
  --warning: #ffbf47;
  --danger: #ff6b78;
  --success: #62e6a2;
  --radius: 14px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .34);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
.is-hidden { display: none !important; }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; background: var(--accent); color: #0b1302; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.topbar { height: 68px; padding: 0 28px; display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--line); background: rgba(7, 11, 20, .86); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 50; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 790; letter-spacing: -.045em; font-size: 20px; white-space: nowrap; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); box-shadow: 0 0 28px rgba(169, 255, 71, .18); }
.brand-mark svg { width: 20px; height: 20px; fill: #0a1004; }
.brand-product { padding-left: 9px; margin-left: 1px; border-left: 1px solid var(--line-strong); color: var(--accent); font-weight: 650; }
.topbar-copy { margin-right: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 12px var(--success); }
.top-actions { display: flex; align-items: center; gap: 24px; }
.top-actions a { color: var(--muted); text-decoration: none; font-size: 13px; }
.top-actions a:hover { color: var(--text); }

.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; padding: 0 17px; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; transition: transform .16s, background .16s, border-color .16s, color .16s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-primary { background: var(--accent); color: #0a1202; box-shadow: inset 0 -2px rgba(0, 0, 0, .14); }
.button-primary:hover:not(:disabled) { background: #bcff70; }
.button-ghost { background: rgba(255, 255, 255, .045); border-color: var(--line-strong); color: var(--text); }
.button-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
.button-subtle { background: transparent; border-color: var(--line); color: var(--muted); }
.button-small { min-height: 36px; padding: 0 15px; }
.button-full { width: 100%; }
.icon-button, .viewport-button { background: transparent; border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center; }
.icon-button svg, .viewport-button svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hero { position: relative; overflow: hidden; min-height: 660px; padding: 84px 28px 42px; display: flex; flex-direction: column; align-items: center; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 54px 54px; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 35%, transparent 0, rgba(7, 11, 20, .2) 50%, var(--bg) 89%); }
.hero-glow { position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(100px); opacity: .13; }
.hero-glow-one { background: var(--purple); left: -140px; top: 20px; }
.hero-glow-two { background: var(--accent); right: -180px; top: 150px; }
.hero-copy, .hero-dropzone, .hero-package-actions, .feature-strip { position: relative; z-index: 2; }
.hero-copy { text-align: center; max-width: 840px; }
.eyebrow { display: flex; justify-content: center; gap: 9px; margin-bottom: 20px; }
.eyebrow span { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .035); color: #bec7d5; border-radius: 999px; padding: 6px 10px; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; font-weight: 720; }
.hero h1 { font-size: clamp(45px, 6vw, 78px); line-height: .99; letter-spacing: -.063em; margin: 0; font-weight: 760; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-copy > p { max-width: 600px; margin: 24px auto 30px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-dropzone { width: min(640px, 100%); min-height: 192px; border: 1px dashed rgba(169, 255, 71, .47); border-radius: 18px; background: linear-gradient(145deg, rgba(169, 255, 71, .08), rgba(255, 255, 255, .025)); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: inset 0 0 40px rgba(169, 255, 71, .025), var(--shadow); transition: border-color .18s, background .18s, transform .18s; }
.hero-dropzone:hover, .hero-dropzone.is-dragging { border-color: var(--accent); background: linear-gradient(145deg, rgba(169, 255, 71, .14), rgba(255, 255, 255, .035)); transform: translateY(-2px); }
.drop-icon { width: 47px; height: 47px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #0a1202; margin-bottom: 13px; }
.drop-icon svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.hero-dropzone strong { font-size: 17px; margin-bottom: 6px; }
.hero-dropzone > span:not(.drop-icon) { font-size: 13px; color: var(--muted); }
.hero-dropzone u { color: var(--accent); text-underline-offset: 3px; }
.hero-dropzone small { margin-top: 16px; color: var(--dim); font-size: 11px; }
.hero-package-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.hero-package-actions .button { min-height: 36px; font-size: 11px; }
.hero-package-actions span { color: var(--dim); font-size: 10px; }
.feature-strip { display: grid; grid-template-columns: repeat(4, 1fr); width: min(860px, 100%); margin-top: 40px; }
.feature-strip > div { display: grid; grid-template-columns: auto 1fr; gap: 1px 11px; padding: 0 26px; border-right: 1px solid var(--line); }
.feature-strip > div:last-child { border: 0; }
.feature-number { grid-row: 1 / 3; color: var(--accent); font: 600 10px ui-monospace, monospace; padding-top: 3px; }
.feature-strip strong { font-size: 13px; }
.feature-strip small { color: var(--dim); font-size: 10px; }

.studio { min-height: calc(100vh - 68px); height: calc(100vh - 68px); display: grid; grid-template-columns: 306px minmax(380px, 1fr) 246px; border-bottom: 1px solid var(--line); background: #080d17; }
.sidebar { background: var(--panel); min-height: 0; }
.sidebar-left { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.sidebar-right { border-left: 1px solid var(--line); padding: 20px 16px; overflow-y: auto; }
.file-card { height: 72px; padding: 13px 14px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.file-icon, .export-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(169, 255, 71, .28); background: rgba(169, 255, 71, .07); color: var(--accent); border-radius: 9px; font: 760 10px ui-monospace, monospace; }
.file-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-info strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-info small { color: var(--dim); margin-top: 4px; font-size: 10px; }
.icon-button { width: 30px; height: 30px; border-radius: 7px; color: var(--muted); }
.icon-button:hover { color: var(--text); background: var(--panel-3); }
.icon-button svg { width: 16px; }
.package-summary { margin: 10px 11px 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); }
.package-summary-head { display: flex; justify-content: space-between; gap: 8px; }
.package-summary-head strong { font-size: 10px; }
.package-summary-head span { color: var(--dim); font: 650 8px ui-monospace, monospace; }
.package-status { margin: 8px 0; padding: 7px 8px; border-radius: 6px; color: var(--muted); background: var(--panel-2); font-size: 8px; line-height: 1.4; }
.package-status.is-ok { color: var(--success); background: rgba(98,230,162,.07); }
.package-status.is-warning { color: var(--warning); background: rgba(255,191,71,.07); }
.package-summary ul { max-height: 118px; overflow: auto; list-style: none; margin: 0; padding: 0; scrollbar-width: thin; }
.package-summary li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 1px; border-top: 1px solid rgba(255,255,255,.045); font-size: 8px; }
.package-summary li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.package-summary li b { flex: none; color: var(--dim); font: 700 7px ui-monospace, monospace; }
.package-summary li.package-more { color: var(--dim); }
.package-summary li.package-problem span, .package-summary li.package-problem b { color: var(--warning); }
.package-summary li.package-remap span, .package-summary li.package-remap b { color: var(--success); }
.package-add-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.package-add-actions button { min-height: 29px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--panel-2); cursor: pointer; font-size: 8px; font-weight: 700; }
.package-add-actions button:hover { color: var(--text); border-color: var(--line-strong); }
.tab-list { height: 46px; padding: 0 11px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.tab { position: relative; border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 11px; font-weight: 700; }
.tab::after { content: ""; position: absolute; height: 2px; bottom: -1px; left: 14px; right: 14px; background: transparent; }
.tab:hover { color: var(--muted); }
.tab.is-active { color: var(--text); }
.tab.is-active::after { background: var(--accent); }
.panel-scroll { overflow-y: auto; flex: 1; scrollbar-color: #263147 transparent; scrollbar-width: thin; }
.tool-panel { display: none; padding: 18px 16px 24px; }
.tool-panel.is-active { display: block; }
.tool-panel h2 { margin: 20px 0 10px; font-size: 11px; color: #c7cfdb; text-transform: uppercase; letter-spacing: .095em; }
.health-card { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 11px; }
.health-ring { --score: 0; width: 57px; height: 57px; flex: none; padding: 4px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--score) * 1%), #222c3d 0); position: relative; display: grid; place-items: center; }
.health-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel-2); }
.health-ring span { position: relative; z-index: 1; font-size: 16px; font-weight: 780; }
.health-card > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.health-card small, .panel-kicker { color: var(--dim); font: 700 9px ui-monospace, monospace; letter-spacing: .1em; }
.health-card strong { margin: 4px 0 2px; font-size: 13px; }
.health-card span:not(.health-ring span) { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-breakdown { display: grid; gap: 8px; margin: 11px 1px 18px; }
.score-breakdown > div { display: grid; gap: 4px; }
.score-breakdown span { display: flex; justify-content: space-between; color: var(--dim); font-size: 9px; }
.score-breakdown b { color: var(--muted); font: 700 9px ui-monospace, monospace; }
.score-breakdown i { --value: 0; display: block; height: 3px; overflow: hidden; border-radius: 99px; background: #222c3d; }
.score-breakdown i::after { content: ""; display: block; width: calc(var(--value) * 1%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--accent)); transition: width .35s ease; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stats-grid div { padding: 11px; border-bottom: 1px solid var(--line); }
.stats-grid div:nth-child(odd) { border-right: 1px solid var(--line); }
.stats-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.stats-grid dt { color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.stats-grid dd { margin: 5px 0 0; font: 650 13px ui-monospace, monospace; }
.dimensions { display: flex; gap: 5px; }
.dimensions span { flex: 1; padding: 8px 4px; text-align: center; border: 1px solid var(--line); background: var(--panel-2); border-radius: 7px; font: 600 10px ui-monospace, monospace; color: var(--muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; }
.section-heading h2 { margin: 0; }
.text-button { color: var(--accent); background: transparent; border: 0; padding: 3px; cursor: pointer; font-size: 10px; }
.checks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.check-row { display: grid; grid-template-columns: 23px 1fr; gap: 8px; align-items: start; padding: 9px; border-radius: 8px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.check-symbol { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.check-row.ok .check-symbol { background: rgba(98,230,162,.13); color: var(--success); }
.check-row.warning .check-symbol { background: rgba(255,191,71,.13); color: var(--warning); }
.check-row.error .check-symbol { background: rgba(255,107,120,.13); color: var(--danger); }
.check-row.info .check-symbol { background: rgba(71,215,255,.12); color: var(--cyan); }
.check-row strong { font-size: 10px; display: block; }
.check-row small { color: var(--dim); font-size: 9px; line-height: 1.45; display: block; margin-top: 2px; }
.check-row em { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; font-style: normal; }
.panel-intro { padding-bottom: 7px; }
.panel-intro h2 { margin: 8px 0 7px; color: var(--text); text-transform: none; letter-spacing: -.025em; font-size: 19px; }
.panel-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.preset-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.preset-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; background: rgba(255,255,255,.018); }
.preset-card:hover { border-color: var(--line-strong); }
.preset-card.is-selected { border-color: rgba(169,255,71,.52); background: rgba(169,255,71,.055); }
.preset-card input { accent-color: var(--accent); margin: 0; }
.preset-card > span { flex: 1; display: flex; flex-direction: column; }
.preset-card strong { font-size: 11px; }
.preset-card small { margin-top: 2px; color: var(--dim); font-size: 9px; }
.preset-card b { font: 650 10px ui-monospace, monospace; color: var(--muted); }
.optimization-result { margin: 13px 0; padding: 12px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 9px; }
.optimization-result small { color: var(--dim); font: 700 8px ui-monospace, monospace; }
.optimization-result div { display: flex; align-items: center; gap: 9px; margin: 7px 0 4px; }
.optimization-result div strong { font: 700 15px ui-monospace, monospace; }
.optimization-result div span { color: var(--accent); }
.optimization-result > span { color: var(--muted); font-size: 9px; }
.comparison-section { margin: 13px 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); }
.comparison-section > small { color: var(--dim); font: 700 8px ui-monospace, monospace; letter-spacing: .09em; }
.comparison-section > span { display: block; margin-top: 6px; color: var(--dim); font-size: 8px; }
.comparison-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 8px; padding: 3px; border-radius: 8px; background: #090e19; }
.comparison-switch button { height: 30px; border: 0; border-radius: 6px; color: var(--dim); background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
.comparison-switch button.is-active { color: #071006; background: var(--accent); }
.tool-panel .button + .button { margin-top: 8px; }
.field-label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 10px; }
select { width: 100%; height: 38px; padding: 0 10px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 8px; outline: none; font-size: 11px; }
select:focus { border-color: var(--accent); }
.color-field { display: flex; height: 38px; padding: 4px 10px 4px 5px; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: var(--panel-2); border-radius: 8px; }
.color-field input { width: 32px; height: 27px; padding: 0; border: 0; background: transparent; }
.color-field span { color: var(--muted); font: 600 10px ui-monospace, monospace; }
.toggle-list { margin-top: 14px; border-top: 1px solid var(--line); }
.toggle-list label { position: relative; display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle-list label > span { display: flex; flex-direction: column; flex: 1; }
.toggle-list strong { font-size: 10px; }
.toggle-list small { color: var(--dim); font-size: 9px; margin-top: 2px; }
.toggle-list input { position: absolute; opacity: 0; }
.toggle-list i { position: relative; width: 31px; height: 17px; border-radius: 999px; background: #283247; transition: background .18s; }
.toggle-list i::after { content: ""; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; border-radius: 50%; background: #8793a8; transition: transform .18s, background .18s; }
.toggle-list input:checked + i { background: rgba(169,255,71,.24); }
.toggle-list input:checked + i::after { transform: translateX(14px); background: var(--accent); }
.animation-section { padding-bottom: 3px; }
.animation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.scene-tree { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.tree-row { display: flex; gap: 7px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.tree-row:last-child { border: 0; }
.tree-row span { color: var(--accent); font: 700 8px ui-monospace, monospace; }
.tree-empty { padding: 18px; text-align: center; color: var(--dim); font-size: 10px; }

.viewport-wrap { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: #101624; }
#renderCanvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.viewport-toolbar { position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; gap: 6px; }
.viewport-button { width: 34px; height: 34px; border-radius: 8px; color: var(--muted); background: rgba(7,11,20,.72); backdrop-filter: blur(8px); }
.viewport-button:hover { color: var(--text); border-color: var(--line-strong); }
.viewport-button svg { width: 17px; }
.viewport-help { position: absolute; z-index: 3; bottom: 13px; left: 50%; transform: translateX(-50%); padding: 7px 10px; color: var(--dim); background: rgba(7,11,20,.72); border: 1px solid var(--line); border-radius: 7px; backdrop-filter: blur(8px); font-size: 9px; white-space: nowrap; }
.viewport-help span { color: #b7c1cf; }
.viewport-loader, .drop-overlay { position: absolute; z-index: 8; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(7,11,20,.83); backdrop-filter: blur(7px); }
.viewport-loader strong, .drop-overlay strong { margin-top: 14px; font-size: 14px; }
.viewport-loader small, .drop-overlay span { color: var(--muted); margin-top: 5px; font-size: 11px; }
.drop-overlay { border: 2px dashed var(--accent); inset: 12px; border-radius: 14px; color: var(--accent); }
.spinner { width: 31px; height: 31px; border: 3px solid rgba(169,255,71,.16); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.export-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.export-heading span { font-size: 12px; font-weight: 720; text-transform: uppercase; letter-spacing: .08em; }
.export-heading small { color: var(--accent); font-size: 9px; }
.export-card { padding: 14px; margin-bottom: 10px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.export-card-primary { background: linear-gradient(145deg, rgba(169,255,71,.07), var(--panel-2)); border-color: rgba(169,255,71,.18); }
.export-card-package { background: linear-gradient(145deg, rgba(71,215,255,.045), var(--panel-2)); border-color: rgba(71,215,255,.15); }
.export-card > div { display: flex; flex-direction: column; justify-content: center; }
.export-card > div strong { font-size: 10px; }
.export-card > div small { color: var(--dim); font-size: 8px; margin-top: 3px; }
.export-card .button, .export-card .mini-check { grid-column: 1 / -1; }
.export-proof { margin: -1px 0 11px; padding: 12px; border: 1px solid rgba(98,230,162,.22); border-radius: 10px; background: rgba(98,230,162,.045); }
.export-proof > small { color: var(--success); font: 700 8px ui-monospace, monospace; letter-spacing: .1em; }
.export-proof dl { margin: 9px 0 0; display: grid; gap: 6px; }
.export-proof dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.export-proof dt { color: var(--dim); font-size: 8px; }
.export-proof dd { margin: 0; color: var(--text); font: 650 9px ui-monospace, monospace; text-align: right; }
.export-proof dd.is-negative { color: var(--danger); }
.export-icon-image { color: var(--cyan); border-color: rgba(71,215,255,.25); background: rgba(71,215,255,.07); }
.export-icon-package { color: #d9b8ff; border-color: rgba(202,150,255,.25); background: rgba(202,150,255,.07); }
.mini-check { color: var(--muted); font-size: 9px; cursor: pointer; }
.mini-check input { accent-color: var(--accent); vertical-align: middle; margin-right: 5px; }
.privacy-note { display: grid; grid-template-columns: 25px 1fr; gap: 9px; padding: 12px; margin: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.privacy-note svg { width: 21px; fill: none; stroke: var(--success); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.privacy-note div { display: flex; flex-direction: column; }
.privacy-note strong { font-size: 9px; color: var(--success); }
.privacy-note span { color: var(--dim); font-size: 8px; line-height: 1.45; margin-top: 3px; }

.content-section, .formats-section, .seo-section, .format-details, .authoring-section, .faq-section { max-width: 1160px; margin: 0 auto; padding: 100px 28px; }
.section-label { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font: 700 10px ui-monospace, monospace; }
.content-section > h2, .formats-section h2 { max-width: 640px; margin: 13px 0 40px; font-size: clamp(30px, 4.5vw, 54px); line-height: 1.08; letter-spacing: -.055em; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.steps-grid article { min-height: 190px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.steps-grid article > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: rgba(169,255,71,.1); color: var(--accent); font: 700 10px ui-monospace, monospace; }
.steps-grid h3 { margin: 39px 0 8px; font-size: 15px; }
.steps-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ad-placement { max-width: 1160px; margin: -36px auto 64px; padding: 0 28px; display: flex; justify-content: center; }
.ad-card { width: 324px; padding: 10px 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); box-shadow: 0 14px 42px rgba(0,0,0,.18); }
.ad-card > span { display: block; margin: 0 0 7px; color: var(--dim); font: 700 8px ui-monospace, monospace; text-align: center; text-transform: uppercase; letter-spacing: .14em; }
.ad-slot { width: 300px; height: 250px; max-width: 100%; margin: 0 auto; overflow: hidden; background: rgba(255,255,255,.012); }
.ad-placement:has(.ad-slot[style*="display: none"]) { display: none; }
.formats-section { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.formats-section h2 { margin-bottom: 0; }
.format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.format-grid span { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; }
.format-grid span:first-child { grid-column: 1 / -1; border-color: rgba(169,255,71,.28); background: rgba(169,255,71,.045); }
.format-grid b { font: 750 13px ui-monospace, monospace; color: var(--text); }
.format-grid small { color: var(--dim); margin-top: 5px; font-size: 9px; }
.seo-section, .format-details, .authoring-section, .faq-section { border-top: 1px solid var(--line); }
.section-heading-copy { max-width: 720px; margin-bottom: 40px; }
.section-heading-copy h2 { margin: 13px 0 15px; font-size: clamp(30px, 4.5vw, 54px); line-height: 1.08; letter-spacing: -.055em; }
.section-heading-copy > p { max-width: 670px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.capability-grid article { min-height: 240px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.capability-grid article > span { color: var(--accent); font: 700 10px ui-monospace, monospace; letter-spacing: .13em; }
.capability-grid h3 { margin: 48px 0 12px; font-size: 20px; line-height: 1.25; }
.capability-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.format-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.format-table-wrap table { width: 100%; border-collapse: collapse; min-width: 680px; text-align: left; }
.format-table-wrap th, .format-table-wrap td { padding: 17px 19px; border-bottom: 1px solid var(--line); font-size: 14px; }
.format-table-wrap thead th { color: var(--dim); font: 700 10px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; background: rgba(255,255,255,.02); }
.format-table-wrap tbody th { color: var(--accent); font: 750 13px ui-monospace, monospace; }
.format-table-wrap tbody td { color: var(--muted); }
.format-table-wrap tbody tr:last-child th, .format-table-wrap tbody tr:last-child td { border-bottom: 0; }
.authoring-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.authoring-grid article { padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.authoring-card-head { display: flex; align-items: center; justify-content: space-between; }
.authoring-card-head span { padding: 7px 9px; border: 1px solid rgba(169,255,71,.24); border-radius: 7px; color: var(--accent); background: rgba(169,255,71,.06); font: 750 10px ui-monospace, monospace; }
.authoring-card-head small { color: var(--dim); font-size: 10px; }
.authoring-grid h3 { margin: 26px 0 10px; font-size: 22px; }
.authoring-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.authoring-grid ol { margin: 21px 0; padding-left: 20px; color: #c6ceda; font-size: 12px; line-height: 1.9; }
.authoring-actions { display: flex; align-items: center; gap: 18px; }
.authoring-actions > a:not(.button) { color: var(--accent); font-size: 12px; text-underline-offset: 3px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 23px 48px 23px 0; color: var(--text); font-size: 17px; font-weight: 650; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 5px; top: 19px; color: var(--accent); font: 400 25px/1 ui-monospace, monospace; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 780px; margin: -6px 0 24px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.guide-shell { max-width: 920px; margin: 0 auto; padding: 90px 28px 110px; }
.guide-hero { padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.guide-hero h1 { max-width: 800px; margin: 15px 0 18px; font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -.055em; }
.guide-hero p { max-width: 700px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.guide-cta { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.guide-cta > a:not(.button) { color: var(--accent); font-size: 13px; }
.guide-content { display: grid; grid-template-columns: 210px 1fr; gap: 48px; padding-top: 48px; }
.guide-aside { align-self: start; position: sticky; top: 96px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.guide-aside strong { display: block; margin-bottom: 8px; font-size: 11px; }
.guide-aside span { display: block; color: var(--muted); font-size: 10px; line-height: 1.7; }
.guide-steps h2 { margin: 0 0 22px; font-size: 30px; letter-spacing: -.035em; }
.guide-step { margin-bottom: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.guide-step h3 { margin: 0 0 8px; font-size: 16px; }
.guide-step p, .guide-note, .guide-steps li { color: var(--muted); font-size: 13px; line-height: 1.75; }
.guide-step p { margin: 0; }
.guide-note { margin-top: 24px; padding: 17px; border-left: 3px solid var(--accent); background: rgba(169,255,71,.045); }
.site-footer { border-top: 1px solid var(--line); padding: 34px 28px; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(420px, 2fr) auto; align-items: start; gap: 34px; background: #05080e; }
.footer-brand p { color: var(--dim); margin: 8px 0 0; font-size: 10px; }
.footer-network > strong { color: var(--dim); font: 700 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .12em; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 11px; }
.site-footer a { color: var(--muted); text-decoration: none; font-size: 10px; }
.site-footer a:hover, .footer-link-button:hover { color: var(--accent); }
.footer-link-button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; }
.footer-meta { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 9px; }
.footer-utility { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.consent-banner { position: fixed; z-index: 120; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(720px, calc(100vw - 36px)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 22px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(12,18,32,.98); box-shadow: 0 20px 70px rgba(0,0,0,.52); backdrop-filter: blur(16px); }
.consent-banner strong { display: block; font-size: 14px; }
.consent-banner p { max-width: 500px; margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.consent-actions { display: flex; gap: 8px; }
.consent-actions .button { white-space: nowrap; }
.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; width: min(340px, calc(100vw - 36px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 12px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 9px; background: rgba(12,18,32,.96); box-shadow: var(--shadow); color: var(--text); font-size: 11px; animation: toastIn .25s ease; }
.toast.error { border-left-color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1080px) {
  .studio { grid-template-columns: 286px minmax(340px, 1fr); }
  .sidebar-right { position: absolute; z-index: 12; right: 12px; top: 82px; width: 225px; max-height: calc(100% - 100px); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); background: rgba(12,18,32,.92); backdrop-filter: blur(14px); }
  .viewport-toolbar { right: 250px; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article { min-height: 190px; }
  .capability-grid h3 { margin-top: 32px; }
  .site-footer { grid-template-columns: 1fr auto; }
  .footer-network { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 760px) {
  .topbar { height: 58px; padding: 0 15px; }
  .topbar-copy, .top-actions a { display: none; }
  .top-actions { margin-left: auto; }
  .hero { padding: 60px 17px 35px; min-height: 620px; }
  .hero-copy > p { font-size: 14px; }
  .hero-dropzone { min-height: 180px; }
  .hero-dropzone small { max-width: 260px; line-height: 1.45; }
  .feature-strip { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .feature-strip > div:nth-child(2) { border-right: 0; }
  .studio { height: auto; min-height: calc(100vh - 58px); display: flex; flex-direction: column; }
  body.studio-open { overflow: hidden; }
  body.studio-open .studio { position: fixed; z-index: 40; inset: 58px 0 0; height: auto; min-height: 0; overflow-y: auto; }
  .viewport-wrap { height: 54vh; min-height: 390px; order: 1; }
  .sidebar-left { order: 2; border: 0; min-height: 580px; }
  .sidebar-right { order: 3; position: static; width: auto; max-height: none; margin: 0; border-width: 1px 0 0; border-radius: 0; }
  .viewport-toolbar { right: 12px; }
  .panel-scroll { overflow: visible; }
  .content-section, .formats-section, .seo-section, .format-details, .authoring-section, .faq-section { padding: 70px 18px; }
  .ad-placement { margin: -22px auto 48px; padding: 0; }
  .ad-card { width: 300px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .ad-card > span { margin-bottom: 7px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid article { min-height: 155px; }
  .steps-grid h3 { margin-top: 24px; }
  .formats-section { grid-template-columns: 1fr; gap: 35px; }
  .authoring-grid { grid-template-columns: 1fr; }
  .hero-package-actions { flex-direction: column; gap: 7px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-network { grid-column: auto; grid-row: auto; }
  .footer-meta { justify-self: start; text-align: left; }
  .footer-utility { justify-content: flex-start; }
  .consent-banner { grid-template-columns: 1fr; bottom: 10px; gap: 14px; }
  .consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .guide-shell { padding: 60px 18px 80px; }
  .guide-content { grid-template-columns: 1fr; gap: 28px; }
  .guide-aside { position: static; }
  .guide-cta { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}