@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600&display=swap');

:root { --paper:#eeece5; --ink:#2d3933; --muted:#788078; --moss:#657865; --clay:#b87357; --line:rgba(48,60,52,.22); --serif:'Noto Serif SC','Songti SC',STSong,serif; --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:var(--serif); }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.planet-page { width:min(1560px,calc(100% - 72px)); margin:0 auto; padding:28px 0 42px; }
.topbar { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding-bottom:27px; border-bottom:1px solid var(--line); }
.wordmark { color:var(--ink); font-size:15px; font-weight:600; letter-spacing:.11em; text-decoration:none; }
.topbar-note,.world-count,.record-intro p,.form-hint { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.eyebrow { margin:0 0 12px; color:var(--clay); font-family:var(--mono); font-size:10px; letter-spacing:.14em; line-height:1.4; }
.world-stage { display:grid; grid-template-columns:minmax(176px,.56fr) minmax(580px,2.18fr) minmax(200px,.62fr); align-items:center; gap:clamp(18px,2.3vw,42px); min-height:620px; padding:18px 0 38px; }
.title-note { padding-left:clamp(0px,1.4vw,22px); }
.title-note h1,.timeline-panel h2,.record-intro h2,.record-dialog h2 { margin:0; color:var(--ink); font-weight:500; }
.title-note h1 { max-width:226px; font-size:clamp(24px,2.25vw,34px); line-height:1.46; letter-spacing:.035em; }
.world-count { max-width:225px; margin-top:18px; }
.write-link { display:inline-flex; gap:13px; align-items:center; margin-top:23px; padding-bottom:5px; color:var(--ink); border-bottom:1px solid var(--ink); font-size:13px; text-decoration:none; transition:color 180ms ease,border-color 180ms ease; }
.write-link:hover { color:var(--clay); border-color:var(--clay); }
.write-link span { font-family:var(--mono); font-size:15px; }
.planet-figure { position:relative; width:100%; max-width:930px; margin:0; isolation:isolate; line-height:0; }
.planet-hero-image { display:block; width:100%; height:auto; user-select:none; }
.world-overlay { position:absolute; inset:0; line-height:1; }
.map-area { position:absolute; pointer-events:none; }
.area-daily { left:9%; top:43%; width:24%; height:37%; }.area-creative { left:24%; top:25%; width:22%; height:29%; }.area-ai { left:60%; top:42%; width:19%; height:31%; }.area-family { left:76%; top:27%; width:18%; height:38%; }.area-body { left:32%; top:45%; width:23%; height:22%; }.area-thinking { left:41%; top:44%; width:24%; height:30%; }.area-dream { left:40%; top:25%; width:25%; height:20%; }
.elements-layer { position:absolute; inset:0; }
.world-element { position:absolute; z-index:1; top:var(--y); left:var(--x); display:grid; width:clamp(36px,4vw,56px); aspect-ratio:1; padding:0; place-items:center; background:transparent; border:0; opacity:0; pointer-events:auto; transform:translate(-50%,-50%) rotate(var(--rotation)) scale(.72); animation:marker-arrive 680ms cubic-bezier(.2,.8,.25,1) forwards; animation-delay:var(--delay); }
.world-element::before { position:absolute; z-index:-1; width:86%; height:33%; border-radius:50%; background:var(--garden-color,rgba(75,102,67,.2)); box-shadow:0 0 14px var(--garden-color,rgba(93,126,75,.22)); content:''; filter:blur(4px); transform:translateY(32%); }
.world-element:hover,.world-element:focus-visible { z-index:2; transform:translate(-50%,-50%) rotate(0deg) scale(1.12); outline:none; }
.world-element:focus-visible::after { position:absolute; inset:-5px; border:1px solid var(--clay); border-radius:50%; content:''; }
.world-marker,.timeline-icon { background-image:url('../assets/memory-markers-v3-transparent.png'); background-position:var(--marker-x) 50%; background-repeat:no-repeat; }
.world-marker { position:absolute; top:50%; left:50%; display:block; width:62%; height:145%; background-size:700% auto; opacity:.7; mix-blend-mode:multiply; filter:drop-shadow(0 2px 2px rgba(47,61,46,.16)); transform:translate(-50%,-50%) scale(.78); animation:memory-pulse var(--pulse-duration,4.6s) ease-in-out infinite; animation-delay:var(--pulse-delay,0ms); }
.world-element:hover .world-marker,.world-element:focus-visible .world-marker { opacity:1; filter:drop-shadow(0 3px 4px rgba(47,61,46,.24)); transform:translate(-50%,-50%) scale(.98); animation-play-state:paused; }
.world-element.marker-paper .world-marker { opacity:.64; }.world-element.marker-book .world-marker { opacity:.72; }.world-element.marker-star .world-marker { opacity:.9; mix-blend-mode:normal; }
.world-element.growth-seed { width:clamp(30px,3.3vw,43px); }.world-element.growth-seed .world-marker { opacity:.5; }
.world-element.growth-bud { width:clamp(34px,3.7vw,49px); }.world-element.growth-bud .world-marker { opacity:.78; }
.marker-flower { --marker-x:0%; }.marker-paper { --marker-x:16.667%; }.marker-gear { --marker-x:33.333%; }.marker-tree { --marker-x:50%; }.marker-footprint { --marker-x:66.667%; }.marker-book { --marker-x:83.333%; }.marker-star { --marker-x:100%; }
@keyframes marker-arrive { 0% { opacity:0; transform:translate(-50%,-45%) rotate(var(--rotation)) scale(.52); } 72% { opacity:1; transform:translate(-50%,-52%) rotate(var(--rotation)) scale(1.06); } 100% { opacity:1; transform:translate(-50%,-50%) rotate(var(--rotation)) scale(1); } }
@keyframes memory-pulse { 0%,72%,100% { opacity:.64; transform:translate(-50%,-50%) scale(.78); } 22% { opacity:.84; transform:translate(-50%,-50%) scale(.87); } 39% { opacity:1; transform:translate(-50%,-50%) scale(.93); } 54% { opacity:.74; transform:translate(-50%,-50%) scale(.82); } }
.growth-moment { position:absolute; top:49%; left:54%; z-index:4; display:grid; width:min(280px,48%); grid-template-columns:50px minmax(0,1fr); gap:12px; align-items:center; padding:8px 0 8px 13px; color:var(--ink); border-left:1px solid rgba(142,112,77,.46); font-family:var(--serif); line-height:1.45; opacity:0; pointer-events:none; visibility:hidden; transform:translate(-50%,-40%) scale(.78); }.growth-moment.is-visible { visibility:visible; animation:growth-moment-settle 2450ms cubic-bezier(.2,.78,.3,1) forwards; }.growth-moment-marker { display:block; width:50px; height:64px; background-image:url('../assets/memory-markers-v3-transparent.png'); background-position:var(--marker-x) 50%; background-repeat:no-repeat; background-size:700% auto; mix-blend-mode:multiply; filter:drop-shadow(0 3px 4px var(--garden-color,rgba(76,99,67,.28))); }.growth-moment-stage { margin:0; color:var(--moss); font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }.growth-moment-copy { display:-webkit-box; margin:4px 0 0; overflow:hidden; font-size:13px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.growth-moment-extra { margin:5px 0 0; color:var(--muted); font-size:10px; }.growth-moment-extra[hidden] { display:none; } @keyframes growth-moment-settle { 0% { opacity:0; transform:translate(-50%,-47%) scale(.72); } 16% { opacity:1; transform:translate(-50%,-51%) scale(1.02); } 66% { opacity:1; transform:translate(-50%,-49%) scale(1); } 100% { opacity:0; transform:translate(-50%,-13%) scale(.82); } }
.timeline-panel { align-self:stretch; min-height:420px; padding:84px 0 0 20px; border-left:1px solid var(--line); }
.timeline-panel h2 { font-size:19px; letter-spacing:.045em; }
.timeline-list { max-height:418px; margin:23px 0 0; padding:0; overflow:auto; list-style:none; }
.timeline-item { position:relative; display:grid; grid-template-columns:25px 1fr; gap:10px; padding:0 0 19px; }.timeline-item:not(:last-child)::before { position:absolute; top:25px; bottom:0; left:12px; border-left:1px solid var(--line); content:''; }
.timeline-open { display:block; min-width:0; padding:0; color:inherit; background:transparent; border:0; text-align:left; }.timeline-open:hover .timeline-copy { color:var(--clay); }
.timeline-icon { width:25px; height:25px; background-size:700% 100%; opacity:.78; }.timeline-time,.timeline-meta { color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.04em; }.timeline-copy { display:-webkit-box; margin:4px 0 0; overflow:hidden; font-size:12px; line-height:1.65; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.record-strip { display:grid; grid-template-columns:minmax(220px,.74fr) minmax(0,1.8fr); gap:clamp(28px,6vw,96px); padding:36px clamp(22px,4vw,62px) 33px; border:1px solid var(--line); background:#e8e3d7; }
.record-intro h2 { font-size:26px; line-height:1.4; letter-spacing:.04em; }.record-intro > p:last-of-type { max-width:225px; margin-top:11px; }
.record-form textarea { display:block; width:100%; min-height:100px; padding:0 0 15px; resize:vertical; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; font-size:16px; line-height:1.8; outline:none; }.record-form textarea::placeholder { color:#94958b; }.record-form textarea:focus { border-bottom-color:var(--moss); }
.guestbook-section { display:grid; grid-template-columns:minmax(220px,.74fr) minmax(0,1.8fr); gap:clamp(28px,6vw,96px); margin-top:30px; padding:35px clamp(22px,4vw,62px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.guestbook-intro h2 { margin:0; color:var(--ink); font-size:26px; font-weight:500; line-height:1.4; letter-spacing:.04em; }.guestbook-intro > p:last-child { max-width:240px; margin:11px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.guestbook-card { padding:20px 22px 8px; background:rgba(217,213,194,.44); border:1px solid rgba(82,99,84,.17); }.guestbook-preview { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }.guestbook-form { margin-top:18px; }
.guestbook-name-field { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; }.guestbook-name-field span { flex:0 0 auto; }.guestbook-name-field input { min-width:0; width:100%; padding:5px 0 7px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid rgba(72,89,74,.26); border-radius:0; outline:none; }.guestbook-name-field input::placeholder,.guestbook-form textarea::placeholder { color:#94958b; }.guestbook-name-field input:focus,.guestbook-form textarea:focus { border-color:var(--moss); }
.guestbook-form textarea { display:block; width:100%; min-height:82px; margin-top:16px; padding:0 0 12px; resize:vertical; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; font-size:14px; line-height:1.8; outline:none; }.guestbook-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:14px; }.guestbook-hint { margin:0; color:var(--muted); font-size:10px; line-height:1.65; }.guestbook-submit { flex:0 0 auto; padding:8px 12px; color:var(--moss); background:transparent; border:1px solid rgba(95,113,96,.45); border-radius:999px; font-size:11px; transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease; }.guestbook-submit:hover { color:#fffdf8; background:var(--moss); border-color:var(--moss); }
.guestbook-list { display:grid; gap:1px; margin:24px -22px 0; padding:0; border-top:1px solid rgba(82,99,84,.17); list-style:none; }.guestbook-note { padding:15px 22px; background:rgba(243,240,229,.28); }.guestbook-meta { display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.04em; }.guestbook-author { color:var(--moss); }.guestbook-note p { margin:8px 0 0; color:var(--ink); font-size:13px; line-height:1.72; white-space:pre-wrap; }.guestbook-empty { padding:16px 22px; color:var(--muted); font-size:12px; line-height:1.7; }
.guestbook-delete { margin-top:11px; padding:0 0 3px; color:var(--muted); background:transparent; border:0; border-bottom:1px solid rgba(99,116,101,.42); font-size:10px; }.guestbook-delete:hover { color:var(--clay); border-color:var(--clay); }
.category-fieldset { margin:20px 0 0; padding:0; border:0; }.category-fieldset legend { margin-bottom:11px; padding:0; font-size:13px; }.category-fieldset legend span { color:var(--muted); font-size:11px; }.category-picker { display:flex; flex-wrap:wrap; gap:7px; }
.category-option { padding:7px 12px; color:#5c685e; background:rgba(248,246,239,.56); border:1px solid rgba(80,95,82,.2); border-radius:999px; font-size:12px; line-height:1; transition:border-color 180ms ease,background-color 180ms ease,color 180ms ease; }.category-option:hover,.category-option.is-selected { color:#fffdf8; background:var(--moss); border-color:var(--moss); }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; }.form-hint { font-size:11px; }
.grow-button { flex:0 0 auto; padding:11px 17px; color:#fffdf8; background:var(--clay); border:1px solid var(--clay); border-radius:0; box-shadow:none; font-size:13px; transition:background-color 180ms ease,border-color 180ms ease,transform 180ms ease; }.grow-button:hover { background:#9f614b; border-color:#9f614b; transform:translateY(-1px); }.grow-button:disabled { cursor:not-allowed; opacity:.56; transform:none; }
.record-dialog { width:min(430px,calc(100vw - 36px)); padding:29px 29px 26px; color:var(--ink); background:#f6f3eb; border:1px solid rgba(53,66,57,.35); box-shadow:0 18px 54px rgba(40,47,42,.19); }.record-dialog::backdrop { background:rgba(36,43,39,.27); }.dialog-close { float:right; padding:0 0 4px; color:var(--muted); background:transparent; border:0; border-bottom:1px solid var(--line); font-size:12px; }.dialog-meta { padding-right:54px; color:var(--clay); font-family:var(--mono); font-size:10px; letter-spacing:.08em; }.record-dialog h2 { margin-top:22px; font-size:22px; }.dialog-content { margin:15px 0 0; font-size:16px; line-height:1.85; white-space:pre-wrap; }.dialog-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:21px; }.dialog-tag { padding:5px 9px; color:var(--moss); border:1px solid rgba(96,117,97,.28); border-radius:999px; font-size:11px; }
.relocate-panel { margin-top:23px; padding-top:16px; border-top:1px solid var(--line); }.relocate-toggle { padding:0 0 3px; color:var(--muted); background:transparent; border:0; border-bottom:1px solid rgba(99,116,101,.42); font-size:11px; }.relocate-toggle:hover { color:var(--clay); border-color:var(--clay); }.relocate-options { margin-top:13px; }.relocate-options p { margin:0 0 8px; color:var(--muted); font-size:11px; }.relocate-picker { display:flex; flex-wrap:wrap; gap:6px; }.relocate-option { padding:6px 9px; color:var(--moss); background:transparent; border:1px solid rgba(96,117,97,.28); border-radius:999px; font-size:11px; line-height:1.2; transition:color 180ms ease,border-color 180ms ease,background-color 180ms ease; }.relocate-option:hover { color:#fffdf8; background:var(--moss); border-color:var(--moss); }.relocate-option.is-current,.relocate-option:disabled { cursor:default; color:var(--muted); background:rgba(101,120,101,.1); border-color:rgba(96,117,97,.18); }
.toast { position:fixed; bottom:24px; left:50%; z-index:10; max-width:min(400px,calc(100vw - 34px)); padding:11px 16px; color:#fffdf8; background:#405247; box-shadow:0 10px 28px rgba(38,48,41,.18); font-size:13px; line-height:1.5; opacity:0; pointer-events:none; transform:translate(-50%,14px); transition:opacity 200ms ease,transform 200ms ease; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1120px) { .world-stage { grid-template-columns:minmax(180px,.56fr) minmax(480px,1.8fr); }.timeline-panel { grid-column:2; min-height:0; padding:20px 0 0; border-top:1px solid var(--line); border-left:0; }.timeline-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-height:none; gap:15px; }.timeline-item { padding-bottom:0; }.timeline-item:not(:last-child)::before { display:none; } }
@media (max-width:760px) { .planet-page { width:min(100% - 32px,620px); padding-top:20px; }.topbar { align-items:flex-start; padding-bottom:19px; }.topbar-note { max-width:155px; font-size:11px; text-align:right; }.world-stage { display:block; min-height:0; padding:32px 0; }.title-note { padding:0 0 25px; }.title-note h1,.world-count { max-width:none; }.title-note h1 { font-size:26px; }.planet-figure { max-width:620px; }.world-element { width:clamp(30px,9vw,49px); }.timeline-panel { margin-top:24px; padding-top:21px; }.timeline-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.record-strip,.guestbook-section { display:block; padding:29px 22px; }.record-intro p:last-child,.guestbook-intro > p:last-child { max-width:none; }.record-form,.guestbook-card { margin-top:28px; }.form-footer,.guestbook-footer { align-items:flex-end; flex-direction:column; }.form-hint,.guestbook-hint { align-self:flex-start; } }
@media (max-width:430px) { .timeline-list { display:block; }.timeline-item { padding-bottom:18px; }.timeline-item:not(:last-child)::before { display:block; }.category-option { padding:7px 10px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }