.identity-hero {
  --shore-ink: var(--boku-scene-ink, #274657);
  --shore-ink-soft: var(--boku-scene-muted, #385565);
  --shore-glow: var(--boku-scene-accent, #76bbc7);
  --shore-line: var(--boku-scene-line, rgba(40, 79, 95, .34));
  --shore-nav: var(--boku-scene-surface, rgba(236, 247, 250, .42));
  --shore-shadow: var(--boku-scene-shadow, rgba(20, 45, 56, .13));
  --shore-serif: 'Source Han Serif SC', 'Noto Serif CJK SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --shore-sans: 'MiSans', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

/* 内容以页面为坐标，复现已确认小样的位置；不接管首页导航。 */
body:has(.shoreline-composition) {
  --shore-content-left: max(calc(7vw + 76px), calc(50% - 354px));
  --shore-content-top: calc(clamp(105px, 18vh, 170px) + 20px);
  --shore-content-scale: 1;
}
html[data-theme="light"][data-scene="sky-mirror"] body:has(.shoreline-composition) { --boku-scene-footer: #1f4052; }
html[data-theme="light"][data-scene="twilight-platform"] body:has(.shoreline-composition) { --boku-scene-footer: #03101b; }
/* Small background particles fade before entering the reading area. The sky,
   landscape, palette and original particle paths remain untouched. */
body:has(.shoreline-composition) > .confirmed-ambient :is(.sm-night-stars, .ff-fireflies, .ff-day-motes, .ff-night-stars) {
  mask-image: radial-gradient(ellipse 200px 200px at calc(var(--shore-content-left) + 110px * var(--shore-content-scale)) calc(var(--shore-content-top) + 160px * var(--shore-content-scale)), transparent 78%, #000 100%);
}
body > main { position: static; }
.identity-hero { position: absolute; inset: 0; z-index: 1; display: block; padding: 0; text-align: left; pointer-events: none; }
.shoreline-composition { position: absolute; width: 280px; height: 305px; top: var(--shore-content-top); left: var(--shore-content-left); color: var(--shore-ink); font: 400 15px/1.6 var(--shore-sans); pointer-events: auto; }
.shoreline-stars { position: absolute; inset: 0 0 auto; width: 248px; height: 76px; pointer-events: none; }
.shoreline-stars svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--shore-line); stroke-width: .85; }
.shoreline-scene { display: none; }
html[data-scene="sky-mirror"] .shoreline-scene--lake,
html[data-scene="forest-fireflies"] .shoreline-scene--forest { display: inline; }
.shoreline-stars .shoreline-trace { stroke-dasharray: 280; stroke-dashoffset: 280; animation: shore-trace-appear 2.4s .2s ease-out forwards; }
.shoreline-stars circle { fill: var(--shore-glow); stroke: none; opacity: .76; }
.shoreline-stars :is(path, circle), .shoreline-echo :is(path, circle) { transition: stroke 400ms ease, fill 400ms ease, opacity 400ms ease; }
.shoreline-water-strokes { opacity: .65; }
.shoreline-water-strokes path { animation: shore-water-glint 16s ease-in-out infinite alternate; }
.shoreline-water-strokes path:nth-child(2) { animation-delay: -6s; }
html[data-theme="dark"] .shoreline-water-strokes { opacity: .10; }
html[data-theme="dark"] .shoreline-water-strokes path { animation: none; }
html[data-theme="dark"] .shoreline-scene--lake circle { animation: shore-pinlight 10s ease-in-out infinite alternate; }
html[data-theme="dark"] .shoreline-scene--lake .star-end { animation-delay: -4s; }
html[data-theme="dark"] .shoreline-scene--lake .shoreline-pin-middle { animation-duration: 8s; animation-delay: -2s; }
/* The rope sags to the fixed hanging point. Shorten both sides equally when
   the right-hand margin is narrow, keeping the entire fade inside the viewport. */
.station-suspension {
  --station-hang-x: calc(var(--shore-content-left) + 243px * var(--shore-content-scale));
  --station-rope-width: min(calc(160px * var(--shore-content-scale)), max(0px, calc((100vw - var(--station-hang-x) - 12px) * 2)));
  display: none;
  position: absolute;
  left: calc(var(--station-hang-x) - var(--station-rope-width) / 2);
  top: calc(max(calc(var(--shore-content-top) + 80px * var(--shore-content-scale)), 220px) - 4px * var(--shore-content-scale));
  width: var(--station-rope-width);
  height: calc(12px * var(--shore-content-scale));
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .15) 80%, transparent);
  pointer-events: none;
  animation: station-rope-arrive .65s ease-out both;
}
.station-suspension svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
.station-suspension path { stroke: #667f88; stroke-width: .75; stroke-linecap: round; transition: stroke 400ms ease; }
html[data-theme="dark"] .station-suspension path { stroke: #899297; }
.shoreline-station-summer {
  --station-string: #667f88;
  --station-glass: rgba(143, 198, 210, .18);
  --station-glass-edge: #658c9a;
  --station-reflection: rgba(255, 255, 255, .70);
  --station-paper: #d5bc86;
  --station-paper-edge: rgba(143, 114, 66, .52);
  display: none;
  position: absolute;
  left: calc(var(--shore-content-left) + 224px * var(--shore-content-scale));
  top: max(calc(var(--shore-content-top) + 80px * var(--shore-content-scale)), 220px);
  width: 34px;
  height: 90px;
  transform: scale(var(--shore-content-scale));
  transform-origin: top left;
  pointer-events: none;
  animation: station-chime-arrive .65s .18s ease-out both;
}
html[data-scene="twilight-platform"] :is(.station-suspension, .shoreline-station-summer) { display: block; }
html[data-theme="dark"] .shoreline-station-summer {
  --station-string: #899297;
  --station-glass: rgba(93, 115, 133, .14);
  --station-glass-edge: #a6b6bc;
  --station-reflection: rgba(232, 182, 111, .55);
  --station-paper: #9d855f;
  --station-paper-edge: rgba(232, 182, 111, .40);
}
.shoreline-station-summer svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: .85; stroke-linecap: round; stroke-linejoin: round; }
.shoreline-station-summer :is(path, circle) { transition: stroke 400ms ease, fill 400ms ease; }
.station-hanger { stroke: var(--station-string); opacity: .55; }
.station-cord { stroke: var(--station-string); stroke-width: .65; opacity: .65; }
.station-glass { fill: var(--station-glass); stroke: var(--station-glass-edge); }
.station-glass-rim { stroke: var(--station-glass-edge); opacity: .55; stroke-width: .65; }
.station-glass-light { stroke: var(--station-reflection); stroke-width: 1.1; }
.station-clapper { fill: var(--shore-glow); opacity: .60; }
.station-paper-face { fill: var(--station-paper); fill-opacity: .48; stroke: var(--station-paper-edge); stroke-width: .65; }
.station-paper-fold { stroke: var(--station-paper-edge); stroke-width: .55; opacity: .75; }
.station-chime { transform-origin: 19px 8px; animation: station-summer-breeze 16s ease-in-out infinite; animation-play-state: paused; }
.station-paper { transform-origin: 19px 47px; animation: station-paper-follow 16s .8s ease-in-out infinite; animation-play-state: paused; }
html[data-scene="twilight-platform"] :is(.station-chime, .station-paper) { animation-play-state: running; }
.shoreline-branch { transform-origin: 13px 58px; animation: shore-branch-sway 14s ease-in-out infinite alternate; }
.shoreline-leaf { fill: color-mix(in srgb, var(--shore-glow) 12%, transparent); stroke: color-mix(in srgb, var(--shore-ink) 28%, transparent); }
.shoreline-scene--forest circle { animation: shore-leaflight 14s ease-in-out infinite alternate; }
.shoreline-scene--forest .shoreline-pin-middle { animation-delay: -5s; }
html[data-theme="dark"] .shoreline-branch { animation: none; opacity: .50; }
html[data-theme="dark"] .shoreline-leaf { fill: transparent; opacity: .35; }
html[data-theme="dark"] .shoreline-scene--forest .star-start { animation: shore-firefly-one 16s ease-in-out infinite; }
html[data-theme="dark"] .shoreline-scene--forest .shoreline-pin-middle { animation: shore-firefly-two 24s ease-in-out infinite -8s; }
html[data-theme="dark"] .shoreline-scene--forest .star-end { animation: shore-firefly-three 20s ease-in-out infinite -5s; }
.shoreline-owner { position: absolute; top: 65px; left: 9px; display: flex; align-items: center; gap: 11px; animation: shore-small-arrive .9s .15s ease-out both; }
.shoreline-owner img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid color-mix(in srgb, var(--shore-glow) 38%, var(--shore-nav)); box-shadow: 0 5px 16px var(--shore-shadow), 0 1px 3px color-mix(in srgb, var(--shore-glow) 18%, transparent); transition: border-color 400ms ease, box-shadow 400ms ease; }
.shoreline-owner div { display: flex; flex-direction: column; align-items: flex-start; }
.shoreline-owner h1 { font-family: var(--shore-serif); font-size: 19px; margin: 0; color: var(--shore-ink); font-weight: 400; line-height: 1.2; letter-spacing: .035em; }
.shoreline-owner span { margin-top: 3px; font-family: var(--shore-serif); font-size: 9px; letter-spacing: .22em; color: var(--shore-ink-soft); }
.shoreline-words { position: absolute; top: 124px; left: 8px; margin: 0; font-family: var(--shore-serif); font-size: 18px; line-height: 1.85; letter-spacing: .075em; white-space: nowrap; text-shadow: 0 2px 16px color-mix(in srgb, var(--shore-nav) 45%, transparent); animation: shore-small-arrive 1s .42s ease-out both; }
.shoreline-sign { position: absolute; top: 209px; left: 10px; display: flex; gap: 8px; align-items: center; color: var(--shore-ink-soft); font-family: var(--shore-serif); font-size: 10px; letter-spacing: .08em; white-space: nowrap; animation: shore-small-arrive 1s .65s ease-out both; }
.shoreline-sign > span:first-of-type { opacity: .52; }
.lake-links { position: absolute; top: 244px; left: 8px; display: flex; align-items: center; gap: 9px; animation: shore-small-arrive 1s .82s ease-out both; }
.lake-links a { position: relative; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--shore-line); border-radius: 50%; background: color-mix(in srgb, var(--shore-nav) 14%, transparent); color: var(--shore-ink-soft); transition: color .24s ease, border-color .24s ease, background .24s ease, transform .24s ease; }
.lake-links a:hover, .lake-links a:focus-visible { color: var(--shore-ink); border-color: var(--shore-glow); background: var(--shore-nav); transform: translateY(-2px); }
.lake-links svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.shoreline-echo { position: absolute; left: 8px; top: 293px; width: 126px; height: 8px; opacity: .60; pointer-events: none; }
.shoreline-echo svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--shore-line); stroke-width: .75; }
.shoreline-echo circle { fill: var(--shore-glow); stroke: none; opacity: .7; }
.shoreline-composition, .shoreline-owner :is(h1, span), .shoreline-sign { transition: color 400ms ease; }
.lake-links a { transition-duration: 400ms, 400ms, 400ms, 240ms; }

@keyframes shore-trace-appear { to { stroke-dashoffset: 0; } }
@keyframes shore-small-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shore-pinlight { from { opacity: .35; } to { opacity: .9; } }
@keyframes shore-water-glint { from { opacity: .45; transform: translateX(-1px); } to { opacity: .85; transform: translateX(2px); } }
@keyframes station-rope-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes station-chime-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes station-summer-breeze { 0%, 15%, 85%, 100% { transform: rotate(0); } 35% { transform: rotate(.6deg); } 50% { transform: rotate(1deg); } 68% { transform: rotate(-.65deg); } 76% { transform: rotate(.25deg); } }
@keyframes station-paper-follow { 0%, 15%, 85%, 100% { transform: rotate(0); } 35% { transform: rotate(.9deg); } 50% { transform: rotate(1.5deg); } 68% { transform: rotate(-1deg); } 76% { transform: rotate(.4deg); } }
@keyframes shore-branch-sway { from { transform: rotate(-.35deg); } to { transform: rotate(.65deg); } }
@keyframes shore-leaflight { from { opacity: .42; } to { opacity: .76; } }
@keyframes shore-firefly-one { 0%,100% { transform: translate(0,0); opacity: .5; } 45% { transform: translate(3px,-4px); opacity: .9; } 75% { transform: translate(-2px,-1px); opacity: .4; } }
@keyframes shore-firefly-two { 0%,100% { transform: translate(0,0); opacity: .8; } 35% { transform: translate(-3px,3px); opacity: .35; } 70% { transform: translate(2px,-2px); opacity: .75; } }
@keyframes shore-firefly-three { 0%,100% { transform: translate(0,0); opacity: .45; } 40% { transform: translate(-2px,-5px); opacity: .8; } 75% { transform: translate(3px,-2px); opacity: .55; } }


.lake-links a:focus-visible { outline: 2px solid var(--shore-ink); outline-offset: 4px; }
@media (max-width: 680px) {
  body:has(.shoreline-composition) { --shore-content-left: calc(6vw + 12px); --shore-content-top: calc(clamp(95px, 16vh, 145px) + 14px); }
  .shoreline-composition { width: 260px; }
  .confirmed-ambient .sm-star-altair { left: 72%; }
  .confirmed-ambient .ff-leaf-1 { left: 56%; }
}
@media (max-height: 680px) {
  body:has(.shoreline-composition) { --shore-content-top: 93px; --shore-content-scale: .85; }
  .shoreline-composition { top: 93px; transform: scale(.85); transform-origin: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shoreline-composition, .shoreline-composition * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .shoreline-stars .shoreline-trace { stroke-dashoffset: 0; }
  .shoreline-station-summer * { animation: none !important; transition-duration: .01ms !important; }
  .station-suspension, .shoreline-station-summer { animation: none !important; }
  .station-suspension path { transition-duration: .01ms !important; }
}