.ascii-webcam-page .page-wrapper { max-width: none; }
.ascii-webcam-page .site-footer { margin-top: 0; }
.ascii-webcam { --ascii-bg:#050607; --ascii-panel:rgba(9,11,12,.82); --ascii-line:rgba(255,255,255,.14); --ascii-text:#f2f5f3; --ascii-muted:#8d9691; --ascii-accent:#D4FF00; position:relative; isolation:isolate; width:100vw; min-height:calc(100svh - 72px); margin-left:calc(50% - 50vw); overflow:hidden; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.035),transparent 38%),var(--ascii-bg); color:var(--ascii-text); font-family:"Space Grotesk",ui-monospace,monospace; }
.ascii-webcam *, .ascii-webcam *::before, .ascii-webcam *::after { box-sizing:border-box; }
.ascii-webcam__canvas,.ascii-webcam__noise,.ascii-webcam__scanlines,.ascii-webcam__vignette,.ascii-webcam__flash { position:absolute; inset:0; width:100%; height:100%; }
.ascii-webcam__canvas { display:block; }
.ascii-webcam__video { display:none; }
.ascii-webcam__noise,.ascii-webcam__scanlines,.ascii-webcam__vignette,.ascii-webcam__flash { pointer-events:none; }
.ascii-webcam__noise { z-index:1; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); animation:ascii-jitter .22s steps(2) infinite; }
.ascii-webcam__scanlines { z-index:1; opacity:.15; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 4px); mix-blend-mode:overlay; }
.ascii-webcam__vignette { z-index:1; box-shadow:inset 0 0 16vw rgba(0,0,0,.9); }
.ascii-webcam__flash { z-index:6; background:#fff; opacity:0; }
.ascii-webcam__flash.is-active { animation:ascii-flash .18s ease-out; }
.ascii-webcam__hud,.ascii-webcam__presets,.ascii-webcam__message,.ascii-webcam__controls { position:absolute; z-index:2; }
.ascii-webcam__hud { top:18px; left:max(18px,env(safe-area-inset-left)); right:max(18px,env(safe-area-inset-right)); display:flex; justify-content:space-between; gap:16px; pointer-events:none; text-transform:uppercase; }
.ascii-webcam__eyebrow,.ascii-webcam__status,.ascii-webcam__readout,.ascii-webcam__control>label,.ascii-webcam__control>span { margin:0; color:var(--ascii-muted); font-size:10px; font-weight:400; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; }
.ascii-webcam__status { margin-top:4px; }
.ascii-webcam__status.is-live { color:var(--ascii-accent); }
.ascii-webcam__readout { max-width:28ch; text-align:right; line-height:1.55; }
.ascii-webcam__presets { top:70px; left:max(18px,env(safe-area-inset-left)); display:flex; flex-wrap:wrap; gap:6px; max-width:min(720px,calc(100% - 36px)); }
.ascii-webcam button,.ascii-webcam select,.ascii-webcam input { font:inherit; }
.ascii-webcam button { min-height:34px; border:1px solid rgba(212,255,0,.5); background:rgba(212,255,0,.08); color:var(--ascii-accent); padding:7px 10px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.ascii-webcam button:hover,.ascii-webcam button[aria-pressed="true"] { border-color:rgba(212,255,0,.8); background:rgba(212,255,0,.16); }
.ascii-webcam :is(button,input,select):focus-visible { outline:2px solid var(--ascii-accent); outline-offset:3px; }
.ascii-webcam__message { z-index:3; inset:0; display:grid; place-items:center; padding:100px 22px 180px; pointer-events:none; }
.ascii-webcam__message[hidden] { display:none; }
.ascii-webcam__intro { width:min(640px,100%); padding:clamp(1.4rem,4vw,2rem); border:1px solid var(--ascii-line); background:rgba(5,6,7,.85); box-shadow:0 30px 90px rgba(0,0,0,.45); text-align:center; pointer-events:auto; }
.ascii-webcam__intro h1 { margin:.45rem 0 .8rem; font-family:Inter,sans-serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:500; line-height:1; letter-spacing:-.05em; }
.ascii-webcam__intro>p:not(.ascii-webcam__eyebrow) { max-width:54ch; margin:0 auto 1.2rem; color:#aab3ae; font-family:Inter,sans-serif; font-size:clamp(.95rem,1.6vw,1.1rem); line-height:1.55; }
.ascii-webcam__intro small { display:block; margin-top:12px; color:#8d9691; font-family:Inter,sans-serif; font-size:.73rem; line-height:1.45; }
.ascii-webcam__start { padding:11px 16px; }
.ascii-webcam__controls { left:max(18px,env(safe-area-inset-left)); right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; max-height:44%; overflow:auto; padding:10px; border:1px solid var(--ascii-line); background:var(--ascii-panel); backdrop-filter:blur(14px); }
.ascii-webcam__control { min-width:0; display:grid; gap:6px; align-content:start; }
.ascii-webcam__control label,.ascii-webcam__control>span:first-child { display:block; min-height:14px; color:#aeb6b2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ascii-webcam__control output { float:right; color:#dbe1dd; }
.ascii-webcam input[type="range"] { width:100%; accent-color:var(--ascii-accent); }
.ascii-webcam input[type="text"],.ascii-webcam select { width:100%; min-height:34px; border:1px solid var(--ascii-line); border-radius:0; background:#0c0f10; color:#dfe5e1; padding:0 8px; }
.ascii-webcam__toggle { display:flex; align-items:center; min-height:34px; gap:8px; border:1px solid var(--ascii-line); padding:0 8px; color:#c6ccc8; background:#0c0f10; font-size:10px; text-transform:none; letter-spacing:0; }
.ascii-webcam__toggle input { accent-color:var(--ascii-accent); }
.ascii-webcam__control--wide { grid-column:span 2; }
.ascii-webcam__control--actions { grid-column:span 2; }
.ascii-webcam__control--actions>div { display:flex; gap:6px; flex-wrap:wrap; }
.ascii-webcam__control--actions button { flex:1 1 auto; }
@keyframes ascii-jitter { 25% { transform:translate(-1%,1%) } 50% { transform:translate(1%,-1%) } 75% { transform:translate(.5%,1%) } }
@keyframes ascii-flash { from { opacity:.65 } to { opacity:0 } }
@media (max-width:1060px) { .ascii-webcam__controls { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:900px) { .ascii-webcam { min-height:calc(100svh - 72px); } }
@media (max-width:680px) { .ascii-webcam__hud { top:14px; } .ascii-webcam__readout { display:none; } .ascii-webcam__presets { top:56px; } .ascii-webcam__presets button { min-height:30px; padding:5px 8px; } .ascii-webcam__message { padding:108px 16px 230px; } .ascii-webcam__controls { grid-template-columns:repeat(2,minmax(0,1fr)); bottom:max(10px,env(safe-area-inset-bottom)); left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); max-height:40%; } .ascii-webcam__control--wide,.ascii-webcam__control--actions { grid-column:span 2; } }
@media (prefers-reduced-motion:reduce) { .ascii-webcam__noise { animation:none; } .ascii-webcam__flash.is-active { animation:none; } }