:root { --cream: #fff0d2; --paper: #f6d5a5; --peach: #e89a78; --pink: #cd6f78; --green: #879f79; --brown: #472d28; --ink: #2c1d1b; --shadow: #7f4e3b; font-family: "Courier New", ui-monospace, monospace; color: var(--ink); background: var(--cream); }
* { box-sizing: border-box; } html, body { width: 100%; min-height: 100%; margin: 0; } body { overflow: hidden; }
button { font: inherit; } [hidden] { display: none !important; }
.archive-app { min-height: 100dvh; width: 100%; overflow: hidden; background-color: var(--cream); }
.boot-screen, .archive-screen { min-height: 100dvh; width: min(100%, 640px); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) clamp(18px, 5vw, 32px) max(20px, env(safe-area-inset-bottom)); }
.boot-screen { display: grid; place-items: center; background: var(--brown); color: var(--cream); transition: opacity .35s steps(3), transform .35s steps(3); }.boot-screen.is-leaving { opacity: 0; transform: scale(1.04); }
.boot-device { position: relative; width: min(100%, 360px); border: 5px solid var(--cream); padding: 32px 24px 28px; box-shadow: 7px 7px 0 #1e1414; text-align: center; }.boot-kicker, .system-label, .footer-note { margin: 0; font-size: 11px; letter-spacing: .08em; font-weight: 700; }.boot-device h1, .archive-header h1 { margin: 18px 0; font-size: clamp(28px, 8vw, 42px); line-height: .9; letter-spacing: -.08em; }.boot-message { min-height: 2em; margin: 25px 0 12px; font-size: 13px; font-weight: bold; }.dots { animation: blink 1s steps(2) infinite; }.loading-track { height: 13px; border: 3px solid var(--cream); padding: 2px; }.loading-track span { display: block; width: 0; height: 3px; background: var(--peach); transition: width .6s steps(6); }
.boot-folder, .pixel-folder { position: relative; width: 72px; height: 51px; margin: 0 auto; border: 4px solid currentColor; background: var(--paper); color: var(--brown); box-shadow: 5px 5px 0 var(--peach); }.boot-folder::before, .pixel-folder::before { content: ""; position: absolute; width: 29px; height: 11px; top: -14px; left: 7px; border: 4px solid currentColor; border-bottom: 0; background: var(--paper); }.boot-folder span, .pixel-folder span { position: absolute; inset: 11px 14px; border: 4px solid var(--pink); }.boot-folder { color: var(--cream); background: var(--green); box-shadow: 5px 5px 0 var(--peach); }.boot-folder::before { background: var(--green); }.pixel-stars i { position: absolute; display: block; width: 7px; height: 7px; background: var(--peach); }.pixel-stars i:nth-child(1) { top: 17px; left: 20px; }.pixel-stars i:nth-child(2) { top: 33px; right: 21px; background: var(--green); }.pixel-stars i:nth-child(3) { bottom: 44px; left: 32px; animation: bounce .7s steps(2) infinite; }
.archive-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: clamp(10px, 2vh, 18px); opacity: 0; transform: translateY(10px); transition: opacity .25s steps(2), transform .25s steps(2); }.archive-screen.is-ready { opacity: 1; transform: none; }.archive-header { position: relative; border-bottom: 4px solid var(--brown); padding: 4px 0 10px; }.archive-header h1 { margin: 8px 0 0; font-size: clamp(24px, 7vw, 37px); }.header-stamp { position: absolute; right: 2px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--brown); background: var(--peach); font-size: 20px; box-shadow: 3px 3px 0 var(--brown); }
.discovery-stage { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); place-items: center; gap: 7px; }.stage-message { min-height: 1.4em; margin: 0; text-align: center; font-size: clamp(10px, 3vw, 12px); font-weight: bold; }.dossier-card { position: relative; display: grid; place-items: center; width: min(100%, 410px); height: 100%; max-height: 55dvh; min-height: 240px; border: 5px solid var(--brown); background: var(--paper); box-shadow: 7px 7px 0 var(--shadow); overflow: hidden; }.card-corners::before, .card-corners::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--pink); border-style: solid; }.card-corners::before { top: 10px; left: 10px; border-width: 4px 0 0 4px; }.card-corners::after { right: 10px; bottom: 10px; border-width: 0 4px 4px 0; }
.mystery-card { display: grid; place-items: center; gap: 16px; text-align: center; font-weight: bold; }.mystery-card p { margin: 0; font-size: clamp(17px, 5vw, 23px); }.mystery-card small { font-size: 10px; }.mystery-sticker { position: absolute; top: 22px; right: 18px; border: 3px solid var(--brown); padding: 5px; background: var(--pink); color: var(--cream); font-size: 9px; line-height: 1; transform: rotate(8deg); box-shadow: 3px 3px 0 var(--brown); }.pixel-folder { width: 95px; height: 66px; }.pixel-folder.empty { opacity: .55; }.photo-card { width: 100%; height: 100%; padding: clamp(17px, 4vw, 25px); }.photo-frame { display: grid; place-items: center; width: 100%; height: calc(100% - 29px); border: 8px solid #fff8e8; background: #d7b785; box-shadow: 4px 4px 0 var(--brown); }.photo-frame img { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; background: #d7b785; }.photo-caption { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; font-size: clamp(9px, 2.5vw, 11px); font-weight: bold; }.photo-caption span:last-child { color: var(--pink); }
.discover-button { min-height: 52px; border: 4px solid var(--brown); padding: 11px 17px; background: var(--peach); color: var(--brown); box-shadow: 5px 5px 0 var(--brown); font-size: clamp(14px, 4vw, 17px); font-weight: 900; letter-spacing: -.03em; cursor: pointer; }.discover-button:not(:disabled):hover { background: #f0b58d; }.discover-button:not(:disabled):active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--brown); }.discover-button:disabled { background: #cab79d; cursor: wait; opacity: .75; }.button-spark { margin-right: 5px; color: var(--pink); }.footer-note { text-align: center; font-size: 9px; color: var(--shadow); }
.dossier-card.is-revealing .photo-card { animation: reveal .48s steps(5); }.dossier-card.is-filing .photo-card { animation: filing .32s steps(3) forwards; }.dossier-card.is-searching .mystery-card { animation: searching .68s steps(4); }.dossier-card.is-closed .mystery-card { animation: idle .9s steps(2) infinite; }
@keyframes reveal { from { opacity: 0; transform: scale(.55) rotate(-7deg); } 60% { opacity: 1; transform: scale(1.04) rotate(2deg); } to { transform: none; } } @keyframes filing { to { opacity: 0; transform: translateX(115%) rotate(12deg) scale(.8); } } @keyframes searching { 50% { transform: translateX(7px) rotate(2deg); } } @keyframes idle { 50% { transform: translateY(-4px); } } @keyframes blink { 50% { opacity: 0; } } @keyframes bounce { 50% { transform: translateY(-5px); } }
@media (min-width: 680px) { body { background: var(--brown); }.archive-app { max-width: 540px; margin: 0 auto; box-shadow: 12px 0 0 rgba(0,0,0,.15), -12px 0 0 rgba(0,0,0,.15); }.dossier-card { max-height: 530px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.boot-folder { width: clamp(88px, 25vw, 120px); height: clamp(58px, 16vw, 78px); margin: 8px auto 22px; color: var(--brown); background: #e8bd61; box-shadow: 6px 6px 0 #b27540; animation: bounce .9s steps(2) infinite; }
.boot-folder::before { width: 44%; height: 14px; background: #f5d078; }.boot-folder span { inset: 12px; border-color: #f9dd99; }
.settings-button { position: absolute; right: 2px; bottom: 8px; width: 46px; height: 46px; border: 3px solid var(--brown); background: var(--peach); color: var(--brown); box-shadow: 3px 3px 0 var(--brown); font-size: 25px; cursor: pointer; }.settings-button:active { transform: translate(3px,3px); box-shadow: none; }
.settings-panel { position: fixed; z-index: 10; inset: 0; padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); background: var(--brown); }.settings-window { display: grid; grid-template-rows: auto minmax(0,1fr); width: min(100%,540px); height: 100dvh; max-height: calc(100dvh - 24px); margin: auto; border: 5px solid var(--brown); background: var(--cream); box-shadow: 7px 7px 0 #1e1414; }.settings-window header { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:4px solid var(--brown); background:var(--paper); }.settings-window h2,.settings-window h3 { margin:0; }.settings-window header button,.settings-window section button,.settings-list button { border:3px solid var(--brown); background:var(--peach); box-shadow:3px 3px 0 var(--brown); min-height:38px; font:inherit; font-weight:bold; }.settings-scroll { overflow:auto; padding:16px; }.settings-scroll section { padding:14px 0; border-bottom:3px dashed var(--shadow); }.settings-scroll input { width:100%; margin:12px 0; }.settings-scroll p { font-size:12px; }.settings-list { display:grid; gap:8px; margin-top:12px; }.settings-list > div { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:9px; border:3px solid var(--brown); padding:5px; background:var(--paper); }.settings-list img { width:48px; height:48px; object-fit:cover; }.settings-list span { overflow-wrap:anywhere; font-size:11px; font-weight:bold; }.settings-list button { min-height:30px; font-size:10px; background:var(--pink); color:var(--cream); }
.photo-card { min-height:0; padding:clamp(10px,3vw,20px); }.photo-frame { min-height:0; }.photo-frame img { object-fit:contain; }

/* The sealed card stays portrait-shaped; opened dossiers grow with the full image. */
body { overflow-x: hidden; overflow-y: auto; }
.archive-app { overflow: visible; }
.archive-screen { display: flex; flex-direction: column; min-height: 100dvh; height: auto; }
.discovery-stage { display: block; min-height: 0; }
.stage-message { margin-bottom: 8px; }
.dossier-card { height: auto; max-height: none; min-height: 0; overflow: visible; }
.dossier-card.is-closed { aspect-ratio: 4 / 5; min-height: clamp(330px, 90vw, 480px); }
.dossier-card.is-closed .mystery-card { min-height: 100%; align-content: center; padding: 36px 16px; }
.dossier-card:not(.is-closed) { display: block; }
.photo-card { height: auto; padding: clamp(12px, 3.5vw, 20px); }
.photo-frame { display: block; width: 100%; height: auto; min-height: 0; }
.photo-frame img { display: block; width: 100%; height: auto; max-width: 100%; max-height: min(150vh, 900px); object-fit: contain; }
.photo-caption { min-height: 30px; align-items: center; }