:root{--ink:#f6eee9;--muted:#b7aab1;--rose:#ef988e;--deep:#17141f;--line:rgba(246,238,233,.18);--serif:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif;--sans:var(--serif);--mono:var(--serif);--eva:var(--serif)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--deep);color:var(--ink);font-family:var(--serif);font-size:16px;font-feature-settings:'palt' 1}button,input,textarea{font-family:var(--serif)}.grain{position:fixed;inset:0;opacity:.09;pointer-events:none;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.site-header{height:80px;padding:0 7vw;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;position:absolute;z-index:3;width:100%;border-bottom:1px solid var(--line)}.brand{font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--ink);text-decoration:none}.brand span{color:var(--rose);font-size:18px}nav{display:flex;gap:28px}nav a,.scroll-cue{color:var(--muted);text-decoration:none;font-family:var(--sans);font-size:13px}.sound-toggle{background:none;border:0;color:var(--rose);font-size:23px;cursor:pointer}.hero{min-height:780px;height:100vh;position:relative;padding:160px 7vw 70px;overflow:hidden;background:radial-gradient(circle at 73% 48%,#5b2b44 0, #2b1c2b 24%,var(--deep) 59%)}.eyebrow{font:11px var(--mono);letter-spacing:.16em;color:var(--rose);margin:0 0 25px}.hero-copy{position:relative;z-index:1}.hero-copy>p{font-family:var(--sans);font-size:19px;margin:0 0 8px}.hero h1,.section h2{font-family:var(--eva);font-size:clamp(42px,5.8vw,82px);font-weight:900;line-height:1.18;letter-spacing:.08em;margin:0;text-shadow:1px 0 currentColor}.hero h1 em,.section h2 em{font-family:var(--eva);font-weight:900;color:var(--rose)}.counter-card{position:absolute;right:8vw;top:53%;z-index:2;width:410px;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.counter-card p{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0 0 17px}.counter{display:flex;align-items:baseline;gap:9px;font-family:var(--mono)}.counter span{display:flex;align-items:baseline;gap:4px}.counter b{font-size:28px;font-weight:500}.counter small{font-size:10px;color:var(--muted)}.counter i{font-style:normal;color:var(--rose)}.counter-card .counter-note{font-size:11px;margin:17px 0 0}.moon{position:absolute;width:min(43vw,580px);aspect-ratio:1;border-radius:50%;right:-9vw;top:16%;background:radial-gradient(circle at 35% 31%,#f8c4b4 0 2%,#d97780 13%,#a74d68 40%,#552b50 72%,#281b34 100%);box-shadow:inset -35px -20px 60px rgba(18,12,27,.55),0 0 100px rgba(220,100,130,.2)}.moon:after,.moon:before{content:"";position:absolute;border-radius:50%;background:rgba(69,32,59,.27);box-shadow:30px 80px 0 12px rgba(70,31,60,.23),-80px 130px 0 8px rgba(70,31,60,.2),110px 18px 0 2px rgba(70,31,60,.2)}.moon:before{height:50px;width:50px;left:31%;top:25%}.moon:after{height:28px;width:28px;right:25%;bottom:28%}.orbit{position:absolute;border:1px solid rgba(255,210,214,.25);border-radius:50%;transform:rotate(-35deg)}.orbit-one{width:90vw;height:18vw;right:-23vw;top:42%}.orbit-two{width:80vw;height:28vw;right:-13vw;top:36%;opacity:.5}.scroll-cue{position:absolute;bottom:45px;left:7vw;letter-spacing:.1em}.scroll-cue span{color:var(--rose);font-size:20px;margin-left:10px}.section{padding:145px 7vw}.story{background:#1f1924}.section-heading{max-width:850px}.section-heading.wide{max-width:1000px}.intro{max-width:460px;color:var(--muted);line-height:2;font-family:var(--sans);font-size:14px;margin:24px 0 0}.timeline{margin-top:75px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.memory{padding:29px 25px 0 0;border-right:1px solid var(--line);min-height:215px}.memory:not(:first-child){padding-left:25px}.memory:last-child{border:0}.memory time{display:block;font:11px var(--mono);color:var(--rose);margin-bottom:27px}.memory h3{font-family:var(--sans);font-size:21px;font-weight:500;margin:0 0 13px}.memory p{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.9;margin:0}.map-section{background:#291a29;overflow:hidden}.stats{padding-top:115px;padding-bottom:115px;background:#ef988e;color:#271727}.stats .eyebrow{color:#784151}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px}.stats-grid div{padding:0 20px;border-left:1px solid rgba(39,23,39,.28)}.stats-grid div:first-child{padding-left:0;border:0}.stats-grid b{display:block;font:clamp(44px,5vw,70px) var(--mono)}.stats-grid span{font-family:var(--sans);font-size:13px}.future{background:#f4e9e1;color:#2b1e2b}.future .intro{color:#705d69}.wish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:60px 0 30px}.wish{height:210px;border:1px solid rgba(60,32,56,.2);padding:23px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(130deg,rgba(255,255,255,.47),transparent)}.wish .number{font:11px var(--mono);color:#a45c6a}.wish h3{font-family:var(--sans);font-size:22px;font-weight:500;margin:0}.wish p{font-family:var(--sans);font-size:13px;color:#785e6c;margin:7px 0 0}.wish .wish-icon{font-size:25px}.outline-button{color:inherit;background:none;border:1px solid currentColor;padding:15px 20px;font:12px var(--mono);letter-spacing:.08em;cursor:pointer}.outline-button span{margin-left:14px;color:var(--rose)}.today{display:grid;grid-template-columns:1fr 1fr;padding:0;background:#312037}.today>div{min-height:430px;padding:80px 7vw}.today-card{background:#3f2637}.big-quote{display:block;color:var(--rose);font-size:80px;line-height:.6;margin-top:33px}blockquote{font-family:var(--serif);font-size:clamp(24px,2.5vw,36px);line-height:1.7;margin:0;max-width:470px}.question-card h3{font-family:var(--sans);font-size:21px;line-height:1.7;font-weight:500}.question-card textarea{width:100%;height:100px;border:0;border-bottom:1px solid var(--line);resize:none;background:transparent;color:var(--ink);font:15px var(--serif);padding:14px 0;outline:0}.question-card textarea::placeholder{color:#a3919d}.saved-note{font:12px var(--sans);color:var(--rose)}.capsule{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center;background:#1c1724}.capsule-visual{height:410px;display:grid;place-items:center;background:radial-gradient(circle,#68364f,transparent 63%)}.letter{height:190px;width:270px;background:#f5ddd0;color:#9c4c59;display:grid;place-items:center;font-size:43px;transform:rotate(-7deg);box-shadow:20px 23px 35px rgba(0,0,0,.25);position:relative}.letter:before{content:"";position:absolute;inset:10px;border:1px solid #d8998d}.letter:after{content:"未来のふたりへ";font:13px var(--sans);color:#8a6264;position:absolute;bottom:25px}footer{padding:25px 7vw;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.13em;color:var(--muted);background:#110f15}dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:560px;width:calc(100% - 35px)}dialog::backdrop{background:rgba(12,8,15,.78);backdrop-filter:blur(4px)}dialog form{background:#322036;padding:48px;position:relative}.close{position:absolute;right:19px;top:12px;background:0;border:0;color:var(--muted);font-size:26px;cursor:pointer}.close:hover{color:var(--rose)}dialog h3{font-family:var(--eva);font-size:28px;font-weight:900;margin:0 0 27px}.field{display:block;font:12px var(--mono);color:var(--muted);margin:16px 0}.field input,.field textarea{width:100%;margin-top:8px;padding:10px 0;border:0;border-bottom:1px solid var(--line);outline:0;background:transparent;color:var(--ink);font:15px var(--serif)}.field textarea{height:100px;resize:vertical}.submit{margin-top:24px;width:100%;padding:14px;border:0;background:var(--rose);color:#2b172a;font:12px var(--mono);letter-spacing:.08em;cursor:pointer}@media(max-width:760px){.site-header{padding:0 6vw}nav{display:none}.hero{min-height:680px;padding:140px 7vw}.moon{width:72vw;right:-22vw;top:28%}.counter-card{left:7vw;right:auto;top:auto;bottom:120px}.section{padding:90px 7vw}.timeline,.stats-grid,.wish-grid,.today,.capsule{grid-template-columns:1fr}.memory,.memory:not(:first-child){padding:25px 0;border-right:0;border-bottom:1px solid var(--line);min-height:auto}.stats-grid{gap:28px}.stats-grid div,.stats-grid div:first-child{padding:0;border:0}.today>div{padding:65px 7vw;min-height:350px}.capsule-visual{height:270px;order:2}.letter{transform:scale(.76) rotate(-7deg)}footer{font-size:8px}.wish{height:160px}}

.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;align-items:start;gap:6vw;margin-top:54px}
.japan-map-wrap{min-width:0;padding:26px 28px 20px;border:1px solid rgba(246,238,233,.18);background:radial-gradient(circle at 57% 42%,#43283e 0,#302034 58%,#281c2e 100%)}
.map-caption{display:flex;justify-content:space-between;gap:15px;color:var(--ink);font-size:13px;letter-spacing:.05em}
.map-caption span:last-child{color:var(--rose);white-space:nowrap}
.japan-map{width:100%;min-height:320px;display:flex;justify-content:center;align-items:center;margin:20px auto 8px}
.japan-map canvas{display:block;max-width:100%;height:auto;cursor:pointer}
.map-tip{margin:0;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}
.city-panel{border-left:1px solid var(--line);padding-left:35px}
.city-panel h3{font-size:24px;font-weight:500;margin:0 0 15px}
.city-item{padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px}
.city-item b{font-size:18px;font-weight:500}
.city-item span{font-size:11px;color:var(--muted);display:block;margin-top:5px;line-height:1.5}
.city-item i{color:var(--rose);font-style:normal;font-size:20px}
.map-empty{color:var(--muted);font-size:13px;line-height:1.8}
.field select{width:100%;margin-top:8px;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:#322036;color:var(--ink);font:15px var(--serif)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
@media(max-width:760px){.map-layout{grid-template-columns:1fr;gap:30px}.japan-map-wrap{padding:17px 14px}.japan-map{min-height:230px}.city-panel{border-left:0;border-top:1px solid var(--line);padding:28px 0 0}}
.text-button{color:var(--rose);font:12px var(--mono);letter-spacing:.1em;background:transparent;border:0;padding:22px 0;cursor:pointer}
.text-button:hover{text-decoration:underline;text-underline-offset:5px}
.header-actions{display:flex;align-items:center;justify-self:end;gap:18px}.logout-button{border:0;background:transparent;color:var(--muted);font:11px var(--sans);cursor:pointer}.logout-button:hover{color:var(--rose)}
.app-status{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:8;margin:0;padding:8px 15px;color:var(--muted);font:12px var(--sans);background:#291c2b;border-radius:4px}.app-status:empty{display:none}.app-status.is-error{color:#ffc8bd;border:1px solid #a4575e}
.item-delete{border:0;background:transparent;color:var(--muted);font:11px var(--sans);cursor:pointer;align-self:flex-end;margin-top:12px;padding:4px}.item-delete:hover{color:var(--rose);text-decoration:underline}.item-delete:disabled,.submit:disabled{opacity:.5;cursor:wait}.empty-note{color:var(--muted);font:13px var(--sans);line-height:1.8}.form-error{color:#ffc8bd;font:12px var(--sans);min-height:1em}.letter-list{margin-top:28px}.letter-entry{border-top:1px solid var(--line);padding:14px 0;display:flex;justify-content:space-between;gap:16px}.letter-entry time{color:var(--rose);font:12px var(--sans)}.letter-entry p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;font:13px var(--sans)}
/* Header music player */
.music-player{position:relative;justify-self:end}
.sound-toggle:focus-visible,.music-panel button:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.music-panel{position:absolute;top:calc(100% + 24px);right:0;width:min(320px,88vw);padding:22px;background:#291c2b;border:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.35);color:var(--ink);font-family:var(--sans)}
.music-panel[hidden]{display:none}
.music-heading{margin:0 0 19px;color:var(--rose);font-size:12px;letter-spacing:.1em}
.music-panel strong{display:block;font-size:18px;font-weight:500;overflow-wrap:anywhere}
.music-artist{display:block;margin-top:5px;color:var(--muted);font-size:12px}
.music-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0}
.music-controls button{min-width:42px;min-height:38px;padding:7px 10px;background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer}
.music-controls #musicPlay{min-width:78px;border-color:var(--rose);color:var(--rose)}
.music-controls button:disabled{opacity:.4;cursor:not-allowed}
.music-status{min-height:1em;margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.music-list{max-height:155px;overflow:auto;margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.music-list:empty{display:none}
.music-list li{border-bottom:1px solid var(--line)}
.music-list button{display:block;width:100%;padding:10px 0;text-align:left;background:transparent;border:0;color:var(--muted);font-size:12px;cursor:pointer}
.music-list button[aria-current="true"]{color:var(--rose)}
@media(max-width:760px){.music-panel{top:calc(100% + 25px);right:-1vw}}


@media(max-width:760px){
  .counter-card{width:86vw}
  .counter{gap:clamp(2px,1vw,6px)}
  .counter span{gap:2px}
  .counter b{font-size:clamp(16px,5vw,24px)}
  .counter small{font-size:9px}
}