@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550&display=swap');

:root {
  font-family: 'DM Sans', sans-serif;
  font-synthesis: none;
  color: #57534f;
  background: #f8f7f4;
  --paper: #f8f7f4;
  --muted: #79736d;
  --line: #e4e0dc;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; background-image: radial-gradient(ellipse at 16% 8%, rgba(226,218,244,.4), transparent 41%), radial-gradient(ellipse at 88% 82%, rgba(219,235,229,.3), transparent 38%), radial-gradient(ellipse at 84% 10%, rgba(246,224,218,.24), transparent 34%), linear-gradient(to bottom, transparent 33px, rgba(150,153,160,.025) 33px, rgba(150,153,160,.025) 34px); background-size: auto, auto, auto, 100% 34px; background-attachment: fixed; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
:focus, :focus-visible { outline: none !important; }
[hidden] { display: none !important; }
::selection { background: #e6dfee; }
.memory-intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 20% 18%, #e5dcf04f, transparent 45%), radial-gradient(ellipse at 80% 78%, #dcebe04c, transparent 46%), #f8f7f4f2; opacity: 1; transition: opacity .38s ease; }
.memory-intro.is-leaving { opacity: 0; pointer-events: none; }
.memory-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.memory-intro-core { position: absolute; z-index: 1; left: 50%; top: 50%; color: #57534f; font-size: 16px; font-weight: 450; letter-spacing: -.6px; line-height: normal; opacity: 0; transform: translate(-50%, -50%); transition: opacity .32s ease; pointer-events: none; }
.memory-intro-core span { color: #9b84af; }
.memory-intro-skip { position: absolute; z-index: 2; right: max(24px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); padding: 12px; color: #89808e; background: transparent; font-size: 10px; letter-spacing: .5px; }
.world { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center; padding: 72px 16px; overflow: clip; }
.sheet-scroll, dialog { overscroll-behavior: none; }
.activity-scene { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 0; }
.xr-bear { position: relative; width: 100%; min-width: 0; aspect-ratio: 1.2; isolation: isolate; }
.xr-bear > canvas, .xr-bear > picture, .xr-bear > picture > img { display: block; width: 100%; height: 100%; }
.xr-bear > picture > img { object-fit: contain; }
.xr-bear > canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.xr-bear[data-ready=true] > canvas { opacity: 1; }
.xr-bear[data-ready=true] > picture { visibility: hidden; }
.water-surface { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.route-ghost { user-select: none; }
.route-ghost dialog { display: none !important; }
.personal-links { grid-area: links; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 46px; width: min(720px, 100%); max-width: none; margin: 28px auto 8px; }
.about-layout { width: min(850px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr); grid-template-areas: 'profile hobbies' 'links links'; column-gap: 24px; align-items: start; }
.about-profile { grid-area: profile; width: calc(100% - clamp(60px, 8vw, 84px)); margin: 14px 0 0 clamp(60px, 8vw, 84px); display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 17px; text-align: left; }
.portrait-slot { min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #aa9bb3; }
.portrait-slot { position: relative; }
.portrait-slot svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.portrait-slot span { font-size: 8px; letter-spacing: .2px; }
.portrait-slot img { display: block; width: 96px; height: 128px; object-fit: cover; object-position: center 38%; border-radius: 50%; }
.about-facts { display: grid; justify-items: start; gap: 14px; min-width: 0; }
.cornell-mark { position: relative; display: grid; grid-template-columns: minmax(75px, 110px) minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; padding: 4px 0; color: #8d6674; transition: color .3s, transform .45s var(--ease); }
.cornell-mark:hover { color: #a34f68; transform: translateX(2px); }
.cornell-wordmark { display: block; width: 100%; max-width: 108px; height: auto; }
.cornell-mark strong { display: block; font-size: 9px; font-weight: 500; color: #726477; overflow-wrap: anywhere; }
.seattle-location { display: flex; align-items: center; gap: 8px; font-size: 9px; color: #8e8592; transition: color .3s; }
.seattle-location:hover { color: #766887; }
.seattle-location svg { width: 16px; height: 16px; fill: none; stroke: #a48faf; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.profile-flags { display: flex; align-items: center; gap: 9px; padding-left: 24px; margin-top: -6px; }
.profile-flags svg { display: block; height: 12px; width: auto; flex: none; }
.personal-links a { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: center; text-align: left; padding: 8px; font-size: 10px; border-bottom: 1px solid #e9e3ea; transition: padding .6s var(--ease), color .3s; }
.link-logo { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; color: #a596ad; }
.activities { grid-area: hobbies; max-width: none; margin: 17px 0 0; text-align: left; }
.activities h2 { font-size: 9px; font-weight: 400; color: #a195a6; margin: 0 0 5px 8px; letter-spacing: .4px; }
.activity-links { display: grid; gap: 0; }
.activity-links a { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: center; padding: 8px; font-size: 10px; transition: color .3s, transform .5s var(--ease); }
.activity-links .link-logo { width: 14px; height: 14px; color: #b1a5b7; }
.activity-links a:hover { color: #84688e; transform: translateX(3px); }
.personal-links a:hover { padding-left: 15px; padding-right: 15px; color: #8a6b9a; }
.owner-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; }
.storage-usage { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px; color: #95899a; font-size: 9px; white-space: nowrap; background: transparent; border-radius: 18px; transition: background .25s, color .25s; }
.storage-usage:hover { color: #786486; background: #f0eaf3; }
.storage-usage[hidden] { display: none !important; }
.storage-usage progress { width: 76px; height: 3px; appearance: none; border: 0; border-radius: 4px; background: #ebe5ed; }
.storage-usage progress::-webkit-progress-bar { border-radius: 4px; background: #ebe5ed; }
.storage-usage progress::-webkit-progress-value { border-radius: 4px; background: #b6a0c3; transition: width .4s var(--ease); }
.storage-usage progress::-moz-progress-bar { border-radius: 4px; background: #b6a0c3; transition: width .4s var(--ease); }
.storage-dialog { width: min(580px, calc(100vw - 28px)); max-width: none; max-height: min(82svh, 780px); padding: 0; border: 1px solid #e8e3df; border-radius: 18px; color: #57534f; background: #fdfcf9; box-shadow: 0 20px 80px -35px #8e7c6a45; overflow: hidden; }
.storage-dialog::backdrop { background: #eee9e25c; backdrop-filter: blur(6px); }
.storage-dialog section { padding: 20px 22px 14px; }
.storage-dialog header { display: flex; align-items: center; justify-content: space-between; }
.storage-dialog h2 { margin: 0; font-size: 16px; font-weight: 450; letter-spacing: -.3px; }
.storage-dialog [data-storage-close] { width: 30px; height: 30px; border-radius: 50%; background: transparent; font-size: 20px; color: #8b837c; }
.storage-summary { margin: 5px 0 12px; font-size: 10px; color: var(--muted); }
.storage-list { max-height: min(62svh, 580px); overflow: auto; overscroll-behavior: contain; }
.storage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #ece7e1; }
.storage-item-copy { min-width: 0; display: grid; gap: 4px; text-align: left; }
.storage-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 450; }
.storage-item-copy span, .storage-item-size { color: var(--muted); font-size: 9px; }
.storage-row [data-storage-delete] { padding: 7px 9px; border-radius: 14px; background: #f3ecef; color: #936d7c; font-size: 9px; }
.storage-empty, .storage-message { color: var(--muted); font-size: 10px; line-height: 1.7; }
.storage-message:empty { display: none; }
.owner-toggle { display: grid; place-items: center; background: transparent; color: #95879d; width: 36px; height: 36px; padding: 9px; border-radius: 50%; transition: background .3s, transform .5s var(--ease); }
.owner-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.owner-toggle:hover { background: #f0e9f4; transform: rotate(-12deg); }
.owner-toggle[aria-pressed=true] { color: #8c6ca0; background: #eee5f3; }
.owner-toggle[data-owner], .owner-toggle[data-timeline-key], .owner-toggle[data-writing-key] { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 24; }
.motion-toggle { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 22px; z-index: 22; width: 34px; height: 34px; display: grid; place-items: center; background: transparent; color: #a39aa9; border-radius: 50%; padding: 8px; }
.motion-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.motion-toggle .motion-slash { display: none; }
.motion-toggle[aria-pressed=false] .motion-slash { display: initial; }
.motion-toggle:hover { color: #80688e; background: #eee7f2; }
.owner-dialog { position: fixed; inset: 0; margin: auto; width: min(320px, calc(100vw - 48px)); max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; }
.owner-dialog::backdrop { background: #f2edf233; backdrop-filter: blur(4px); }
.owner-form { display: flex; flex-wrap: wrap; align-items: center; margin: 0; text-align: center; }
.owner-form h2, .owner-form label, .owner-dialog .viewer-close { display: none !important; }
.owner-form input { display: block; flex: 1; min-width: 0; height: 54px; border: 0; border-bottom: 1px solid #cfc2d7; border-radius: 0; background: #fffaf277; font: inherit; font-size: 19px; letter-spacing: .38em; text-align: center; padding: 12px 8px; color: #75617f; }
.owner-enter { align-self: stretch; padding: 0 10px; border-bottom: 1px solid #cfc2d7; background: #fffaf277; color: #918099; font-size: 9px; letter-spacing: .1px; transition: color .25s, background .25s; }
.owner-enter:hover { color: #70577f; background: #f2eaf580; }
.owner-form .owner-error { flex-basis: 100%; }
.owner-form input::placeholder { color: #a69bac; font-size: 11px; letter-spacing: .16em; }
.owner-form input:focus { outline: none; }
.owner-error { font-size: 10px; line-height: 1.6; color: #a16d7c; margin: 10px 0 0; }
.owner-error:empty { display: none; }
.writing-tools { display: flex; justify-content: flex-end; align-items: center; gap: 7px; min-height: 34px; }
.writing-tools .owner-toggle { width: 30px; height: 30px; padding: 7px; }
.writing-tools .quiet-button { font-size: 10px; }
.writing-editor { display: grid; gap: 12px; max-width: 620px; margin: 28px auto 0; text-align: left; }
.writing-editor[hidden] { display: none !important; }
.writing-editor label { display: grid; gap: 5px; color: #938899; font-size: 10px; }
.writing-editor input, .writing-editor textarea, .writing-editor select { width: 100%; border: 0; border-bottom: 1px solid #e2dce5; border-radius: 0; padding: 10px 2px; color: #57534f; background: #fffaf244; font: inherit; font-size: 13px; resize: vertical; }
.writing-editor textarea { min-height: 180px; line-height: 1.8; }
.writing-editor .tool-button { justify-self: start; }
.writing-status { min-height: 1em; color: #8e8195; font-size: 10px; }
.scrapbook-board[data-editable=false] .scrap-card { cursor: default; touch-action: auto; }
.scrapbook-board[data-editable=false] input, .scrapbook-board[data-editable=false] textarea { cursor: default; }
.file-curtain { position: fixed; inset: 16px; pointer-events: none; z-index: 30; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; border: 1px dashed #b9a6c9; border-radius: 24px; background: #f5f0f7db; backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.file-curtain > span { font-size: 23px; letter-spacing: -.6px; color: #887293; }
.file-curtain small { font-size: 11px; color: var(--muted); }
.file-hover .file-curtain { opacity: 1; visibility: visible; }
.touch-bloom { position: fixed; pointer-events: none; border: 1px solid #b6a0c5; border-radius: 50%; z-index: 21; background: #e7d7f214; animation: touch-bloom 1.1s var(--ease) forwards; }
.chapter-links { display: grid; gap: 8px; margin-top: 30px; }
.chapter-link { display: grid; grid-template-columns: 1fr 20px; text-align: left; padding: 20px 22px; border-radius: 16px; gap: 6px; background: #f4f0f6; transition: transform .6s var(--ease), background .4s; }
.chapter-link:nth-child(2) { background: #edf1e8; }
.chapter-link:nth-child(3) { background: #f5eee6; }
.chapter-link > span:first-child { font-size: 13px; }
.chapter-link small { grid-column: 1; font-size: 10px; color: var(--muted); }
.chapter-link > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #a89ba9; transition: transform .5s var(--ease); }
.chapter-link:hover { transform: translateY(-3px); }
.chapter-link:hover > span:last-child { transform: translate(3px, -3px); }
.sheet.is-scrapbook { width: min(1020px, calc(100vw - 40px)); }
.sheet.is-scrapbook, .sheet.is-timeline { width: min(1160px, calc(100vw - 32px)); background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.sheet.is-about { width: min(980px, calc(100vw - 32px)); background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.sheet.is-scrapbook .sheet-bar, .sheet.is-timeline .sheet-bar, .sheet.is-about .sheet-bar { height: 54px; }
.sheet.is-scrapbook .sheet-scroll, .sheet.is-timeline .sheet-scroll, .sheet.is-about .sheet-scroll { scrollbar-width: none; }
.sheet.is-scrapbook .sheet-scroll::-webkit-scrollbar, .sheet.is-timeline .sheet-scroll::-webkit-scrollbar, .sheet.is-about .sheet-scroll::-webkit-scrollbar { display: none; }
.sheet.is-scrapbook .sheet-content { padding-top: 0; }
.sheet.is-timeline .sheet-content, .sheet.is-about .sheet-content { padding-top: 4px; }
.is-scrapbook .sheet-scroll { max-height: calc(100svh - 205px); }
.is-scrapbook .sheet-content { padding: 10px 24px 8px; }
.scrapbook-heading h1 { font-size: 30px; margin-bottom: 10px; }
.scrapbook-heading .intro { margin-bottom: 17px; }
.scrapbook-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; align-items: center; }
.tool-button { background: #f0ede7; border-radius: 22px; padding: 10px 16px; font-size: 10px; transition: transform .45s var(--ease), background .3s; }
.tool-button:hover { transform: translateY(-2px); background: #e9e4dc; }
.tool-button.primary-tool { background: #e9dfef; }
.tool-button.primary-tool:hover { background: #dfd2e9; }
button:disabled { cursor: wait; opacity: .5; }
.backup-menu { position: relative; text-align: left; z-index: 10000; }
.backup-menu summary { list-style: none; padding: 8px 12px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 20px; }
.backup-menu summary::-webkit-details-marker { display: none; }
.backup-menu summary:focus-visible { outline: 2px solid #9b8bad; }
.backup-menu[open] summary { background: #ede7f1; }
.backup-menu > div { position: absolute; right: 0; top: 43px; width: 160px; border-radius: 14px; padding: 7px; background: #fdfcf9; box-shadow: 0 5px 30px #85716c20; border: 1px solid var(--line); }
.backup-menu button { background: none; padding: 12px; display: block; width: 100%; text-align: left; font-size: 10px; border-radius: 8px; }
.backup-menu button:hover { background: #f2eef5; }
.scrapbook-status { font-size: 10px; line-height: 1.7; color: var(--muted); min-height: 20px; margin: 14px 0 0; }
.scrapbook-status:empty { min-height: 0; margin: 0; }
.scrapbook-viewport { overflow: clip; overflow-clip-margin: 16px; }
.scrapbook-board { position: relative; display: block; min-height: 0; padding: 0; border: 0; outline: 1px dashed transparent; border-radius: 20px; transition: outline-color .3s, background .3s; isolation: isolate; --scrap-unit: calc(1px * var(--scrap-scale, 1)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.scrapbook-board[data-empty=true] { display: none; }
.world.scrapbook-empty { min-height: 0; align-items: start; padding-top: 22px; padding-bottom: 0; }
.drop-invitation { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; }
.drop-symbol { width: 65px; height: 65px; display: grid; place-items: center; border: 1px dashed #d1c8d5; border-radius: 22px; font-size: 22px; color: #b6a8bf; transform: rotate(-7deg); margin-bottom: 20px; }
.drop-invitation p { font-size: 14px; letter-spacing: -.3px; margin: 0 0 9px; }
.drop-invitation > span:last-child { font-size: 10px; color: var(--muted); }
.is-file-over .scrapbook-board { outline-color: #b9a8c5; background: #f1eaf682; }
.is-file-over .drop-symbol { transform: rotate(5deg) scale(1.1); transition: transform .5s var(--ease); }
.scrap-card { margin: 0; min-width: 0; width: var(--card-width,100%); position: absolute; left: 0; top: 0; background: #fffefa; padding: calc(10 * var(--scrap-unit)) calc(10 * var(--scrap-unit)) calc(8 * var(--scrap-unit)); border-radius: calc(2 * var(--scrap-unit)); box-shadow: 0 4px 14px #796c5f13, 0 1px 2px #796c5f10; transform: rotate(var(--angle, 0deg)); transition: transform .7s var(--ease), box-shadow .5s; cursor: grab; touch-action: pan-y; user-select: none; }
.scrapbook-board.is-layouting .scrap-card { transition: none !important; }
.scrap-card::before { content: ''; position: absolute; top: calc(-9 * var(--scrap-unit)); left: calc(50% - 27 * var(--scrap-unit)); width: calc(54 * var(--scrap-unit)); height: calc(21 * var(--scrap-unit)); background: #e5dbeab0; transform: rotate(-5deg); opacity: .75; pointer-events: none; }
.scrap-card:nth-child(3n)::before { background: #dce4d4b0; transform: rotate(7deg); }
.scrap-card:nth-child(3n + 1)::before { background: #f0dfc7b0; }
.scrap-card img, .scrap-card video { display: block; width: 100%; aspect-ratio: var(--ratio, 1); object-fit: cover; pointer-events: none; background: #eeeae5; }
.scrap-card.has-custom-size { height: var(--card-height); overflow: hidden; }
.scrap-card.is-photo { height: var(--card-height); padding: calc(18 * var(--scrap-unit)) calc(18 * var(--scrap-unit)) calc(14 * var(--scrap-unit)); }
.scrap-card.is-photo img, .scrap-card.is-photo video { height: max(1px, calc(var(--card-height) - 100 * var(--scrap-unit))); aspect-ratio: auto; }

.scrap-note.has-custom-size .scrap-note-text { height: calc(var(--card-height) - 50 * var(--scrap-unit)); min-height: 0; overflow: auto; }
.scrap-card.is-resizing { transition: none; cursor: nwse-resize; }
.scrap-card:hover { box-shadow: 0 10px 24px #796c5f24, 0 1px 2px #796c5f10; }
.scrapbook-board[data-editable=false] .scrap-card.is-photo { cursor: zoom-in; }
.scrap-card.is-dragging { cursor: grabbing; transform: rotate(var(--angle, 0deg)); box-shadow: 0 18px 32px #796c5f24; transition: box-shadow .25s; }
.scrap-caption { display: block; border: 0; outline: 0; background: transparent; width: 100%; text-align: center; font: inherit; font-size: max(11px, calc(20 * var(--scrap-unit))); line-height: 1.2; height: calc(68 * var(--scrap-unit)); color: #7a7169; padding: calc(6 * var(--scrap-unit)) calc(2 * var(--scrap-unit)); appearance: none; user-select: text; touch-action: auto; }
.scrap-caption::placeholder { color: #a59a90; font-size: inherit; }
.scrap-caption:focus { box-shadow: none; }
.scrap-controls { position: absolute; inset: 8px; display: flex; align-items: flex-start; justify-content: space-between; z-index: 2; opacity: 0; transition: opacity .3s; pointer-events: none; }
.scrap-controls > div { display: flex; gap: 4px; }
.scrap-controls button { pointer-events: auto; width: 30px; height: 30px; background: #fffdf4ed; color: #7e736a; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 8px #7d6e5c18; font-size: 15px; }
.scrap-controls [data-grab] { cursor: grab; touch-action: none; }
.scrap-controls [data-view] { position: absolute; right: 0; bottom: 28px; width: 32px; height: 32px; font-size: 16px; }
.scrap-controls [data-resize] { position: absolute; left: 0; bottom: 0; width: 30px; height: 30px; cursor: nwse-resize; touch-action: none; }
.scrap-controls [data-resize] svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.scrap-card:hover .scrap-controls, .scrap-card:focus-within .scrap-controls { opacity: 1; }
.scrap-note { background: #eee6f2; padding: calc(22 * var(--scrap-unit)) calc(15 * var(--scrap-unit)) calc(15 * var(--scrap-unit)); }
.scrap-note::before { background: #e3d9c8c0; }
.scrap-note-text { display: block; width: 100%; height: calc(155 * var(--scrap-unit)); min-height: 0; overflow: auto; padding: calc(2 * var(--scrap-unit)); border: 0; resize: none; background: none; font: inherit; font-size: max(11px, calc(20 * var(--scrap-unit))); line-height: 1.6; color: #796983; text-align: center; outline: 0; user-select: text; touch-action: auto; }
.scrap-note-text::placeholder { font-size: inherit; color: #998aa2; }
.scrap-note-text:focus { background: #ffffff18; }
.scrapbook-help { font-size: 9px; line-height: 1.9; color: var(--muted); margin: 0 auto 4px; }
.undo-button { font-size: 10px; color: #766282; background: none; text-decoration: underline; padding: 5px 8px; }
.photo-viewer { border: 0; border-radius: 0; background: transparent; max-width: min(1000px, 92vw); padding: 42px 0 10px; max-height: 92svh; box-shadow: none; overflow: visible; }
.photo-viewer::backdrop { background: #eee9e25c; backdrop-filter: blur(6px); }
.photo-viewer img, .photo-viewer video { display: block; max-width: 100%; max-height: 72svh; object-fit: contain; margin: auto; }
.photo-viewer [hidden], .timeline-viewer [hidden] { display: none !important; }
.photo-viewer p { font-size: 12px; text-align: center; color: var(--muted); margin: 15px 0 0; }
.viewer-close { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; background: transparent; }
@keyframes touch-bloom { 0% { transform: translate(-50%, -50%) scale(.8); opacity: .6; } 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }
@media (pointer: coarse) { .scrap-controls { opacity: 1; } }
@media (max-width: 700px) {
  .is-scrapbook .sheet-content { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 420px) {
  .sheet.is-scrapbook { width: calc(100vw - 20px); }

  .scrapbook-tools { gap: 5px; }
  .tool-button { font-size: 9px; padding: 10px 12px; }

}

.constellation { position: relative; width: min(640px, calc(100vw - 32px), calc((100svh - 144px) * 1.143)); aspect-ratio: 640 / 560; min-width: 280px; }
.seed { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; box-shadow: none; z-index: 3; display: grid; place-items: center; padding: 0; }
.seed-label { position: relative; z-index: 1; }
.seed::after { content: none; }
.seed-label { font-size: 16px; font-weight: 450; letter-spacing: -.6px; transition: opacity .38s ease, transform .6s var(--ease); }
.memory-intro-active .seed-label { opacity: 0; }
.seed-dot { color: #9b84af; }
.seed:hover .seed-label { transform: scale(1.06); }
.seed:active .seed-label { transform: scale(.94); transition-duration: .15s; }
.seed-halo { display: none; }
.seed-whisper { position: absolute; top: calc(50% + 72px); left: 0; width: 100%; text-align: center; font-size: 10px; letter-spacing: .8px; color: var(--muted); margin: 0; transition: opacity .45s, transform .6s var(--ease); pointer-events: none; }
.invitation { position: absolute; top: calc(50% + 76px); width: 100%; text-align: center; font-size: 10px; color: #918a83; letter-spacing: .3px; animation: arrive 1.8s var(--ease) both; transition: opacity .35s; pointer-events: none; }
.constellation[data-open=true] .seed-whisper { opacity: 0; transform: translateY(10px); }
.constellation[data-open=true] .invitation { opacity: 0; animation: none; }
.constellation[data-open=true] .seed-halo { animation: none; opacity: .4; }
.orbit-caption { position: absolute; width: 100%; text-align: center; top: -5%; font-size: 10px; letter-spacing: .5px; color: var(--muted); }
.threads, .branches { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.threads path { fill: none; stroke: #d8d2d0; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.branch { position: absolute; left: var(--left); top: var(--top); transform: translate(-50%, -50%); width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; pointer-events: auto; border-radius: 50%; z-index: 2; text-align: center; }
.lavender { --node: #e9e1ef; --node-hover: #e0d4e9; --node-ink: #786585; }
.sage { --node: #e3e9dd; --node-hover: #d9e3d1; --node-ink: #65725b; }
.peach { --node: #f0e2d7; --node-hover: #ebd7c8; --node-ink: #957960; }
.branch-orb { width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; background: transparent; border: 0; border-radius: 50%; box-shadow: none; transition: transform .6s var(--ease); position: relative; }
.branch-orb > svg, .branch-orb > span { position: relative; z-index: 1; }
.branch-orb::after { content: none; }
.branch:hover .branch-orb, .branch:focus-visible .branch-orb { transform: translateY(-4px) scale(1.045); }
.branch:active .branch-orb { transform: scale(.96); transition-duration: .15s; }
.branch svg, .little-mark svg { width: 19px; height: 19px; fill: none; stroke: var(--node-ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.branch-orb > span { font-size: 11px; letter-spacing: -.15px; }
.branch-note { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); width: 160px; font-size: 9px; color: var(--muted); letter-spacing: .2px; pointer-events: none; }
.wayfinding { position: fixed; bottom: max(35px, env(safe-area-inset-bottom)); left: 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 10px; animation: arrive .6s var(--ease) both; }
.step-back { color: #76716b; padding: 12px 4px; transition: color .25s; }
.step-back:hover { color: #3e3935; }
.keyboard-hint { color: #938c85; font-size: 9px; }
.keyboard-hint:hover { color: #5e5368; }
.sheet { width: min(560px, calc(100vw - 40px)); background: #fdfcf9; border: 1px solid #e8e3df; border-radius: 24px; box-shadow: 0 20px 80px -35px #8e7c6a30, 0 3px 12px #8e7c6a04; position: relative; overflow: hidden; }
.sheet-bar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 8px; }
.back, .close { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; font-size: 18px; font-weight: 400; border-radius: 50%; transition: background .35s, transform .45s var(--ease); color: #8b837c; }
.back:hover { background: #f0ede7; transform: translateX(-3px); }
.close:hover { background: #f0ede7; transform: rotate(90deg); }
.sheet-path { font-size: 9px; color: var(--muted); letter-spacing: .2px; text-align: center; overflow-wrap: anywhere; }
.sheet-scroll { max-height: calc(100svh - 240px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #e1dbd4 transparent; }
.sheet-content { text-align: center; padding: 23px 48px 48px; }
.eyebrow { font-size: 8px; letter-spacing: 1.7px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; text-transform: uppercase; }
h1 { font-size: 30px; letter-spacing: -1px; line-height: 1.25; font-weight: 450; margin: 0 auto 18px; max-width: 390px; outline: none; text-wrap: balance; }
.intro { font-size: 12px; line-height: 1.9; color: var(--muted); margin: 0 auto 30px; max-width: 330px; text-wrap: pretty; }
.kept-list { margin-top: 36px; }
.kept-item { display: flex; flex-direction: column; align-items: center; padding: 22px 10px; gap: 9px; position: relative; transition: transform .6s var(--ease), background .5s; border-radius: 14px; }
.kept-item + .kept-item { margin-top: 8px; }
.kept-item::before { content: ''; position: absolute; width: 26px; height: 1px; background: var(--line); top: -4px; left: calc(50% - 13px); }
.kept-item:hover { background: #f5f2ee; transform: translateY(-3px); }
.entry-date { font-size: 9px; color: var(--muted); }
.entry-title { font-size: 14px; letter-spacing: -.25px; line-height: 1.5; }
.entry-detail { font-size: 8px; color: var(--muted); }
.entry-detail > span { display: inline-block; margin-left: 5px; transition: transform .5s var(--ease); }
.kept-item:hover .entry-detail > span { transform: translate(2px, -2px); }
.endnote { font-size: 9px; color: var(--muted); margin: 32px 0 0; }
.little-mark { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 30px; background: var(--node); }
.prose { max-width: 420px; margin: 28px auto; }
.prose p { font-size: 13px; line-height: 2; color: #77716a; margin: 22px 0; text-wrap: pretty; }
.quiet-button { display: inline-block; border: 0; background: transparent; font-size: 10px; line-height: 1.6; color: #766682; padding: 12px 8px; transition: color .3s, transform .5s var(--ease); }
.quiet-button:hover { color: #45374f; transform: translateY(-2px); }
.link-garden { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 25px; }
.empty-note { font-size: 11px; color: var(--muted); line-height: 1.9; margin: 8px 0; }
.skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.skills > span { padding: 6px 10px; border-radius: 20px; font-size: 10px; background: #ede8f0; }
.sheet-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.article-meta { font-size: 9px; color: var(--muted); line-height: 1.8; margin: 0 0 35px; }
.article-meta:has(+ .article-category) { margin-bottom: 8px; }
.article-category { font-size: 11px; line-height: 1.6; color: #95869e; margin: 0 0 28px; }
.youtube-embeds { display: grid; gap: 22px; min-width: 0; }
.youtube-embeds[hidden] { display: none; }
.youtube-video { margin: 0; min-width: 0; animation: youtube-arrive .35s var(--ease) both; }
.youtube-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; overflow: hidden; background: #e7e2e9; }
.youtube-play { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; transition: opacity .35s var(--ease); }
.youtube-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.youtube-play-icon { position: absolute; inset: 0; display: grid; place-items: center; color: white; background: #2920311a; transition: background .3s; }
.youtube-play-icon svg { width: 46px; height: 46px; fill: currentColor; filter: drop-shadow(0 2px 8px #24162b88); transition: transform .35s var(--ease); }
.youtube-play:hover .youtube-play-icon { background: #29203133; }
.youtube-play:hover svg { transform: scale(1.1); }
.youtube-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .35s var(--ease); }
.youtube-frame.is-ready iframe { opacity: 1; }
.youtube-frame.is-ready .youtube-play { opacity: 0; pointer-events: none; }
.youtube-frame.is-loading .youtube-play-icon svg { animation: youtube-loading 1s ease-in-out infinite alternate; }
.youtube-video figcaption { margin: 6px 0 0; text-align: center; }
.youtube-field small { font-size: 10px; color: var(--muted); line-height: 1.6; }
.moment-form .youtube-field textarea, .writing-editor .youtube-field textarea { min-height: 64px; line-height: 1.6; }
.youtube-preview { width: 100%; max-width: 560px; margin-inline: auto; }
.entry-youtube { max-width: 620px; margin: 26px auto; }
@keyframes youtube-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes youtube-loading { to { opacity: .35; transform: scale(.92); } }
.entry-image { display: block; width: 100%; max-height: 280px; object-fit: cover; border-radius: 10px; margin: 28px auto; }
.end-symbol { display: block; color: #b5a4c1; font-size: 22px; margin-top: 32px; }
.screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript { position: fixed; bottom: 30px; width: 100%; text-align: center; font-size: 13px; }
@keyframes glass-morph {
  0% { border-radius: 47% 53% 54% 46% / 49% 44% 56% 51%; }
  50% { border-radius: 56% 44% 46% 54% / 43% 56% 44% 57%; }
  100% { border-radius: 43% 57% 51% 49% / 55% 46% 54% 45%; }
}
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 520px) {
  .world { padding: 60px 12px; }
  .constellation { width: min(430px, calc(100vw - 28px), calc((100svh - 180px) * 1.143)); }
  .seed { width: 78px; height: 78px; }
  .memory-intro-core { font-size: 14px; }
  .seed-label { font-size: 14px; }
  .seed-whisper { top: calc(50% + 60px); font-size: 9px; }
  .invitation { top: calc(50% + 64px); font-size: 9px; }
  .branch { width: 88px; height: 88px; }
  .branch-orb { width: 72px; height: 72px; gap: 5px; }
  .branch-orb > span { font-size: 10px; }
  .branch svg { width: 17px; height: 17px; }
  .branch-note { top: calc(100% + 2px); font-size: 8px; width: 125px; }
  .orbit-caption { top: -12%; font-size: 9px; }
  .about-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'profile' 'hobbies' 'links'; row-gap: 4px; width: min(430px, 100%); }
  .about-profile { width: 100%; margin: 14px 0 0; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .portrait-slot { min-height: 108px; }
  .cornell-mark { grid-template-columns: minmax(72px, 100px) minmax(0, 1fr); gap: 7px; }
  .cornell-wordmark { max-width: 96px; }
  .activities { margin: 6px 0 14px; }
  .is-about .activities h2 { transform: translateY(5px); }
  .personal-links { grid-template-columns: minmax(0, 1fr); width: 100%; margin-top: 12px; }
  .sheet-content { padding: 22px 25px 35px; }
  .sheet-scroll { max-height: calc(100svh - 210px); }
  h1 { font-size: 27px; }
  .wayfinding { bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-height: 520px) and (min-width: 521px) {
  .world { padding: 45px 12px; }
  .constellation { min-width: 0; width: min(430px, calc((100svh - 90px) * 1.143)); }
  .seed { width: 64px; height: 64px; }
  .memory-intro-core { font-size: 12px; }
  .seed-label { font-size: 12px; }
  .branch { width: 76px; height: 76px; }
  .branch-orb { width: 62px; height: 62px; gap: 4px; }
  .branch-orb > span { font-size: 9px; }
  .branch-note { font-size: 8px; }
  .orbit-caption { top: -2%; }
  .sheet-scroll { max-height: calc(100svh - 160px); }
  .wayfinding { bottom: 10px; }
}
@media (max-width: 520px), (max-height: 520px) {
  .world.about-open { padding-block: 48px; }
  .sheet.is-about .sheet-bar { height: 40px; padding-block: 8px; }
  .sheet.is-about .sheet-scroll { max-height: calc(100svh - 140px); }
  .sheet.is-about .sheet-content { padding: 4px 16px 8px; }
  .is-about .about-layout { row-gap: 8px; column-gap: 20px; }
  .is-about .about-profile { width: 100%; margin: 0; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
  .is-about .portrait-slot { min-height: 96px; }
  .is-about .portrait-slot img { width: 72px; height: 96px; }
  .is-about .about-facts { gap: 9px; }
  .is-about .activities { margin: 0; }
  .is-about .activities h2 { margin: 0 0 3px 2px; }
  .is-about .activity-scene { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
  .is-about .activity-links a { grid-template-columns: 14px minmax(0, 1fr); gap: 7px; padding: 5px 2px; }
  .is-about .xr-bear { width: clamp(100px, 29vw, 124px); height: 112px; aspect-ratio: auto; }
  .is-about .personal-links { width: 100%; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .is-about .personal-links a { padding: 6px 2px; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
  .is-about .personal-links .link-logo { width: 14px; height: 14px; }
  .is-about .personal-links a[href^="mailto:"] { grid-column: 1 / -1; }
}
@media (max-height: 500px) {
  .world.about-open { padding-block: 40px; }
  .sheet.is-about .sheet-bar { height: 36px; padding-block: 6px; }
  .sheet.is-about .sheet-scroll { max-height: calc(100svh - 120px); }
  .is-about .about-profile { grid-template-columns: 64px minmax(0, 1fr); }
  .is-about .portrait-slot { min-height: 72px; }
  .is-about .portrait-slot img { width: 54px; height: 72px; }
  .is-about .activity-links a { padding-block: 3px; }
  .is-about .xr-bear { height: 96px; }
}
@media (max-width: 520px) {
  .is-about .activity-scene { grid-template-columns: max-content minmax(0, 1fr); gap: 6px; }
  .is-about .xr-bear { width: min(clamp(100px, 29vw, 124px), 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) *, html:not([data-motion=on]) *::before, html:not([data-motion=on]) *::after { animation: none !important; transition: none !important; }
}
html[data-motion=off] *, html[data-motion=off] *::before, html[data-motion=off] *::after { animation: none !important; transition: none !important; }
@media print {
  html, body { height: auto; overflow: visible; }
  body { color: #222; background: white; }
  .world { display: block; padding: 0; overflow: visible; min-height: 0; }
  .constellation, .sheet-bar, .wayfinding, .sheet-actions, .water-surface, .touch-bloom, .file-curtain, .scrapbook-tools, .scrap-controls, .scrapbook-status, .scrapbook-help { display: none !important; }
  .sheet { width: 100%; border: 0; border-radius: 0; box-shadow: none; background: white; overflow: visible; }
  .sheet-scroll { max-height: none; overflow: visible; }
  .sheet-content { padding: 20px; }
}

/* site-wide pastel rose palette */
:root { color: #65383d; background: #f2dada; --paper: #f2dada; --muted: #83545a; --line: #d9aeb2; }
body { color: #65383d; background-color: #f2dada; background-image: radial-gradient(ellipse at 16% 8%, rgba(214,117,128,.3), transparent 41%), radial-gradient(ellipse at 88% 82%, rgba(235,166,162,.3), transparent 38%), radial-gradient(ellipse at 84% 10%, rgba(194,86,99,.18), transparent 34%), linear-gradient(to bottom, transparent 33px, rgba(120,45,55,.035) 33px, rgba(120,45,55,.035) 34px); }
.sheet, .storage-dialog, .backup-menu > div { background-color: #f9e9e8; border-color: #d9aeb2; color: #65383d; }
.sheet-scroll { scrollbar-color: #c78086 transparent; }
.memory-intro { background: radial-gradient(ellipse at 20% 18%, #c965724f, transparent 45%), radial-gradient(ellipse at 80% 78%, #e8a29a4c, transparent 46%), #f2dadaF2; }
.memory-intro-core span, .seed-dot { color: #a73d4b; }
.seed-label, .branch-orb { --node: #d98289; --node-hover: #ca6874; --node-ink: #542d33; }
.lavender, .sage, .peach { --node: #d98289; --node-hover: #ca6874; --node-ink: #542d33; }
.threads path, .branches path { stroke: #bd777e; }
.close:hover, .back:hover, .owner-toggle:hover, .motion-toggle:hover { background: #edc2c3; }
.owner-toggle, .motion-toggle, .back, .close { color: #994c55; }
.owner-toggle[aria-pressed=true], .tool-button.primary-tool { color: #65383d; background: #e6b0b3; }
.tool-button, .chapter-link, .storage-row [data-storage-delete] { color: #65383d; background: #ebc5c5; }
.chapter-link:nth-child(2), .chapter-link:nth-child(3) { background: #f0ceca; }
.tool-button:hover, .tool-button.primary-tool:hover { background: #dfa4a9; }
.personal-links a, .storage-row, .writing-editor input, .writing-editor textarea, .writing-editor select { border-color: #e8cfd0; }
.link-logo, .activity-links .link-logo, .activities h2, .portrait-slot, .seattle-location svg { color: #a64f59; stroke: #a64f59; }
.personal-links a:hover, .activity-links a:hover, .quiet-button:hover { color: #8f2638; }
.scrap-card::before, .scrap-note::before { background-color: #dc9998c0; }
.scrap-card:nth-child(3n)::before, .scrap-card:nth-child(3n + 1)::before { background-color: #eab5a9c0; }
.scrap-note { background: #e9bfc0; }
.scrap-note-text, .scrap-caption { color: #65383d; }
.drop-symbol, .is-file-over .scrapbook-board { color: #994c55; border-color: #c87980; }
.touch-bloom { border-color: #be5965; background: #cf707814; }
.youtube-frame { background: #e9c0c0; }
.article-category, .quiet-button, .undo-button { color: #8f3542; }
.scroll-hint { position: absolute; z-index: 5; bottom: 5px; left: 50%; translate: -50% 0; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 8px 24px; border: 0; border-radius: 0; background: radial-gradient(ellipse, rgba(242,218,218,.97) 32%, rgba(242,218,218,.75) 55%, transparent 75%); color: #8f3542; font: inherit; font-size: 11px; font-weight: 500; letter-spacing: .25px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; }
.scroll-hint.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.scroll-hint svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; animation: scroll-hint-nudge 2.2s ease-in-out infinite; }
.scroll-hint:not(.is-visible) svg { animation-play-state: paused; }
.route-ghost .scroll-hint { display: none; }
@keyframes scroll-hint-nudge { 0%, 55%, 100% { transform: translateY(-2px); } 28% { transform: translateY(3px); } }
@media (min-width: 521px) and (min-height: 601px) {
  .is-about .personal-links { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .is-about .personal-links a[href^="mailto:"] { grid-column: auto; }
}
@media (max-width: 520px) {
  .is-about .personal-links { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .is-about .personal-links a[href^="mailto:"] { grid-column: auto; }
}