:root{--bg: #07090c;--bg-elev: #10151c;--bg-card: #141b24;--line: #243041;--line-strong: #35506a;--text: #e8eef6;--muted: #8ea0b5;--accent: #5ee0c5;--accent-dim: #1b4a42;--warn: #e8c36a;--danger: #e07a7a;--easy: #6ee7b7;--medium: #fbbf24;--hard: #f87171;--film: #0a0d11;--shadow: 0 18px 50px rgba(0, 0, 0, .45);--radius: 14px;--sans: "IBM Plex Sans", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--sans);background:radial-gradient(1200px 500px at 10% -10%,#12332e 0%,transparent 50%),radial-gradient(900px 400px at 110% 0%,#1a2740 0%,transparent 46%),var(--bg);color:var(--text);letter-spacing:.01em}a{color:inherit;text-decoration:none}button,input,select{font-family:inherit}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:#07090cc7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#2ee6c5,#1a6b8a);display:grid;place-items:center;font-weight:700;color:#04110e;letter-spacing:.04em}.brand h1{margin:0;font-size:15px;font-weight:700;letter-spacing:.18em}.brand p{margin:0;font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.top-meta{display:flex;gap:18px;font-family:var(--mono);font-size:12px;color:var(--muted)}.top-meta strong{color:var(--accent);font-weight:500}.page{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:32px 0 80px;flex:1}.hero{display:grid;grid-template-columns:1.4fr .8fr;gap:28px;margin-bottom:28px;align-items:end}.kicker{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.22em;text-transform:uppercase;margin:0 0 10px}.hero h2{margin:0 0 10px;font-size:38px;line-height:1.1;letter-spacing:-.03em}.hero p.lede{margin:0;color:var(--muted);max-width:58ch;line-height:1.55}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}.stat b{display:block;font-size:22px}.stat span{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 22px}.search{flex:1 1 260px;background:var(--bg-elev);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px 14px;outline:none}.search:focus{border-color:var(--accent)}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:7px 12px;font-size:12px;cursor:pointer}.chip.active,.chip:hover{border-color:var(--accent);color:var(--text);background:var(--accent-dim)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:280px;transition:border-color .15s,transform .15s}.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}.card-film{height:132px;background:linear-gradient(180deg,rgba(94,224,197,.08),transparent 40%),repeating-linear-gradient(90deg,#0c1118 0,#0c1118 8px,#101820 8px,#101820 9px);position:relative;display:grid;place-items:center}.card-film .glyph{font-family:var(--mono);font-size:13px;letter-spacing:.28em;color:var(--accent);opacity:.8}.badge-row{position:absolute;top:10px;left:10px;display:flex;gap:6px}.badge{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:3px 7px;border-radius:999px;background:#0d141c;border:1px solid var(--line);color:var(--text)}.badge.easy{color:var(--easy)}.badge.medium{color:var(--medium)}.badge.hard{color:var(--hard)}.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}.card-body h3{margin:0;font-size:18px}.card-body p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}.tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px}.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:40px;text-align:center;color:var(--muted)}.viewer{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}.film-stage{background:var(--film);border:1px solid var(--line);border-radius:var(--radius);min-height:520px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.film-stage img{width:100%;height:100%;object-fit:contain;display:block;background:#05070a}.placeholder-film{width:100%;height:100%;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,#1a2430,#0a0d11 62%);color:var(--muted);text-align:center;padding:24px}.placeholder-film .plate{width:min(78%,420px);aspect-ratio:4 / 5;border:1px solid #2a3b4e;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%),repeating-linear-gradient(0deg,#101820 0,#101820 18px,#0d141c 18px,#0d141c 19px);position:relative}.placeholder-film .plate:after{content:"";position:absolute;top:18%;right:28%;bottom:18%;left:28%;border:1px dashed #35506a;border-radius:40% 40% 46% 46%;box-shadow:0 0 40px #5ee0c514}.film-toolbar{position:absolute;bottom:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;color:#9fb3c8}.invert img{filter:invert(1) hue-rotate(180deg)}.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px}.panel h2{margin:0;font-size:26px;letter-spacing:-.03em}.meta{display:flex;flex-wrap:wrap;gap:8px}.clinical{background:#0f1822;border-left:3px solid var(--accent);padding:12px 14px;color:#d5e4f3;line-height:1.5;font-size:14px}.reveal-btn,.nav-btn,.ghost-btn{border:1px solid var(--line);background:#101820;color:var(--text);border-radius:10px;padding:10px 14px;cursor:pointer}.reveal-btn{background:var(--accent);color:#06211c;font-weight:700;border:0}.ghost-btn:hover,.nav-btn:hover{border-color:var(--accent)}.answer{display:flex;flex-direction:column;gap:12px}.answer h3{margin:0 0 6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-family:var(--mono)}.answer ul{margin:0;padding-left:18px;color:#d7e3ef}.answer li{margin:4px 0}.diagnosis{font-size:18px;font-weight:700;color:var(--text);padding:10px 12px;background:#10261f;border:1px solid #1f5a4c;border-radius:10px}.nav-row{display:flex;gap:8px;margin-top:auto}.back{color:var(--muted);font-size:13px}.back:hover{color:var(--accent)}.howto{margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:#0e141c}.howto h3{margin:0 0 8px}.howto pre{margin:10px 0 0;background:#080b10;border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto;font-family:var(--mono);font-size:12px;color:#c5d6e8;line-height:1.55}@media(max-width:900px){.hero,.viewer{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.page{width:min(100% - 28px,1180px)}}