.og-studio{max-width:1460px;margin:auto;padding:clamp(.75rem,2vw,1.5rem)}
.og-studio-hero{display:grid;gap:1rem;align-items:center;padding:clamp(1.15rem,2.6vw,2rem);border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,var(--raised),var(--subtle));overflow:hidden}.og-hero-copy h1{font:400 clamp(1.85rem,3.7vw,3.35rem)/1.02 Georgia,"Times New Roman",serif;letter-spacing:-.045em;max-width:none;margin:.2rem 0 .65rem}.og-studio-lead{max-width:62ch;color:var(--muted);font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.58;margin:0}.og-hero-formats{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0 0}.og-hero-formats span{display:inline-flex;align-items:center;padding:.28rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));font-size:.7rem;font-weight:750;color:var(--ink)}.og-hero-pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}.og-hero-pills span{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.72rem;font-weight:700}.og-hero-pills .icon{width:16px;height:16px}.og-hero-visual{display:flex;align-items:end;justify-content:center;gap:.7rem;min-height:170px}.og-format-card{display:grid;place-items:center;align-content:space-between;gap:.28rem;padding:.5rem;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,var(--surface),var(--raised));box-shadow:0 14px 30px #10213a12}.og-format-card i{display:block;width:100%;height:100%;min-height:52px;border-radius:10px;border:1px solid #ffffff85;background-image:linear-gradient(180deg,#ffffff0f,#0b12201f),url(../img/bridge-hero.webp);background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px #10213a10}.og-format-card b{font-size:.95rem;line-height:1}.og-format-card span{font-size:.63rem;color:var(--muted)}.og-format-card-wide{width:176px;aspect-ratio:1200/630}.og-format-card-square{width:118px;aspect-ratio:1}.og-format-card-tall{width:92px;aspect-ratio:4/5}
.og-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.8rem 0}.og-tabs button{min-height:50px;border:1px solid var(--border);background:var(--raised);color:var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:750;cursor:pointer}.og-tabs button.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.og-panel{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:clamp(.85rem,2vw,1.4rem)}.og-panel[hidden]{display:none}.og-panel-heading{max-width:800px;margin-bottom:1rem}.og-panel-heading-compact h2{font-size:clamp(1.35rem,2.3vw,2rem);margin:.15rem 0 .35rem}.og-panel-heading p:last-child{color:var(--muted);line-height:1.5;margin:0}.og-stepper{display:flex;gap:.35rem;overflow:auto;margin:0 0 1rem;padding-bottom:.15rem}.og-stepper span{flex:1;min-width:max-content;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem .65rem;border-radius:10px;background:var(--subtle);color:var(--muted);font-size:.72rem;font-weight:700}.og-stepper span.is-active{background:color-mix(in srgb,var(--accent) 11%,var(--surface));color:var(--accent)}.og-stepper b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid currentColor}
.og-drop{position:relative;display:grid!important;place-items:center;text-align:center;gap:.35rem;min-height:175px;border:2.5px dashed color-mix(in srgb,var(--accent) 78%,var(--border));border-radius:16px;background:linear-gradient(145deg,var(--subtle),var(--raised));background-image:linear-gradient(145deg,var(--subtle),var(--raised)),repeating-linear-gradient(45deg,#ffffffa8 0 10px,#ffffff00 10px 20px);background-blend-mode:normal,overlay;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent);cursor:pointer;padding:1.2rem;transition:border-color .15s,transform .15s,background .15s,box-shadow .15s}.og-drop:hover,.og-drop.is-dragover{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--raised));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}.og-drop:focus-within{outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:2px}.og-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.og-drop-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surface);color:var(--accent);box-shadow:0 8px 20px #10213a10}.og-drop strong{font-size:.98rem}.og-drop span:not(.og-drop-icon){color:var(--muted);font-size:.82rem}.og-drop small{font-size:.68rem;color:var(--muted)}.og-source-meta{margin:.65rem 0;padding:.65rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--raised);font-size:.76rem;overflow-wrap:anywhere}.og-editor-shell{display:grid;gap:.8rem;align-items:start}.og-controls,.og-preview-column,.og-batch-settings,.og-batch-files{border:1px solid var(--border);background:var(--raised);border-radius:15px;padding:.9rem}.og-controls{display:grid;gap:.8rem;align-content:start}.og-control-head{display:flex;justify-content:space-between;gap:.5rem;align-items:end}.og-control-head .eyebrow{margin:0}.og-control-head strong{font-size:.78rem}.og-controls fieldset{border:0;padding:0;margin:0}.og-controls legend{font-size:.73rem;font-weight:800;margin-bottom:.4rem}.og-controls label,.og-preview-column>label,.og-batch-settings label{display:grid;gap:.35rem;font-size:.76rem;font-weight:700}.og-value{float:right;color:var(--muted);font-weight:500}.field-hint{font-size:.7rem;color:var(--muted);line-height:1.4;margin:.3rem 0 0}.og-segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem}.og-segmented button{min-height:36px;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:8px;font-size:.68rem;font-weight:750;cursor:pointer}.og-segmented button.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}.og-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.button.compact{min-height:38px;padding:.45rem .55rem;font-size:.72rem}.og-color-row{display:flex;align-items:center;gap:.5rem}.og-color-row input{width:52px;height:36px;padding:2px}.og-color-row span{font-family:ui-monospace,monospace;font-size:.7rem;color:var(--muted)}
.og-workbench{min-width:0}.og-preset-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-bottom:.55rem}.og-preset-switch button{padding:.55rem .35rem;border:1px solid var(--border);background:var(--raised);color:var(--ink);border-radius:9px;cursor:pointer}.og-preset-switch strong{display:block;font-size:.75rem}.og-preset-switch small{display:block;font-size:.61rem;color:var(--muted)}.og-preset-switch button.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:color-mix(in srgb,var(--accent) 5%,var(--raised))}.og-frame-stage{border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,#152030,#101726);padding:.65rem}.og-frame-caption{display:flex;align-items:center;gap:.4rem;color:#e6edf7;font-size:.7rem;font-weight:650;padding:.1rem .15rem .55rem}.og-live-dot{width:7px;height:7px;border-radius:50%;background:#38c172;box-shadow:0 0 0 4px #38c17222}.og-canvas-wrap{position:relative;display:grid;place-items:center;min-height:290px;padding:.7rem;border-radius:12px;background:repeating-conic-gradient(#2b3750 0 25%,#1a2538 0 50%) 0/18px 18px;border:1px solid #ffffff18;overflow:hidden;touch-action:none}.og-canvas-wrap canvas{display:block;position:relative;z-index:1;max-width:100%;max-height:62dvh;width:auto;height:auto;border-radius:12px;border:1px solid #ffffff90;box-shadow:0 16px 48px #0007;background:#fff;cursor:grab;outline:none}.og-canvas-wrap canvas:active{cursor:grabbing}.og-canvas-wrap canvas:focus-visible{box-shadow:0 0 0 3px var(--accent),0 16px 48px #0007}.og-crop-grid{position:absolute;z-index:2;pointer-events:none;border:2px dashed #ffffffd8;border-radius:12px;box-shadow:inset 0 0 0 1px #00000022,0 0 0 1px #ffffff24;background-image:linear-gradient(to right,transparent 33.333%,rgba(255,255,255,.4) 33.333%,rgba(255,255,255,.4) calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent 66.666%,rgba(255,255,255,.4) 66.666%,rgba(255,255,255,.4) calc(66.666% + 1px),transparent calc(66.666% + 1px)),linear-gradient(to bottom,transparent 33.333%,rgba(255,255,255,.4) 33.333%,rgba(255,255,255,.4) calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent 66.666%,rgba(255,255,255,.4) 66.666%,rgba(255,255,255,.4) calc(66.666% + 1px),transparent calc(66.666% + 1px))}.og-safe-zone{position:absolute;z-index:3;border:1px dashed #fff9;pointer-events:none;border-radius:6px}.og-retention{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.55rem 0 0;padding:.65rem .75rem;border-radius:10px;background:var(--subtle);font-size:.72rem}.og-retention.is-warning .check-badge{color:var(--danger)}.og-retention #og-retention-detail{color:var(--muted);margin-left:auto}.og-drag-help{font-size:.7rem;color:var(--muted);margin:.45rem .1rem 0}
.og-preview-column{display:grid;gap:.72rem;align-content:start}.og-state-card{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.og-state-card .eyebrow{margin:0}.og-state-card h3{font-size:1rem;margin:.1rem 0 0}.og-state-badge{padding:.35rem .55rem;border-radius:999px;background:var(--subtle);font-size:.67rem;font-weight:800}.og-state-badge[data-state="ok"]{background:#e6f7ec;color:#176a3a}.og-state-badge[data-state="over"]{background:#fdeaea;color:#9f2525}.og-weight-card{border:1px solid var(--border);border-radius:12px;padding:.7rem;background:var(--surface)}.og-sharpness-status{display:flex;gap:.55rem;align-items:flex-start;border:1px solid #e5b854;border-radius:12px;padding:.7rem;background:#fff8e8;color:#6d4d00}.og-sharpness-status[hidden]{display:none}.og-sharpness-status strong{font-size:.74rem}.og-sharpness-status p{margin:.18rem 0 0;font-size:.68rem;line-height:1.4}.og-sharpness-status .check-badge{color:#8a6100}.og-weight-head{display:flex;justify-content:space-between;gap:.5rem;font-size:.72rem}.og-weight-head strong{font-size:.9rem}.og-gauge{position:relative;height:8px;background:#e7ebf1;border-radius:999px;margin:.55rem 0;overflow:hidden}.og-gauge span{display:block;height:100%;width:0;background:#39a963;border-radius:inherit;transition:width .2s,background .2s}.og-gauge i{position:absolute;left:66.66%;top:-2px;bottom:-2px;width:2px;background:#10213a44}.og-mini-previews{display:grid;gap:.5rem}.og-mini-previews button{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:.55rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:.45rem;color:var(--ink);cursor:pointer;text-align:left}.og-mini-previews button.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.og-mini-frame{display:grid;place-items:center;height:64px;background:#e7ebf1;border-radius:7px;overflow:hidden}.og-mini-frame canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto}.og-mini-previews span{display:grid;gap:.12rem}.og-mini-previews b{font-size:.72rem}.og-mini-previews small{font-size:.6rem;color:var(--muted)}.og-mini-previews em{font-style:normal}.og-export-button{width:100%;justify-content:center}
.og-batch-grid{display:grid;gap:.8rem}.og-drop-large{min-height:250px}.og-batch-settings{display:grid;gap:.8rem;align-content:start}.og-batch-settings h3,.og-batch-files h3{font-size:1rem;margin:0}.og-check{grid-template-columns:auto 1fr!important;align-items:start!important}.og-batch-files{min-width:0}.og-batch-head{display:flex;align-items:center;justify-content:space-between}.og-batch-files ul{max-height:440px;overflow:auto}.og-batch-files li{align-items:center}.og-batch-files li strong{overflow-wrap:anywhere}.og-batch-files li button{margin-left:auto}.og-batch-files .file-meta{color:var(--muted);font-size:.68rem;margin-left:auto}.og-batch-files .check-badge{color:var(--success)}.og-batch-output-summary{display:grid;gap:.35rem;margin:.45rem 0 0;padding:0;list-style:none;max-height:260px;overflow:auto}.og-batch-output-summary li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.45rem;align-items:center;padding:.45rem .5rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:.66rem}.og-batch-output-summary li span:nth-child(2){overflow-wrap:anywhere}.og-batch-output-summary li.is-over{border-color:#e4a5a5;background:#fff2f2}.og-batch-output-summary li.is-over .check-badge,.og-batch-output-summary li.is-over strong{color:#9f2525}.og-batch-output-summary li.is-ok .check-badge{color:#176a3a}
.og-audit-form{max-width:1000px;border:1px solid var(--border);border-radius:14px;padding:.9rem;background:var(--raised)}.og-audit-form>label{display:block;font-size:.76rem;font-weight:750;margin-bottom:.4rem}.og-audit-form>div{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}.og-audit-form input{min-height:50px}.og-audit-results{display:grid;gap:.8rem;margin-top:.8rem}.og-audit-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.og-audit-summary article,.og-audit-table,.og-audit-warnings{border:1px solid var(--border);border-radius:12px;background:var(--raised);padding:.85rem}.og-audit-summary strong{display:block;font-size:1.2rem}.og-audit-summary span{color:var(--muted);font-size:.7rem}.og-audit-table{overflow:auto}.og-audit-table table{width:100%;border-collapse:collapse;font-size:.75rem}.og-audit-table th,.og-audit-table td{padding:.6rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.og-audit-table th{width:180px}.og-audit-table td{overflow-wrap:anywhere}.og-audit-warnings ul{margin:.5rem 0 0;padding-left:1.2rem}.og-audit-warnings li{margin:.35rem 0;font-size:.75rem}.og-studio-notes{display:grid;gap:.65rem;margin-top:.8rem}.og-studio-notes article{display:flex;gap:.7rem;border:1px solid var(--border);border-radius:12px;background:var(--raised);padding:.85rem}.og-studio-notes h2{font-size:.9rem;margin:0 0 .2rem}.og-studio-notes p{color:var(--muted);font-size:.75rem;line-height:1.5;margin:0}
@media (min-width:760px){.og-studio-hero{grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr)}.og-audit-form>div{grid-template-columns:minmax(0,1fr) auto}.og-audit-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.og-studio-notes{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1120px){.og-editor-shell{grid-template-columns:265px minmax(0,1fr) 290px}.og-controls,.og-preview-column{position:sticky;top:78px}.og-batch-grid{grid-template-columns:minmax(300px,.8fr) minmax(270px,.6fr) minmax(0,1fr)}}
@media (max-width:700px){.og-studio{padding:.55rem}.og-studio-hero,.og-panel{border-radius:14px}.og-hero-formats{gap:.3rem}.og-hero-visual{min-height:104px}.og-format-card-wide{width:124px}.og-format-card-square{width:86px}.og-format-card-tall{width:66px}.og-tabs{grid-template-columns:1fr}.og-tabs button{justify-content:flex-start;padding:0 .85rem}.og-stepper span{font-size:.64rem}.og-single-drop{min-height:190px}.og-preset-switch{position:sticky;top:0;z-index:3;background:var(--surface);padding:.25rem 0}.og-canvas-wrap{min-height:220px;padding:.45rem}.og-retention #og-retention-detail{margin-left:0;width:100%}.og-mini-previews{grid-template-columns:repeat(3,1fr)}.og-mini-previews button{grid-template-columns:1fr;padding:.3rem}.og-mini-frame{height:60px}.og-mini-previews span{text-align:center}.og-action-grid{grid-template-columns:1fr 1fr}.og-audit-summary{grid-template-columns:1fr}.og-batch-grid{grid-template-columns:1fr}.og-preview-column{order:3}}
@media (max-width:410px){.og-hero-pills span{font-size:.65rem}.og-stepper{gap:.2rem}.og-stepper span{padding:.42rem .48rem}.og-stepper b{width:19px;height:19px}.og-preset-switch small{font-size:.55rem}.og-mini-frame{height:52px}.og-mini-previews small{font-size:.55rem}}
@media (prefers-reduced-motion:reduce){.og-studio *{scroll-behavior:auto!important;transition:none!important}}