:root {
  color-scheme: light;
  --felt: #b6a47f;
  --felt-deep: #a7936c;
  --ink: #40372c;
  --paper: #eee3ca;
  --paper-deep: #d8c6a3;
  --wood: #80654a;
  --rust: #8d493b;
  --shadow: rgba(54, 41, 27, .24);
}

* { box-sizing: border-box; }
html { background: var(--felt-deep); }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", "Microsoft YaHei", serif;
  overflow-x: hidden;
}
button, input, textarea { font: inherit; }
button { color: inherit; }

#museum { position: relative; min-height: 100vh; isolation: isolate; }
.wall {
  position: relative;
  min-height: 2400px;
  overflow: hidden;
  background-color: var(--felt);
  background-image:
    radial-gradient(circle at 13% 21%, rgba(255,255,255,.11) 0 1px, transparent 1.8px),
    radial-gradient(circle at 77% 64%, rgba(74,55,37,.09) 0 1px, transparent 1.8px),
    repeating-linear-gradient(17deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(101deg, rgba(73,52,31,.022) 0 1px, transparent 1px 6px);
  background-size: 19px 23px, 27px 31px, auto, auto;
}
.wall::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 1090px, rgba(77,59,39,.10) 1091px, rgba(255,255,255,.09) 1093px, transparent 1096px 1100px);
  box-shadow: inset 0 0 100px rgba(66,48,28,.12);
}
.museum-mark {
  position: fixed; z-index: 30; top: max(18px, env(safe-area-inset-top)); left: 20px;
  color: rgba(57,44,30,.66); pointer-events: none;
  text-shadow: 0 1px rgba(255,255,255,.25);
}
.museum-mark span { display: block; font: italic 1.05rem Georgia, serif; letter-spacing: .025em; }
.museum-mark small { font: .62rem Georgia, serif; letter-spacing: .18em; }

.edge-button {
  position: fixed; z-index: 35; border: 1px solid rgba(91,68,43,.24);
  background: rgba(226,210,178,.90); box-shadow: 0 5px 14px rgba(57,42,25,.18);
  min-height: 44px; padding: 10px 16px; cursor: pointer;
  backdrop-filter: blur(6px); transition: transform .2s, box-shadow .2s;
}
.edge-button:hover { transform: translateY(-2px); box-shadow: 0 7px 17px rgba(57,42,25,.22); }
.add-button { top: max(18px, env(safe-area-inset-top)); right: 18px; border-radius: 2px 8px 3px 5px; transform: rotate(.4deg); }
.box-button { bottom: max(15px, env(safe-area-inset-bottom)); left: 16px; border-radius: 4px 3px 7px 2px; font-size: .84rem; }
.box-menu {
  position: fixed; z-index: 34; left: 16px; bottom: calc(max(15px, env(safe-area-inset-bottom)) + 52px);
  width: min(310px, calc(100vw - 32px)); padding: 15px 16px 13px;
  background: #b29169; border: 1px solid rgba(80,57,35,.3); border-radius: 3px;
  box-shadow: 0 12px 28px rgba(50,35,21,.28); transform: rotate(-.3deg);
}
.box-menu::before { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.16); pointer-events:none; }
.box-menu button { position:relative; display:block; width:100%; border:0; border-bottom:1px solid rgba(70,50,31,.2); background:transparent; text-align:left; padding:10px 5px; cursor:pointer; }
.box-menu p { position:relative; margin:11px 4px 2px; font-size:.75rem; line-height:1.65; color:#4f3d2c; }

.empty-whisper { position:absolute; z-index:2; top:44vh; left:50%; transform:translateX(-50%) rotate(-1deg); margin:0; color:rgba(65,50,33,.47); white-space:nowrap; font-size:.88rem; letter-spacing:.08em; }

.memory {
  position: absolute; z-index: 5; touch-action: pan-y; cursor: grab;
  transform-origin: center; user-select: none; transition: filter .2s, opacity .3s;
}
.memory.entering { animation: pin-on .48s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes pin-on { 0% { opacity:0; scale:.88; translate:0 -18px; } 70% { scale:1.025; } 100% { opacity:1; scale:1; translate:0 0; } }
.memory img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.memory.style-original { padding:0; background:#d9c9aa; box-shadow:0 8px 14px var(--shadow); }
.memory.style-polaroid { padding:9px 9px 30px; background:#eee8da; box-shadow:1px 8px 16px var(--shadow); }
.memory.style-sticker { padding:6px; background:#f0ede4; border-radius:8px 11px 7px 10px; box-shadow:1px 6px 10px rgba(47,35,22,.2); }
.memory.style-polaroid img, .memory.style-sticker img { object-fit:cover; }
.memory::before { content:""; position:absolute; z-index:4; left:50%; top:-7px; width:14px; height:14px; border-radius:50%; transform:translateX(-50%); background:radial-gradient(circle at 38% 30%, #dc9f8d 0 15%, #9c4d3e 42%, #6e342c 100%); box-shadow:0 2px 3px rgba(47,28,20,.45); }
.memory.style-sticker::before { display:none; }
.memory.style-sticker::after { content:""; position:absolute; top:-8px; left:31%; width:39%; height:25px; background:rgba(224,211,178,.62); transform:rotate(-3deg); box-shadow:0 1px 1px rgba(72,55,35,.08); }
.memory.placing { z-index:25; outline:1px dashed rgba(64,48,31,.7); cursor:grabbing; touch-action:none; }
.resize-handle, .rotate-handle { display:none; position:absolute; z-index:8; border:1px solid rgba(55,41,28,.45); background:#e8dcc3; box-shadow:0 2px 5px rgba(50,35,22,.25); }
.placing .resize-handle, .placing .rotate-handle { display:block; }
.resize-handle { width:28px; height:28px; right:-16px; bottom:-16px; border-radius:50%; cursor:nwse-resize; }
.rotate-handle { width:25px; height:25px; left:calc(50% - 12px); top:-45px; border-radius:50%; cursor:grab; }
.rotate-handle::after { content:""; position:absolute; left:11px; top:24px; width:1px; height:20px; background:rgba(55,41,28,.45); }

dialog { color:var(--ink); }
dialog::backdrop { background:rgba(45,35,25,.54); backdrop-filter:blur(4px); }
.paper-dialog { width:min(520px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:3px 7px 4px 2px; background:var(--paper); box-shadow:0 22px 70px rgba(42,30,19,.4); }
.paper-dialog form { position:relative; padding:28px clamp(20px,5vw,40px) 34px; background-image:repeating-linear-gradient(4deg, transparent 0 9px, rgba(92,70,43,.025) 10px); }
.paper-dialog h1 { margin:3px 0 22px; font-size:1.55rem; font-weight:500; letter-spacing:.08em; }
.dialog-kicker { margin:0; font:italic .78rem Georgia, serif; color:#7a6750; letter-spacing:.08em; }
.close-button, .view-close { position:absolute; z-index:4; top:12px; right:14px; width:42px; height:42px; border:0; background:transparent; cursor:pointer; font-size:1.7rem; font-family:Georgia,serif; }
.picker-step { display:grid; gap:12px; padding:14px 0 4px; }
.pick-photo { display:flex; align-items:center; justify-content:center; min-height:58px; border:1px solid #8f795d; cursor:pointer; background:rgba(255,255,255,.19); }
.pick-photo.secondary { border-style:dashed; }
.compose-preview { margin:0 auto 22px; width:min(250px,72vw); height:210px; padding:0; background:#e5dac4; box-shadow:0 8px 18px rgba(58,43,27,.2); transform:rotate(-.6deg); }
.compose-preview img { width:100%; height:100%; object-fit:contain; display:block; }
.compose-preview.style-polaroid { padding:9px 9px 30px; background:#eee8da; }
.compose-preview.style-polaroid img, .compose-preview.style-sticker img { object-fit:cover; }
.compose-preview.style-sticker { padding:7px; border-radius:8px; background:#f1eee6; }
.style-picker { border:0; padding:0; margin:0 0 18px; }
.style-picker legend { font-size:.8rem; color:#6f5e49; margin-bottom:8px; }
.style-picker label { display:inline-block; margin:0 5px 6px 0; }
.style-picker input { position:absolute; opacity:0; }
.style-picker span { display:block; border:1px solid rgba(91,70,45,.35); padding:8px 12px; cursor:pointer; font-size:.88rem; }
.style-picker input:checked + span { background:#8b7357; color:#fff9eb; border-color:#8b7357; }
.field-label { display:block; margin:14px 0; color:#645441; font-size:.84rem; }
.field-label span { color:#8a7964; }
.field-label input, .field-label textarea { display:block; width:100%; margin-top:7px; border:0; border-bottom:1px solid #a48c6e; border-radius:0; background:rgba(255,255,255,.18); padding:11px 10px; color:#40372c; font-size:1rem; resize:vertical; outline:none; }
.field-label input:focus, .field-label textarea:focus { border-color:#624c36; background:rgba(255,255,255,.32); }
.pin-button { display:block; width:100%; margin-top:20px; min-height:50px; border:0; background:#745a43; color:#fff8e9; cursor:pointer; }

.view-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:clamp(28px,5vh,56px) 18px 30px; border:0; background:rgba(57,47,36,.20); overflow:auto; }
.view-dialog::backdrop { background:rgba(54,44,33,.78); backdrop-filter:blur(8px); }
.view-close { position:fixed; color:#f2e8d7; font-size:2rem; }
.focus-object { margin:auto; width:min(690px, 88vw); height:min(68vh, 650px); display:flex; align-items:center; justify-content:center; }
.focus-object img { display:block; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(25,18,12,.3)); }
.focus-object.style-polaroid { width:min(610px,88vw); padding:14px 14px 52px; background:#eee8da; box-shadow:0 18px 35px rgba(25,18,12,.34); transform:rotate(-.5deg); }
.focus-object.style-polaroid img { width:100%; height:100%; object-fit:contain; }
.focus-object.style-sticker img { padding:8px; background:#f0ede4; border-radius:10px; }
.focus-caption { width:min(620px,90vw); margin:22px auto 0; color:#f2e8d7; text-align:center; }
.focus-caption time { display:block; font:italic .82rem Georgia, "Songti SC", serif; letter-spacing:.09em; opacity:.82; }
.focus-caption p { margin:12px auto 20px; font-size:1rem; line-height:1.8; white-space:pre-wrap; }
.object-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 16px; }
.object-actions button { min-height:42px; border:0; border-bottom:1px solid rgba(244,233,214,.42); background:transparent; color:#f2e8d7; cursor:pointer; }
.object-actions button:last-child { color:#e7c1b8; }
.small-dialog { width:min(430px,calc(100vw - 24px)); }
.remove-copy { line-height:1.7; color:#6e5b45; }
.confirm-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
.confirm-actions button { min-height:44px; padding:8px 18px; border:1px solid #9b8468; background:transparent; cursor:pointer; }
.confirm-actions .danger { background:#7d4339; color:#fff4e6; border-color:#7d4339; }
.placement-hint { position:fixed; z-index:45; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(520px,calc(100vw - 28px)); padding:10px 12px 10px 16px; background:rgba(62,49,35,.9); color:#f3ead9; border-radius:4px; box-shadow:0 8px 22px rgba(40,29,18,.28); display:flex; gap:12px; align-items:center; justify-content:space-between; font-size:.78rem; }
.placement-hint button { flex:none; min-height:40px; border:1px solid rgba(255,255,255,.35); background:transparent; color:inherit; padding:6px 12px; cursor:pointer; }

@media (max-width: 620px) {
  .museum-mark { left:14px; top:max(13px,env(safe-area-inset-top)); }
  .museum-mark span { font-size:.93rem; }
  .museum-mark small { font-size:.56rem; }
  .add-button { top:max(11px,env(safe-area-inset-top)); right:10px; padding:9px 12px; }
  .box-button { left:10px; bottom:max(10px,env(safe-area-inset-bottom)); }
  .wall { min-height:2600px; }
  .memory { cursor:pointer; }
  .empty-whisper { top:43vh; max-width:75vw; white-space:normal; text-align:center; line-height:1.8; }
  .focus-object { height:min(60vh,560px); }
  .placement-hint span { line-height:1.45; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* V0.1.1 — a fixed exhibition opening with felt boards sliding behind it */
:root {
  --felt: #ded5c2;
  --felt-deep: #d3c8b3;
  --paper: #f2ead9;
  --paper-deep: #ded1b9;
  --shadow: rgba(63, 50, 35, .15);
}
html, body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:var(--felt-deep); }
#museum { height:100dvh; min-height:0; overflow:hidden; background:var(--felt); }
.wall { position:absolute; inset:0; min-height:0 !important; overflow:hidden; background:#ded5c2; touch-action:none; }
.wall::before { display:none; }
.board-track { position:absolute; inset:0 0 auto; width:100%; will-change:transform; }
.board-track.sliding { transition:transform .42s cubic-bezier(.22,.74,.2,1); }
.felt-panel {
  position:absolute; left:0; width:100%; overflow:hidden;
  background-color:#ded5c2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72 .16' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .29 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  background-size:260px 260px;
  box-shadow:inset 0 0 90px rgba(104,83,55,.065);
}
.felt-panel::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:linear-gradient(to bottom, rgba(87,68,45,.055), rgba(255,255,255,.16) 42%, rgba(83,63,42,.08) 52%, transparent);
  pointer-events:none;
}
.empty-whisper { position:fixed; top:46%; z-index:3; }
.museum-mark { color:rgba(66,54,39,.51); }
.edge-button { background:rgba(239,231,214,.91); border-color:rgba(100,79,51,.20); box-shadow:0 3px 10px rgba(61,47,31,.13); }
.box-menu { background:#b9a17f; }

.memory { position:absolute; box-shadow:none; }
.memory.style-original { padding:2px; background:#f2ecdf; box-shadow:0 3px 7px rgba(56,43,28,.16); }
.memory.style-polaroid {
  padding:9px 9px 34px; background:#f1ecdf;
  background-image:radial-gradient(circle at 20% 30%,rgba(115,96,69,.025) 0 .7px,transparent 1px);
  background-size:13px 17px; box-shadow:0 4px 9px rgba(56,43,28,.17);
}
.memory.style-sticker { padding:6px; background:#f3efe5; box-shadow:0 3px 6px rgba(56,43,28,.13); }
.memory::before { top:-7px; }
.memory.style-sticker::after { background:rgba(233,223,199,.70); box-shadow:0 1px 2px rgba(62,49,32,.08); }
.memory.placing { outline:1px dashed rgba(79,61,40,.62); touch-action:none; }
.compose-preview.style-original { padding:2px; background:#f2ecdf; box-shadow:0 3px 8px rgba(58,43,27,.15); }
.compose-preview.style-polaroid { padding:9px 9px 34px; background:#f1ecdf; box-shadow:0 4px 10px rgba(58,43,27,.16); }
.compose-preview.style-sticker { background:#f3efe5; box-shadow:0 3px 7px rgba(58,43,27,.13); }

.moment-editor { border:0; padding:0; margin:18px 0; }
.moment-editor legend { margin-bottom:10px; color:#645441; font-size:.84rem; }
.moment-row { display:flex; align-items:flex-end; gap:8px; margin:4px 0 10px; }
.moment-row label { display:flex; flex-direction:column; gap:3px; }
.moment-row label span { font-size:.68rem; color:#907d65; text-align:center; }
.moment-row input { width:4.6rem; height:42px; border:0; border-bottom:1px solid #a48c6e; border-radius:0; background:rgba(255,255,255,.24); color:#40372c; text-align:center; font:1rem Georgia,serif; outline:none; }
.moment-row input:focus { border-color:#624c36; background:rgba(255,255,255,.42); }
.moment-row b { padding-bottom:11px; font:1rem Georgia,serif; color:#806b51; }
.time-row input { width:4.6rem; }
.moment-guide { display:none; }

.placement-hint {
  left:auto; right:12px; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 62px); transform:none;
  width:min(340px,calc(100vw - 24px)); padding:10px 10px 10px 14px;
  background:rgba(66,54,40,.91); font-size:.82rem;
}
.placement-hint button { background:#eee4d1; color:#493c2e; border:0; border-radius:2px; }
.first-placement-hint {
  position:fixed; z-index:46; top:86px; left:50%; transform:translateX(-50%);
  width:min(360px,calc(100vw - 28px)); padding:11px 12px 11px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:#4f4233; background:rgba(242,234,217,.96); border:1px solid rgba(91,71,46,.18); box-shadow:0 5px 15px rgba(55,42,28,.14); font-size:.82rem;
}
.first-placement-hint button { flex:none; min-height:38px; border:0; border-bottom:1px solid #8c755a; background:transparent; cursor:pointer; }
.first-placement-hint[hidden], .placement-hint[hidden] { display:none !important; }

@media (max-width:620px) {
  .wall { min-height:0 !important; }
  .moment-row { gap:6px; }
  .date-row input { width:3.5rem; }
  .date-row label:first-child input { width:5rem; }
  .placement-hint { bottom:calc(max(10px,env(safe-area-inset-bottom)) + 58px); }
  .box-menu { bottom:calc(max(10px,env(safe-area-inset-bottom)) + 50px); }
}

/* V0.1.2 — quiet photographic paper and an aged-metal pin */
.memory.style-polaroid {
  padding:8px 8px 34px;
  background-color:#f6f1e6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .38 0 0 0 0 .29 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.32'/%3E%3C/svg%3E"),
    linear-gradient(104deg,#f8f4eb 0%,#f3eee3 54%,#f7f2e8 100%);
  background-size:180px 180px,100% 100%;
  box-shadow:0 2px 3px rgba(64,50,33,.11),0 5px 10px rgba(64,50,33,.075);
}
.memory.style-polaroid img {
  object-fit:contain;
  background:#eeeae1;
  filter:none;
}
.memory.style-original {
  background:#f5f0e5;
  box-shadow:0 2px 4px rgba(64,50,33,.12),0 4px 8px rgba(64,50,33,.055);
}
.memory.style-sticker {
  background:#f6f2e9;
  box-shadow:0 2px 4px rgba(64,50,33,.105),0 4px 7px rgba(64,50,33,.045);
}
.memory:not(.style-sticker)::before {
  top:-5px;
  width:11px;
  height:11px;
  z-index:6;
  background:
    radial-gradient(circle at 36% 28%,rgba(255,249,220,.58) 0 8%,transparent 24%),
    radial-gradient(circle at 50% 56%,#b4a079 0 38%,#8c7957 69%,#6f6047 100%);
  border:1px solid rgba(91,75,49,.46);
  box-shadow:
    inset -1px -1px 2px rgba(65,51,31,.25),
    0 1px 1px rgba(56,43,27,.34),
    0 0 0 2px rgba(78,61,39,.035);
}
.memory:not(.style-sticker)::after {
  content:"";
  position:absolute;
  z-index:5;
  left:calc(50% + 1px);
  top:3px;
  width:1px;
  height:7px;
  transform:rotate(13deg);
  transform-origin:top;
  background:linear-gradient(to bottom,#776b58,#bcb29f 46%,#6d6354);
  box-shadow:1px 0 1px rgba(58,45,29,.20);
  pointer-events:none;
}
.compose-preview.style-polaroid {
  padding:8px 8px 34px;
  background-color:#f6f1e6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .38 0 0 0 0 .29 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.32'/%3E%3C/svg%3E"),
    linear-gradient(104deg,#f8f4eb,#f3eee3 54%,#f7f2e8);
  box-shadow:0 2px 4px rgba(64,50,33,.12),0 5px 9px rgba(64,50,33,.06);
}
.compose-preview.style-polaroid img { object-fit:contain; background:#eeeae1; filter:none; }
.focus-object.style-polaroid {
  padding:13px 13px 54px;
  background-color:#f6f1e6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .38 0 0 0 0 .29 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.32'/%3E%3C/svg%3E"),
    linear-gradient(104deg,#f8f4eb,#f3eee3 54%,#f7f2e8);
  box-shadow:0 7px 18px rgba(25,18,12,.20);
}
.focus-object.style-polaroid img { object-fit:contain; background:#eeeae1; filter:none; }

/* V0.2 — the paper index and archive room */
.museum-index { position:fixed; z-index:70; left:0; top:104px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; pointer-events:none; }
.museum-tab { pointer-events:auto; min-width:62px; min-height:38px; padding:8px 11px 7px 9px; border:1px solid rgba(86,67,43,.22); border-left:0; border-radius:0 3px 3px 0; background:#e8ddc6; color:#6c5b46; box-shadow:2px 3px 7px rgba(55,42,27,.10); font:600 .67rem Georgia,serif; letter-spacing:.12em; cursor:pointer; transform:translateX(-7px); transition:transform .18s,background .18s; }
.museum-tab:nth-child(2){background:#d7c5a7;transform:translateX(-12px) rotate(-.5deg);}
.museum-tab:hover,.museum-tab.active{transform:translateX(0);background:#f0e8d7;color:#493d2f;}
.museum-tab:nth-child(2).active{transform:translateX(0) rotate(-.5deg);background:#e7d8bd;}

.archive-room { position:relative; width:100%; height:100dvh; overflow:auto; color:#44392d; background-color:#d8cbb4; background-image:linear-gradient(90deg,rgba(73,55,35,.08),transparent 10%,transparent 90%,rgba(73,55,35,.08)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .29 0 0 0 0 .21 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.24'/%3E%3C/svg%3E"); }
.archive-mark { position:fixed; z-index:32; top:max(18px,env(safe-area-inset-top)); left:20px; color:rgba(58,46,33,.55); pointer-events:none; }
.archive-mark span{display:block;font:italic 1.05rem Georgia,serif;letter-spacing:.025em}.archive-mark small{font:.62rem Georgia,serif;letter-spacing:.18em}
.archive-scene { min-height:100dvh; padding:clamp(100px,15vh,150px) clamp(24px,7vw,90px) 72px; }
.archive-intro { width:min(320px,72vw); margin:0 auto 38px; text-align:center; color:#695945; }
.archive-intro span { font:500 clamp(1.15rem,3vw,1.6rem) Georgia,serif; letter-spacing:.26em; }
.archive-intro p { margin:9px 0 0; font-size:.82rem; letter-spacing:.12em; }
.year-drawer { position:relative; display:block; width:min(760px,86vw); height:clamp(210px,38vh,340px); margin:auto; border:1px solid #80684d; border-radius:2px; background:linear-gradient(92deg,#8e7355,#a98c68 7%,#a18461 92%,#785f46); box-shadow:0 16px 35px rgba(55,39,23,.22),inset 0 0 0 8px rgba(76,57,37,.11); cursor:pointer; color:#3f3022; }
.year-drawer::before { content:""; position:absolute; inset:18px; border:1px solid rgba(61,44,27,.27); box-shadow:inset 0 1px rgba(255,255,255,.19); }
.drawer-label { position:absolute; top:35%; left:50%; transform:translate(-50%,-50%); min-width:125px; padding:12px 20px; background:#e4d6bb; border:1px solid rgba(82,62,38,.42); box-shadow:0 2px 5px rgba(54,38,22,.15); font:1.35rem Georgia,serif; letter-spacing:.12em; }
.year-drawer i { position:absolute; left:50%; top:58%; transform:translateX(-50%); width:84px; height:19px; border:1px solid #66513b; border-radius:10px 10px 4px 4px; background:linear-gradient(#b7a27c,#806c50); box-shadow:0 3px 4px rgba(43,31,19,.22); }
.year-drawer small { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(54,40,26,.72); font-size:.77rem; letter-spacing:.14em; }
.paper-back { min-height:42px; padding:8px 12px; border:0; border-bottom:1px solid rgba(77,59,38,.34); background:transparent; color:#665440; cursor:pointer; }
.folder-header { width:min(980px,100%); margin:25px auto 38px; }
.folder-header span { font:1.7rem Georgia,serif; letter-spacing:.14em; }
.folder-header p { margin:7px 0;color:#776650;font-size:.83rem; }
.month-folders { width:min(1000px,100%); margin:auto; display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:clamp(18px,3vw,34px) clamp(12px,2.4vw,26px); align-items:end; }
.month-folder { position:relative; min-height:135px; padding:46px 16px 16px; border:1px solid rgba(103,80,49,.24); border-radius:2px 5px 3px 2px; background:#dfd0b3; color:#65543f; box-shadow:0 5px 10px rgba(56,42,26,.10); text-align:left; cursor:pointer; transform:rotate(var(--tilt,0deg)); }
.month-folder::before { content:""; position:absolute; top:-20px; left:8px; width:48%; height:25px; border:1px solid rgba(103,80,49,.20); border-bottom:0; border-radius:4px 9px 0 0; background:#dfd0b3; }
.month-folder strong { display:block; font:600 .78rem Georgia,serif; letter-spacing:.15em; }
.month-folder small { display:block; margin-top:12px; color:#81715c; font-size:.76rem; }
.month-folder.empty { opacity:.62; box-shadow:0 3px 7px rgba(56,42,26,.07); }
.month-folder.current { min-height:165px; padding-top:52px; background:#eadfc9; opacity:1; transform:translateY(-8px) rotate(var(--tilt,0deg)); box-shadow:0 9px 18px rgba(56,42,26,.15); }
.month-folder.current::after { content:""; position:absolute; inset:12px 9px auto; height:64px; background:#f0e7d5; border:1px solid rgba(103,80,49,.14); transform:translateY(-36px) rotate(-1deg); z-index:-1; }
.month-folder em { display:block; margin-top:7px; font:italic .88rem Georgia,serif; color:#7a654b; }
.month-folder .folder-action { display:block; margin-top:18px; text-decoration:underline;text-decoration-color:rgba(82,62,40,.35);text-underline-offset:4px; }

.month-room { width:min(1060px,100%); margin:auto; }
.open-folder-heading { position:relative; width:min(850px,100%); margin:24px auto 20px; padding:38px clamp(20px,5vw,54px) 30px; background:#e8dac0; border:1px solid rgba(103,80,49,.22); box-shadow:0 8px 18px rgba(56,42,26,.11); }
.open-folder-heading::before { content:""; position:absolute; top:-24px; left:0; width:34%; height:25px; background:#e8dac0; border:1px solid rgba(103,80,49,.22); border-bottom:0; border-radius:5px 13px 0 0; }
.open-folder-heading>span { font:italic clamp(1.25rem,4vw,2.1rem) Georgia,serif; color:#766046; }
.open-folder-heading h1 { margin:9px 0 0; font-size:1rem; font-weight:400; letter-spacing:.09em; color:#665641; }
.archive-add { position:absolute; right:24px; bottom:25px; min-height:43px; padding:8px 13px; border:1px solid rgba(88,66,40,.34); background:#f0e7d6; cursor:pointer; }
.date-strip { width:min(850px,100%); margin:22px auto; display:flex; gap:6px; overflow-x:auto; padding:8px 2px 12px; scrollbar-width:thin; }
.date-chip { flex:none; min-height:40px; padding:7px 11px; border:0; border-bottom:1px solid rgba(80,61,40,.28); background:transparent; color:#796854; font:italic .82rem Georgia,serif; cursor:pointer; }
.date-chip.active { color:#3f3327; border-color:#5f4934; background:rgba(239,230,212,.47); }
.snapshot-viewer { width:min(900px,100%); margin:0 auto; padding:clamp(18px,4vw,38px); background:#e9dec9; border:1px solid rgba(103,80,49,.18); box-shadow:0 11px 25px rgba(51,37,22,.13); }
.archive-photo { display:flex; align-items:center; justify-content:center; min-height:220px; max-height:62vh; padding:9px; background:#f5f0e6; box-shadow:0 4px 9px rgba(52,39,25,.13); }
.archive-photo img { display:block; max-width:100%; max-height:calc(62vh - 18px); object-fit:contain; }
.snapshot-caption { text-align:center; padding:19px 8px 4px; }
.snapshot-caption time { font:italic .84rem Georgia,serif; letter-spacing:.1em; color:#71604d; }
.snapshot-caption p { margin:10px auto 0; max-width:650px; line-height:1.75; white-space:pre-wrap; }
.snapshot-turn { display:flex; justify-content:space-between; margin-top:19px; }
.snapshot-turn button { min-height:42px; border:0; background:transparent; color:#685642; cursor:pointer; }
.snapshot-turn button:disabled { opacity:.25; cursor:default; }
.month-empty { margin:18vh auto 0; text-align:center; color:rgba(73,58,40,.48); font-size:.85rem; letter-spacing:.1em; }
.archive-dialog { width:min(540px,calc(100vw - 24px)); }
.archive-compose-preview { display:flex; align-items:center; justify-content:center; width:min(360px,100%); height:240px; margin:0 auto 20px; padding:7px; background:#f5f0e6; box-shadow:0 4px 9px rgba(58,43,27,.13); }
.archive-compose-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.archive-date-editor { display:flex; align-items:flex-end; gap:7px; border:0; padding:0; margin:15px 0; }
.archive-date-editor legend { width:100%; margin-bottom:9px; color:#645441; font-size:.84rem; }
.archive-date-editor label { display:flex; flex-direction:column; gap:3px; }
.archive-date-editor span { text-align:center; font-size:.68rem; color:#907d65; }
.archive-date-editor input { width:4.2rem; height:42px; border:0; border-bottom:1px solid #a48c6e; background:rgba(255,255,255,.24); text-align:center; font:1rem Georgia,serif; }
.archive-date-editor label:first-of-type input { width:5.2rem; }
.archive-date-editor b { padding-bottom:11px; font:1rem Georgia,serif; font-weight:400; }

@media(max-width:700px){
  .museum-index{top:82px}.museum-tab{min-width:54px;min-height:35px;padding:7px 8px;font-size:.6rem}
  .archive-mark{left:14px;top:max(13px,env(safe-area-inset-top))}.archive-mark span{font-size:.93rem}.archive-mark small{font-size:.56rem}
  .archive-scene{padding:92px 16px 55px}.archive-intro{margin-bottom:25px}.year-drawer{width:91vw;height:42vh;min-height:250px}
  .folder-scene{padding-top:78px}.folder-header{padding-left:48px;margin-bottom:32px}.month-folders{grid-template-columns:repeat(2,minmax(130px,1fr));gap:28px 12px}.month-folder{min-height:116px;padding:38px 12px 12px}.month-folder.current{min-height:142px}
  .month-room{padding:82px 12px 45px}.open-folder-heading{margin-top:33px;padding:31px 16px 77px}.archive-add{left:16px;right:auto;bottom:18px}.date-strip{margin:14px auto}
  .snapshot-viewer{padding:12px}.archive-photo{min-height:190px;max-height:54vh}.archive-photo img{max-height:calc(54vh - 18px)}
  .archive-date-editor{gap:5px}.archive-date-editor input{width:3.5rem}.archive-date-editor label:first-of-type input{width:4.8rem}
}

/* V0.2.1 — the cabinet grows by year without changing its material language */
.year-drawers { width:min(920px,88vw); margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:22px; }
.year-drawers .year-drawer { width:100%; height:clamp(190px,32vh,285px); margin:0; }
@media(max-width:700px){.year-drawers{width:86vw;gap:16px}.year-drawers .year-drawer{height:clamp(190px,31vh,250px)}}