:root { --navy:#173650; --blue:#5d83d6; --sky:#eaf2ff; --cream:#fff8e8; --ivory:#fffdf5; --yellow:#f4b83f; --coral:#ed705b; --muted:#65717a; --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,serif; --sans:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-snap-type:y proximity; }
body { margin:0; overflow-x:hidden; color:var(--navy); background:var(--cream); font-family:var(--sans); }
button,a { font:inherit; }
button { color:inherit; }
.site-header { position:fixed; z-index:20; inset:0 0 auto; height:82px; display:flex; align-items:center; justify-content:flex-end; padding:0 clamp(22px,5vw,72px); pointer-events:none; }
.brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; pointer-events:auto; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; border:2px solid currentColor; border-radius:12px; background:var(--yellow); font:700 1.25rem Georgia,serif; transform:rotate(-3deg); }
.brand b,.brand small { display:block; }
.brand b { font:600 .84rem/1.2 var(--serif); letter-spacing:.12em; }
.brand small { margin-top:4px; color:var(--muted); font-size:.64rem; letter-spacing:.12em; }
.page-counter { padding:10px 14px; border:1px solid rgba(23,54,80,.15); border-radius:999px; background:rgba(255,253,245,.84); box-shadow:0 8px 28px rgba(23,54,80,.08); backdrop-filter:blur(10px); font:.82rem/1 var(--sans); letter-spacing:.15em; }
.page-counter b { font-size:1.1rem; }
.page-counter span { opacity:.52; }
.chapter-nav { position:fixed; z-index:20; right:clamp(14px,2.6vw,42px); top:50%; transform:translateY(-50%); display:grid; gap:15px; }
.chapter-dot { width:8px; height:8px; padding:0; border:1px solid var(--navy); border-radius:50%; background:var(--ivory); cursor:pointer; transition:.25s ease; }
.chapter-dot.active { height:28px; border-radius:6px; border-color:var(--blue); background:var(--blue); }
.chapter { position:relative; min-height:100svh; overflow:hidden; scroll-snap-align:start; }
.eyebrow { margin:0 0 22px; color:var(--blue); font-size:.76rem; font-weight:700; letter-spacing:.28em; }
.eyebrow.dark { color:var(--coral); }
.turn-page { position:absolute; z-index:4; bottom:25px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:18px; padding:10px; border:0; border-bottom:1px solid rgba(23,54,80,.42); background:transparent; color:var(--navy); font-size:.76rem; letter-spacing:.16em; cursor:pointer; transition:gap .25s ease; }
.turn-page:hover { gap:26px; }
.turn-page:focus-visible,.carousel-controls button:focus-visible,.chapter-dot:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.cover { display:grid; align-items:center; background:var(--cream); }
.cover-image { position:absolute; inset:0; background:url("./hero-sky-dog.png") center/cover no-repeat; animation:settle 1.2s ease-out both; }
.cover-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,253,245,.72),rgba(255,253,245,.48) 34%,rgba(255,253,245,.08) 62%,transparent 78%); }
.school-emblem { position:absolute; z-index:4; top:24px; left:clamp(22px,5vw,72px); width:clamp(64px,6vw,88px); height:clamp(64px,6vw,88px); object-fit:cover; border:3px solid rgba(255,255,255,.94); border-radius:50%; background:white; box-shadow:0 12px 34px rgba(23,54,80,.18); }
.cover-content { position:relative; z-index:2; width:min(1120px,calc(100% - 72px)); margin:90px auto 0; }
.cover h1 { margin:0; max-width:900px; font:600 clamp(3.8rem,7.2vw,7.4rem)/1.08 var(--serif); letter-spacing:-.055em; }
.cover h1 em { color:var(--coral); font-style:normal; }
.intro { margin:34px 0 0; padding-left:18px; border-left:3px solid var(--yellow); color:var(--muted); font:1rem/1.85 var(--serif); letter-spacing:.08em; }
.math-notation { position:absolute; z-index:2; color:rgba(23,54,80,.25); font:italic 1rem Georgia,serif; }
.notation-a { right:8vw; top:22%; }
.notation-b { right:24vw; bottom:15%; }
.gallery { display:grid; grid-template-columns:minmax(290px,.72fr) 1.28fr; align-items:center; gap:clamp(40px,7vw,110px); padding:110px clamp(54px,8vw,125px) 90px; background:var(--cream); }
.grid-paper,.letter-grid { position:absolute; inset:0; pointer-events:none; opacity:.65; background-image:linear-gradient(rgba(23,54,80,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(23,54,80,.06) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to right,#000,transparent 48%); }
.gallery-copy { position:relative; z-index:3; }
.gallery h2,.coordinates h2,.letter h2 { margin:0; font:600 clamp(2.7rem,5vw,5.2rem)/1.16 var(--serif); letter-spacing:-.045em; }
.gallery-copy>p:last-of-type { margin:28px 0 0; color:var(--muted); font:1rem/1.95 var(--serif); }
.carousel-controls { display:flex; align-items:center; gap:18px; margin-top:44px; }
.carousel-controls button { width:46px; height:46px; border:2px solid var(--navy); border-radius:13px; background:var(--ivory); cursor:pointer; transition:.2s ease; }
.carousel-controls button:hover { color:var(--ivory); background:var(--blue); transform:translateY(-2px); }
.photo-count { min-width:55px; color:var(--muted); font-size:.75rem; letter-spacing:.13em; text-align:center; }
.photo-count b { color:var(--navy); font-size:.96rem; }
.photo-carousel { position:relative; z-index:2; width:100%; aspect-ratio:4/3; overflow:hidden; border:2px solid var(--navy); border-radius:24px; background:var(--sky); box-shadow:10px 10px 0 var(--yellow),0 30px 70px rgba(25,40,38,.12); }
.photo-slide { position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transform:translateX(28px); transition:opacity .55s ease,transform .55s ease,visibility .55s; }
.photo-slide.active { opacity:1; visibility:visible; transform:translateX(0); }
.photo-slide img { width:100%; height:100%; object-fit:cover; }
.photo-slide::after { content:""; position:absolute; inset:58% 0 0; background:linear-gradient(transparent,rgba(23,54,80,.72)); }
.photo-slide figcaption { position:absolute; z-index:2; left:30px; right:30px; bottom:25px; display:grid; grid-template-columns:auto 1fr; gap:3px 14px; align-items:end; color:var(--ivory); }
.photo-slide figcaption span { grid-row:1/3; color:var(--yellow); font:1.2rem Georgia,serif; }
.photo-slide figcaption b { font:600 1.25rem var(--serif); letter-spacing:.1em; }
.photo-slide figcaption small { color:rgba(255,253,245,.75); font:.78rem var(--serif); letter-spacing:.08em; }
.coordinates { display:grid; place-items:center; padding:110px clamp(54px,8vw,125px) 90px; color:var(--navy); background:var(--sky); }
.coordinates::before { content:""; position:absolute; inset:0; opacity:.72; background-image:linear-gradient(rgba(23,54,80,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(23,54,80,.055) 1px,transparent 1px); background-size:42px 42px; }
.axis { position:absolute; background:rgba(23,54,80,.15); }
.axis-x { left:6vw; right:6vw; top:58%; height:1px; }
.axis-y { top:11%; bottom:10%; left:18%; width:1px; }
.coordinate-content { position:relative; z-index:2; width:min(1100px,100%); }
.coordinates h2 { max-width:900px; }
.coordinate-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); align-items:center; gap:clamp(34px,6vw,84px); }
.curve-card { position:relative; width:100%; aspect-ratio:11/6; padding:18px; border:2px solid rgba(23,54,80,.7); border-radius:20px; background:rgba(255,253,245,.72); box-shadow:7px 7px 0 rgba(93,131,214,.24); }
.curve-card::before { content:""; position:absolute; inset:18px; opacity:.42; background-image:linear-gradient(rgba(23,54,80,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(23,54,80,.12) 1px,transparent 1px); background-size:24px 24px; }
.curve-card svg { position:relative; width:100%; height:100%; overflow:visible; }
.curve-card line { stroke:rgba(23,54,80,.58); stroke-width:2; }
.curve-card marker path { fill:var(--coral); }
.growth-line { fill:none; stroke:var(--coral); stroke-width:4; stroke-linecap:round; stroke-dasharray:650; stroke-dashoffset:650; animation:draw 3.2s ease-in-out infinite alternate; }
.origin-point { fill:var(--yellow); stroke:var(--navy); stroke-width:3; transform-origin:42px 198px; animation:pulse 1.8s ease-in-out infinite; }
.curve-label { position:absolute; z-index:2; color:var(--muted); font:italic .72rem Georgia,serif; }
.label-y { left:22px; top:8px; }.label-x { right:17px; bottom:7px; }.label-o { left:47px; bottom:15px; }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(42px,6vw,68px); border:2px solid var(--navy); border-radius:20px; overflow:hidden; background:var(--navy); box-shadow:9px 9px 0 rgba(93,131,214,.25); }
.value-grid article { padding:clamp(24px,3vw,40px); background:rgba(255,253,245,.96); }
.value-grid span { color:var(--coral); font:.76rem Georgia,serif; }
.value-grid h3 { margin:30px 0 14px; color:var(--blue); font:600 2rem var(--serif); }
.value-grid p { margin:0; color:var(--muted); font:.94rem/1.85 var(--serif); }
.formula-note { position:absolute; right:7vw; top:18%; margin:0; color:rgba(23,54,80,.23); font:italic 1rem Georgia,serif; letter-spacing:.08em; }
.letter { display:grid; grid-template-columns:1fr auto; align-items:center; gap:6vw; padding:110px clamp(54px,9vw,150px) 86px; background:#fff0c9; }
.letter-grid { opacity:.5; mask-image:linear-gradient(to left,#000,transparent 74%); }
.letter-card { position:relative; z-index:2; width:min(920px,100%); padding:clamp(34px,5vw,68px); border:2px solid var(--navy); border-radius:24px; background:rgba(255,253,245,.96); box-shadow:10px 10px 0 var(--blue),0 28px 80px rgba(42,42,31,.1); }
.letter-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.letter-card h2 { margin-bottom:34px; font-size:clamp(2rem,3.7vw,4rem); }
.seal { display:grid; place-items:center; flex:0 0 auto; width:58px; height:58px; color:var(--coral); border:2px solid var(--coral); border-radius:10px; font:700 .76rem/1.35 var(--serif); letter-spacing:.12em; transform:rotate(3deg); }
.letter-body { columns:2; column-gap:clamp(28px,4vw,55px); column-rule:1px solid rgba(23,54,80,.15); }
.letter-body p { margin:0 0 1em; color:#3e4e58; font:1rem/2.05 var(--serif); text-align:justify; }
.signature { margin-top:28px; display:flex; justify-content:flex-end; gap:16px; color:var(--muted); font:.78rem var(--serif); letter-spacing:.08em; }
.signature b { color:var(--coral); }
.final-wish { position:relative; z-index:2; color:rgba(23,54,80,.14); font:800 clamp(3.5rem,7vw,7.2rem)/.95 var(--sans); letter-spacing:-.06em; writing-mode:vertical-rl; transform:rotate(180deg); }
.restart { left:auto; right:clamp(54px,9vw,150px); transform:none; }
@keyframes settle { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes pulse { 50% { transform:scale(1.55); opacity:.72; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:800px) {
  html { scroll-snap-type:none; }
  .site-header { height:72px; padding:0 20px; }
  .brand-mark { width:34px; height:34px; }
  .brand b { font-size:.75rem; }
  .brand small { max-width:190px; font-size:.56rem; }
  .chapter-nav { right:12px; }
  .cover-content { width:calc(100% - 50px); margin-top:48px; }
  .cover h1 { font-size:clamp(3rem,14vw,5rem); }
  .cover-image { background-position:84% center; }
  .cover-shade { background:linear-gradient(90deg,rgba(255,253,245,.88),rgba(255,253,245,.53) 68%,rgba(255,253,245,.08)); }
  .school-emblem { top:18px; left:18px; width:62px; height:62px; }
  .gallery { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:30px; padding:94px 42px 82px 22px; }
  .gallery h2,.coordinates h2 { font-size:clamp(2.4rem,10vw,3.8rem); }
  .gallery-copy>p:last-of-type { display:none; }
  .carousel-controls { margin-top:22px; }
  .photo-carousel { aspect-ratio:5/4; border-radius:16px; box-shadow:6px 6px 0 var(--yellow); }
  .photo-slide figcaption { left:18px; right:18px; bottom:18px; }
  .coordinates { padding:92px 42px 88px 22px; }
  .axis-y { left:12%; }
  .coordinate-hero { grid-template-columns:1fr; gap:26px; }
  .curve-card { justify-self:end; width:min(88%,390px); border-radius:14px; }
  .value-grid { grid-template-columns:1fr; margin-top:42px; border-radius:14px; }
  .value-grid article { display:grid; grid-template-columns:32px 58px 1fr; gap:9px; align-items:center; padding:17px 20px; }
  .value-grid h3 { margin:0; font-size:1.35rem; }
  .value-grid p { font-size:.84rem; line-height:1.62; }
  .formula-note { top:12%; right:11%; }
  .letter { display:block; padding:90px 42px 82px 18px; }
  .letter-card { padding:28px 22px; border-radius:16px; box-shadow:6px 6px 0 var(--blue); }
  .letter-card h2 { font-size:1.85rem; }
  .letter-body { columns:1; }
  .letter-body p { font-size:.91rem; line-height:1.88; }
  .final-wish { display:none; }
  .signature { flex-direction:column; align-items:flex-end; }
  .restart { right:42px; }
}