:root {
    color-scheme:dark;
    --page:#101315;
    --surface:#1a1e21;
    --line:#303639;
    --muted:#8c969c;
    --text:#e5eaeb;
    --accent:#4bc9e6;
    --red:#fa504c;
    --amber:#edbd6f;
    font-family:Inter,Helvetica,Arial,sans-serif;
    font-synthesis:none
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--page);
    color:var(--text)
}

button,input {
    font:inherit
}

button {
    cursor:pointer;
    color:inherit;
    background:none;
    border:0
}

button:disabled {
    opacity:.35;
    cursor:not-allowed
}

button:focus-visible,a:focus-visible,input:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px
}

button:hover:not(:disabled) {
    background-color:#ffffff0b
}

a {
    color:inherit;
    text-decoration:none
}

a:hover {
    text-decoration:underline
}

.filter-definitions {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}

.workbench {
    max-width:1440px;
    margin:auto;
    padding:0 5%
}

.page-header {
    height:95px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #ffffff13
}

.wordmark {
    display:flex;
    align-items:center;
    gap:13px;
    letter-spacing:2px;
    font-size:13px;
    font-weight:750
}

.brand-mark {
    font-size:25px;
    letter-spacing:-6px;
    margin-right:8px;
    font-weight:800;
    color:var(--accent)
}

.brand-mark span {
    color:#ecf5f7
}

.edition {
    font-weight:400;
    font-size:10px;
    color:var(--muted);
    border-left:1px solid var(--line);
    padding-left:16px;
    letter-spacing:1.5px
}

.version,.eyebrow {
    font-size:10px;
    letter-spacing:2px;
    font-weight:600;
    color:var(--muted)
}

.intro {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:48px 0 38px;
    gap:30px
}

.eyebrow {
    margin:0 0 16px;
    color:var(--accent)
}

h1 {
    font-size:clamp(32px,4vw,55px);
    font-weight:500;
    line-height:1.06;
    letter-spacing:-2px;
    margin:0
}

h1 span {
    color:#879398
}

.intro-copy {
    font-size:14px;
    line-height:1.8;
    color:#a4adb2;
    max-width:295px;
    margin-bottom:2px
}

.concept-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:19px
}

.concept-tabs {
    display:flex;
    border:1px solid var(--line);
    padding:4px;
    border-radius:7px;
    gap:3px
}

.concept-tabs button {
    padding:12px 16px;
    border-radius:4px;
    color:#98a2a8;
    font-size:12px;
    white-space:nowrap
}

.concept-tabs button span {
    font-family:monospace;
    color:#66737a;
    margin-right:8px;
    font-size:10px
}

.concept-tabs button[aria-pressed=true] {
    background:#2a3236;
    color:#f4f7f8;
    box-shadow:0 1px 5px #0004
}

.concept-tabs button[aria-pressed=true] span {
    color:var(--accent)
}

.preview-options {
    display:flex;
    gap:6px
}

.preview-options button {
    font-size:11px;
    padding:12px;
    color:#b3bec3;
    border:1px solid var(--line);
    border-radius:5px
}

.camera-wrap {
    padding:10px;
    background:#07090a;
    border:1px solid #343b40;
    border-radius:19px;
    box-shadow:0 28px 70px #0005
}

.camera {
    container-type:inline-size;
    isolation:isolate;
    position:relative;
    aspect-ratio:2.05;
    min-height:330px;
    overflow:hidden;
    border-radius:10px;
    background:#111517;
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 92px;
    grid-template-rows:70px minmax(0,1fr) 64px;
    grid-template-areas:'top top top' 'tools monitor transport' 'status status status';
    font-size:12px;
    --accent:#4bc9e6
}

.camera button {
    touch-action:manipulation
}

.topbar {
    grid-area:top;
    display:flex;
    align-items:stretch;
    border-bottom:1px solid #ffffff12;
    background:#171c1f;
    z-index:3
}

.camera-brand {
    padding:0 20px;
    display:flex;
    gap:10px;
    align-items:center;
    font-size:11px;
    letter-spacing:1.2px;
    font-weight:700
}

.camera-brand .brand-mark {
    font-size:21px
}

.param {
    flex:1;
    min-width:0;
    text-align:left;
    padding:10px 17px;
    position:relative;
    border-left:1px solid #ffffff0d
}

.param:after {
    content:'';
    position:absolute;
    bottom:0;
    left:17px;
    right:17px;
    height:2px;
    background:transparent
}

.param.selected:after {
    background:var(--accent)
}

.param-label {
    display:block;
    color:#87959c;
    font-size:9px;
    letter-spacing:1.2px;
    margin-bottom:6px;
    font-weight:600
}

.param-value {
    font-family:'SFMono-Regular',Consolas,monospace;
    font-size:21px;
    letter-spacing:-.5px;
    white-space:nowrap
}

.param-value small {
    font-size:10px;
    color:#9ca9b1;
    letter-spacing:0;
    margin-left:4px
}

.param-auto {
    color:var(--accent);
    font-size:9px;
    margin-left:5px
}

.top-actions {
    display:flex;
    align-items:center;
    gap:2px;
    padding:0 10px
}

.icon-btn {
    width:42px;
    height:44px;
    display:grid;
    place-content:center;
    color:#a3afb6;
    border-radius:4px
}

.icon-btn svg,.tool svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round
}

.tool-rail {
    grid-area:tools;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:8px;
    background:#151a1d;
    border-right:1px solid #ffffff0c;
    z-index:2
}

.tool {
    min-height:49px;
    padding:8px 2px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    border-radius:4px;
    color:#89979f;
    font-size:8px;
    letter-spacing:.7px
}

.tool[aria-pressed=true] {
    color:var(--accent);
    background:#4bc9e615
}

.monitor {
    grid-area:monitor;
    position:relative;
    min-height:0;
    min-width:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#050708;
    cursor:crosshair
}

.image-frame {
    position:relative;
    aspect-ratio:16/9;
    width:100%;
    max-height:100%;
    overflow:hidden;
    container-type:size
}

.scene,.peak-image {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:filter .2s,transform .25s
}

.peak-image {
    position:absolute;
    inset:0;
    mix-blend-mode:screen;
    filter:url(#peaking);
    pointer-events:none
}

.scene[data-false=true] {
    filter:url(#false-color)!important
}

.monitor.magnified .scene,.monitor.magnified .peak-image {
    transform:scale(2)
}

.monitor-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(#0004,transparent 25%,transparent 70%,#0005);
    pointer-events:none
}

.frame-guides {
    position:absolute;
    inset:13% 3%;
    border:1px solid #eee9;
    pointer-events:none
}

.frame-guides:before,.frame-guides:after {
    content:'';
    position:absolute;
    inset:0 33.333%;
    border-inline:1px solid #fff3
}

.frame-guides:after {
    inset:33.333% 0;
    border:0;
    border-block:1px solid #fff3
}

.frame-guides span {
    position:absolute;
    right:0;
    top:-19px;
    font-size:8px;
    letter-spacing:1px;
    color:#eee
}

.crosshair {
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:14px;
    transform:translate(-50%,-50%);
    opacity:.65
}

.crosshair:before,.crosshair:after {
    content:'';
    position:absolute;
    background:#fff;
    left:6px;
    top:0;
    width:1px;
    height:14px
}

.crosshair:after {
    transform:rotate(90deg)
}

.focus-box {
    position:absolute;
    width:48px;
    height:48px;
    border:1px solid var(--accent);
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 1px #0004;
    pointer-events:none
}

.monitor-label {
    position:absolute;
    left:16px;
    top:15px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:9px;
    letter-spacing:1.5px;
    text-shadow:0 1px 5px #000
}

.monitor-label i {
    width:5px;
    height:5px;
    background:#e3f5e5;
    border-radius:50%
}

.monitor-top-right {
    position:absolute;
    right:16px;
    top:15px;
    font:10px monospace;
    color:#d9e1e3;
    letter-spacing:1px
}

.monitor-bottom {
    position:absolute;
    left:16px;
    bottom:15px;
    font-size:9px;
    letter-spacing:1px;
    display:flex;
    gap:12px
}

.monitor-bottom span {
    background:#101819b0;
    padding:5px 7px;
    border:1px solid #ffffff15;
    border-radius:2px
}

.monitor-bottom .look-label {
    color:#b6dce2
}

.false-legend {
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:1px;
    align-items:center;
    font:8px monospace;
    background:#111c;
    padding:5px
}

.false-legend i {
    width:16px;
    height:6px
}

.transport {
    grid-area:transport;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    background:#151a1d;
    padding:12px 6px;
    border-left:1px solid #ffffff0c;
    z-index:2
}

.lens-button {
    font-family:monospace;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    font-size:16px;
    width:100%;
    padding:7px 0
}

.lens-button small {
    font:8px Arial;
    letter-spacing:1px;
    color:#8d9ba2
}

.record-button {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    width:76px;
    padding:10px 0;
    font-size:9px;
    letter-spacing:1.5px
}

.record-ring {
    border:1px solid #b95350;
    border-radius:50%;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    background:#fa504c09;
    box-shadow:0 0 0 4px #fa504c04
}

.record-dot {
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--red);
    transition:all .2s
}

.is-recording .record-dot {
    width:24px;
    height:24px;
    border-radius:5px
}

.is-recording .record-ring {
    border-color:var(--red)
}

.is-recording .monitor:after {
    content:'';
    position:absolute;
    inset:0;
    border:2px solid var(--red);
    pointer-events:none;
    z-index:1
}

.transport-bottom {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px
}

.statusbar {
    grid-area:status;
    display:flex;
    flex-direction:column;
    background:#171c1f;
    z-index:3;
    border-top:1px solid #ffffff16
}

.status-primary {
    min-height:37px;
    display:flex;
    align-items:center;
    gap:17px;
    padding:0 18px;
    font-size:10px
}

.format-tag {
    color:#d2dce0;
    display:flex;
    gap:9px;
    align-items:center;
    font-family:monospace
}

.format-tag b {
    padding:2px 5px;
    border:1px solid #62717a;
    border-radius:2px;
    font-size:9px;
    font-weight:500
}

.status-take {
    color:#87959c;
    font-family:monospace
}

.record-status {
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:auto;
    font:11px monospace;
    letter-spacing:1px
}

.status-dot {
    height:6px;
    width:6px;
    border-radius:50%;
    background:#aec8b8
}

.is-recording .record-status {
    color:#ff7673
}

.is-recording .status-dot {
    background:var(--red);
    animation:blink 1.4s infinite
}

.timecode {
    font:14px monospace;
    letter-spacing:1px;
    min-width:96px
}

.audio {
    display:flex;
    align-items:center;
    gap:5px;
    margin-left:5px
}

.audio-label {
    font:8px monospace;
    color:#8e9ca3
}

.audio-bars {
    display:flex;
    flex-direction:column;
    gap:3px;
    width:52px
}

.audio-bars i {
    height:3px;
    background:repeating-linear-gradient(90deg,#a8c9b0 0 3px,transparent 3px 5px);
    width:78%
}

.audio-bars i:last-child {
    width:62%
}

.audio.active i {
    animation:meter 1.3s steps(5) infinite alternate
}

.audio.active i:last-child {
    animation-delay:-.7s
}

.health-strip {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:26px;
    border-top:1px solid #ffffff08;
    padding:0 18px;
    background:#121719;
    font:9px monospace;
    color:#8b9aa3
}

.health-strip button {
    font:inherit;
    padding:5px 0;
    display:flex;
    align-items:center;
    gap:9px
}

.health-strip .drive {
    color:var(--accent);
    font-size:8px;
    border:1px solid #4bc9e644;
    padding:1px 4px;
    border-radius:2px
}

.health-spacer {
    flex:1
}

.buffer-meter {
    width:55px;
    height:3px;
    background:#ffffff15;
    display:inline-block;
    vertical-align:middle;
    margin-left:6px
}

.buffer-meter i {
    display:block;
    width:12%;
    height:100%;
    background:var(--accent)
}

.warning .health-strip {
    color:var(--amber);
    background:#2c2418
}

.warning .buffer-meter i {
    background:var(--amber);
    width:82%
}

.studio-panel {
    display:none
}

.operator-shelf {
    display:none
}

.clean-exit {
    display:none;
    position:absolute;
    right:18px;
    top:18px;
    padding:12px;
    background:#0b1115aa;
    border:1px solid #ffffff40;
    border-radius:4px;
    z-index:8;
    color:#fff;
    font-size:10px
}

.clean-state {
    display:none;
    position:absolute;
    bottom:18px;
    left:20px;
    background:#0b1115aa;
    padding:8px 10px;
    border-radius:3px;
    z-index:3;
    font:11px monospace
}

.camera.clean {
    display:block;
    background:#000
}

.clean .topbar,.clean .tool-rail,.clean .transport,.clean .statusbar,.clean .studio-panel,.clean .operator-shelf {
    display:none!important
}

.clean .monitor {
    height:100%;
    width:100%;
    position:absolute;
    inset:0
}

.clean .clean-exit,.clean .clean-state {
    display:flex;
    gap:10px;
    align-items:center
}

.clean .monitor-label,.clean .monitor-top-right,.clean .monitor-bottom {
    display:none
}

.clean .image-frame {
    height:100%;
    width:auto;
    max-width:100%
}

.camera.locked .lock-control {
    color:var(--accent);
    background:#4bc9e615
}

.camera[data-layout=operator] {
    grid-template-columns:1fr 90px;
    grid-template-rows:58px minmax(0,1fr) 56px;
    grid-template-areas:'top transport' 'monitor transport' 'status transport'
}

.camera[data-layout=operator] .monitor {
    grid-area:auto;
    position:absolute;
    inset:0 90px 0 0
}

.camera[data-layout=operator] .image-frame {
    width:100%;
    height:100%;
    aspect-ratio:auto
}

.camera[data-layout=operator] .topbar {
    background:linear-gradient(#080d12dc,#080d1240);
    border-bottom:0
}

.camera[data-layout=operator] .camera-brand {
    display:none
}

.camera[data-layout=operator] .param {
    border:0;
    padding:12px
}

.camera[data-layout=operator] .param-value {
    font-size:19px
}

.camera[data-layout=operator] .param-label {
    color:#c2cccf
}

.camera[data-layout=operator] .tool-rail {
    display:none
}

.camera[data-layout=operator] .statusbar {
    background:linear-gradient(transparent,#0a1119d9);
    border:0;
    align-self:end
}

.camera[data-layout=operator] .health-strip {
    background:#0a11198c;
    border:0
}

.camera[data-layout=operator] .transport {
    background:#151a1d
}

.camera[data-layout=operator] .monitor-label {
    top:78px
}

.camera[data-layout=operator] .monitor-top-right {
    top:78px
}

.camera[data-layout=operator] .monitor-bottom {
    bottom:122px
}

.camera[data-layout=operator] .frame-guides {
    inset:19% 3% 25%
}

.camera[data-layout=operator] .operator-shelf {
    display:flex;
    position:absolute;
    bottom:69px;
    left:50%;
    transform:translateX(-65%);
    z-index:3;
    background:#0b141bbc;
    border:1px solid #ffffff25;
    border-radius:7px;
    backdrop-filter:blur(12px);
    padding:3px 7px;
    gap:3px
}

.operator-shelf .tool {
    min-width:52px;
    min-height:43px;
    padding:6px
}

.operator-shelf .tool svg {
    width:17px;
    height:17px
}

.camera[data-layout=operator].clean .monitor {
    inset:0
}

.camera[data-layout=studio] {
    grid-template-columns:62px minmax(0,1fr) 30%;
    grid-template-rows:47px minmax(0,1fr) 64px;
    grid-template-areas:'top top top' 'tools monitor panel' 'status status panel'
}

.camera[data-layout=studio] .topbar .param {
    display:none
}

.camera[data-layout=studio] .top-actions {
    margin-left:auto
}

.studio-top-label {
    display:none;
    color:#93a1a8;
    font:10px monospace;
    align-self:center;
    margin-left:12px;
    letter-spacing:.5px
}

.camera[data-layout=studio] .studio-top-label {
    display:block
}

.camera[data-layout=studio] .transport {
    display:none
}

.camera[data-layout=studio] .studio-panel {
    grid-area:panel;
    display:flex;
    flex-direction:column;
    min-height:0;
    background:#1b2125;
    border-left:1px solid #ffffff15;
    z-index:3
}

.studio-tabs {
    display:flex;
    border-bottom:1px solid #ffffff10;
    padding:8px 8px 0;
    gap:2px
}

.studio-tabs button {
    font-size:9px;
    padding:12px 4px;
    flex:1;
    border-bottom:2px solid transparent;
    color:#8f9da5
}

.studio-tabs button[aria-selected=true] {
    border-color:var(--accent);
    color:var(--accent)
}

.studio-content {
    padding:16px;
    flex:1;
    overflow:auto;
    min-height:0;
    scrollbar-width:thin
}

.studio-section-label {
    font-size:9px;
    letter-spacing:1.5px;
    color:#9aabb5;
    display:flex;
    justify-content:space-between;
    margin-bottom:14px
}

.studio-section-label span {
    color:var(--accent);
    font-size:8px
}

.studio-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}

.studio-grid .param {
    border:1px solid #ffffff10;
    padding:12px;
    background:#12191d;
    border-radius:4px;
    min-height:67px
}

.studio-grid .param-value {
    font-size:20px
}

.studio-grid .param-label {
    font-size:8px
}

.studio-note {
    font-size:10px;
    line-height:1.7;
    color:#94a2aa;
    margin:13px 0 0
}

.studio-record {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 16px;
    border-top:1px solid #ffffff12;
    background:#171d20;
    gap:10px
}

.studio-record .record-button {
    flex-direction:row;
    width:auto;
    gap:12px;
    font-size:10px
}

.studio-record .record-ring {
    height:37px;
    width:37px
}

.studio-record .record-dot {
    height:27px;
    width:27px
}

.studio-record .record-button .record-dot.stop {
    height:16px;
    width:16px;
    border-radius:3px
}

.studio-record .timecode {
    font-size:12px
}

.studio-info-row {
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #ffffff0a;
    font-size:10px;
    color:#a4b2bb
}

.studio-info-row b {
    color:#e1e9ed;
    font-weight:500
}

.studio-wide-button {
    display:block;
    text-align:left;
    width:100%;
    border:1px solid #ffffff18;
    padding:12px;
    margin:7px 0;
    border-radius:3px;
    font-size:11px
}

.studio-wide-button[aria-pressed=true] {
    color:var(--accent);
    border-color:#4bc9e670;
    background:#4bc9e60a
}

.studio-content input[type=range] {
    width:100%;
    accent-color:var(--accent);
    margin:18px 0 8px
}

.studio-content label {
    font-size:11px;
    color:#b9c5cb
}

.studio-content .audio {
    height:55px;
    margin:8px 0
}

.studio-content .audio-bars {
    width:85%;
    gap:6px
}

.studio-content .audio-bars i {
    height:8px
}

.camera[data-layout=studio] .status-primary {
    gap:10px;
    padding:0 12px
}

.camera[data-layout=studio] .status-take {
    display:none
}

.camera[data-layout=studio] .health-strip {
    padding:0 12px;
    gap:8px
}

.camera[data-layout=studio] .health-thermal {
    display:none
}

.camera[data-layout=studio] .monitor-bottom {
    font-size:8px;
    left:10px;
    gap:5px
}

.panel-shade {
    position:absolute;
    inset:0;
    z-index:9;
    background:#03060745;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:14px
}

.adjust-panel {
    width:640px;
    max-width:100%;
    background:#20282df5;
    border:1px solid #4b5960;
    border-radius:8px;
    box-shadow:0 12px 50px #000a;
    backdrop-filter:blur(18px);
    padding:20px
}

.adjust-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px
}

.adjust-title {
    font-size:10px;
    letter-spacing:2px;
    color:#a4b5be
}

.adjust-reading {
    font:29px monospace;
    margin-left:15px;
    color:#eef5f7
}

.close-panel {
    width:36px;
    height:36px;
    border:1px solid #ffffff15;
    border-radius:4px;
    font-size:20px;
    color:#a8b7be
}

.preset-list {
    display:flex;
    gap:6px;
    margin-bottom:13px
}

.preset-list button {
    flex:1;
    border:1px solid #ffffff15;
    border-radius:3px;
    padding:11px 4px;
    font:12px monospace;
    background:#10191c
}

.preset-list button.active {
    border-color:var(--accent);
    background:#4bc9e617;
    color:var(--accent)
}

.ruler {
    padding:13px 0 0;
    background:repeating-linear-gradient(90deg,transparent 0 9px,#ffffff27 9px 10px) top left/100% 8px no-repeat
}

.ruler input {
    width:100%;
    accent-color:var(--accent);
    height:26px;
    cursor:ew-resize
}

.adjust-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#93a6b0;
    font-size:10px;
    margin-top:9px;
    gap:10px
}

.auto-toggle {
    border:1px solid #ffffff22;
    border-radius:3px;
    padding:8px 13px;
    font-size:9px;
    letter-spacing:1px
}

.auto-toggle.active {
    color:var(--accent);
    border-color:var(--accent)
}

.dialog-text {
    font-size:12px;
    line-height:1.7;
    color:#b0bdc4
}

.menu-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}

.menu-list button {
    padding:15px;
    text-align:left;
    font-size:11px;
    background:#10191c;
    border:1px solid #ffffff14;
    border-radius:4px
}

.menu-list button.active {
    border-color:var(--accent);
    color:var(--accent)
}

.clip-list {
    max-height:210px;
    overflow:auto
}

.clip {
    display:flex;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #ffffff14;
    gap:14px;
    font:11px monospace
}

.clip img {
    width:80px;
    height:45px;
    object-fit:cover;
    border-radius:3px
}

.clip small {
    display:block;
    color:#8b9da7;
    margin-top:5px;
    font-size:9px
}

.clip span:last-child {
    margin-left:auto;
    color:var(--accent)
}

.scope {
    position:absolute;
    right:15px;
    bottom:45px;
    width:150px;
    height:68px;
    background:#071016c9;
    border:1px solid #ffffff20;
    border-radius:2px;
    padding:6px;
    pointer-events:none
}

.scope svg {
    width:100%;
    height:100%
}

.scope span {
    position:absolute;
    top:4px;
    left:6px;
    font:7px monospace;
    color:#a0b8c1
}

.concept-description {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10%;
    padding:35px 0 30px
}

.concept-description .eyebrow {
    font-size:9px;
    margin-bottom:11px
}

h2 {
    font-size:22px;
    font-weight:500;
    letter-spacing:-.5px;
    margin:0 0 12px
}

.concept-description p:not(.eyebrow) {
    font-size:12px;
    line-height:1.8;
    color:#9eaab1;
    max-width:470px;
    margin:0
}

.try-card {
    border-left:1px solid var(--line);
    padding-left:28px
}

.shortcuts {
    display:flex;
    gap:17px;
    margin-top:15px;
    color:#7f8c94;
    font-size:9px
}

.shortcuts span {
    white-space:nowrap
}

kbd {
    font:9px monospace;
    padding:3px 5px;
    background:#232b30;
    border:1px solid #37424a;
    border-radius:3px;
    margin-right:3px;
    color:#becad0
}

.page-footer {
    padding:18px 0 25px;
    border-top:1px solid #ffffff12;
    display:flex;
    align-items:center;
    gap:16px;
    color:#667780;
    font-size:9px;
    line-height:1.6
}

.page-footer button {
    font-size:10px;
    color:#afbdc5;
    margin-left:auto;
    white-space:nowrap
}

.page-footer a {
    text-decoration:underline
}

#toast {
    position:fixed;
    bottom:25px;
    left:50%;
    transform:translate(-50%,12px);
    padding:12px 19px;
    z-index:30;
    border:1px solid #42525c;
    background:#202c33f5;
    border-radius:6px;
    box-shadow:0 6px 25px #0005;
    font-size:12px;
    color:#e5f1f5;
    opacity:0;
    pointer-events:none;
    transition:.2s;
    max-width:90vw;
    text-align:center
}

#toast.visible {
    opacity:1;
    transform:translate(-50%,0)
}

body.expanded {
    overflow:hidden
}

body.expanded .camera-wrap {
    position:fixed;
    inset:0;
    z-index:20;
    border:0;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-radius:0
}

body.expanded .camera {
    width:100%;
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    min-height:0
}

.exit-expand {
    display:none
}

body.expanded .exit-expand {
    display:grid
}

@keyframes blink {
    50% {
        opacity:.45
    }
}

@keyframes meter {
    0% {
        width:45%
    }
    30% {
        width:86%
    }
    60% {
        width:60%
    }
    100% {
        width:95%
    }
}

@media(min-width:1200px) {
    .camera {
        grid-template-columns:78px minmax(0,1fr) 100px;
        grid-template-rows:76px minmax(0,1fr) 68px
    }
    .camera[data-layout=console] .tool {
        min-height:57px
    }
    .status-primary {
        min-height:40px
    }
    .health-strip {
        min-height:28px
    }
}

@media(max-width:1000px) {
    .workbench {
        padding:0 3%
    }
    .camera-brand {
        padding:0 12px
    }
    .camera-brand>span:last-child {
        display:none
    }
    .param {
        padding:10px 12px
    }
    .param-value {
        font-size:18px
    }
    .camera {
        grid-template-columns:62px minmax(0,1fr) 80px;
        grid-template-rows:62px minmax(0,1fr) 64px
    }
    .tool {
        min-height:44px
    }
    .tool-rail {
        gap:2px
    }
    .record-ring {
        width:52px;
        height:52px
    }
    .record-dot {
        width:38px;
        height:38px
    }
    .concept-tabs button {
        padding:11px
    }
    .status-take {
        display:none
    }
    .studio-content {
        padding:12px
    }
    .studio-grid .param {
        padding:9px;
        min-height:59px
    }
    .camera[data-layout=studio] .status-primary>.audio {
        display:none
    }
    .camera[data-layout=studio] .health-strip .buffer-meter {
        display:none
    }
    .camera[data-layout=studio] .health-strip {
        font-size:8px
    }
    .studio-section-label {
        margin-bottom:10px
    }
    .studio-tabs button {
        font-size:8px
    }
    .studio-record {
        padding:6px 12px
    }
    .studio-record .timecode {
        min-width:0;
        font-size:10px
    }
}

@media(max-width:720px) {
    .page-header {
        height:70px
    }
    .version {
        display:none
    }
    .intro {
        padding:30px 0;
        align-items:flex-start
    }
    .intro-copy {
        max-width:210px;
        font-size:12px
    }
    .concept-bar {
        flex-wrap:wrap
    }
    .concept-tabs {
        width:100%
    }
    .concept-tabs button {
        flex:1;
        font-size:11px;
        padding:12px 5px
    }
    .preview-options {
        margin-left:auto
    }
    .camera-wrap {
        padding:5px;
        border-radius:11px;
        overflow:auto
    }
    .camera {
        min-width:650px;
        min-height:340px
    }
    .concept-description {
        gap:25px
    }
    .shortcuts {
        flex-wrap:wrap;
        gap:10px
    }
    .page-footer {
        flex-wrap:wrap
    }
    .page-footer>span:first-child {
        max-width:75%
    }
    .page-footer>span:last-child {
        width:100%
    }
    .try-card {
        padding-left:18px
    }
    .camera[data-layout=studio] {
        grid-template-columns:52px minmax(0,1fr) 31%
    }
    .camera[data-layout=studio] .studio-grid .param-value {
        font-size:17px
    }
    .camera[data-layout=studio] .studio-record {
        flex-wrap:wrap;
        gap:0
    }
    .camera[data-layout=studio] .health-strip .buffer-info {
        display:none
    }
    body.expanded .camera {
        min-width:0
    }
    .camera[data-layout=studio] .health-strip .health-battery {
        margin-left:auto
    }
}

@media(max-width:500px) {
    .intro {
        display:block
    }
    .intro-copy {
        max-width:100%;
        margin-top:20px
    }
    .concept-description {
        grid-template-columns:1fr
    }
    .try-card {
        padding:0;
        border:0
    }
    .edition {
        font-size:8px
    }
    .concept-tabs button span {
        margin-right:3px
    }
    body.expanded .camera {
        min-width:650px
    }
    body.expanded .camera-wrap {
        overflow:auto
    }
}

@media(orientation:landscape) and (max-height:520px) {
    body.expanded .camera {
        grid-template-rows:55px minmax(0,1fr) 55px;
        grid-template-columns:58px minmax(0,1fr) 75px
    }
    .camera .tool {
        min-height:40px;
        padding:5px 2px;
        gap:3px
    }
    .camera .tool svg {
        height:17px;
        width:17px
    }
    .camera .tool-rail {
        gap:0;
        padding:4px
    }
    .camera .transport {
        padding:6px 3px
    }
    .camera .transport-bottom {
        flex-direction:row
    }
    .camera .transport-bottom .tool {
        min-width:32px
    }
    .camera .record-button {
        gap:5px;
        width:65px
    }
    .camera .record-ring {
        width:46px;
        height:46px
    }
    .camera .record-dot {
        width:34px;
        height:34px
    }
    .camera.is-recording .record-dot {
        width:19px;
        height:19px
    }
    .camera .status-primary {
        min-height:31px
    }
    .camera .health-strip {
        min-height:24px
    }
    .camera .studio-record .record-ring {
        width:31px;
        height:31px
    }
    .camera .studio-record .record-dot {
        width:23px;
        height:23px
    }
    .camera .studio-content {
        padding:10px
    }
    .camera .studio-tabs {
        padding-top:0
    }
    .camera .studio-tabs button {
        padding:10px 4px
    }
    .camera .studio-grid .param {
        min-height:54px;
        padding:8px
    }
    .camera .studio-note {
        margin-top:7px;
        font-size:9px
    }
    .camera .adjust-panel {
        padding:12px 16px
    }
    .camera .adjust-heading {
        margin-bottom:8px
    }
    .camera .panel-shade {
        padding:8px
    }
    .camera .studio-record .record-button {
        width:auto
    }
    body.expanded .camera[data-layout=operator] {
        grid-template-columns:1fr 75px;
        grid-template-rows:55px minmax(0,1fr) 55px
    }
    body.expanded .camera[data-layout=operator] .monitor {
        right:75px
    }
    body.expanded .camera[data-layout=studio] {
        grid-template-columns:54px minmax(0,1fr) 30%;
        grid-template-rows:42px minmax(0,1fr) 55px
    }
    .camera .health-thermal {
        display:none
    }
    .camera .param-value {
        font-size:18px
    }
    .camera .param-label {
        margin-bottom:4px
    }
    .camera .camera-brand {
        padding:0 10px
    }
}

.camera .monitor {
    container-type:size
}

.camera .image-frame,.camera[data-layout=operator] .image-frame,.camera.clean .image-frame {
    width:min(100cqw,189.63cqh);
    height:min(100cqh,52.7344cqw);
    aspect-ratio:4096/2160;
    flex:none
}

.camera .frame-guides,.camera[data-layout=operator] .frame-guides {
    inset:12.71% 3%
}

.frame-guides span {
    top:auto;
    bottom:5px;
    right:5px;
    text-shadow:0 1px 4px #000
}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
}