:root {
  --ink: #34434a;
  --ink-soft: rgba(52, 67, 74, .68);
  --ocean: #72b8d6;
  --sky: #cdeaf2;
  --ivory: #f7f3ea;
  --paper: #fffdf7;
  --wood: #c9ad80;
  --wood-light: #e2cba3;
  --moss: #9dbb8a;
  --petal: #f0c5bd;
  --rule: rgba(52, 67, 74, .16);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; }

.creation-sea, .detail-sea {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(247,243,234,.82), transparent 34%),
    linear-gradient(180deg, #f7f3ea 0%, var(--sky) 34%, var(--ocean) 120%);
}
.creation-sea::before, .detail-sea::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image: url('../../assets/paper-texture.svg');
  background-size: 320px;
  mix-blend-mode: multiply;
}

.cloud { position: absolute; width: 120px; height: 25px; border-bottom: 2px solid rgba(114,184,214,.5); }
.cloud::before, .cloud::after { content: ''; position: absolute; bottom: -2px; border: 2px solid rgba(114,184,214,.5); border-bottom: 0; border-radius: 50px 50px 0 0; }
.cloud::before { left: 18px; width: 44px; height: 25px; }
.cloud::after { left: 53px; width: 48px; height: 17px; }
.cloud--left { top: 18%; left: 2%; }
.cloud--right { top: 13%; right: 7%; transform: scale(.72); opacity: .7; }
.sea-line { position: absolute; width: 260px; height: 42px; border-top: 2px solid rgba(247,243,234,.38); border-radius: 50%; }
.sea-line::after { content: ''; position: absolute; inset: 12px 20px auto -8px; height: 32px; border-top: 2px solid rgba(247,243,234,.3); border-radius: 50%; }
.sea-line--one { left: -55px; bottom: 20%; transform: rotate(7deg); }
.sea-line--two { right: -80px; top: 40%; transform: rotate(-8deg) scale(.8); }
.creation-island-backdrop { position: absolute; z-index: 0; right: 1%; bottom: 1%; width: clamp(260px, 30vw, 480px); opacity: .18; filter: saturate(.7); pointer-events: none; }
.creation-island-backdrop--detail { right: 3%; bottom: 3%; opacity: .22; }

.archipelago-back { position: absolute; z-index: 4; top: clamp(24px, 4vh, 40px); left: clamp(24px, 4vw, 64px); display: inline-flex; align-items: center; gap: 9px; padding: 8px 2px 7px; border-bottom: 1px solid rgba(52,67,74,.24); color: var(--ink-soft); text-decoration: none; font-size: .68rem; letter-spacing: .1em; transition: color .3s ease, border-color .3s ease, transform .3s var(--ease); }
.archipelago-back span { color: var(--ocean); font: 1rem/1 Georgia, serif; }
.archipelago-back:hover { color: var(--ink); border-color: var(--ocean); transform: translateX(-3px); }
.island-mark { position: absolute; z-index: 3; top: clamp(18px, 3vh, 32px); left: 50%; width: min(76vw, 520px); transform: translateX(-50%); text-align: center; }
.island-mark p { margin: 0 0 6px; color: var(--ocean); font: 700 .58rem Georgia, serif; letter-spacing: .2em; }
.island-mark h1 { display: block; margin: 0; font: 600 clamp(1.65rem, 2.3vw, 2.25rem)/1.1 "Songti SC", "STSong", serif; letter-spacing: .12em; }
.island-mark span { display: block; margin: 6px 0 0; color: var(--ink-soft); font-size: .66rem; letter-spacing: .08em; line-height: 1.5; }

.worktable {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 54%;
  width: min(78vw, 1160px);
  height: min(72vh, 720px);
  min-height: 510px;
  transform: translate(-50%, -50%) rotate(-.6deg);
  border: 3px solid var(--ink);
  border-radius: 13px 7px 16px 9px;
  background:
    linear-gradient(93deg, transparent 49.7%, rgba(52,67,74,.08) 50%, transparent 50.3%),
    linear-gradient(175deg, var(--wood-light), #d5b98a 58%, #c5a575);
  box-shadow: 18px 24px 0 rgba(52,67,74,.1), 0 34px 70px rgba(52,67,74,.2);
}
.table-grain { position: absolute; height: 1px; background: rgba(52,67,74,.14); transform: rotate(-1deg); }
.table-grain--one { top: 27%; left: 3%; width: 40%; }
.table-grain--two { bottom: 19%; right: 4%; width: 46%; }

.creation-object { position: absolute; z-index: 2; display: block; color: var(--ink); text-decoration: none; transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.creation-object:focus-visible { outline: 3px solid var(--ocean); outline-offset: 6px; }
.creation-object:hover { transform: translateY(-9px) rotate(var(--hover-rotate, 0deg)); }
.object-kicker { display: block; color: var(--ocean); font: 700 .58rem Georgia, serif; letter-spacing: .12em; }
.creation-object strong { display: block; font: 600 clamp(1.2rem, 2vw, 2rem) "Songti SC", "STSong", serif; }
.creation-object small { display: block; color: var(--ink-soft); font-size: .68rem; }

.desk-note { position: absolute; left: 5%; top: 7%; width: 20%; padding: 18px 20px; transform: rotate(-3deg); background: #f4df9e; box-shadow: 4px 5px 0 rgba(52,67,74,.1); font-family: "Songti SC", serif; }
.desk-note b { display: block; margin-bottom: 7px; font-size: .9rem; }
.desk-note span { color: var(--ink-soft); font-size: .66rem; line-height: 1.7; }

.archive-tray { position: absolute; left: 6%; bottom: 9%; width: 40%; height: 54%; padding: 18px 20px 20px; transform: rotate(-1.5deg); border: 3px solid var(--ink); border-radius: 7px 4px 9px 5px; background: #ad8f68; box-shadow: 10px 12px 0 rgba(52,67,74,.13); }
.archive-tray::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(52,67,74,.35); pointer-events: none; }
.archive-tray__label { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 5px 13px; color: var(--ivory); }
.archive-tray__label b { font: 600 1rem "Songti SC", serif; letter-spacing: .08em; }
.archive-tray__label span { font: 700 .52rem Georgia, serif; letter-spacing: .15em; opacity: .72; }
.archive-files { position: relative; z-index: 1; height: calc(100% - 38px); overflow-y: auto; padding: 9px 10px 24px; border: 2px solid var(--ink); background: #806b52; scrollbar-color: rgba(247,243,234,.5) transparent; scrollbar-width: thin; }
.archive-file { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; min-height: 74px; margin-bottom: 8px; padding: 10px 13px; transform: rotate(.5deg); border: 2px solid var(--ink); border-radius: 3px; color: var(--ink); background: #f7efe1; text-decoration: none; box-shadow: 3px 4px 0 rgba(52,67,74,.14); transition: transform .4s var(--ease); }
.archive-file:hover { transform: translateX(5px) rotate(0); }
.archive-file i { font: italic 1.4rem Georgia, serif; color: rgba(114,184,214,.7); }
.archive-file b, .archive-file small { display: block; }
.archive-file b { font: 600 1rem "Songti SC", serif; }
.archive-file small { color: var(--ink-soft); font-size: .6rem; }
.archive-file em { color: var(--moss); font: normal 700 .6rem sans-serif; letter-spacing: .1em; }
.archive-space { display: grid; place-items: center; min-height: 48px; border: 1px dashed rgba(247,243,234,.32); color: rgba(247,243,234,.46); font-size: .58rem; letter-spacing: .08em; }

.folder { --hover-rotate: 1deg; left: 41%; top: 10%; width: 34%; height: 34%; padding: 11% 6% 5%; transform: rotate(2deg); border: 2px solid var(--ink); border-radius: 4px; background: #c9d9d3; box-shadow: 9px 10px 0 rgba(52,67,74,.12); }
.folder__tab { position: absolute; left: 8%; top: -25px; width: 42%; height: 27px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 6px 9px 0 0; background: #c9d9d3; }
.folder__note { position: absolute; right: -8%; top: 13%; padding: 17px 13px; transform: rotate(6deg); background: #f4df9e; box-shadow: 3px 4px 0 rgba(52,67,74,.1); font: 600 .72rem "Songti SC", serif; }

.future-box { --hover-rotate: -1deg; right: 7%; bottom: 12%; width: 22%; height: 29%; padding: 14% 7% 7%; transform: rotate(-1.5deg); border: 2px solid var(--ink); border-radius: 6px 5px 10px 4px; background: #a9bea0; box-shadow: 10px 12px 0 rgba(52,67,74,.12); }
.future-box__lid { position: absolute; left: -5%; right: -5%; top: 7%; height: 26%; border: 2px solid var(--ink); border-radius: 5px; background: #b9cbae; }
.future-box small { margin-top: 8px; color: rgba(52,67,74,.75); }

.draft-paper { position: absolute; left: 47%; bottom: 9%; width: 21%; height: 23%; padding: 6% 3% 2%; transform: rotate(-5deg); border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 5px 6px 0 rgba(52,67,74,.09); }
.draft-paper i { display: block; width: 74%; height: 1px; margin: 0 0 10px; background: rgba(52,67,74,.2); }
.draft-paper i:nth-child(2) { width: 58%; }
.draft-paper i:nth-child(4) { width: 42%; }
.draft-paper span { position: absolute; right: 8%; bottom: 10%; color: var(--ocean); font: italic 1rem/1.2 Georgia, serif; }
.pencil { position: absolute; left: 43%; bottom: 29%; z-index: 3; width: 19%; height: 11px; transform: rotate(18deg); border: 2px solid var(--ink); border-radius: 10px; background: #e6c56f; }
.pencil::after { content: ''; position: absolute; right: -18px; top: -2px; border-left: 18px solid var(--ivory); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tape { position: absolute; right: 14%; top: 10%; width: 62px; height: 62px; border: 13px solid rgba(247,243,234,.7); border-radius: 50%; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink); }
.paper-clips { position: absolute; left: 6%; bottom: 10%; }
.paper-clips i { display: inline-block; width: 13px; height: 31px; margin-right: 10px; border: 2px solid var(--ink); border-radius: 10px; transform: rotate(12deg); }

.shore-detail { position: absolute; bottom: 3%; }
.shore-detail--left { left: 4%; }
.shore-detail--right { right: 5%; }
.shore-detail i { display: inline-block; border: 2px solid rgba(52,67,74,.5); background: rgba(184,195,196,.38); }
.shore-detail--left i { width: 32px; height: 19px; border-radius: 50% 45% 35% 40%; }
.shore-detail--left i:nth-child(2) { width: 21px; height: 13px; }
.shore-detail--right i { width: 3px; height: 34px; margin: 0 5px; border-width: 0 0 0 2px; border-radius: 0; background: transparent; transform: rotate(9deg); }
.sea-whisper { position: absolute; right: 4%; bottom: 3%; margin: 0 0 46px; color: rgba(52,67,74,.54); font: 600 .72rem "Songti SC", serif; letter-spacing: .08em; }

.detail-sea { display: grid; place-items: center; padding: 80px 22px; }
.back-link { position: absolute; z-index: 3; left: clamp(22px, 5vw, 72px); top: clamp(24px, 5vh, 54px); text-decoration: none; font-size: .78rem; letter-spacing: .08em; }
.back-link:hover { color: var(--ocean); }
.project-sheet { position: relative; width: min(760px, 88vw); min-height: 650px; padding: clamp(55px, 8vw, 92px); transform: rotate(-.6deg); border: 2px solid var(--ink); background: var(--paper); box-shadow: 15px 18px 0 rgba(52,67,74,.1), 0 28px 60px rgba(52,67,74,.16); }
.sheet-tape { position: absolute; top: -16px; width: 100px; height: 32px; background: rgba(247,243,234,.74); border: 1px solid rgba(52,67,74,.1); }
.sheet-tape--left { left: 8%; transform: rotate(-5deg); }
.sheet-tape--right { right: 8%; transform: rotate(6deg); }
.project-number { margin: 0 0 50px; color: var(--ocean); font: 700 .67rem Georgia, serif; letter-spacing: .2em; }
.project-heading > p { margin: 0 0 6px; color: var(--ink-soft); font-size: .78rem; letter-spacing: .1em; }
.project-heading h1 { margin: 0; font: 600 clamp(2.8rem, 7vw, 5.8rem)/1.12 "Songti SC", "STSong", serif; }
.project-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 52px 0 42px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.project-facts div { display: grid; gap: 4px; }
.project-facts dt { color: var(--ink-soft); font-size: .67rem; letter-spacing: .12em; }
.project-facts dd { margin: 0; font: 600 1rem "Songti SC", serif; }
.project-note { max-width: 550px; }
.project-note > p:last-child { color: var(--ink-soft); font-family: "Songti SC", "STSong", serif; font-size: 1.05rem; line-height: 2; }
.hand-note { margin: 0; color: var(--ocean); font: italic 1rem Georgia, serif; }
.project-open { display: inline-flex; gap: 36px; align-items: center; margin-top: 34px; padding: 10px 0 8px; border-bottom: 2px solid var(--ink); text-decoration: none; font-size: .8rem; letter-spacing: .12em; }
.project-open:hover { color: var(--ocean); border-color: var(--ocean); }
.project-open[aria-disabled="true"] { cursor: default; color: rgba(52,67,74,.38); border-color: rgba(52,67,74,.2); }
.project-actions { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.project-local { color: var(--ink-soft); font-size: .72rem; text-underline-offset: 4px; }
.project-local:hover { color: var(--ocean); }
.project-link-note { max-width: 320px; color: var(--ink-soft); font-size: .68rem; line-height: 1.55; }

@media (max-width: 820px) {
  .creation-sea { min-height: 920px; }
  .worktable { top: 52%; width: 88vw; height: 700px; }
  .desk-note { left: 6%; width: 30%; }
  .archive-tray { left: 6%; bottom: 8%; width: 48%; height: 52%; }
  .folder { left: 44%; top: 14%; width: 48%; height: 28%; padding-top: 14%; }
  .future-box { right: 8%; bottom: 10%; width: 34%; height: 27%; padding-top: 18%; }
  .draft-paper { left: 56%; bottom: 41%; width: 28%; height: 19%; }
  .pencil { left: 34%; bottom: 33%; }
  .tape { top: 48%; right: 15%; }
}

@media (max-width: 520px) {
  .creation-sea { min-height: 980px; }
  .archipelago-back { top: 18px; left: 20px; }
  .island-mark { top: 72px; width: calc(100vw - 40px); }
  .island-mark p { font-size: .52rem; }
  .island-mark h1 { font-size: 1.65rem; }
  .island-mark span { margin-top: 4px; }
  .cloud--left { top: 16%; left: -42px; opacity: .55; }
  .worktable { top: 55%; height: 760px; }
  .creation-object strong { font-size: 1.08rem; }
  .creation-object small { display: none; }
  .desk-note { width: 38%; padding: 13px; }
  .archive-tray { width: 52%; padding: 14px 12px; }
  .folder { left: 53%; width: 41%; height: 26%; }
  .folder__note { right: 0; font-size: .58rem; padding: 12px 8px; }
  .future-box { width: 40%; height: 25%; }
  .draft-paper { left: 8%; width: 42%; }
  .project-sheet { min-height: 690px; padding: 60px 30px; }
  .project-facts { grid-template-columns: 1fr; gap: 15px; }
  .project-facts div { grid-template-columns: 55px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .creation-object { transition: none; }
}