:root { --bg:#101e20; --paper:#f0e5c9; --muted:#b9b59f; --gold:#d8b675; --line:#6e6041; --panel:#182c2e; --light:#ffcf74; }
    * { box-sizing:border-box; }
    body { margin:0; min-height:100vh; color:var(--paper); background:radial-gradient(ellipse at 72% 25%,#2c4542 0,transparent 55%),var(--bg); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
    body[data-night="true"] { --bg:#121827; --panel:#1b2639; --light:#b5cafd; background:radial-gradient(ellipse at 72% 25%,#34425d 0,transparent 55%),var(--bg); }
    button { font:inherit; color:inherit; cursor:pointer; }
    button:focus-visible { outline:3px solid #9ed7d6; outline-offset:5px; }
    button:disabled { cursor:default; }
    .museum { max-width:1320px; margin:auto; padding:35px 48px 26px; }
    .masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid #85734970; }
    .wordmark { display:flex; align-items:center; gap:12px; color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-size:11px; line-height:1.7; }
    .seal { border:1px solid var(--gold); border-radius:50%; width:35px; height:35px; display:grid; place-items:center; font:italic 22px Georgia,serif; }
    .quiet-button { border:1px solid #83734e; background:transparent; border-radius:30px; padding:9px 16px; font-size:12px; letter-spacing:.03em; }
    .quiet-button:hover { background:#ffffff0a; }
    .intro { padding:27px 0 29px; display:flex; justify-content:space-between; align-items:end; gap:24px; }
    .eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.2em; font-size:10px; margin:0 0 12px; }
    h1 { font:normal clamp(35px,4.3vw,60px)/1.04 Georgia,serif; letter-spacing:-.025em; margin:0; }
    .intro-aside { max-width:265px; color:var(--muted); font:16px/1.65 Georgia,serif; margin:0 0 3px; }
    .collection { display:grid; grid-template-columns:minmax(340px,.9fr) minmax(390px,1.1fr); gap:35px; align-items:start; }
    .cabinet { position:relative; padding:25px 24px 20px; border:2px solid #a0804b; border-radius:80px 80px 14px 14px; background:repeating-linear-gradient(94deg,transparent 0 13px,#dd9f5710 14px 16px,transparent 17px 34px),linear-gradient(100deg,#40291e,#6a4931 48%,#35251e); box-shadow:0 24px 60px #0005,inset 0 0 0 6px #34241c,inset 0 0 0 8px #a1814d65; }
    .cabinet::before { content:""; position:absolute; inset:15px 20px auto; height:30px; border-top:1px solid #d7ad6770; border-radius:50%; pointer-events:none; }
    .cabinet-heading { text-align:center; color:#ddc394; font:italic 14px Georgia,serif; padding:10px 0 22px; }
    .drawers { display:grid; gap:10px; }
    .drawer { position:relative; display:grid; grid-template-columns:34px 1fr 40px; gap:12px; align-items:center; width:100%; min-height:68px; padding:12px 17px; text-align:left; background:linear-gradient(97deg,#39291f,#745039 50%,#493324); border:1px solid #a78d6255; border-radius:5px; box-shadow:0 3px 3px #0006,inset 0 1px #e6b78025; transition:transform .2s,box-shadow .2s,border-color .2s; }
    .drawer:hover { transform:translateX(3px); border-color:#d5b376; }
    .drawer[aria-pressed="true"] { transform:translateX(7px); border-color:#e8c887; box-shadow:-7px 3px 0 #1e1510,0 5px 10px #0004,inset 0 1px #e6b78040; }
    .drawer-num { color:#d5b881; font:italic 15px Georgia,serif; }
    .drawer-title { display:block; font:17px/1.15 Georgia,serif; color:#f3e6c9; }
    .drawer-type { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.16em; margin-top:5px; color:#c5ab85; }
    .handle { justify-self:end; width:30px; height:22px; border:2px solid #bd9555; border-radius:4px 4px 50% 50%; box-shadow:inset 0 1px 2px #1c130e,0 2px 0 #2a1c14; background:linear-gradient(#d2ad62,#5d4123); }
    .handle::after { content:""; display:block; margin:4px auto; width:20px; height:8px; border-radius:50%; background:#3d2a1f; border:1px solid #e0b970; }
    .cabinet-foot { margin:20px auto 0; display:block; padding:7px 18px; border:1px solid #9b7b48; border-radius:4px; background:linear-gradient(#b6995e,#78592f); color:#231b12; font:10px/1.4 Georgia,serif; text-transform:uppercase; letter-spacing:.12em; box-shadow:0 2px 5px #0005; }
    .cabinet-foot:hover { filter:brightness(1.15); }
    .feet { display:flex; justify-content:space-between; padding:0 34px; }
    .feet span { width:30px; height:14px; background:#6b4a2c; border:1px solid #ad8752; border-top:0; border-radius:0 0 8px 8px; }
    .shuffle { display:block; margin:19px auto 0; border:none; background:transparent; color:var(--gold); font:italic 15px Georgia,serif; padding:8px 12px; }
    .shuffle:hover { text-decoration:underline; text-underline-offset:5px; }
    .specimen { overflow:hidden; background:var(--panel); border:1px solid #95815a70; border-radius:10px; box-shadow:0 15px 50px #0002; }
    .specimen-top { display:flex; justify-content:space-between; gap:20px; padding:15px 24px 0; color:var(--muted); font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
    .art { position:relative; margin:0 13px; min-height:254px; background:radial-gradient(ellipse at 50% 65%,#b5b98715,transparent 65%); }
    .art svg { display:block; width:100%; height:254px; overflow:visible; }
    .art.shaken { animation:shake .42s ease; }
    @keyframes shake { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-2deg); } 70% { transform:rotate(2deg); } }
    .copy { border-top:1px solid #8e7d5550; padding:22px 26px 24px; }
    h2 { font:normal 31px/1.1 Georgia,serif; letter-spacing:-.01em; margin:0 0 14px; }
    .story p { font:15px/1.65 Georgia,serif; color:#dce0d2; margin:0 0 11px; }
    .story p:last-child { margin-bottom:0; }
    .tag { margin:19px 0 17px; color:var(--gold); font-size:10px; letter-spacing:.02em; }
    .play { display:flex; align-items:center; gap:15px; flex-wrap:wrap; }
    .action { border:1px solid #d7b574; background:#d7b574; color:#18282a; border-radius:4px; padding:10px 17px; font-size:13px; font-weight:600; min-height:40px; }
    .action:hover { background:#e7c78b; }
    .result { color:#c7cdba; font:italic 13px/1.5 Georgia,serif; min-height:20px; margin:14px 0 0; }
    .curator-note { border:1px solid #a88d6160; padding:24px 28px; border-radius:6px; margin-top:28px; background:#182c2e; }
    .curator-note h2 { font-size:25px; }
    .curator-note p { font:16px/1.75 Georgia,serif; color:#dce0d2; max-width:870px; margin:0 0 14px; }
    .curator-note p:last-child { margin:0; }
    footer { display:flex; justify-content:space-between; gap:16px; margin-top:28px; padding-top:16px; border-top:1px solid #85734960; color:#a7ad9b; font-size:10px; line-height:1.7; }
    .keyboard { color:#d5b881; }
    [hidden] { display:none !important; }
    @media (max-width:920px) { .museum { padding:25px; } .collection { gap:22px; grid-template-columns:minmax(295px,.85fr) minmax(350px,1fr); } .drawer { padding:11px 12px; gap:8px; } .drawer-title { font-size:15px; } .cabinet { padding:25px 18px 18px; } }
    @media (max-width:730px) { .museum { padding:22px 18px; } .collection { grid-template-columns:1fr; } .intro { align-items:start; flex-direction:column; padding-top:25px; gap:18px; } .intro-aside { max-width:none; } .masthead { gap:10px; } .wordmark { font-size:9px; letter-spacing:.1em; } .quiet-button { padding:8px 11px; font-size:11px; white-space:nowrap; } .cabinet { max-width:480px; width:100%; margin:auto; } .drawer-title { font-size:18px; } footer { flex-direction:column; } .copy { padding:20px; } .curator-note { padding:22px; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }