/* SIMULA*VISION lab: plasma shell shared by the daily lab and Marlin's mind. */
@font-face{font-family:"SimulaVision";src:url("../../assets/simula-web/fonts/Px437_IBM_PS-55_re.ttf") format("truetype");font-display:swap}
:root{--bg:#070503;--panel:#130C08;--deep:#090604;--stroke:#612B0B;--signal:#FF4D00;--hot:#FF850F;--red:#B80500;--gold:#FFA814;--paper:#FFC270;--muted:#944B21;--dead:#040302;--px:"SimulaVision",ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--paper);font:13px/1.35 var(--px)}
body{display:grid;grid-template-rows:auto 1fr auto;height:100vh;height:100dvh;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* Plasma dot-pitch cells (a matrix, never scanlines). */
.cells{background-image:linear-gradient(90deg,rgba(4,3,2,.6) 1px,transparent 1px),linear-gradient(rgba(4,3,2,.6) 1px,transparent 1px);background-size:3px 3px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--stroke)}
header a{display:flex;align-items:center;min-height:44px}
.logo{display:block;width:min(240px,50vw);aspect-ratio:668/80;background:var(--signal);-webkit-mask:url("../../assets/simula-vision-logo.svg") left center/contain no-repeat;mask:url("../../assets/simula-vision-logo.svg") left center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(255,77,0,.55))}
.status{font-size:10px;color:var(--muted);text-align:right;letter-spacing:.05em}
main{position:relative;min-height:0}
section{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
section>*{flex-shrink:0}
[hidden]{display:none!important}
.btn{appearance:none;font:inherit;font-size:12px;letter-spacing:.06em;min-height:44px;padding:0 14px;border:1px solid var(--stroke);border-radius:0;background-color:var(--panel);color:var(--paper);cursor:pointer;touch-action:manipulation}
.btn:active{background-color:var(--hot);color:var(--dead)}
.btn:focus-visible,.mem:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn.primary{border-color:var(--gold);color:var(--gold);text-shadow:0 0 8px rgba(255,77,0,.7)}
.btn.danger{border-color:var(--red);color:#ff6a4d}
.btn:disabled{opacity:.35;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 12px}
.row .grow{flex:1}
.readout{margin:0;padding:6px 16px 0;font-size:11px;min-height:3em;letter-spacing:.04em;overflow-wrap:anywhere}
.terms{color:var(--muted);min-height:0;padding-bottom:4px}
.readout b{font-weight:400;color:var(--signal);text-shadow:0 0 6px rgba(255,77,0,.6)}
.stage{flex:1 0 auto;min-height:max(240px,55vh);position:relative;display:grid;place-items:center;padding:8px 16px;overflow:hidden}
.stage>*{grid-area:1/1}
canvas,video{display:block;max-width:100%;max-height:100%}
#memory{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:crosshair}
video{background:#000;border:1px solid var(--stroke)}
.grid{flex:1 0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));grid-auto-rows:min-content;gap:4px;padding:8px 16px 16px;align-content:start}
.day{grid-column:1/-1;color:var(--muted);font-size:10px;letter-spacing:.08em;padding:12px 0 2px}
.mem{position:relative;aspect-ratio:1;padding:0;border:1px solid var(--stroke);background:var(--deep);overflow:hidden;cursor:pointer;color:var(--paper);font:inherit}
.mem img{display:block;width:100%;height:100%;object-fit:cover}
.mem span{position:absolute;left:3px;bottom:2px;font-size:9px;text-shadow:0 0 3px #000,0 0 3px #000}
.empty{flex:1;display:grid;place-items:center;color:var(--muted);font-size:11px;letter-spacing:.1em}
nav.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--stroke)}
nav.tabs .btn{border:0;border-right:1px solid var(--stroke);min-height:52px}
nav.tabs .btn:last-child{border-right:0}
nav.tabs [aria-current="page"]{color:var(--signal);text-shadow:0 0 8px rgba(255,77,0,.8)}
.flash{animation:flash .35s ease-out}
@keyframes flash{from{filter:brightness(2.2)}to{filter:none}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}
@media (min-width:900px){.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
/* Retinal afterimage (PresentSurface.leaveAfterimage): the complement of what was just seen. */
.afterimage{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:5;opacity:0;filter:invert(1) saturate(1.7) contrast(1.25) blur(4px);-webkit-mask:radial-gradient(circle at center,#fff 0,rgba(255,255,255,.75) 31vmax,transparent 62vmax);mask:radial-gradient(circle at center,#fff 0,rgba(255,255,255,.75) 31vmax,transparent 62vmax)}
.badge{position:absolute;right:3px;top:2px;font-size:9px;color:var(--signal);text-shadow:0 0 6px rgba(255,77,0,.9)}
/* The clip feeds the canvas; it stays in the layout (Safari decodes visible video) but is never seen or heard. */
.feed{position:fixed;left:0;bottom:0;width:2px;height:2px;opacity:0;pointer-events:none}
.mem canvas{display:block;width:100%;height:100%;object-fit:cover}
/* marlins_memories title block: the app's own face and the canonical simula*ltd logomark (tinted, never redrawn). */
.title-block{display:flex;flex-direction:column;gap:2px;min-width:0}
.app-title{margin:0;font:400 clamp(20px,5.2vw,30px)/1 var(--px);color:var(--signal);letter-spacing:.02em;text-shadow:0 0 8px rgba(255,77,0,.55);overflow-wrap:anywhere}
.credit{display:flex;align-items:center;gap:8px;margin:0;font:400 11px/1 var(--px);color:var(--paper);letter-spacing:.04em;white-space:nowrap}
.ltd{display:inline-block;width:62px;aspect-ratio:755/285;background:var(--paper);-webkit-mask:url("../../assets/simula-web/brand/simula-ltd-logomark.svg") 66.1% 47.2%/143.05% auto no-repeat;mask:url("../../assets/simula-web/brand/simula-ltd-logomark.svg") 66.1% 47.2%/143.05% auto no-repeat}