/* C102 Fogged Over: "Cold Window". Fonts self-hosted in fonts/. */
@font-face{font-family:"Sora";src:url(fonts/sora-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Sora";src:url(fonts/sora-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sora";src:url(fonts/sora-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Literata";src:url(fonts/literata-latin-400-italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--fo-fog:#C9D6DC;--fo-fog-a:rgba(226,234,238,.84);--fo-glass:#5E7480;--fo-cold:#8FB3C4;--fo-warm:#FFD9A0;--fo-amber:#F7A65A;--fo-room:#7A5238;--fo-ink:#1E2A30;--fo-sill:#E9EEF0;--fo-frame:#2C3A41;
 --fo-sans:"Sora",system-ui,sans-serif;--fo-serif:"Literata",Georgia,serif}
.fo{margin:0;min-height:100dvh;font-family:var(--fo-sans);color:var(--fo-ink);background:var(--fo-frame);display:flex;flex-direction:column}
.fo-top{display:flex;justify-content:space-between;padding:12px 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#C7D3D8}
/* the pane */
.fo-pane{position:relative;flex:1;margin:0 12px;min-height:420px;border:10px solid #3F4F57;border-bottom:0;overflow:hidden;touch-action:none}
@media(min-width:900px){.fo-pane{margin:0 48px;border-width:16px}}
/* warm room behind glass: bokeh discs, not a gradient mesh */
.fo-room{position:absolute;inset:-20px;background-color:var(--fo-room);
 background-image:radial-gradient(circle at 22% 38%,var(--fo-warm) 0 60px,transparent 64px),radial-gradient(circle at 70% 28%,var(--fo-amber) 0 90px,transparent 94px),radial-gradient(circle at 58% 70%,#FFE6BD 0 50px,transparent 54px),radial-gradient(circle at 84% 64%,var(--fo-warm) 0 70px,transparent 74px),radial-gradient(circle at 36% 80%,#E58F4E 0 76px,transparent 80px),radial-gradient(circle at 10% 70%,#FFC98A 0 40px,transparent 44px),radial-gradient(circle at 46% 18%,#FFF0D2 0 36px,transparent 40px),linear-gradient(#5A3A28,#8A5F42);
 filter:blur(6px)}
/* fog: frosted layer; JS sets --fo-wipe (svg data URL of wiped strokes) and it's excluded from the fog */
.fo-fog{position:absolute;inset:0;background:var(--fo-fog-a);backdrop-filter:blur(16px) saturate(.7);-webkit-backdrop-filter:blur(16px) saturate(.7);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-size:480px;
 -webkit-mask:var(--fo-wipe,none),linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:var(--fo-wipe,none) exclude,linear-gradient(#000 0 0);transition:opacity 1.2s}
.fo-fog.is-gone{opacity:0}
/* droplets on glass (on top), drips under strokes */
.fo-drops{position:absolute;inset:0;pointer-events:none;z-index:3;
 background-image:radial-gradient(circle,rgba(255,255,255,.85) 0 1.3px,rgba(255,255,255,.2) 2.6px,transparent 3.6px),radial-gradient(circle,rgba(255,255,255,.75) 0 2px,rgba(255,255,255,.18) 3.4px,transparent 5px),radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 2.2px);background-size:71px 59px,157px 113px,37px 43px;background-position:13px 7px,61px 29px,5px 21px;opacity:.7}
.fo-drip{position:absolute;width:4px;border-radius:2px;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.05));z-index:3;animation:fo-drip 9s ease-in infinite}
@keyframes fo-drip{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(120px);opacity:0}}
/* sill: the UI strip */
.fo-sill{background:var(--fo-sill);border-top:6px solid #B9C6CC;padding:14px 16px 18px;display:grid;gap:10px}
@media(min-width:900px){.fo-sill{margin:0 48px 0;padding:16px 26px 22px;grid-template-columns:1fr auto;align-items:center}}
.fo-line{font:italic 400 clamp(20px,2.4vw,28px)/1.25 var(--fo-serif);margin:0}
.fo-hint{font-size:13px;color:#4C5E66;margin:2px 0 0}
.fo-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fo-btn{font:600 14px var(--fo-sans);padding:12px 18px;min-height:46px;border-radius:999px;border:1.5px solid var(--fo-ink);background:transparent;color:var(--fo-ink);cursor:pointer}
.fo-btn--go{background:var(--fo-ink);color:var(--fo-sill)}
.fo-stamp{width:46px;height:46px;border-radius:50%;border:1.5px solid #7D9099;background:#fff;font:600 13px var(--fo-sans);cursor:pointer}
.fo-btn:focus-visible,.fo-stamp:focus-visible,.fo-pane:focus-visible{outline:3px solid var(--fo-amber);outline-offset:3px}
.fo-meter{font-size:12px;color:#4C5E66}
.fo-cursor{position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.2);transform:translate(-50%,-50%);z-index:4}
.fo-warn{font-size:13px;color:#8A3B12;font-weight:600}
@media(prefers-reduced-motion:reduce){.fo-drip{animation:none;display:none}.fo-fog{transition:none}}
/* Engineer additions (CSP-safe; no inline styles) */
.fo-top a{color:inherit;text-decoration:none}.fo-top a:focus-visible{outline:2px solid var(--fo-amber)}
.fo-pane{cursor:crosshair}
.fo-ghost{position:absolute;inset:0;background:rgba(226,234,238,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask:var(--fo-wipe,none),linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:var(--fo-wipe,none) exclude,linear-gradient(#000 0 0)}
.fo-pane.is-maker .fo-ghost{display:none}
.fo-drip--a{left:30%;top:44%;height:34px}.fo-drip--b{left:62%;top:55%;height:26px;animation-delay:-5s}.fo-drip--c{left:81%;top:22%;height:20px;animation-delay:-2.5s}
.fo-cursor[hidden]{display:none}.fo-cursor.is-down{background:rgba(255,255,255,.5)}
.fo-msg{font-size:13px;margin:0;min-height:1em}
.fo-linkbox input{width:100%;font:13px var(--fo-sans);padding:8px}
.fo-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--fo-ink);color:var(--fo-sill);padding:10px 16px;border-radius:999px;font-size:14px;z-index:9}
[hidden]{display:none!important}
.fo-stamp svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* fixed 4:3 draw box (payload is normalized to it) */
.fo-pane{flex:none;min-height:0;aspect-ratio:4/3;width:min(calc(100% - 24px),calc((100dvh - 250px)*4/3));margin:0 auto;align-self:center}
@media(min-width:900px){.fo-pane{width:min(calc(100% - 96px),calc((100dvh - 230px)*4/3));margin:0 auto}}
.fo-sill{width:100%;box-sizing:border-box}
@media(min-width:900px){.fo-sill{margin:0}}

/* visitor-text wrap: long unbroken words never widen the page */
body{overflow-wrap:anywhere}
input,textarea{min-width:0;max-width:100%}