:root { --night:#171824; --ink:#262034; --paper:#f1e3c6; --amber:#f1b65f; --gold:#e3c68c; --mint:#a8d9c6; --muted:#aaa5ae; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--paper); background:radial-gradient(circle at 70% 16%,#30324c 0,#202134 31%,var(--night) 75%); font-family:Georgia,serif; }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:3px solid var(--mint); outline-offset:4px; }
.grain { pointer-events:none; position:fixed; inset:0; opacity:.055; z-index:10; 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='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stars { position:absolute; inset:0 0 auto; height:430px; pointer-events:none; opacity:.65; background-image:radial-gradient(circle,#ded4bc 1px,transparent 1.5px),radial-gradient(circle,#d5d0db 1px,transparent 1.5px); background-size:109px 117px,173px 151px; background-position:31px 12px,97px 67px; mask-image:linear-gradient(#000,transparent); }
.wrap { width:min(1160px,calc(100% - 36px)); margin:0 auto; position:relative; }
header { padding:30px 0 18px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #ffffff25; }
.mark { display:flex; align-items:center; gap:13px; font:700 11px/1.5 Arial,sans-serif; letter-spacing:.22em; text-transform:uppercase; }
.mark .seal { width:38px;height:38px;border:1px solid var(--amber);border-radius:50%;display:grid;place-items:center;font:24px Georgia,serif;color:var(--amber);transform:rotate(-15deg); }
.shift { font:11px/1.45 Arial,sans-serif; text-align:right; letter-spacing:.16em; text-transform:uppercase; color:#b2acb6; }
.shift strong { display:block; color:var(--mint); font-weight:600; }
.hero { padding:55px 0 14px; display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:end; }
.eyebrow { color:var(--amber); font:700 12px Arial,sans-serif; letter-spacing:.24em; text-transform:uppercase; margin:0 0 18px; }
h1 { font-size:clamp(60px,8.7vw,123px); line-height:.82; font-weight:400; letter-spacing:-.075em; margin:0; }
h1 em { color:var(--amber); font-weight:400; }
.deck { max-width:510px; margin:24px 0 0; color:#d8d0c6; font-size:19px; line-height:1.5; }
.hero-side { align-self:end; border-left:1px solid #ffffff28; padding:5px 0 6px 24px; color:#afaab4; font:13px/1.7 Arial,sans-serif; }
.hero-side b { color:var(--paper); font-weight:500; }
.rule { margin-top:25px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #ffffff25; border-bottom:1px solid #ffffff25; padding:11px 0; color:#b7b3bc; font:700 11px Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.rule span:last-child { color:var(--mint); }
.workbench { display:grid; grid-template-columns:minmax(270px,.9fr) minmax(300px,1.1fr) minmax(275px,.9fr); gap:18px; padding:24px 0 25px; align-items:stretch; }
.panel { min-width:0; border:1px solid #ffffff25; border-radius:3px; background:#252536cc; position:relative; overflow:hidden; }
.panel-top { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #ffffff24; color:#a9a3ac; font:700 10px Arial,sans-serif; letter-spacing:.21em; text-transform:uppercase; }
.panel-top span:last-child { color:var(--amber); }
.lamp-panel { display:flex; flex-direction:column; }
.lamp-stage { min-height:305px; position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lamp-stage:before { content:""; position:absolute; width:390px; height:390px; border-radius:50%; border:1px solid #ffffff0f; box-shadow:0 0 0 55px #ffffff04,0 0 0 115px #ffffff03; }
.beam { position:absolute; top:21%; left:49%; width:310px; height:280px; transform:translateX(-50%); clip-path:polygon(48% 0,52% 0,100% 100%,0 100%); background:linear-gradient(#f2be6940,#f2be6900); opacity:0; transition:opacity .6s; pointer-events:none; }
body.lit .beam { opacity:1; }
.lantern { width:126px;height:158px; position:relative; border:3px solid var(--gold); border-radius:12px 12px 22px 22px; background:radial-gradient(circle at 50% 58%,#ffc76b 0,#d9823a 13%,#8b523f 29%,#383044 55%); box-shadow:0 0 0 7px #221d2e,0 0 25px #0007; z-index:1; transition:box-shadow .5s; }
body.lit .lantern { box-shadow:0 0 0 7px #221d2e,0 0 75px #e8ad5655; }
.lantern:before { content:""; position:absolute; width:57px;height:26px; left:31px; top:-34px; border:5px solid var(--gold); border-bottom:0; border-radius:55px 55px 0 0; }
.lantern:after { content:""; position:absolute; inset:15px 17px; border-left:3px solid #dec69b; border-right:3px solid #dec69b; transform:skew(8deg); opacity:.72; }
.lamp-base { position:absolute; bottom:-9px; left:-12px; width:144px; height:17px; background:var(--gold); border-radius:12px; }
.lamp-flame { position:absolute; left:48px;top:59px; width:24px;height:42px;background:#f5cc73; clip-path:polygon(50% 0,73% 34%,100% 61%,73% 100%,25% 100%,0 62%); filter:drop-shadow(0 0 12px #fff2a3); }
.big-button, .secondary, .stamp { border:1px solid var(--amber); background:var(--amber); color:#292031; border-radius:2px; padding:13px 15px; font:700 11px Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; transition:transform .2s,background .2s; }
.big-button:hover,.secondary:hover,.stamp:hover { transform:translateY(-2px); background:#ffd08b; }
.lamp-action { margin:0 20px 17px; }
.micro { color:#aaa5b1; font:12px/1.55 Arial,sans-serif; margin:0 20px 19px; }
.coat-panel { background:radial-gradient(circle at 50% 55%,#4b3a4d,#292536 67%); }
.coat-stage { height:405px; display:grid; place-items:center; position:relative; }
.coat { width:215px;height:317px; position:relative; background:linear-gradient(120deg,#8b6359,#ae7967 38%,#704855); clip-path:polygon(18% 0,39% 6%,50% 35%,61% 6%,82% 0,98% 77%,90% 100%,10% 100%,2% 77%); filter:drop-shadow(0 12px 12px #0008); }
.coat:before { content:""; position:absolute; left:49%; top:0; height:100%; border-left:2px dashed #eac69a9b; transform:rotate(3deg); }
.coat:after { content:""; position:absolute; width:7px;height:7px;border-radius:50%;top:47%;left:54%;background:#f0d3a0; box-shadow:0 43px #f0d3a0,0 86px #f0d3a0; }
.lapel { position:absolute; top:0; width:52px;height:125px; background:#d39b7c; z-index:1; clip-path:polygon(0 0,100% 0,61% 96%,23% 53%); }
.lapel.left { left:38px; transform:rotate(-9deg); }
.lapel.right { right:38px; transform:scaleX(-1) rotate(-9deg); }
.pocket { position:absolute; z-index:2; width:69px;height:50px; bottom:42px; border:2px solid #edc294; border-top:5px solid #e5b987; background:#8d5d59dd; transform:rotate(5deg); display:grid;place-items:center; font-size:27px; }
.pocket.left { left:31px; transform:rotate(-6deg); }
.pocket.right { right:26px; }
.pocket.ticket { bottom:112px;left:18px;width:49px;height:35px;transform:rotate(-10deg);font-size:20px; }
.coat-caption { position:absolute; bottom:17px; left:0; right:0; text-align:center; color:#d7c9be; font:italic 13px Georgia,serif; }
.pocket-status { margin:0 20px 20px; padding:15px; background:#171824a8; border:1px solid #ffffff22; min-height:70px; font:14px/1.5 Arial,sans-serif; color:#d9caba; }
.pocket-status b { color:var(--mint); }
.files-panel { display:flex; flex-direction:column; }
.files-intro { margin:17px 20px 12px; font:14px/1.45 Arial,sans-serif; color:#c6bec1; }
.file-list { display:grid; gap:9px; padding:0 15px 15px; }
.file { width:100%; border:1px solid #ffffff2b; border-radius:2px; padding:13px 13px 11px; background:#1b1c2b; text-align:left; color:var(--paper); display:grid; grid-template-columns:39px 1fr; gap:10px; align-items:center; transition:background .2s,border-color .2s,transform .2s,filter .25s; }
.file:not(:disabled):hover { transform:translateX(3px); border-color:var(--amber); background:#303042; }
.file:disabled { cursor:not-allowed; opacity:.52; }
.file-icon { font-size:28px; opacity:.5; filter:grayscale(1); transition:opacity .3s,filter .3s; }
body.lit .file-icon { opacity:1; filter:none; }
.file-title { display:block; font:600 14px/1.2 Arial,sans-serif; margin-bottom:5px; }
.file-sub { display:block; color:#a6a0aa; font:11px/1.25 Arial,sans-serif; }
body:not(.lit) .file-title, body:not(.lit) .file-sub { filter:blur(5px); user-select:none; }
.file.selected { border-color:var(--mint); box-shadow:inset 3px 0 var(--mint); }
.file.pocketed { opacity:1; border-color:var(--gold); background:#3a3543; }
.lower { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-bottom:28px; }
.detail { padding:24px 25px; min-height:247px; }
.detail .label, .cooldown .label { color:var(--amber); font:700 10px Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.detail h2,.cooldown h2 { font-size:27px; font-weight:400; margin:13px 0 9px; line-height:1.06; }
.detail blockquote { color:#efe1c4; font:italic 19px/1.36 Georgia,serif; margin:16px 0 11px; }
.detail p,.cooldown p { color:#bfb8c0; font:13px/1.6 Arial,sans-serif; }
.source { color:var(--mint); font:12px/1.3 Arial,sans-serif; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.stamp { display:block; margin-top:17px; }
.stamp:disabled { opacity:.5; cursor:default; transform:none; }
.cooldown { padding:24px 25px; background:#293139bd; }
.cooldown h2 { color:var(--mint); }
.secondary { color:var(--mint); background:transparent; border-color:var(--mint); margin-top:12px; }
.secondary:hover { background:#2f5550; }
.cooldown-note { border-left:2px solid var(--mint); padding-left:15px; margin-top:20px; color:#e4dbc7; font:italic 18px/1.5 Georgia,serif; }
.hidden { display:none!important; }
.receipt { margin-bottom:28px; border:1px dashed var(--gold); background:#efe0bb; color:var(--ink); padding:22px 26px; display:grid; grid-template-columns:1fr auto; gap:15px; align-items:center; }
.receipt h2 { margin:0 0 6px; font-size:25px; font-weight:400; }
.receipt p { margin:0; font:13px/1.5 Arial,sans-serif; }
.receipt-mark { display:inline-block; margin-top:13px; padding:7px 10px; border:2px double #925f49; color:#70443b; transform:rotate(-1.5deg); font:italic 15px/1.3 Georgia,serif; }
.receipt-mark small { display:block; text-align:right; font:700 9px Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.receipt .secondary { color:var(--ink); border-color:var(--ink); margin:0; white-space:nowrap; }
.receipt .secondary:hover { background:#dfcda4; }
.shoulder { margin:0 0 33px; border-left:3px solid var(--amber); padding:3px 0 3px 17px; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.shoulder p { margin:0; color:#dbd3d1; font:italic 16px/1.4 Georgia,serif; }
.shoulder b { color:var(--amber); font-style:normal; font:700 11px Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.whisper { background:transparent;border:0;color:var(--mint);font:700 11px Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;white-space:nowrap; }
footer { border-top:1px solid #ffffff2a; padding:20px 0 38px; color:#a9a4ad; font:12px/1.65 Arial,sans-serif; display:flex;justify-content:space-between;gap:28px; }
footer strong { color:#dbd0be; font-weight:500; }
footer a { color:var(--mint); }
@media(max-width:980px){ .workbench{grid-template-columns:1fr 1fr}.files-panel{grid-column:1/-1}.file-list{grid-template-columns:1fr 1fr}.coat-stage{height:300px}.coat{transform:scale(.77)}.coat-caption{bottom:6px}.lamp-stage{min-height:240px} }
@media(max-width:650px){ .wrap{width:min(100% - 28px,460px)}header{padding-top:18px}.mark{letter-spacing:.13em}.shift{display:none}.hero{grid-template-columns:1fr;padding:40px 0 12px;gap:20px}.hero-side{font-size:12px}.deck{font-size:17px}.rule{font-size:9px;letter-spacing:.06em}.workbench,.lower{grid-template-columns:1fr}.files-panel{grid-column:auto}.file-list{grid-template-columns:1fr}.lamp-stage{min-height:230px}.coat-stage{height:305px}.detail,.cooldown{min-height:0}.receipt{grid-template-columns:1fr}.receipt .secondary{justify-self:start}.shoulder{align-items:start;flex-direction:column}.shoulder p{font-size:15px}footer{display:block}footer p{margin:0 0 12px} }
@media(prefers-reduced-motion:reduce){ *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important} }