:root { color-scheme: dark; --cyan: #47c6e5; --text: #e8eef0; --muted: #94a3ab; --line: #354149; --red: #ff5b56; --amber: #efba6b; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #101416; color: var(--text); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
button:hover:not(:disabled) { background-color: #ffffff0c; }
button:disabled { opacity: .38; cursor: not-allowed; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
.svg-defs { position: absolute; overflow: hidden; }
.workbench { max-width: 1440px; margin: auto; padding: 0 5%; }
.masthead { min-height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff14; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.brand b { color: var(--cyan); letter-spacing: -3px; font-size: 25px; margin-right: 6px; }
.brand span { border-left: 1px solid var(--line); padding-left: 15px; font-size: 9px; color: var(--muted); font-weight: 400; }
.masthead > a:last-child { font-size: 11px; color: var(--muted); }
.intro { display: flex; align-items: flex-end; justify-content: space-between; padding: 40px 0 32px; gap: 25px; }
.eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 2px; color: var(--cyan); margin: 0 0 15px; }
h1 { font-size: clamp(32px, 4vw, 52px); font-weight: 500; line-height: 1.09; letter-spacing: -1.8px; margin: 0; }
h1 span { color: #8a9aa3; }
.intro > p { font-size: 13px; line-height: 1.9; color: #a4b1b9; margin: 0; }
.workbench-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 0 16px; gap: 15px; }
.workbench-bar > div { display: flex; align-items: center; gap: 15px; }
.badge { font: 9px monospace; padding: 8px 10px; border: 1px solid #4bc9e64a; color: var(--cyan); border-radius: 3px; }
.desktop-note { color: #80939e; font-size: 10px; }
.workbench-bar button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; }
.camera-bezel { padding: 10px; background: #06090b; border: 1px solid #39434a; border-radius: 15px; box-shadow: 0 25px 60px #0005; }

.camera { position:relative; isolation:isolate; container-type:inline-size; display:grid; grid-template-columns:60px minmax(0,1fr) 88px; grid-template-rows:34px minmax(0,1fr) 29px; grid-template-areas:'brand brand brand' 'left screen right' 'health health health'; aspect-ratio:2.1; min-height:340px; background:#080f13; border-radius:8px; overflow:hidden; }
.camera button { touch-action:manipulation; }
.camera-header { grid-area:brand; display:flex; align-items:center; gap:18px; padding:0 17px; border-bottom:1px solid #ffffff12; background:#151e23; font:10px monospace; }
.camera-header>b { font:700 10px Arial; letter-spacing:1.5px; color:#dbe8ed; }
.camera-header>b span { margin-left:8px; font-size:8px; color:var(--cyan); font-weight:400; }
.capture-format { font:10px monospace; padding:7px 10px; border-left:1px solid #ffffff18; color:#d7e4eb; }
.capture-format span { color:#92a5b0; margin-left:8px; }
.capture-state { display:flex; align-items:center; gap:8px; margin-left:auto; font:10px monospace; color:#b9cfc3; }
.capture-state b { font-size:12px; color:#dde9ee; font-weight:400; margin-left:8px; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#b4cdbb; }
.recording .status-dot { background:var(--red); }
.recording .capture-state { color:var(--red); }
.header-battery { font:9px monospace; color:#94a7b1; }
.icon-button { display:grid; place-items:center; width:42px; min-height:42px; border-radius:4px; color:#a5bac6; flex-shrink:0; }
.icon-button svg,.tool-button svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.camera-header .icon-button { width:28px; min-height:28px; }
.camera-header .icon-button svg { width:16px; height:16px; }
.left-rail { grid-area:left; padding:12px 5px; display:flex; flex-direction:column; justify-content:center; gap:8px; border-right:1px solid #ffffff0b; background:#0f191f; }
.tool-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:52px; padding:7px 3px; border-radius:4px; font:8px Arial; letter-spacing:.6px; color:#8fa8b6; }
.tool-button[aria-pressed=true] { color:var(--cyan); background:#4bc9e615; }
.rail-divider { height:10px; }
.right-rail { grid-area:right; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:12px; background:#111a20; border-left:1px solid #ffffff0b; }
.record-button { margin:auto 0; min-height:100px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; font:10px monospace; letter-spacing:1px; }
.record-ring { display:grid; place-items:center; width:60px; height:60px; border:1px solid #dc6e68; border-radius:50%; background:#ff5b5608; }
.record-dot { width:44px; height:44px; border-radius:50%; background:var(--red); transition:all .15s; }
.recording .record-dot { width:24px; height:24px; border-radius:5px; }
.clips-button { display:flex; flex-direction:column; align-items:center; gap:8px; padding:7px 4px; font:8px Arial; letter-spacing:1px; color:#9db3bf; }
.clip-thumbnail { position:relative; display:block; width:49px; height:33px; border:1px solid #778994; border-radius:5px; overflow:hidden; }
.clip-thumbnail img { width:100%; height:100%; object-fit:cover; filter:brightness(.6); }
.clip-thumbnail i { position:absolute; inset:0; display:grid; place-items:center; color:white; font:18px Arial; }
.clip-thumbnail b { position:absolute; top:0; right:0; padding:2px 3px; color:#071419; background:var(--cyan); font:8px monospace; }
.lock-button[aria-pressed=true] { color:var(--cyan); background:#4bc9e615; }
.screen { grid-area:screen; position:relative; min-width:0; min-height:0; overflow:hidden; }
.live { height:100%; position:relative; background:#030709; }
.live-monitor { position:absolute; inset:0; display:grid; place-items:center; container-type:size; overflow:hidden; }
.image-frame { width:min(100cqw,189.63cqh); height:min(100cqh,52.7344cqw); position:relative; overflow:hidden; }
.scene,.peak { width:100%; height:100%; object-fit:cover; display:block; }
.peak { position:absolute; inset:0; mix-blend-mode:screen; filter:url(#p-peak); pointer-events:none; }
.magnified .scene,.magnified .peak { transform:scale(2); }
.false-color .scene { filter:url(#p-false)!important; }
.guides { position:absolute; inset:12.71% 3%; border:1px solid #ffffff80; pointer-events:none; }
.guides span { position:absolute; bottom:5px; right:5px; font:8px monospace; text-shadow:0 1px 4px #000; }
.cross { position:absolute; top:50%; left:50%; color:#ffffff80; transform:translate(-50%,-50%); font:22px monospace; pointer-events:none; }
.focus-target { position:absolute; width:52px; height:52px; border:1px solid var(--cyan); transform:translate(-50%,-50%); box-shadow:0 0 0 1px #0004; pointer-events:none; }
.focus-target span { position:absolute; bottom:-16px; left:0; font:9px monospace; color:var(--cyan); text-shadow:0 1px 4px #000; }
.live-parameters { position:absolute; top:0; left:0; right:0; display:flex; min-height:62px; background:#111c24e8; z-index:2; border-bottom:1px solid #ffffff18; }
.live-param { flex:1; min-width:0; padding:12px 18px; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:6px; border-right:1px solid #ffffff0d; position:relative; }
.live-param>span { display:flex; justify-content:space-between; font:9px Arial; letter-spacing:1.2px; color:#91a6b3; }
.live-param small { font:8px monospace; color:#5e899d; }
.live-param b { font:22px 'SFMono-Regular',Consolas,monospace; color:#eaf3f6; white-space:nowrap; }
.live-param.editing { box-shadow:inset 0 -2px var(--cyan); }
.live-param.off-speed b { color:var(--amber); }
.live-param.look-param b { font-size:17px; }
.monitor-corner { position:absolute; top:78px; left:14px; font:9px monospace; letter-spacing:1px; color:#d8e6ec; text-shadow:0 1px 4px #000; }
.monitor-corner.right { left:auto; right:14px; }
.preview-indicator { position:absolute; left:14px; top:100px; background:#0c1d24d9; padding:5px 7px; font:8px monospace; letter-spacing:.7px; color:var(--cyan); }
.focus-bar { position:absolute; bottom:0; left:0; right:0; z-index:2; min-height:62px; padding:8px 15px; display:flex; align-items:center; gap:14px; background:#0c171fe6; border-top:1px solid #ffffff15; }
.lens-picker { display:flex; gap:3px; padding-right:16px; border-right:1px solid #ffffff1a; }
.lens-picker button { min-width:48px; min-height:42px; border-radius:4px; padding:6px; font:15px monospace; }
.lens-picker small { font:8px Arial; margin-left:3px; color:#7896a8; }
.lens-picker button[aria-pressed=true] { color:var(--cyan); background:#4bc9e617; }
.focus-mode { min-width:45px; min-height:42px; font:12px monospace; color:#d3e7f0; border:1px solid #526673; border-radius:3px; }
.focus-mode[aria-pressed=true] { color:var(--cyan); border-color:#4bc9e66a; }
.focus-bar label { font:8px Arial; letter-spacing:1px; color:#839da9; }
.focus-end { font:8px monospace; color:#9fb8c6; }
#focus-slider { flex:1; min-width:40px; height:32px; margin:0; accent-color:var(--cyan); cursor:ew-resize; }
.health { grid-area:health; display:flex; align-items:center; gap:18px; padding:0 17px; border-top:1px solid #ffffff12; font:9px monospace; color:#839ca9; background:#101a20; }
.health button { font:inherit; padding:5px 0; }
.health .spacer { flex:1; }
.health .media { color:#a3c5d4; }
.warning .health { background:#332a1d; color:var(--amber); }
.warning .media { color:var(--amber); }
.mini-audio { width:65px; }
.meter { display:grid; grid-template-columns:6px 1fr; gap:3px 4px; font:6px monospace; color:#94aab6; }
.meter-track { height:3px; overflow:hidden; background:#ffffff10; }
.meter-fill { height:100%; display:block; background:repeating-linear-gradient(90deg,#acc9b4 0 3px,transparent 3px 5px); width:65%; animation:levels 1.5s steps(4) infinite alternate; }
.meter-scale { display:none; }
.meter.muted .meter-fill { width:0!important; animation:none; }
.recording .live-monitor::after { content:''; position:absolute; inset:0; border:2px solid var(--red); pointer-events:none; z-index:1; }
.camera-drawer { position:absolute; bottom:70px; right:10px; width:min(620px,calc(100% - 20px)); z-index:5; border:1px solid #52717f; border-radius:6px; background:#172833; box-shadow:0 5px 24px #0008; overflow:hidden; }
.adjustment-drawer { max-height:calc(100% - 140px); }
.settings-page { display:flex; flex-direction:column; max-height:inherit; }
.edit-heading { display:flex; align-items:center; gap:15px; min-height:48px; padding:7px 12px; border-bottom:1px solid #ffffff12; flex-shrink:0; }
.edit-heading>div { display:flex; align-items:center; gap:16px; }
.edit-heading>div>span { font:9px Arial; letter-spacing:1.2px; color:#9eb7c5; }
.selection-value { font:23px monospace; color:#e8f5fc; }
.edit-state { margin-left:auto; color:#6ea9c2; font:8px monospace; }
.drawer-close { width:34px; height:34px; display:grid; place-items:center; font:22px Arial; color:#aac1cf; border-radius:3px; margin-left:auto; }
.editor-content { padding:9px 11px; min-height:0; overflow:auto; scrollbar-width:thin; }
.preset-column { display:flex; gap:5px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.preset-option { flex:0 0 auto; min-width:70px; min-height:43px; padding:9px 11px; border:1px solid #ffffff19; background:#0b1921; border-radius:3px; font:13px monospace; white-space:nowrap; }
.preset-option[aria-checked=true] { color:var(--cyan); border-color:var(--cyan); background:#1d3c4c; }
.page-actions { display:flex; align-items:center; gap:9px; padding:7px 11px; border-top:1px solid #ffffff12; flex-shrink:0; }
.page-actions button { min-height:38px; min-width:68px; padding:7px 10px; border:1px solid #425e70; border-radius:3px; font:10px monospace; }
.page-actions .set { background:#2e657a; border-color:#4bc9e666; margin-left:auto; }
.page-actions .custom-button { border-color:transparent; color:#93b7c9; min-width:0; }
.edit-help { font:9px Arial; color:#92aebd; }
.custom-row,.tint-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-top:8px; }
.custom-row label,.tint-row label { font:9px Arial; color:#9fb9c8; letter-spacing:.5px; }
.custom-input,.tint-input { width:105px; min-height:38px; border:1px solid #55788a; border-radius:3px; background:#0c1921; padding:7px; color:#e9f7ff; font:15px monospace; }
.tint-row span { font:8px monospace; color:#779aa9; }
.input-error { color:#ffb093; font:10px Arial; }
.menu-drawer { top:72px; bottom:70px; width:min(380px,calc(100% - 20px)); }
.list-page { height:100%; display:grid; grid-template-rows:42px minmax(0,1fr); }
.view-heading { display:flex; align-items:center; gap:10px; padding:0 12px; min-height:42px; border-bottom:1px solid #ffffff15; font:10px monospace; }
.view-heading .crumb { color:#7597aa; }
.view-heading h2 { font:inherit; margin:0; }
.menu-items { min-height:0; overflow:auto; padding:6px 9px; scrollbar-width:thin; }
.menu-item { min-height:45px; padding:9px 7px; display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; text-align:left; font:11px monospace; border-bottom:1px solid #ffffff10; }
.menu-item span:last-child { color:#88b8ce; text-align:right; }
.menu-item[aria-pressed=true] span:last-child { color:var(--cyan); }
.tc-block { font:10px monospace; color:#9db5c2; padding:8px; }
.data-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; font:10px monospace; }
.data-row b { color:#d0e5ef; font-weight:400; }
.take-row { display:flex; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid #ffffff12; font:10px monospace; }
.take-row img { width:60px; height:38px; object-fit:cover; }
.take-row small { font:8px monospace; color:#8aabbc; display:block; margin-top:5px; }
.take-row>span:last-child { margin-left:auto; white-space:nowrap; }
.empty { color:#9cb6c5; font:10px monospace; line-height:1.7; padding:10px 4px; }
.restore-controls { display:none; }
.camera.clean { grid-template-columns:minmax(0,1fr) 88px; grid-template-areas:'brand brand' 'screen right' 'health health'; }
.clean .left-rail,.clean .live-parameters,.clean .focus-bar,.clean .monitor-corner { display:none; }
.clean .restore-controls { display:block; position:absolute; top:48px; left:15px; background:#0b1822b0; padding:11px; border:1px solid #ffffff35; border-radius:4px; font:10px Arial; z-index:6; }
@keyframes levels { 0% { width:48%; } 50% { width:74%; } 100% { width:63%; } }
.notes { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8%; padding: 32px 0; }
.notes h2 { font-size: 20px; font-weight: 400; margin: 0 0 13px; letter-spacing: -.4px; }
.notes p:not(.eyebrow) { color: #92a3ad; font-size: 12px; line-height: 1.8; margin: 0; }
.notes .keyboard { padding-top: 16px; font-size: 9px!important; }
kbd { font: 10px monospace; color: #d3dfe6; background: #25323b; border: 1px solid #3c4a54; padding: 3px 5px; border-radius: 2px; margin-left: 8px; }
kbd:first-child { margin-left: 0; }
.footnote { display: flex; align-items: center; gap: 22px; border-top: 1px solid #ffffff14; padding: 16px 0 25px; color: #71858f; font-size: 9px; line-height: 1.7; }
.footnote p { max-width: 600px; margin: 0; }
.footnote button { margin-left: auto; white-space: nowrap; font-size: 10px; color: #b4c2ca; }
.footnote a { max-width: 180px; }
#message { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: 90vw; padding: 12px 17px; border: 1px solid #4f6878; background: #223640; color: #e6f5fc; border-radius: 4px; font: 12px Arial; z-index: 50; opacity: 0; pointer-events: none; transition: opacity .15s; }
#message.visible { opacity: 1; }
body.expanded { overflow: hidden; }
body.expanded .camera-bezel { position: fixed; inset: 0; z-index: 20; border: 0; border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.expanded .camera { width: 100%; height: 100%; min-height: 0; border-radius: 0; aspect-ratio: auto; }
@keyframes levels { 0% { width: 48%; } 50% { width: 74%; } 100% { width: 63%; } }

@media(max-width:1100px) {
  .camera { grid-template-columns:54px minmax(0,1fr) 77px; }
  .live-param { padding:10px 12px; }
  .live-param b { font-size:19px; }
  .live-param.look-param b { font-size:15px; }
  .focus-bar { gap:9px; padding:8px 11px; }
  .lens-picker { padding-right:10px; }
  .lens-picker button { min-width:41px; }
  .record-ring { width:54px; height:54px; }
  .record-dot { width:40px; height:40px; }
}
@media(max-width:750px) {
  .workbench { padding:0 3%; }
  .camera-bezel { overflow:auto; padding:5px; }
  .camera { min-width:680px; }
  .desktop-note { display:none; }
  .intro>p { font-size:11px; }
  .masthead .brand span { display:none; }
  .notes { gap:24px; }
  .notes h2 { font-size:17px; }
  .footnote { flex-wrap:wrap; gap:12px; }
  .footnote p { max-width:80%; }
  .footnote a { max-width:100%; }
  body.expanded .camera { min-width:680px; }
  body.expanded .camera-bezel { overflow:auto; }
}
@media(max-width:500px) {
  .intro { display:block; padding:27px 0; }
  .intro>p { margin-top:20px; }
  .notes { grid-template-columns:1fr; }
  .masthead { min-height:70px; }
  .masthead>a:last-child { font-size:9px; }
}
@media(orientation:landscape) and (max-height:520px) {
  body.expanded .camera { grid-template-columns:49px minmax(0,1fr) 70px; grid-template-rows:28px minmax(0,1fr) 24px; }
  .camera .camera-header { gap:10px; padding:0 11px; }
  .camera-header>b { font-size:9px; }
  .camera-header>b span { font-size:7px; }
  .camera-header .capture-state { font-size:9px; }
  .camera-header .capture-state b { font-size:11px; }
  .camera-header .header-battery { font-size:8px; }
  .camera .left-rail { gap:3px; padding:6px 4px; }
  .camera .tool-button { min-height:44px; gap:4px; font-size:7px; }
  .tool-button svg { width:18px; height:18px; }
  .camera .right-rail { gap:5px; padding:5px 3px; }
  .camera .record-ring { width:51px; height:51px; }
  .camera .record-dot { width:37px; height:37px; }
  .camera.recording .record-dot { width:22px; height:22px; }
  .camera .record-button { min-height:80px; gap:8px; }
  .camera .live-parameters { min-height:50px; }
  .camera .live-param { padding:8px 10px; gap:4px; }
  .camera .live-param>span { font-size:8px; }
  .camera .live-param b { font-size:17px; }
  .camera .live-param.look-param b { font-size:14px; }
  .camera .monitor-corner { top:63px; font-size:8px; }
  .camera .preview-indicator { top:81px; font-size:7px; }
  .camera .focus-bar { min-height:49px; padding:4px 9px; gap:8px; }
  .camera .focus-mode { min-height:38px; min-width:39px; }
  .camera .lens-picker button { min-height:38px; min-width:36px; font-size:13px; }
  .camera .lens-picker small { font-size:7px; }
  .camera .focus-bar label { display:none; }
  .camera .health { font-size:8px; padding:0 12px; gap:12px; }
  .camera .camera-drawer { bottom:54px; }
  .camera .adjustment-drawer { max-height:calc(100% - 109px); }
  .camera .edit-heading { min-height:38px; padding:3px 10px; }
  .camera .selection-value { font-size:20px; }
  .camera .editor-content { padding:6px 9px; }
  .camera .preset-option { min-height:40px; min-width:65px; font-size:12px; padding:8px; }
  .camera .page-actions { padding:5px 9px; }
  .camera .page-actions button { min-height:36px; }
  .camera .menu-drawer { top:55px; }
  body.expanded .camera.clean { grid-template-columns:minmax(0,1fr) 70px; grid-template-areas:'brand brand' 'screen right' 'health health'; }
}
.camera .adjustment-drawer { top:70px; bottom:8px; width:min(340px,calc(100% - 24px)); max-height:none; }
.adjustment-drawer .settings-page { height:100%; max-height:100%; }
.adjustment-drawer .editor-content { display:flex; flex-direction:column; flex:1; }
.adjustment-drawer .preset-column { display:grid; grid-template-columns:1fr 1fr; align-content:start; overflow:auto; flex:1; min-height:43px; }
.adjustment-drawer .preset-option { min-width:0; padding:9px 5px; font-size:12px; }
.adjustment-drawer .custom-row,.adjustment-drawer .tint-row { flex-shrink:0; }
.adjustment-drawer .edit-help { display:none; }
.adjustment-drawer .edit-heading { gap:8px; }
.adjustment-drawer .edit-heading>div { gap:10px; }
.adjustment-drawer .selection-value { font-size:20px; }
.adjustment-drawer .edit-state { font-size:7px; }
.adjustment-drawer .drawer-close { width:27px; }
@media(orientation:landscape) and (max-height:520px) {
  .camera .adjustment-drawer { top:55px; bottom:7px; width:280px; }
  .camera .adjustment-drawer .preset-column { min-height:42px; }
  .camera .adjustment-drawer .page-actions { gap:4px; }
  .camera .adjustment-drawer .page-actions button { min-width:62px; }
  .camera .adjustment-drawer .custom-input { width:90px; }
  .camera .adjustment-drawer .custom-row label { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Study 04: direct shooting adjustments and configurable tools. */
.camera { grid-template-rows:38px minmax(0,1fr) 44px; }
.camera .adjustment-drawer { bottom:68px; background:#14212a; border-color:#49606e; }
.adjustment-drawer .preset-option { min-height:48px; font-size:15px; }
.adjustment-drawer .preset-column { flex:1; min-height:48px; }
.adjustment-drawer .edit-state { color:var(--cyan); letter-spacing:.4px; }
.adjustment-drawer .editor-content { gap:6px; }
.adjustment-drawer .custom-input,.adjustment-drawer .tint-input { min-height:44px; }
.adjustment-drawer .custom-row label { flex-basis:100%; }
.adjustment-drawer .custom-row,.adjustment-drawer .tint-row { padding-top:0; gap:6px; }
.fine-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; }
.fine-row button { width:48px; min-height:44px; border:1px solid #425e70; border-radius:3px; font:22px monospace; }
.fine-row span { font:9px monospace; color:#a2bac7; }
.page-actions button { min-height:44px; }
select:focus-visible { outline:2px solid var(--cyan); }
.mini-audio { width:145px; }
.meter { gap:4px 5px; font-size:8px; }
.meter-track { height:5px; }
.meter-scale { display:flex; justify-content:space-between; padding-left:10px; margin-top:4px; font:7px monospace; }
.elapsed-label { color:#91a6b3; font:8px monospace; margin-left:8px; }
.recording .capture-state { padding:4px 8px; background:#ff5b5620; border-radius:3px; }
.recording .capture-state b { color:#fff; }
@media(orientation:landscape) and (max-height:520px) {
  body.expanded .camera { grid-template-rows:32px minmax(0,1fr) 38px; }
  .camera .adjustment-drawer { top:55px; bottom:54px; width:280px; }
  .camera .adjustment-drawer .preset-option { min-height:44px; font-size:14px; }
  .camera .adjustment-drawer .page-actions button { min-height:40px; }
  .camera .adjustment-drawer .editor-content { gap:4px; }
  .camera .adjustment-drawer .custom-row label { flex-basis:auto; }
  .camera .adjustment-drawer .fine-row button { min-height:36px; }
  .camera .adjustment-drawer .custom-input,.camera .adjustment-drawer .tint-input { min-height:38px; }
  .camera .mini-audio { width:120px; }
  .camera .elapsed-label { display:none; }
  .camera .left-rail { gap:2px; }
  .camera .rail-divider { height:0; }
  .camera .right-rail { gap:2px; }
  .camera .record-button { min-height:65px; }
  .camera .clips-button { gap:3px; padding:3px; }
}
.adjustment-drawer .preset-column[hidden] { display:none; }
.fine-button { width:44px; min-height:44px; border:1px solid #425e70; border-radius:3px; font:20px monospace; }
@media(orientation:landscape) and (max-height:520px) {
  .camera .adjustment-drawer .custom-row label { flex-basis:100%; }
  .camera .fine-button { min-height:38px; }
}
@media(orientation:landscape) and (max-height:520px) {
  .camera .adjustment-drawer .edit-heading { min-height:36px; padding:1px 10px; }
  .camera .adjustment-drawer .page-actions { padding:3px 9px; }
  .camera .adjustment-drawer .editor-content { padding:4px 9px; }
  .camera .adjustment-drawer .custom-row { gap:3px 6px; }
  .camera .adjustment-drawer .custom-row label { font-size:7px; line-height:8px; }
}

/* Minimal landscape video variant: one exposure row, full-height preview. */
.camera, body.expanded .camera, body.expanded .camera.clean {
  grid-template-columns:minmax(0,1fr) 64px; grid-template-rows:minmax(0,1fr);
  grid-template-areas:'screen right'; aspect-ratio:2.164; min-height:320px;
}
.camera .screen { overflow:hidden; }
.camera .live-parameters { min-height:50px; background:#0c141be0; }
.camera .live-param { padding:7px 14px; gap:4px; }
.camera .live-param b { font-size:19px; }
.camera .live-param>span { font-size:8px; }
.camera .codec-param b { font-size:17px; }
.camera .right-rail { gap:5px; padding:8px 3px 32px; background:#0d151b; }
.camera .record-button { min-height:60px; margin:auto 0; }
.camera .record-ring { width:52px; height:52px; }
.camera .record-dot { width:40px; height:40px; }
.camera.recording .record-dot { width:23px; height:23px; }
.camera .focus-mode { min-width:44px; min-height:44px; font:12px monospace; }
.camera .focus-mode[aria-pressed=true] { color:var(--cyan); border-color:var(--cyan); }
.camera .clips-button { min-height:44px; padding:5px; }
.camera .clip-thumbnail { width:43px; height:29px; }
.camera .health { position:absolute; z-index:4; bottom:0; left:0; right:0; height:28px; gap:14px; padding:0 12px; background:#0b141be8; font:9px monospace; border-top:0; }
.camera .capture-state { margin-left:0; font-size:9px; gap:6px; }
.camera .capture-state b { font-size:11px; margin-left:4px; }
.camera .mini-audio { width:85px; }
.camera .meter-scale { display:none; }
.camera .meter { font-size:7px; gap:2px 4px; }
.camera .meter-track { height:4px; }
.camera .lens-picker { position:absolute; bottom:36px; left:12px; display:flex; gap:2px; z-index:2; padding:2px; border:1px solid #ffffff25; border-radius:7px; background:#0b141bbd; }
.camera .lens-picker button { min-width:44px; min-height:40px; padding:5px; font-size:13px; }
.camera .lens-picker small { font-size:7px; }
.camera .monitor-corner { display:none; }
.camera .left-rail { display:none; position:absolute; left:50%; bottom:84px; transform:translateX(-50%); z-index:9; flex-direction:row; gap:3px; padding:6px; border:1px solid #49606e; border-radius:7px; background:#14212af5; }
.camera .left-rail.open { display:flex; }
.camera .left-rail .tool-button { width:44px; min-height:48px; font-size:7px; }
.camera .camera-drawer, .camera .adjustment-drawer, .camera .menu-drawer { top:58px; bottom:36px; right:8px; width:min(300px,calc(100% - 76px)); max-height:none; }
.focus-strip { position:absolute; top:50%; transform:translateY(-45%); left:10px; height:min(180px,calc(100% - 140px)); width:44px; display:flex; flex-direction:column; align-items:center; border:1px solid #ffffff30; border-radius:8px; background:#0b141bc9; z-index:3; color:#dbe8ed; }
.focus-strip>span { font:8px monospace; padding:5px 0; pointer-events:none; }
#focus-drag { flex:1; width:44px; min-height:50px; display:grid; place-items:center; touch-action:none; cursor:ns-resize; }
#focus-drag:focus-visible { outline:2px solid var(--cyan); outline-offset:-2px; }
#focus-drag[aria-disabled=true] { opacity:.4; cursor:default; }
.focus-track { width:2px; height:calc(100% - 16px); background:#a7bdc166; position:relative; pointer-events:none; }
.focus-track i { position:absolute; left:50%; width:18px; height:6px; border-radius:3px; transform:translate(-50%,50%); background:var(--cyan); }
.camera.clean .live-parameters,.camera.clean .lens-picker,.camera.clean .focus-strip,.camera.clean .left-rail { display:none; }
.camera.clean .restore-controls { top:12px; left:12px; }
@media(orientation:landscape) and (max-height:520px) {
  .camera, body.expanded .camera, body.expanded .camera.clean { grid-template-columns:minmax(0,1fr) 60px; grid-template-rows:minmax(0,1fr); grid-template-areas:'screen right'; min-height:0; }
  .camera .right-rail { gap:2px; padding:3px 2px 30px; }
  .camera .record-button { min-height:56px; }
  .camera .live-param { padding:7px 11px; }
  .camera .live-param b { font-size:18px; }
  .camera .codec-param b { font-size:16px; }
  .camera .adjustment-drawer { top:56px; bottom:34px; width:280px; }
  .camera .health { height:26px; font-size:8px; gap:10px; }
}

.camera .health .capture-format { border:0; min-height:26px; padding:2px 5px; font:9px monospace; white-space:nowrap; color:#c6d8e0; }
.camera .health .media { white-space:nowrap; }