:root{color-scheme:dark;font-family:"Malgun Gothic",system-ui,sans-serif;background:#050706;color:#eee8dc}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050706}
body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 55% 48%,transparent 0 38%,rgba(0,0,0,.28) 76%,rgba(0,0,0,.66) 100%);z-index:2}
#art{position:fixed;inset:0;width:100%;height:100%;display:block;background:#050706;cursor:crosshair;z-index:1}
.intro{position:fixed;left:3.1vw;top:3.6vh;max-width:min(760px,58vw);z-index:8;pointer-events:none;transition:opacity 1.4s ease,transform 1.4s ease;text-shadow:0 3px 24px #000}
.intro.hide{opacity:.22;transform:translateY(-5px)}
.kicker{font:600 clamp(10px,.72vw,14px)/1 ui-monospace,Consolas,monospace;letter-spacing:.22em;color:#d1b46c}
.intro h1{font-family:Batang,serif;font-weight:500;font-size:clamp(31px,3.2vw,62px);letter-spacing:-.04em;margin:9px 0 7px}
.intro p{font-size:clamp(12px,.95vw,18px);line-height:1.65;color:#c5c0b4;margin:0 0 7px}.hint{font-size:clamp(9px,.68vw,13px);letter-spacing:.05em;color:#858980}

.storyPanel{position:fixed;left:3.1vw;bottom:5.8vh;width:min(720px,52vw);z-index:7;pointer-events:none;padding:0 0 16px 0;border-bottom:1px solid rgba(226,205,151,.33);text-shadow:0 3px 22px #000;transition:opacity .45s ease,transform .45s ease}
.storyMeta{display:flex;gap:12px;align-items:center;font:600 clamp(10px,.7vw,13px)/1 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#cfad61}
.storyMeta span:first-child{font-size:clamp(26px,2.4vw,44px);letter-spacing:-.05em;color:#efe0b1}
.storyPanel h2{font-family:Batang,serif;font-weight:500;font-size:clamp(24px,2.15vw,42px);line-height:1.22;letter-spacing:-.035em;margin:8px 0 9px;max-width:680px}
.storyPanel p{font-size:clamp(12px,1vw,19px);line-height:1.72;color:#d0cbc0;margin:0;max-width:650px}
.storyFoot{display:flex;justify-content:space-between;gap:20px;margin-top:13px;font:500 clamp(9px,.68vw,12px)/1.2 ui-monospace,Consolas,monospace;color:#9b9a91;letter-spacing:.08em}
#storySource{color:#bba66f}

.archivePanel{position:fixed;right:2.8vw;top:7vh;width:min(350px,22vw);z-index:6;pointer-events:none;opacity:.88;transition:opacity .4s ease,transform .5s ease}
.archiveHeader{display:flex;justify-content:space-between;gap:10px;font:600 clamp(9px,.62vw,11px)/1 ui-monospace,Consolas,monospace;letter-spacing:.13em;color:#aaa28e;margin-bottom:10px}
.sheetStack{position:relative;height:min(39vh,360px);perspective:900px}
.sheet{position:absolute;inset:0;margin:0;background:#c7b68b;border:1px solid rgba(255,245,213,.18);box-shadow:0 22px 60px #000b;overflow:hidden;transform-origin:50% 100%;transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .75s ease,filter .75s ease}
.sheet img{width:100%;height:100%;object-fit:cover;filter:sepia(.17) contrast(.94) brightness(.86);display:block}
.sheet figcaption{position:absolute;left:9px;bottom:8px;padding:4px 6px;background:rgba(7,8,6,.72);font:600 9px/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;color:#ded2b6}
.s1917{transform:translate(-17px,13px) rotate(-3.6deg) scale(.92);opacity:.36}
.s1925{transform:translate(14px,5px) rotate(2.7deg) scale(.96);opacity:.48}
.s1936{transform:translate(0,0) rotate(-.4deg);opacity:.74}
.archivePanel.active .s1917{transform:translate(-48px,22px) rotate(-8deg) scale(.92);opacity:.68}
.archivePanel.active .s1925{transform:translate(32px,7px) rotate(6deg) scale(.96);opacity:.72}
.archivePanel.active .s1936{transform:translate(-2px,-9px) rotate(-1deg);opacity:.93}
.archivePanel p{font-size:clamp(9px,.7vw,12px);line-height:1.55;color:#8e8e85;margin:11px 0 0}

.eventText{position:fixed;left:0;top:0;max-width:min(560px,44vw);z-index:9;pointer-events:none;opacity:0;transition:opacity .18s linear;transform:translate(-50%,-50%);text-shadow:0 2px 12px #000}
.eventText.show{opacity:1}.eventText b{display:block;font-family:Batang,serif;font-size:clamp(20px,2.1vw,38px);font-weight:500;line-height:1.2;color:#f1dfac}.eventText span{display:block;margin-top:6px;font-size:clamp(10px,.9vw,15px);line-height:1.55;color:#d1cbc0}

.layerBadge{position:fixed;right:2.8vw;bottom:2.2vh;z-index:6;font:9px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.1em;color:#777e75;background:rgba(6,8,6,.34);padding:5px 7px;pointer-events:none}
.timeRail{position:fixed;left:3.1vw;right:3.1vw;bottom:1.8vh;z-index:6;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(203,193,165,.17);padding-top:6px;pointer-events:none}
.timeRail span{font:500 clamp(8px,.55vw,10px)/1 ui-monospace,Consolas,monospace;color:#666d66;letter-spacing:.06em}

.info{position:fixed;right:2.5vw;top:3vh;width:min(520px,calc(100vw - 36px));z-index:20;background:rgba(10,12,9,.95);border:1px solid #45453b;padding:25px 28px;box-shadow:0 18px 80px #000c;backdrop-filter:blur(12px)}
.info button{position:absolute;right:12px;top:8px;border:0;background:transparent;color:#aaa;font-size:24px;cursor:pointer}.info h2{font-family:Batang,serif;font-weight:500;font-size:27px;margin:0 0 14px}.info p{font-size:13px;line-height:1.75;color:#bbb}.info b{color:#e7d49d;font-weight:600}.info .small{font-size:10px;color:#777}.legend{display:flex;flex-wrap:wrap;gap:6px}.legend span{font-size:10px;border:1px solid #44463e;padding:5px 7px;color:#bfb9aa}

body.explainLock .intro{opacity:.45!important}.storyPanel.bump{transform:translateY(-5px)}.archivePanel.bump{transform:translateY(-4px)}

@media(max-width:900px){.intro{left:18px;top:18px;max-width:83vw}.intro h1{font-size:29px}.intro p{font-size:12px}.archivePanel{right:14px;top:17vh;width:31vw;opacity:.68}.sheetStack{height:27vh}.storyPanel{left:18px;bottom:48px;width:calc(100vw - 36px);max-width:620px;padding-right:34vw}.storyPanel h2{font-size:24px}.storyPanel p{font-size:12px}.eventText{max-width:72vw}.layerBadge{display:none}.timeRail{left:18px;right:18px}}
@media(max-width:620px){.archivePanel{top:16vh;width:38vw}.storyPanel{padding-right:0;background:linear-gradient(90deg,rgba(5,7,6,.78),rgba(5,7,6,.28));backdrop-filter:blur(3px)}.archivePanel{opacity:.34}.storyPanel h2{font-size:21px}.storyPanel p{max-width:82vw}.timeRail span:nth-child(2),.timeRail span:nth-child(5){display:none}}