:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #161616;
  --side: clamp(21px, 8vw, 130px);
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
@media (pointer: coarse) {
  html, body { overscroll-behavior-y: none; }
}
a, button { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.archive { min-height: 100svh; display: flex; flex-direction: column; }
.masthead {
  margin-inline: var(--side); min-height: 96px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 650;
}
.gallery { margin: clamp(46px, 13vh, 160px) var(--side) 0; }
.rail {
  --height: clamp(76px, 10vw, 144px);
  --extension: clamp(44px, 6vw, 86px);
  --caption-space: 42px;
  --expanded-cap: max(var(--height), min(var(--gallery-budget, 48svh), 52svh, 440px));
  height: calc(var(--expanded-cap) + var(--caption-space));
  display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain; cursor: grab; user-select: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging, .rail.dragging * { cursor: grabbing; }
.project {
  flex: 0 0 var(--width, 19%);
  container-type: inline-size;
  min-width: 0; display: flex; flex-direction: column;
  min-height: 0; height: 100%;
  text-decoration: none; cursor: pointer;
}
.photo { position: relative; overflow: hidden; background: var(--color, #464646); }
.photo img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
}
.thumb {
  --expanded-height: min(calc(var(--height) + var(--extension)), var(--expanded-cap));
  flex: none; width: 100%; height: var(--height);
  transition: height 360ms cubic-bezier(.22,.75,.24,1);
}
.thumb[data-portrait] {
  --expanded-height: clamp(var(--height), calc(100cqw / var(--portrait-ratio)), var(--expanded-cap));
}
.project-title {
  padding: 7px 7px 0 1px; font-size: 12px; line-height: 1.4;
  overflow-wrap: anywhere; opacity: 0; pointer-events: none; transition: opacity 160ms ease;
}
.project:focus-visible, .project.returned-focus { outline: none; }
.project:not(.returned-focus):focus-visible .thumb { height: var(--expanded-height); }
.project:not(.returned-focus):focus-visible .project-title { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .rail:not(.dragging, .restored) .thumb:hover { height: var(--expanded-height); }
  .rail:not(.dragging, .restored) .thumb:hover + .project-title { opacity: 1; }
}
.signature {
  container-type: inline-size; margin: auto var(--side) 0;
  padding-top: clamp(40px, 8vh, 110px); padding-bottom: clamp(15px, 4vh, 42px);
}
.signature h1 {
  width: max-content; margin: 0; padding: .11em 0 .15em;
  font: 400 15cqw/.94 Georgia, "Times New Roman", serif;
  letter-spacing: -.058em; white-space: nowrap;
  color: #185bc8;
}
.wordmark > span, .serif-letter {
  filter: url("#rounded-lettering") drop-shadow(.014em .024em .022em #2223);
}
.wordmark-effects {
  position: absolute; inset: 0 auto auto 0; width: 0; height: 0;
  overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
@media (forced-colors: active) {
  .wordmark > span, .serif-letter { filter: none; }
}
.back { text-decoration-thickness: 1px; text-underline-offset: .3em; }
.detail article { margin: 30px var(--side) 80px; }
.lead { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 6vw; align-items: center; }
.headline h1 { font-size: clamp(48px, 8vw, 140px); font-weight: 700; line-height: .9; letter-spacing: -.075em; margin: 15px 0; }
.headline h1 { overflow-wrap: anywhere; text-wrap: pretty; }
.headline h1:focus { outline: none; }
.headline p { margin: 0; font-size: 14px; }
.hero {
  height: var(--active-photo-height, min(60vh, 500px)); background: transparent;
  transition: height 260ms ease;
}
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; margin-top: 56px; }
.story h2 { margin: 0; font-size: 15px; }
.story p { font-size: 15px; line-height: 1.85; margin: 12px 0 0; }
::view-transition-group(project-image) {
  z-index: 2;
  animation-duration: 510ms;
  animation-timing-function: cubic-bezier(.22, .72, .23, 1);
}
.project-opening::view-transition-old(project-image),
.project-opening::view-transition-new(project-image) {
  height: 100%;
  object-fit: cover;
  animation: none;
  mix-blend-mode: normal;
}
.project-opening::view-transition-new(project-image),
.project-opening-visual::view-transition-old(project-image) { visibility: hidden; }
.project-opening-visual::view-transition-new(project-image) { visibility: visible; }
.project-opening::view-transition-old(root) {
  animation: project-background-out 400ms cubic-bezier(.25, .55, .3, 1) both;
  mix-blend-mode: normal;
}
.project-opening::view-transition-new(root) {
  animation: project-background-in 365ms 85ms cubic-bezier(.2, .62, .3, 1) both;
  mix-blend-mode: normal;
}
@keyframes project-background-out { to { opacity: 0; } }
@keyframes project-background-in { from { opacity: 0; } }
.project-opening .hero { transition: none; }
/* The transition snapshot owns the photo until it reaches the detail frame. */
.project-opening-visual .detail-photos,
.project-opening-visual .photo-navigation { visibility: hidden; }
.photo > .project-opening-image {
  position: absolute;
  inset: 0 auto 0 50%;
  width: var(--active-photo-width, 100%);
  height: 100%;
  transform: translateX(-50%);
  view-transition-name: project-image;
  pointer-events: none;
}
@media (max-width: 680px) {
  :root { --side: 22px; }
  .masthead { min-height: 72px; }
  .gallery { margin-top: clamp(38px, 13vh, 112px); }
  .rail { --height: clamp(140px, 50vw, 320px); --extension: 55px; gap: 8px; scroll-snap-type: x proximity; }
  .project { flex-basis: 70vw; scroll-snap-align: start; }
  .signature { padding-bottom: 30px; }
  .detail article { margin-top: 24px; }
  .lead, .story { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .story { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .thumb, .project-title { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s !important; }
}

.wordmark .blue-o {
  display: inline-block;
  letter-spacing: normal;
  padding-inline: .07em;
  margin-inline: -.07em -.068em;
}
.wordmark > .yellow-letter { color: #d3a00c; }
.wordmark > .green-letter { color: #168743; }
.record-link {
  position: relative; z-index: 1; display: inline-block;
  padding-inline: .025em; margin-inline-end: .009em;
  color: #d62b23; text-decoration: none; letter-spacing: normal;
}
.serif-letter, .flat-letter {
  display: inline-block; transform-origin: left 65%;
  transition: opacity 240ms ease, transform 280ms cubic-bezier(.22,.75,.24,1);
}
.flat-letter {
  position: absolute; inset: 0 0 0 .0266em; opacity: 0;
  font: 400 .94em/.98 "Helvetica Neue", Helvetica, Arial, sans-serif;
  pointer-events: none;
}
.letter-baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.memory-label {
  position: absolute; top: var(--memory-top, 8%); left: var(--memory-left, 0px);
  color: inherit; opacity: 0; pointer-events: none; transition: opacity 180ms ease;
  font: 400 clamp(12px, 1.2vw, 17px)/1.2 "Noto Serif", Georgia, "Times New Roman", serif;
}
.record-link.returned-focus:focus-visible { outline: none; }
.record-link:not(.returned-focus):focus-visible .serif-letter { opacity: 0; }
.record-link:not(.returned-focus):focus-visible .flat-letter { opacity: 1; transform: scale(1.09); }
.record-link:not(.returned-focus):focus-visible .memory-label { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .record-link:not(.restored):hover .serif-letter { opacity: 0; }
  .record-link:not(.restored):hover .flat-letter { opacity: 1; transform: scale(1.09); }
  .record-link:not(.restored):hover .memory-label { opacity: 1; }
}

.memory-dialog {
  width: min(1040px, calc(100% - 34px));
  max-height: min(86dvh, 920px); border: 0; border-radius: 10px;
  padding: 0; overflow: auto; overscroll-behavior: contain;
  color: #201b18; background: #faf7f1;
  box-shadow: 0 24px 85px #27201b42;
  font-family: "Noto Serif", Georgia, "Nanum Myeongjo", "AppleMyungjo", Batang, serif;
}
.memory-dialog::backdrop { background: #352a245b; backdrop-filter: blur(5px); }
.memory-dialog[open] { animation: memory-in 240ms ease-out both; }
@keyframes memory-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
}
.memory-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(14px, 3vw, 34px); color: #a72a23;
}
.memory-bar h2 { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 400; }
.memory-actions { display: flex; align-items: center; gap: 10px; }
.memory-dialog button { font: inherit; }
.memory-bar button, #memo-remove {
  padding: 0 7px; min-height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer;
}
.memory-bar #memory-close { min-width: 44px; font-size: 25px; color: #201b18; }
.journal-files {
  display: flex; gap: clamp(9px, 1.5vw, 16px); padding: 10px clamp(14px, 3vw, 34px) 15px;
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-inline: contain;
  scroll-padding-inline-start: clamp(14px, 3vw, 34px);
}
.memory-folder { --paper-color: #f2e6d1; }
.journal-file {
  display: grid; grid-template-rows: auto 1fr; flex: 0 0 clamp(155px, 29%, 290px);
  min-width: 0; min-height: clamp(180px, 25vw, 265px); text-align: left;
  padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer;
  scroll-snap-align: start;
}
.file-tab {
  display: block; width: fit-content; min-width: min(58%, 130px);
  border-radius: 12px 19px 0 0; background: var(--paper-color);
  padding: 8px 16px 4px; font-size: 13px;
}
.file-cover, .reader-page {
  background: var(--paper-color); border-radius: 0 12px 12px 12px;
}
.file-cover {
  display: grid; align-content: center; min-width: 0; padding: 15px;
  font-size: clamp(24px, 3.1vw, 48px); line-height: 1.04;
  letter-spacing: -.045em; overflow-wrap: anywhere;
}
.file-cover img, .file-cover canvas { display: block; width: 100%; height: 130px; object-fit: contain; }
#memory-status { margin: 0 24px 12px; font-size: 14px; }
#memory-status:empty { display: none; }
.memory-reader, .memory-dialog .memo { margin: 6px clamp(14px, 3vw, 34px) clamp(14px, 3vw, 34px); }
.reader-page { padding: clamp(17px, 4vw, 48px); }
.reader-page h3 { margin: 0 0 18px; font-weight: 400; font-size: clamp(27px, 4vw, 51px); letter-spacing: -.04em; }
#reader-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.85; }
#reader-art:empty, #memo-art:empty { display: none; }
#reader-art img, #reader-art canvas, #memo-art img { display: block; max-width: 100%; max-height: 300px; margin: 18px 0 0 auto; object-fit: contain; }
.memo .file-tab input, .memo .reader-page input, .memo textarea { font: inherit; color: inherit; }
.memo .reader-page label { display: block; margin: 0 0 6px; }
.memo .reader-page input[type="text"], .memo textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #827467;
  border-radius: 3px; background: #fffaf1; margin-bottom: 15px;
}
.memo textarea { display: block; resize: vertical; line-height: 1.65; }
.memo input[type="file"] { max-width: 100%; }
.memo .file-tab input { background: #fffaf1; border: 1px solid #827467; border-radius: 3px; padding: 2px; }
.memo-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.memo-actions button { min-height: 44px; padding: 0 15px; border: 0; border-radius: 3px; background: #9b251e; color: white; cursor: pointer; }
.memo-actions p { margin: 0; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .memory-dialog[open] { animation: none; }
  .serif-letter, .flat-letter, .memory-label { transition: none; }
}

:root { --memory-red: #d62b23; }
.record-link, .memory-bar, .memory-bar #memory-close { color: var(--memory-red); }
.memory-dialog { background: #faf6ef; }
.memory-bar { padding-block: 15px; }
.memory-bar button { white-space: nowrap; }
.journal-files {
  padding-top: clamp(20px, 4vw, 54px);
  padding-bottom: clamp(13px, 3vw, 32px);
}
.journal-file {
  position: relative;
  flex-basis: clamp(154px, 31%, 325px);
  min-height: clamp(230px, 33vw, 385px);
}
.file-tab {
  margin-left: 5%;
  min-width: min(62%, 185px);
  border-radius: 15px 20px 0 0;
  padding-block: 9px 5px;
}
.file-cover {
  padding: clamp(16px, 4vw, 37px);
  border-radius: 13px;
}
.file-cover img, .file-cover canvas { height: clamp(118px, 17vw, 212px); }
.memory-reader { margin-top: clamp(12px, 2vw, 25px); }
.reader-page { border-radius: 13px; }
.memory-reader .reader-page { min-height: clamp(285px, 42vh, 500px); }
.memory-reader .file-tab { margin-left: 3%; }
.memory-reader .reader-page h3 { font-size: clamp(31px, 5vw, 64px); }
#reader-body { max-width: 63ch; }
.memo-preview:empty { display: none; }
.memo-preview img { display: block; max-width: 100%; max-height: 225px; margin-top: 10px; object-fit: contain; }
.memo .reader-page label[for="memo-cover"], .memo .reader-page label[for="memo-image"] { margin-top: 15px; }
.memory-dialog .remove-art {
  min-height: 44px; border: 0; padding: 0 5px; background: transparent;
  color: var(--memory-red); cursor: pointer;
}

.memory-folder { filter: drop-shadow(0 2px 3px #30251c19); }
.memory-folder > .file-tab { position: relative; z-index: 1; margin-bottom: -1px; }
.journal-files {
  margin-bottom: clamp(13px, 3vw, 29px);
  scrollbar-width: thin;
  scrollbar-color: #aaa8a3 transparent;
}
.journal-files::-webkit-scrollbar { height: 7px; }
.journal-files::-webkit-scrollbar-track { background: transparent; }
.journal-files::-webkit-scrollbar-thumb {
  background: #aaa8a3; border-radius: 10px; border: 1px solid #faf6ef;
}

.journal-file, .memory-reader {
  --paper-color: #b5d9f5;
  --folder-back: #a3c9ea;
  --folder-front: linear-gradient(165deg, #cce8fc 0%, #b5d9f5 52%, #a8cfee 100%);
  color: #131a22;
}
.journal-files {
  padding-top: clamp(24px, 4vw, 54px);
  padding-bottom: clamp(18px, 3vw, 32px);
}
.journal-file {
  --tab-height: 34px;
  display: block;
  height: clamp(270px, 35vw, 390px);
  min-height: 0;
  transition: transform 210ms cubic-bezier(.2,.7,.3,1);
}
.journal-file::before {
  content: "";
  position: absolute;
  inset: calc(var(--tab-height) - 8px) 0 10px;
  border-radius: 6px 9px 9px 9px;
  background: var(--folder-back);
}
.journal-file > .file-tab {
  position: absolute;
  inset: 0 auto auto 0;
  min-width: 40%;
  height: calc(var(--tab-height) + 3px);
  margin: 0;
  padding-inline: 12px;
  border-radius: 7px 15px 0 0;
  background: var(--folder-back);
  white-space: nowrap;
}
.journal-file > .file-cover {
  position: absolute;
  inset: calc(var(--tab-height) - 1px) 0 0;
  z-index: 2;
  align-content: center;
  overflow: hidden;
  border-radius: 5px 8px 9px 9px;
  background: var(--folder-front);
  box-shadow: inset 0 1px 0 #fff9;
}
.memory-reader > .file-tab {
  margin-left: 0;
  border-radius: 7px 15px 0 0;
  background: var(--folder-back);
}
.memory-reader .reader-page {
  border-radius: 5px 8px 9px 9px;
  background: var(--folder-front);
}
.file-cover-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .journal-file:hover {
    z-index: 2;
    transform: scale(1.025);
  }
}
@media (prefers-reduced-motion: reduce) {
  .journal-file { transition: none; }
}

.project-detail-tools { display: flex; align-items: center; gap: 12px; }
.project-tool, .project-editor-bar button, .project-editor-actions button {
  min-height: 44px; padding: 0 10px; color: inherit; font: inherit; cursor: pointer;
  border: 1px solid #827e77; border-radius: 4px; background: transparent;
}
.project-editor {
  width: min(660px, calc(100% - 28px)); max-height: 88dvh; padding: clamp(16px, 4vw, 30px);
  color: var(--ink); background: #faf6ef; border: 0; border-radius: 10px;
}
.project-editor::backdrop { background: #352a245b; }
.project-editor-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.project-editor-bar h2 { margin: 0; font-size: clamp(22px, 4vw, 30px); }
.project-editor-bar button { border: 0; min-width: 44px; font-size: 24px; }
#project-form { display: grid; gap: 15px; margin-top: 14px; }
.project-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
#project-form label { display: grid; gap: 5px; font-size: 14px; min-width: 0; }
#project-form input, #project-form textarea {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 8px;
  border: 1px solid #827e77; border-radius: 4px; color: inherit; background: #fffcf7; font: inherit;
}
#project-form textarea { resize: vertical; }
.project-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.project-editor-actions #project-save { background: #292625; color: #fff; }
.project-editor-actions p { flex-basis: 100%; margin: 0; font-size: 13px; }
.project-editor-actions p:empty { display: none; }

.detail-photos {
  position: absolute; inset: 0; display: flex;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.detail-photos::-webkit-scrollbar { display: none; }
.detail-photos > :is(img, video) {
  flex: 0 0 100%; min-width: 0; align-self: center;
  object-fit: contain; scroll-snap-align: start;
}
.photo-navigation {
  position: absolute; left: 50%; bottom: calc(5px + var(--active-photo-bottom-trim, 0px)); transform: translateX(-50%);
  width: clamp(88px, calc(var(--active-photo-width, 100%) - 12px), 100%);
  display: flex; justify-content: space-between; pointer-events: none;
  transition: width 260ms ease;
}
.photo-position {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #ffffffe0; text-shadow: 0 1px 2px #0005;
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.detail-photos.is-swipeable { cursor: grab; user-select: none; }
.detail-photos.photo-dragging { cursor: grabbing; scroll-snap-type: none; }
.photo-navigation button {
  width: 44px; height: 44px; border: 0; background: transparent;
  color: #ffffffe0; text-shadow: 0 1px 2px #0005;
  font: inherit; font-size: 21px; cursor: pointer; pointer-events: auto;
}
.photo-navigation button:disabled { visibility: hidden; }
.project-photo-help { margin: -6px 0 0; font-size: 13px; color: #504943; }
#project-editor-preview {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 9px;
}
#project-editor-preview:empty { display: none; }
#project-editor-preview li {
  display: grid; gap: 4px; padding: 6px; background: #efe9df; font-size: 12px;
}
#project-editor-preview img { display: block; width: 100%; height: 72px; object-fit: contain; }
#project-editor-preview button {
  min-height: 35px; border: 0; background: transparent; text-decoration: underline;
  font: inherit; color: inherit; cursor: pointer;
}

#project-first { align-self: flex-start; margin: 12px var(--side); }
.project-editor-actions .project-delete { color: #a6221d; margin-inline-start: auto; }
.project-detail-tools { flex-wrap: wrap; justify-content: flex-end; }
.masthead .back { white-space: nowrap; }
@media (max-width: 540px) {
  .masthead { gap: 8px; }
  .project-detail-tools { gap: 5px; }
  .project-tool { padding-inline: 6px; }
  #detail-index { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero, .photo-navigation { transition: none; }
}

.photo-lens {
  position: absolute; z-index: 1; width: clamp(110px, 13vw, 195px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border: 1px solid #fffd; border-radius: 50%;
  pointer-events: none; background-repeat: no-repeat; box-shadow: 0 4px 18px #0005;
}
.photo-quality-status {
  position: absolute; top: 6px; left: 6px; right: 6px; z-index: 2; width: fit-content;
  margin: 0; padding: 5px 8px; border-radius: 4px; color: #242220; background: #faf6efed; font-size: 12px;
}
.photo-navigation { z-index: 2; }

.detail-photos > video { display: block; width: 100%; background: transparent; }
.hero.active-video .photo-navigation { bottom: 49px; }
.photo-lens { border-color: #ffffffc9; box-shadow: 0 4px 15px #0003; }

#export-empty { align-self: flex-start; margin: 0 var(--side) 12px; }
.export-feedback {
  position: fixed; right: 16px; bottom: 16px; z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  max-width: calc(100% - 32px); padding: 9px 12px;
  background: #faf6ef; color: var(--ink); border: 1px solid #958c81; border-radius: 6px;
  font-size: 13px; box-shadow: 0 8px 25px #0002;
}
.export-feedback p { margin: 0; }
.export-feedback a { white-space: nowrap; }
.export-feedback button { min-height: 34px; min-width: 34px; font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

#project-editor-preview li[draggable="true"] { cursor: grab; }
#project-editor-preview li.photo-order-dragging { opacity: .45; cursor: grabbing; }
#project-editor-preview li.photo-order-target { outline: 2px solid #185bc8; outline-offset: -2px; }
.photo-order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
#project-editor-preview .photo-order-actions button[data-move] { min-width: 28px; text-decoration: none; }
#project-editor-preview .photo-order-actions button:disabled { opacity: .3; cursor: default; }
@media (pointer: coarse) {
  #project-editor-preview .photo-order-actions button { min-height: 44px; }
}

.archive { position: relative; }
.fixer-flight {
  position: absolute; left: var(--side); width: calc(100% - 2 * var(--side));
  height: 44px; z-index: 2; pointer-events: none;
}
.fixer-trigger {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 52px; height: 44px; padding: 0; border: 0;
  background: none; cursor: pointer; pointer-events: auto;
  will-change: transform;
}
.fixer-ant { width: 44px; height: auto; image-rendering: pixelated; }
.fixer-dialog {
  box-sizing: border-box; position: fixed;
  width: min(580px, calc(100vw - 28px), calc(100dvh - 24px));
  aspect-ratio: 1; max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid #ba8d8d; overflow: auto;
  container-type: inline-size;
  background: #ffcece;
  color: #211414; font-family: "Times New Roman", "AppleMyungjo", Batang, serif;
}
.fixer-dialog::backdrop { background: #342c2250; }
.fixer-close {
  position: absolute; top: 3px; right: 4px; width: 36px; height: 36px;
  padding: 0; border: 2px outset #ece9df; background: #dedbd2;
  color: #211c16; font: bold 23px/1 "Times New Roman", serif; cursor: pointer;
}
.fixer-page {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(12px, 4.6cqw, 28px);
}
.fixer-page h2 {
  margin: 0 0 clamp(8px, 3cqw, 20px); color: inherit;
  font: 400 clamp(17px, 6.4cqw, 37px)/1.12 "Times New Roman", serif;
}
.fixer-page img {
  display: block; width: 100%; height: auto; margin: 0;
}
.fixer-page a { color: #0000cc; font-size: clamp(14px, 3.5cqw, 20px); text-decoration: underline; }
@media (forced-colors: active) {
  .fixer-page h2 { background: none; color: CanvasText; }
}

.memory-pixel-note {
  position: absolute; z-index: 3; left: 40%; bottom: calc(74% + 5px);
  width: clamp(73px, 11vw, 165px); height: auto;
  pointer-events: none; image-rendering: pixelated;
}

.fixer-portrait {
  position: relative; width: min(48cqw, 278px); margin: 0 auto clamp(6px, 2.4cqw, 13px);
  background: #101656; overflow: hidden;
}
.fixer-inquiry { margin: 0 0 5px; font-size: clamp(12px, 3.3cqw, 17px); }
.fixer-page a { overflow-wrap: anywhere; }
.fixer-portrait img { position: relative; z-index: 1; image-rendering: pixelated; }
.fixer-sparkles { position: absolute; inset: 0; pointer-events: none; }
.fixer-sparkles canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; opacity: 0;
}
.fixer-sparkles canvas:first-child { opacity: 1; }
.fixer-dialog[open] .fixer-sparkles canvas { animation: fixer-sparkle-frame .72s step-end infinite; }
.fixer-dialog[open] .fixer-sparkles canvas:nth-child(2) { animation-delay: -.24s; }
.fixer-dialog[open] .fixer-sparkles canvas:nth-child(3) { animation-delay: -.48s; }
@keyframes fixer-sparkle-frame {
  0% { opacity: 1; }
  33.333%, 100% { opacity: 0; }
}
#detail-title {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  font-weight: 600; letter-spacing: -.025em; line-height: .98;
}
@media (prefers-reduced-motion: reduce) {
  .fixer-dialog[open] .fixer-sparkles canvas { animation: none; }
}

.category-control {
  position: absolute; top: clamp(0px, calc(13vh - 48px), 42px);
  left: calc(50% - 58px); z-index: 5;
  display: grid; grid-template-columns: 36px 44px;
}
.category-back, .category-heart {
  position: relative; z-index: 2; grid-row: 1;
}
.category-back {
  grid-column: 1; width: 36px; min-height: 44px; padding: 0; border: 0;
  background: transparent; color: #111; font: 300 22px/1 system-ui, sans-serif; cursor: pointer;
}
.category-heart { grid-column: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; background: transparent; color: #c41225; cursor: pointer;
}
.category-heart-icon {
  width: 24px; height: 22px; background: currentColor;
  clip-path: polygon(8% 18%, 16% 18%, 16% 9%, 39% 9%, 39% 18%, 47% 18%, 47% 27%,
    53% 27%, 53% 18%, 61% 18%, 61% 9%, 84% 9%, 84% 18%, 92% 18%, 92% 27%,
    100% 27%, 100% 55%, 92% 55%, 92% 64%, 84% 64%, 84% 73%, 76% 73%, 76% 82%,
    66% 82%, 66% 91%, 58% 91%, 58% 100%, 42% 100%, 42% 91%, 34% 91%, 34% 82%,
    24% 82%, 24% 73%, 16% 73%, 16% 64%, 8% 64%, 8% 55%, 0 55%, 0 27%, 8% 27%);
}
.category-heart.is-filtered { color: #a4081b; }
.category-heart:hover { color: #1758cf; }
.category-backdrop {
  position: fixed; inset: 0; z-index: 0; background: #ffffff3b;
  backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
}
.category-list {
  position: fixed; inset: 0 0 auto; z-index: 1; display: grid;
  justify-items: start; align-content: start;
  padding: clamp(55px, calc(13vh + 10px), 106px) var(--side) clamp(24px, 4vh, 52px);
  max-height: min(72dvh, 640px); overflow: auto;
  background: #fff;
}
.category-list button {
  min-height: 40px; max-width: 100%; border: 0; padding: 5px 0;
  text-align: left; color: #161616; background: transparent;
  font: 500 clamp(16px, 2.25vw, 22px)/clamp(21.25px, 3.125vw, 30px) system-ui, sans-serif;
  cursor: pointer; overflow-wrap: anywhere;
}
.category-list button:hover { color: #525252; }
.category-list button[aria-pressed="true"] { font-weight: 600; }
.category-list button:focus-visible { outline-offset: 1px; }
.category-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.project-category-field { display: grid; gap: 8px; }
.project-category-actions, .project-category-rename { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.project-category-actions[hidden], .project-category-rename[hidden] { display: none; }
.project-category-rename label { flex: 1 1 100px; }
.project-category-field button {
  min-height: 40px; padding: 0 8px; border: 1px solid #827e77; border-radius: 4px;
  background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer;
}
#category-delete { color: #a6221d; }
.project-category-status { margin: 0; font-size: 13px; }
.project-category-status:empty { display: none; }
#project-form select {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 8px;
  border: 1px solid #827e77; border-radius: 4px; color: inherit; background: #fffcf7; font: inherit;
}

.project-preview-placeholder { display: block; width: 100%; height: 72px; }
body:has(> .project-editor[open]) > :is(#archive, #detail) {
  visibility: hidden;
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) and (min-height: 520px) {
  html:has(> body > #archive:not([hidden])) { overflow: hidden; }
  #archive { height: 100svh; overflow: clip; }
  #archive .gallery { margin-top: clamp(55px, 13svh, 112px); }
  #archive .signature { padding-top: clamp(8px, calc(10svh - 45px), 70px); }
}