/* Preview D (20261014d) — layered on top of site-20261008 styles. */
@font-face{font-family:"D Display";src:url(fonts/orbitron-latin.woff2?v=714493c483) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"D Mono";src:url(fonts/geistmono-latin.woff2?v=e4f01e06bd) format("woff2");font-weight:100 900;font-display:swap}
:root{--d-teal:#5ff2d0;--d-lime:#d8f58a;--d-glow:0 0 18px rgba(95,242,208,.35);--d-mono:"D Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--d-display:"D Display","D Mono",system-ui,sans-serif}
.eyebrow,.field-number,.field-tab-number,.field-row-index,.mini-label,.field-hero-top,.registration-coordinate,.registration-name,.orbit-photo-heading,.orbit-photo-caption{font-family:var(--d-mono);letter-spacing:.14em}
.field-number,.eyebrow{color:var(--d-teal)}
.page-heading h1,.field-atlas-head h2,.field-work-heading h2,.field-notes h2,.section-heading h1{font-family:var(--d-display),"PingFang SC","Noto Sans SC",sans-serif;letter-spacing:.02em}
.brand-mark{font-family:var(--d-display);box-shadow:var(--d-glow)}
/* global film grain + vignette */
body.preview-page::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---------- 1. scanline/grid page transition ---------- */
.d-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;background:
 repeating-linear-gradient(0deg,rgba(95,242,208,.07) 0 1px,transparent 1px 4px),
 linear-gradient(90deg,rgba(95,242,208,.12) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(rgba(95,242,208,.12) 1px,transparent 1px) 0 0/48px 48px,#060a0b;
 clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.d-wipe::after{content:"";position:absolute;left:0;right:0;height:2px;top:var(--d-scan,0%);background:var(--d-teal);box-shadow:0 0 24px 4px rgba(95,242,208,.6)}
.d-wipe.is-open{clip-path:inset(0 0 100% 0)}
.d-wipe.is-closing{clip-path:inset(0 0 0 0)}
.d-wipe-label{position:absolute;left:24px;bottom:22px;font:12px/1 var(--d-mono);letter-spacing:.2em;color:var(--d-teal)}
/* ---------- 1. subpage signature + HUD ---------- */
.d-sig{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(120% 140% at 80% 0%,rgba(95,242,208,.10),transparent 60%),#070b0c;min-height:230px}
.d-sig::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(95,242,208,.06) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(rgba(95,242,208,.06) 1px,transparent 1px) 0 0/56px 56px;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.d-sig .wrap{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-block:34px 22px}
.d-sig .ink-name{margin:0;width:min(440px,70vw)}
.d-sig .ink-art{display:block;position:relative}
.d-sig .ink-art img,.d-sig .ink-art svg{width:100%;height:auto;display:block}
.d-sig .ink-art.is-writing .ink-static{opacity:0}
.d-sig .ink-art svg:not([hidden])+.ink-static,.d-sig .ink-art svg:not([hidden])~.ink-static{opacity:0}
.d-sig .ink-art svg{position:absolute;inset:0}
.d-sig .ink-replay{position:absolute;right:0;top:12px;opacity:.7}
.d-hud{font:11px/1.6 var(--d-mono);letter-spacing:.16em;color:var(--muted);text-align:right;white-space:nowrap}
.d-hud b{color:var(--d-teal);font-weight:500}
.d-cross{position:absolute;width:64px;height:64px;right:9%;top:28px;pointer-events:none}
.d-cross::before,.d-cross::after{content:"";position:absolute;background:var(--d-teal);box-shadow:var(--d-glow)}
.d-cross::before{left:50%;top:0;bottom:0;width:1px}.d-cross::after{top:50%;left:0;right:0;height:1px}
.d-cross i{position:absolute;inset:18px;border:1px solid var(--d-teal);border-radius:50%;animation:d-pulse 2.6s ease-in-out infinite}
.d-hudline{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--d-teal),transparent);animation:d-sweep 4s linear infinite;opacity:.6}
@keyframes d-pulse{50%{transform:scale(1.35);opacity:.3}}
@keyframes d-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* ---------- 3. 沿途 dark + photo treatment ---------- */
.field-photo-strip,.field-photo-strip .field-photo-intro{background:#070b0c!important;color:var(--text)!important;border-color:var(--line)!important}
.field-photo-strip h2 img.field-chinese-ink{filter:invert(1) brightness(1.6) sepia(.4) hue-rotate(110deg) saturate(1.8) drop-shadow(0 0 12px rgba(95,242,208,.35))}
.field-photo-strip .field-arrow,.field-photo-strip span{color:var(--text)}
.d-photo,.field-photo,.photo-link,.about-story>img,.ai-feature>img{position:relative;overflow:hidden;isolation:isolate}
.field-photo img,.photo-link img,.about-story>img,.ai-feature>img,.d-photo img{filter:saturate(.82) contrast(1.08) brightness(.9);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s}
.field-photo:hover img,.photo-link:hover img{transform:scale(1.05);filter:saturate(1) contrast(1.05)}
.field-photo::after,.photo-link::after,.d-photo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
 background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.65) 100%),linear-gradient(180deg,rgba(10,40,40,.15),rgba(6,30,32,.45));mix-blend-mode:normal}
.field-photo>span,.photo-link>span{z-index:2;font-family:var(--d-mono)}
/* device frames for app screenshots */
.field-memory-image,.product-image{background:radial-gradient(80% 80% at 50% 50%,rgba(95,242,208,.12),transparent 70%),#060a0b!important;border:1px solid var(--line)!important}
.field-memory-image img,.product-image img{border:10px solid #15191b;border-radius:22px;box-shadow:0 0 0 1px #2c3638,0 0 40px rgba(95,242,208,.28),0 30px 60px rgba(0,0,0,.6);filter:brightness(.88) contrast(1.05);background:#111}
.product-dialog img[data-product-image]{border:10px solid #15191b;border-radius:22px;box-shadow:0 0 40px rgba(95,242,208,.3)}
/* ---------- 4. homepage voyage ---------- */
.d-voyage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#04080a;border-block:1px solid var(--line)}
.d-voyage canvas{position:absolute;inset:0;width:100%;height:100%}
.d-voyage-head{position:absolute;left:0;right:0;top:84px;z-index:3}
.d-voyage-head h2{font-family:var(--d-display);font-size:clamp(24px,3.4vw,44px);margin-top:10px}
.d-voyage-card{position:absolute;z-index:3;right:6vw;top:50%;width:min(420px,40vw);transform:translateY(-50%);opacity:0;border:1px solid rgba(95,242,208,.35);background:rgba(6,12,13,.72);backdrop-filter:blur(6px);box-shadow:0 0 40px rgba(95,242,208,.14)}
.d-voyage-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.d-voyage-card .d-photo{display:block}
.d-voyage-card div.meta{display:flex;justify-content:space-between;padding:12px 14px;font:12px/1.4 var(--d-mono);letter-spacing:.12em}
.d-voyage-card div.meta b{color:var(--d-teal);font-weight:500}
.d-voyage-progress{position:absolute;left:0;right:0;bottom:28px;z-index:3;display:flex;gap:8px;justify-content:center;font:11px var(--d-mono);letter-spacing:.14em;color:var(--muted)}
.d-voyage-progress span.on{color:var(--d-teal)}
@media (max-width:720px){.d-voyage-card div.meta{flex-direction:column;gap:4px;font-size:11px}.d-voyage-card{left:5vw;right:5vw;width:auto;top:auto;bottom:70px;transform:none}.d-voyage-head{top:70px}}
/* ---------- 5. life map arcs ---------- */
.d-arcs path.d-arc{fill:none;stroke:var(--d-teal);stroke-width:1.6;stroke-linecap:round;filter:url(#d-glow);opacity:.95}
.d-arcs path.d-arc.drive{stroke:var(--d-lime);stroke-dasharray:4 5}
.d-arcs circle.d-node{fill:var(--d-lime);filter:url(#d-glow)}
.d-arcs circle.d-comet{fill:#fff;filter:url(#d-glow)}
.d-scrub{display:flex;align-items:center;gap:14px;margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line);background:#070c0d;font:12px var(--d-mono);letter-spacing:.1em}
.d-scrub input[type=range]{flex:1;accent-color:var(--d-teal);min-width:0}
.d-scrub button{all:unset;cursor:pointer;color:#04110e;background:var(--d-teal);padding:6px 12px;border-radius:2px;box-shadow:var(--d-glow);white-space:nowrap}
.d-scrub output{min-width:12ch;color:var(--d-teal);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.d-scrub{flex-wrap:wrap}.d-scrub output{min-width:0;flex-basis:100%;text-align:left}}
/* ---------- 6. archive terminal ---------- */
.case-list{display:grid;gap:14px;border:0}
.case-row{position:relative;border:1px solid var(--line)!important;background:linear-gradient(180deg,#0a1112,#070b0c);padding:22px 24px!important;font-family:var(--d-mono);overflow:hidden}
.case-row::before{content:"> ARCHIVE://" attr(data-d-id);position:absolute;left:24px;top:8px;font:10px var(--d-mono);letter-spacing:.18em;color:rgba(95,242,208,.55)}
.case-row:hover{border-color:rgba(95,242,208,.6)!important;box-shadow:0 0 30px rgba(95,242,208,.12) inset}
.case-row h2,.case-row h3{font-family:inherit}
.case-row h2::after,.case-row h3::after{content:"▌";color:var(--d-teal);margin-left:6px;animation:d-blink 1s steps(1) infinite;opacity:0}
.case-row:hover h2::after,.case-row:hover h3::after{opacity:1}
.d-typed::after{content:"▌";color:var(--d-teal);margin-left:4px;animation:d-blink 1s steps(1) infinite}
@keyframes d-blink{50%{opacity:0}}
@media (max-width:700px){.case-row{grid-template-columns:1fr!important;gap:8px!important}}
/* ---------- 2. weight page ---------- */
.d-weight{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.d-chart{position:relative;border:1px solid var(--line);background:radial-gradient(100% 120% at 0% 0%,rgba(95,242,208,.07),transparent 60%),#060a0b;padding:18px}
.d-chart svg{display:block;width:100%;height:auto;overflow:visible}
.d-chart .grid line{stroke:#1d2a2c}.d-chart text{fill:var(--muted);font:11px var(--d-mono)}
.d-chart .line{fill:none;stroke:var(--d-teal);stroke-width:2.5;filter:url(#wglow)}
.d-chart .area{fill:url(#warea)}
.d-chart .pt circle{fill:var(--d-lime);filter:url(#wglow)}.d-chart .pt text{fill:var(--text);font-size:12px}
.d-chart .goal{stroke:var(--coral);stroke-dasharray:5 6}
.d-chart figcaption{margin-top:10px;font-size:12px;color:var(--muted)}
.d-stats{display:grid;gap:10px}
.d-stats div{border:1px solid var(--line);background:#070c0d;padding:14px 16px}
.d-stats span{display:block;font:11px var(--d-mono);letter-spacing:.14em;color:var(--muted)}
.d-stats strong{display:block;margin-top:6px;font:600 26px var(--d-display);color:var(--d-lime);text-shadow:0 0 14px rgba(216,245,138,.3)}
.d-weight-orig{margin-top:24px}.d-weight-orig summary{cursor:pointer;color:var(--muted);font:12px var(--d-mono)}
.d-weight-orig img{margin-top:12px;max-width:100%;filter:invert(.92) hue-rotate(180deg) contrast(.9);border:1px solid var(--line)}
@media (max-width:860px){.d-weight{grid-template-columns:1fr}.d-stats{grid-template-columns:1fr 1fr}}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){.d-wipe{display:none}.d-cross i,.d-hudline,.d-typed::after,.case-row h2::after{animation:none}.field-photo img,.photo-link img{transition:none}}
/* fixes r2 */
.field-memory-image img{width:auto!important;max-width:100%;margin-inline:auto;display:block;filter:brightness(.78) contrast(1.08) saturate(.9)!important}
.field-photo::after,.photo-link::after,.d-photo::after{background:radial-gradient(110% 85% at 50% 45%,transparent 35%,rgba(0,0,0,.78) 100%),linear-gradient(180deg,rgba(10,50,48,.22),rgba(4,24,26,.5))}
@media (max-width:720px){.d-sig{min-height:0}.d-sig .wrap{flex-direction:column;align-items:flex-start;gap:14px;padding-block:26px 18px}.d-sig .ink-name{width:min(300px,78vw)}.d-hud{text-align:left;font-size:10px}.d-cross{right:18px;top:auto;bottom:22px;width:44px;height:44px}.d-cross i{inset:12px}.d-sig .ink-replay{top:16px;right:16px}}

/* r3: let drags reach the voyage globe canvas */
.d-voyage-head,.d-voyage-progress{pointer-events:none}
.d-voyage canvas{z-index:1;touch-action:pan-y;cursor:grab}

/* r4: voyage dot photo dialog */
.d-photo-dialog{padding:0;border:1px solid rgba(95,242,208,.45);background:#060b0c;color:var(--text);max-width:min(920px,94vw);width:100%;box-shadow:0 0 60px rgba(95,242,208,.2)}
.d-photo-dialog::backdrop{background:rgba(2,6,7,.82);backdrop-filter:blur(4px)}
.d-photo-dialog figure{margin:0}.d-photo-dialog img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#000}
.d-photo-dialog figcaption{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:14px 18px;font:12px var(--d-mono);letter-spacing:.1em}
.d-photo-dialog figcaption b{color:var(--d-teal);font-weight:500}.d-photo-dialog figcaption a{margin-left:auto}
.d-photo-dialog>button{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff}

/* ===== r5 · 2026-10-18 · iteration 1 「字与帧」 ===== */
/* 1. display type scale: big titles, 11px mono metadata (8–10× contrast) */
.eyebrow,.field-number{font-size:11px!important;font-weight:500;letter-spacing:.22em}
.page-heading{padding-block:clamp(44px,6.4vw,96px) clamp(18px,2.6vw,36px)}
.page-heading h1{font-size:clamp(56px,7.2vw,120px)!important;line-height:1.04;font-weight:700;letter-spacing:.005em;margin-top:clamp(14px,1.6vw,24px);text-wrap:balance;max-width:16em}
.page-heading>p:not(.eyebrow){font-size:clamp(15px,1.15vw,18px);line-height:1.7;max-width:38em;color:var(--muted);margin-top:clamp(16px,1.8vw,26px)}
.d-voyage-head h2{font-size:clamp(40px,5.6vw,88px)!important;line-height:1.04;font-weight:700;margin-top:14px;max-width:12em;text-wrap:balance;will-change:opacity,transform}
.field-work-heading h2,.field-notes h2{font-family:var(--d-display),"PingFang SC","Noto Sans SC",sans-serif;font-size:clamp(34px,4vw,64px)!important;line-height:1.08;font-weight:700}
.case-row h2,.case-row h3{font-size:clamp(17px,1.4vw,22px)}
/* 5. inner pages: the page title is the hero; the signature band becomes a compact masthead */
.d-sig{min-height:0}
.d-sig .wrap{align-items:center;padding-block:20px 16px}
.d-sig .ink-name{width:min(260px,46vw)}
.d-cross{width:44px;height:44px;top:50%;left:50%;right:auto;margin:-22px 0 0 -22px;opacity:.75}.d-cross i{inset:12px}
.d-sig .wrap{justify-content:flex-start}.d-sig .ink-replay{position:static;order:1;align-self:center;opacity:.6}.d-sig .d-hud{order:2;margin-left:auto}
.d-hud{font-size:10.5px;line-height:1.7}
.d-hud [data-d-dist]{color:var(--d-lime)}
/* 2. voyage photo: double-buffered layers, decode-then-fade, slow push-in */
.d-voyage-card .d-photo{position:relative;aspect-ratio:4/3;background:#071012}
.d-voyage-card .d-photo img.d-layer{position:absolute;inset:0;z-index:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:0;transform:scale(1.0);
 filter:saturate(.82) contrast(1.08) brightness(calc(.92 - var(--d-fly,0) * .22));transition:opacity var(--t-fast) linear .75s,transform 0s linear 1s,filter var(--t-med)}
.d-voyage-card .d-photo img.d-layer.is-on{z-index:1;opacity:1;transform:scale(1.07);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform 7s cubic-bezier(.2,.6,.25,1),filter var(--t-med)}
.d-voyage-card div.meta>*{transition:opacity var(--t-med)}
.d-voyage-card.is-swap div.meta>*{animation:d-flick .5s steps(2) 1}
@keyframes d-flick{0%{opacity:.15}40%{opacity:.9}60%{opacity:.35}100%{opacity:1}}
/* 7. live HUD on the voyage */
.d-voyage-hud{position:absolute;z-index:3;top:96px;right:6vw;font:10.5px/1.75 var(--d-mono);letter-spacing:.16em;color:var(--muted);text-align:right;pointer-events:none;white-space:nowrap}
.d-voyage-hud b{color:var(--d-teal);font-weight:500}.d-voyage-hud [data-x]{color:var(--d-lime)}
.d-voyage-hud b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--d-teal);margin-right:8px;vertical-align:1px;box-shadow:var(--d-glow);animation:d-pulse 1.6s ease-in-out infinite}
@media (max-width:720px){.d-voyage-hud{top:96px;left:5vw;right:auto;text-align:left;opacity:calc((.3 - var(--d-head,1)) / .3)}}
/* palette cleanup: neutral ink logo, desaturated app icons that wake on hover */
.field-photo-strip h2 img.field-chinese-ink{filter:invert(1) grayscale(1) brightness(1.55) drop-shadow(0 0 10px rgba(95,242,208,.22))!important}
.field-app-row>img,.product-title>img{filter:grayscale(.8) brightness(.82) contrast(1.08);box-shadow:0 0 0 1px var(--line);transition:filter var(--t-med)}
.field-app-row:hover>img,.product-card:hover .product-title>img{filter:none}
@media (prefers-reduced-motion:reduce){.d-voyage-card .d-photo img.d-layer,.d-voyage-card .d-photo img.d-layer.is-on{transform:none;transition:opacity var(--t-fast)}.d-voyage-hud b::before{animation:none}}
@media (max-width:720px){.d-sig .wrap{padding-block:18px 14px;gap:10px}.d-sig .ink-name{width:min(200px,56vw)}.d-sig .d-hud{margin-left:0}.d-sig .ink-replay{position:absolute;top:16px;right:16px}.d-cross{left:auto;right:18px;top:auto;bottom:22px;margin:0}}
.d-voyage-card .d-photo::before{content:"RECEIVING SIGNAL ▌";position:absolute;z-index:2;left:14px;bottom:12px;font:10.5px var(--d-mono);letter-spacing:.2em;color:var(--d-teal);opacity:0;transition:opacity var(--t-fast)}
.d-voyage-card.is-loading .d-photo::before{opacity:1;animation:d-blink 1s steps(1) infinite}
.d-voyage-card.is-loading .d-photo img.d-layer.is-on{filter:saturate(.3) brightness(.5)}
.page-heading h1 .d-fit{display:inline-block;white-space:nowrap}
.page-heading h1 .d-ch{visibility:hidden}.page-heading h1 .d-ch.on{visibility:visible}
.page-heading h1 .d-caret{color:var(--d-teal);margin-left:.06em;animation:d-blink 1s steps(1) infinite;font-weight:400}
.page-heading h1.d-typed::after{content:none}
@media (prefers-reduced-motion:reduce){.page-heading h1 .d-ch{visibility:visible}.page-heading h1 .d-caret{animation:none}}
.section-heading h1{font-size:clamp(56px,6.2vw,104px)!important;line-height:1.04;font-weight:700;letter-spacing:.005em;margin-top:clamp(12px,1.4vw,20px);text-wrap:balance}
.section-heading h1+p{font-size:clamp(15px,1.15vw,18px);color:var(--muted);margin-top:14px}
.section-heading h1 .d-fit{display:inline-block;white-space:nowrap}

/* ===== r6 · 2026-10-18 · iteration 2 「手感」 ===== */
/* 3. full-viewport hero */
.field-hero{height:calc(100svh - var(--d-nav,57px))!important;max-height:none!important;min-height:520px!important}
@media (max-width:720px){.field-hero{min-height:480px!important}}
.field-hero::after{content:"SCROLL ↓  00 / FLIGHT LOG";position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font:10px var(--d-mono);letter-spacing:.24em;color:rgba(245,246,244,.6);white-space:nowrap;animation:d-cue 2.4s ease-in-out infinite;pointer-events:none}
@media (max-width:720px){.field-hero::after{display:none}}
@keyframes d-cue{50%{transform:translate(-50%,5px);opacity:.35}}
/* 3. intro overlay */
html.d-intro::before{content:"";position:fixed;inset:0;z-index:10001;background:#04080a;animation:d-safe 0s 3.2s forwards}
@keyframes d-safe{to{opacity:0;visibility:hidden}}
.d-intro-ov{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;color:var(--text);background:
 repeating-linear-gradient(0deg,rgba(95,242,208,.05) 0 1px,transparent 1px 4px),
 linear-gradient(90deg,rgba(95,242,208,.08) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(rgba(95,242,208,.08) 1px,transparent 1px) 0 0/56px 56px,#04080a;
 clip-path:inset(0 0 0 0);transition:clip-path var(--t-med) cubic-bezier(.7,0,.2,1)}
.d-intro-ov.is-out{clip-path:inset(0 0 100% 0)}
.d-intro-ov::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--d-teal);box-shadow:0 0 24px 4px rgba(95,242,208,.6);opacity:0}
.d-intro-ov.is-out::after{opacity:1}
.d-intro-in{display:grid;gap:18px;justify-items:center;text-align:center;padding:24px}
.d-intro-k{font:11px var(--d-mono);letter-spacing:.24em;color:var(--muted)}
.d-intro-ov.is-locked [data-i-s]{color:var(--d-lime)}
.d-intro-in strong{font:500 clamp(26px,5.4vw,72px)/1 var(--d-mono);letter-spacing:.04em;color:var(--d-teal);text-shadow:0 0 24px rgba(95,242,208,.35);font-variant-numeric:tabular-nums;white-space:nowrap}
.d-intro-bar{display:block;width:min(420px,70vw);height:1px;background:rgba(95,242,208,.2)}
.d-intro-bar i{display:block;height:100%;width:calc(var(--d-i,0) * 100%);background:var(--d-teal);box-shadow:var(--d-glow)}
.d-intro-skip{all:unset;position:absolute;right:24px;bottom:22px;font:10px var(--d-mono);letter-spacing:.2em;color:var(--muted);cursor:pointer}
/* 6. transition: content-only wipe under the persistent nav, coordinate readout */
.d-wipe{top:var(--d-nav,0px)!important}
html.d-arriving::after{content:attr(data-d-to);white-space:pre;display:grid;place-items:center;text-align:center;font:500 clamp(24px,4.4vw,60px)/1.5 var(--d-mono);letter-spacing:.03em;color:var(--text);font-variant-numeric:tabular-nums;position:fixed;left:0;right:0;bottom:0;top:var(--d-nav,57px);z-index:9998;background:repeating-linear-gradient(0deg,rgba(95,242,208,.07) 0 1px,transparent 1px 4px),#060a0b;animation:d-safe 0s 2.4s forwards}
.d-wipe-hud{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:10px;justify-items:center;text-align:center;opacity:0;transition:opacity var(--t-fast)}
.d-wipe.is-closing .d-wipe-hud,.d-wipe.is-arrive .d-wipe-hud{opacity:1}
.d-wipe-hud b{font:500 11px var(--d-mono);letter-spacing:.26em;color:var(--d-teal)}
.d-wipe-hud span{font:11px var(--d-mono);letter-spacing:.2em;color:var(--muted)}
.d-wipe-hud [data-w-d]{color:var(--d-lime)}
.d-wipe-hud strong{font:500 clamp(24px,4.4vw,60px)/1 var(--d-mono);letter-spacing:.03em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.d-wipe.is-arrive{clip-path:inset(0 0 0 0)}
.d-hud,.d-voyage-hud{font-variant-numeric:tabular-nums}
/* 4. HUD crosshair cursor */
html.d-has-cursor,html.d-has-cursor *{cursor:none!important}
html.d-has-cursor input,html.d-has-cursor textarea,html.d-has-cursor select,html.d-has-cursor [contenteditable="true"]{cursor:auto!important}
html.d-has-cursor input[type=range]{cursor:none!important}
.d-cursor{position:fixed;left:0;top:0;z-index:10003;pointer-events:none;opacity:0;transition:opacity var(--t-fast);mix-blend-mode:normal}
.d-cursor.is-on{opacity:1}.d-cursor[data-mode=native]{opacity:0}
.d-cur-x{position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:linear-gradient(var(--d-teal),var(--d-teal)) 50% 0/1px 6px no-repeat,linear-gradient(var(--d-teal),var(--d-teal)) 50% 100%/1px 6px no-repeat,linear-gradient(90deg,var(--d-teal),var(--d-teal)) 0 50%/6px 1px no-repeat,linear-gradient(90deg,var(--d-teal),var(--d-teal)) 100% 50%/6px 1px no-repeat;filter:drop-shadow(0 0 4px rgba(95,242,208,.7))}
.d-cur-x::after{content:"";position:absolute;left:8px;top:8px;width:2px;height:2px;background:var(--d-lime)}
.d-cur-ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border:1px solid rgba(95,242,208,.55);border-radius:50%;transition:width var(--t-fast),height var(--t-fast),left var(--t-fast),top var(--t-fast),border-color var(--t-fast),border-radius var(--t-fast)}
.d-cursor[data-mode=open] .d-cur-ring,.d-cursor[data-mode=coord] .d-cur-ring{left:-24px;top:-24px;width:48px;height:48px;border-color:var(--d-lime)}
.d-cursor[data-mode=drag] .d-cur-ring{left:-28px;top:-14px;width:56px;height:28px;border-radius:14px}
.d-cursor.is-down .d-cur-ring{left:-12px;top:-12px;width:24px;height:24px}
.d-cur-label{position:absolute;left:22px;top:14px;font:10px/1 var(--d-mono);letter-spacing:.16em;color:#04110e;background:var(--d-teal);padding:5px 7px;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity var(--t-fast),transform var(--t-fast)}
.d-cursor[data-mode=coord] .d-cur-label{background:var(--d-lime)}
.d-cur-label:not(:empty){opacity:1;transform:none}
/* 8. Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.d-nobr{white-space:nowrap}
@media (prefers-reduced-motion:reduce){html.d-intro::before,html.d-arriving::after,.field-hero::after{display:none;animation:none}.d-cursor{display:none}}

/* ===== r7 · 2026-10-18 · iteration 3 「每页一个舱室」 ===== */
@font-face{font-family:"D Han";src:url(fonts/shserif-heavy-sub-r12.woff2?v=ad09b1642d) format("woff2");font-weight:900;font-display:swap}
:root{--d-han:"D Han","Source Han Serif SC","Noto Serif SC","Songti SC",serif}
.page-heading h1,.field-atlas-head h2,.field-work-heading h2,.field-notes h2,.section-heading h1,.cabin-sticky h2,.cabin-mast h1,.d-voyage-head h2{font-family:var(--d-han),var(--d-display),sans-serif;font-weight:900}
.field-work-heading h2,.field-notes h2{font-family:var(--d-han),var(--d-display),sans-serif}


/* ----- cabin shared ----- */
.cabin-mast .eyebrow::after{content:"  ·  CABIN";letter-spacing:.2em;opacity:.55}
.cabin-home .cabin-mast .eyebrow::after{content:none}
.cabin-ph[hidden],.cabin-need[hidden]{display:none!important}
.cabin-deck{margin-top:18px;font:12px var(--d-mono);letter-spacing:.16em;color:var(--d-teal)}

/* ABOUT — editorial bleed + sticky */
.cabin-about .cabin-split{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(28px,4vw,64px);align-items:start;padding-block:12px 56px}
.cabin-about .cabin-bleed{margin:0;position:relative}
.cabin-about .cabin-bleed img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.82) contrast(1.08) brightness(.9)}
.cabin-about .cabin-bleed figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font:11px var(--d-mono);letter-spacing:.14em;color:var(--muted)}
.cabin-about .cabin-bleed figcaption span:first-child{color:var(--d-teal)}
.cabin-about .cabin-sticky{position:sticky;top:calc(var(--d-nav,57px) + 24px)}
.cabin-about .cabin-sticky h2{font-size:clamp(28px,3.2vw,44px);line-height:1.15;margin:14px 0 22px}
.cabin-about .cabin-rail{padding-block:8px 72px}
.cabin-about .cabin-stops{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.cabin-about .cabin-stops li{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.cabin-about .cabin-stops b{font:500 22px var(--d-mono);color:var(--d-lime);letter-spacing:.08em}
.cabin-about .cabin-stops strong{display:block;font-size:18px}
.cabin-about .cabin-stops em{display:block;margin-top:4px;font:11px var(--d-mono);letter-spacing:.16em;color:var(--muted);font-style:normal}
.cabin-about .cabin-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-top:1px solid var(--line);padding-top:28px}
@media (max-width:900px){.cabin-about .cabin-split{grid-template-columns:1fr}.cabin-about .cabin-sticky{position:static}.cabin-about .cabin-bleed img{aspect-ratio:16/11}.cabin-about .cabin-tri{grid-template-columns:1fr}}

/* AI — status HUD + stacked archive */
.cabin-ai .cabin-status{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;padding:0;list-style:none}
.cabin-ai .cabin-status li{display:flex;align-items:baseline;gap:10px;padding:8px 12px;border:1px solid var(--line);background:#070c0d;font:11px var(--d-mono);letter-spacing:.14em}
.cabin-ai .cabin-status span{color:var(--muted)}
.cabin-ai .cabin-status b{color:var(--d-teal);font-weight:500}
.cabin-ai .cabin-ai-hero{grid-template-columns:1.15fr .85fr!important;gap:clamp(24px,3.5vw,52px)!important}
.cabin-ai .cabin-stack{display:grid!important;grid-template-columns:1fr;gap:12px!important}
.cabin-ai .cabin-stack .case-row{min-height:110px}
.cabin-ai .cabin-axioms{margin-top:8px}

/* NOTES — magazine */
.cabin-notes .cabin-mag{display:grid!important;grid-template-columns:1.2fr 1fr;gap:16px!important}
.cabin-notes .cabin-mag .case-row:first-child{grid-row:span 3;min-height:100%;display:flex!important;flex-direction:column;justify-content:flex-end;padding:32px!important;background:radial-gradient(120% 80% at 0% 0%,rgba(95,242,208,.12),transparent 55%),linear-gradient(180deg,#0b1415,#060a0b)!important}
.cabin-notes .cabin-mag .case-row:first-child h2{font-family:var(--d-han),var(--d-display),sans-serif!important;font-size:clamp(28px,3vw,48px)!important;line-height:1.12;font-weight:900}
@media (max-width:820px){.cabin-notes .cabin-mag{grid-template-columns:1fr}.cabin-notes .cabin-mag .case-row:first-child{grid-row:auto}}

/* NOTE article — reading with side index feel */
.cabin-note .cabin-read{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:48px;max-width:1080px}
.cabin-note .cabin-read .note-article{grid-column:1}
.cabin-note .cabin-read .article-nav{grid-column:1/-1}
.cabin-note .page-heading h1{max-width:14em}
@media (max-width:900px){.cabin-note .cabin-read{grid-template-columns:1fr;gap:0}}

/* WORKS — staggered stage */
.cabin-works .cabin-stage{display:grid!important;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:18px!important}
.cabin-works .cabin-stage .product-card:first-child{grid-row:span 2}
.cabin-works .cabin-stage .product-card:first-child .product-image img{min-height:420px;object-fit:cover}
.cabin-works .cabin-play .game-visual{border:1px solid var(--line);background:radial-gradient(80% 70% at 50% 40%,rgba(95,242,208,.08),#0a0f10)}
@media (max-width:900px){.cabin-works .cabin-stage{grid-template-columns:1fr}.cabin-works .cabin-stage .product-card:first-child{grid-row:auto}.cabin-works .cabin-stage .product-card:first-child .product-image img{min-height:0}}

/* DAILY — cinema mosaic */
.cabin-daily .cabin-cinema{grid-template-columns:1.8fr 1fr!important;grid-template-rows:minmax(280px,42vw) minmax(180px,26vw)!important;gap:12px!important}
.cabin-daily .cabin-cinema .photo-main{grid-row:1/-1}
.cabin-daily .cabin-entries>a{padding:28px 0;border-left:2px solid transparent;padding-left:16px;margin-left:-16px;transition:border-color var(--t-fast),background var(--t-fast)}
.cabin-daily .cabin-entries>a:hover{border-left-color:var(--d-teal);background:rgba(95,242,208,.04)}
@media (max-width:720px){.cabin-daily .cabin-cinema{grid-template-columns:1fr 1fr!important;grid-template-rows:240px 160px!important}.cabin-daily .cabin-cinema .photo-main{grid-row:1;grid-column:1/-1}}

/* WEIGHT — instrument */
.cabin-weight .cabin-gauge .d-stats strong{font-size:clamp(32px,4vw,52px)!important;font-family:var(--d-display)!important}
.cabin-weight .cabin-gauge .d-chart{min-height:320px}

/* ATLAS cabin mast only */
.cabin-atlas .cabin-mast h1{font-family:var(--d-han),var(--d-display),sans-serif;font-weight:900}

/* mobile home: hide contact soft; trim photo strip height cue via voyage end in JS */
@media (max-width:720px){
  .cabin-home .field-photo-strip{padding-block:28px}
  .cabin-home .field-photo-grid{grid-template-columns:1fr 1fr;gap:8px}
  .cabin-home .field-notes{padding-block:28px}
  .cabin-home .field-contact{padding-block:24px}
}

.cabin-ai .cabin-stack{grid-template-columns:1.2fr .8fr!important;grid-template-rows:auto auto}
.cabin-ai .cabin-stack .cabin-lead{grid-row:span 2;min-height:100%;display:flex!important;flex-direction:column;justify-content:flex-end}
@media (max-width:820px){.cabin-ai .cabin-stack{grid-template-columns:1fr!important}.cabin-ai .cabin-stack .cabin-lead{grid-row:auto}}

/* ===== r8 · 2026-10-18 · iteration 4 「光与声」 ===== */
/* 1. palette system — one HUD constant (teal) + one accent per cabin; depth = layered light, not flat black */
:root{--acc:#5ff2d0;--acc-2:#8fd3ff;--ink-0:#05090a;--ink-1:#080d0e;--ink-2:#0c1415;--ink-3:#111b1d;--glow-a:color-mix(in oklab,var(--acc) 38%,transparent);--wash:color-mix(in oklab,var(--acc) 11%,transparent)}
body.cabin-about{--acc:#f2b35f;--acc-2:#ff8f6b}
body.cabin-ai{--acc:#5ff2d0;--acc-2:#8fd3ff}
body.cabin-notes{--acc:#d8f58a;--acc-2:#5ff2d0}
body.cabin-works{--acc:#ffd166;--acc-2:#ff8f6b}
body.cabin-daily{--acc:#8fd3ff;--acc-2:#c9a7ff}
body.cabin-weight{--acc:#d8f58a;--acc-2:#ffd166}
body.cabin-atlas{--acc:#5ff2d0;--acc-2:#d8f58a}
body.note-personal-site{--acc:#8fd3ff;--acc-2:#5ff2d0}
body.note-ai-collaboration{--acc:#5ff2d0;--acc-2:#d8f58a}
body.note-ailog-start{--acc:#ff9b7a;--acc-2:#ffd166}
body.note-photo-selection{--acc:#c9a7ff;--acc-2:#8fd3ff}
body[class*=cabin-]:not(.cabin-home)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(900px 520px at 88% -8%,var(--wash),transparent 62%),radial-gradient(700px 600px at -12% 38%,color-mix(in oklab,var(--acc-2) 6%,transparent),transparent 64%),linear-gradient(180deg,var(--ink-1),var(--ink-0) 70%)}
body[class*=cabin-]:not(.cabin-home) main .eyebrow,body[class*=cabin-]:not(.cabin-home) .cabin-deck{color:var(--acc)}
body[class*=cabin-] .page-heading h1 .d-caret,body[class*=cabin-] .d-typed::after{color:var(--acc)!important}
body[class*=cabin-]:not(.cabin-home) main .text-link{color:var(--acc)}
body[class*=cabin-]:not(.cabin-home) .page-heading h1{text-shadow:0 0 48px color-mix(in oklab,var(--acc) 16%,transparent)}
body[class*=cabin-]:not(.cabin-home) .case-row:hover{border-color:color-mix(in oklab,var(--acc) 65%,transparent)!important;box-shadow:0 0 0 1px color-mix(in oklab,var(--acc) 25%,transparent) inset,0 18px 48px -24px var(--glow-a)!important}
body[class*=cabin-]:not(.cabin-home) .case-row::before{color:color-mix(in oklab,var(--acc) 70%,transparent)}
body[class*=cabin-] .page-heading::after{content:"";display:block;height:1px;margin-top:clamp(20px,2.4vw,34px);background:linear-gradient(90deg,var(--acc),color-mix(in oklab,var(--acc-2) 50%,transparent) 38%,transparent 78%);opacity:.7}
.cabin-about .cabin-stops b,.cabin-weight .cabin-gauge .d-stats strong{color:var(--acc)!important;text-shadow:0 0 18px var(--glow-a)!important}
.cabin-about .cabin-bleed figcaption span:first-child,.cabin-ai .cabin-status b{color:var(--acc)}
.cabin-weight .d-chart .line{stroke:var(--acc)}
/* surfaces: depth gradient + top light edge */
body[class*=cabin-]:not(.cabin-home) .case-row,body[class*=cabin-] .product-card,body[class*=cabin-] .d-stats div,body[class*=cabin-] .d-chart,.cabin-ai .cabin-status li{background:linear-gradient(180deg,var(--ink-3),var(--ink-1) 62%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
/* focus ring — visible, on-system */
:focus-visible{outline:2px solid var(--acc,#5ff2d0)!important;outline-offset:3px!important;border-radius:2px}
.skip:focus{background:var(--acc,#5ff2d0);color:#04110e}

/* 2. product stage: no more letterboxed black frames */
.product-card .product-image{background:radial-gradient(80% 90% at 50% 100%,color-mix(in oklab,var(--pc,#5ff2d0) 22%,transparent),transparent 70%),linear-gradient(180deg,#0f1819,#0a1011)!important}
.product-card.mint{--pc:#5ff2d0}.product-card.coral{--pc:#ff9b7a}.product-card.yellow{--pc:#ffd166}
.product-card .product-image>img{object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .product-image>img{transform:translateY(-6px) scale(1.02)}
.product-card:hover{border-color:color-mix(in oklab,var(--pc) 55%,transparent)!important}

/* 3. hero stardust canvas: under the shade, over the photo */
.d-hero-gl{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none;opacity:0}
html.d-glr .field-hero picture img,html.d-gl-run .field-hero picture img{opacity:0}
html.d-glr .field-hero picture img{animation:d-glsafe .6s 3.2s forwards}
.field-hero picture img{transition:opacity .9s ease}
@keyframes d-glsafe{to{opacity:1}}

/* 4. sound control — inline (never floats over copy), footer copy, and a small chip only while ON */
.d-snd{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 11px;border:1px solid rgba(95,242,208,.28);border-radius:15px;background:rgba(6,10,11,.6);font:10px/1 var(--d-mono);letter-spacing:.18em;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.d-snd:hover{color:var(--text);border-color:var(--d-teal)}
.d-snd b{font-weight:500}
.d-snd i{width:12px;height:10px;background:linear-gradient(currentColor,currentColor) 0 100%/2px 30% no-repeat,linear-gradient(currentColor,currentColor) 5px 100%/2px 60% no-repeat,linear-gradient(currentColor,currentColor) 10px 100%/2px 40% no-repeat;opacity:.6}
.d-snd[aria-pressed=true]{color:#04110e;background:var(--d-teal);border-color:var(--d-teal);box-shadow:var(--d-glow)}
.d-snd[aria-pressed=true] i{opacity:1;animation:d-eq 1.1s steps(3) infinite}
@keyframes d-eq{0%{background-size:2px 30%,2px 80%,2px 50%}33%{background-size:2px 90%,2px 40%,2px 70%}66%{background-size:2px 50%,2px 65%,2px 100%}}
.d-sig .d-snd-inline{margin-left:auto;align-self:center}
.field-hero-top .d-snd-inline{margin-left:14px;pointer-events:auto;color:rgba(245,246,244,.78);border-color:rgba(245,246,244,.3)}
.footer-links .d-snd-foot{height:26px}
.d-snd-chip{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:none}
html.d-snd-on .d-snd-chip{display:inline-flex}
@media (max-width:720px){.d-snd b{letter-spacing:.12em}.d-snd-chip b{display:none}.d-snd-chip{padding:0 9px}}

/* 5. article cabins — four distinct reading rooms + rail */
.cabin-note .cabin-read{grid-template-columns:minmax(0,1fr) 220px!important;max-width:1120px!important}
.d-rail{grid-column:2;grid-row:1;align-self:start;position:sticky;top:calc(var(--d-nav,57px) + 28px);padding-left:20px;border-left:1px solid var(--line);font:11px/1.6 var(--d-mono);letter-spacing:.08em}
.d-rail-k{color:var(--acc);letter-spacing:.2em}
.d-rail-m{color:var(--muted);margin-top:6px}
.d-rail-bar{position:absolute;left:-1px;top:0;bottom:0;width:1px}
.d-rail-bar i{display:block;width:1px;height:100%;background:var(--acc);box-shadow:0 0 10px var(--acc);transform-origin:top;transform:scaleY(0)}
.d-rail ol{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.d-rail a{display:grid;grid-template-columns:24px 1fr;gap:6px;color:var(--muted)!important;text-decoration:none!important;font-family:"PingFang SC","Noto Sans SC",sans-serif;letter-spacing:0;font-size:13px;line-height:1.45;transition:color var(--t-fast)}
.d-rail a span{font:10px/1.9 var(--d-mono);color:color-mix(in oklab,var(--acc) 60%,transparent)}
.d-rail a:hover,.d-rail a.on{color:var(--text)!important}
.d-rail a.on span{color:var(--acc)}
.cabin-note .note-article-body h2{font-family:var(--d-han),serif;font-weight:900;scroll-margin-top:90px}
.cabin-note .note-article-body h2::before{content:attr(data-n);display:block;font:500 11px var(--d-mono);letter-spacing:.24em;color:var(--acc);margin-bottom:8px}
.cabin-note .note-article-body>p:first-of-type{font-size:clamp(17px,1.35vw,20px);line-height:1.85;color:var(--text)}
/* a) personal-site · blueprint */
.note-personal-site .note-article{background-image:linear-gradient(color-mix(in oklab,var(--acc) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--acc) 7%,transparent) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;padding:clamp(18px,2.4vw,36px)!important;border:1px solid color-mix(in oklab,var(--acc) 22%,transparent)!important}
.note-personal-site .note-article-body h2{padding-top:18px;border-top:1px dashed color-mix(in oklab,var(--acc) 45%,transparent)}
/* b) ai-collaboration · session log with timeline */
.note-ai-collaboration .note-article-body{position:relative;padding-left:30px;border-left:1px solid color-mix(in oklab,var(--acc) 30%,transparent)}
.note-ai-collaboration .note-article-body h2{position:relative;font-size:clamp(22px,2vw,28px)}
.note-ai-collaboration .note-article-body h2::after{content:"";position:absolute;left:-36px;top:30px;width:11px;height:11px;border-radius:50%;background:var(--ink-1);border:2px solid var(--acc);box-shadow:0 0 12px var(--acc)}
.note-ai-collaboration .note-article-body h2::before{content:"> SESSION " attr(data-n)}
/* c) ailog-start · field notebook: drop cap + warm rules */
.note-ailog-start .note-article-body>p:first-of-type::first-letter{float:left;font:900 4.2em/0.9 var(--d-han),serif;color:var(--acc);margin:.06em .12em 0 0;text-shadow:0 0 24px var(--glow-a)}
.note-ailog-start .note-article-body h2{display:inline-block;padding-bottom:6px;background:linear-gradient(var(--acc),var(--acc)) 0 100%/42px 3px no-repeat}
.note-ailog-start .note-article-body h2::before{content:"ENTRY " attr(data-n)}
/* d) photo-selection · contact sheet */
.note-photo-selection .note-article-body h2{padding:10px 14px;border:1px solid color-mix(in oklab,var(--acc) 40%,transparent);background:linear-gradient(90deg,color-mix(in oklab,var(--acc) 9%,transparent),transparent 70%);font-size:clamp(20px,1.8vw,26px)}
.note-photo-selection .note-article-body h2::before{content:"FRAME " attr(data-n) "  ·  SELECT ○"}
.d-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 28px;padding:10px;border:1px solid var(--line);background:var(--ink-0)}
.d-sheet figure{margin:0;position:relative}
.d-sheet img{display:block;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:4/3!important;object-fit:cover;margin:0!important;filter:saturate(.75) contrast(1.05) brightness(.85)}
.d-sheet figcaption{position:absolute;left:6px;top:6px;font:9px var(--d-mono);letter-spacing:.16em;color:var(--acc)}
.d-sheet figure:nth-child(2){outline:2px solid var(--acc);outline-offset:2px}.d-sheet figure:nth-child(2) figcaption{background:var(--acc);color:#0b0c0f;padding:2px 5px}
@media (max-width:900px){.cabin-note .cabin-read{grid-template-columns:1fr!important}.d-rail{display:none}.note-ai-collaboration .note-article-body{padding-left:20px}.note-ai-collaboration .note-article-body h2::after{left:-26px}}
/* reading progress on mobile — thin accent bar under nav */
@media (max-width:900px){.cabin-note::after{content:"";position:fixed;left:0;top:var(--d-nav,57px);height:2px;width:100%;transform-origin:left;transform:scaleX(var(--d-read,0));background:var(--acc);z-index:40;box-shadow:0 0 8px var(--acc)}}
@media (prefers-reduced-motion:reduce){.d-hero-gl,.d-snd{display:none!important}.d-snd[aria-pressed=true] i{animation:none}}

@media (max-width:720px){.field-hero-top .d-snd b{display:none}.field-hero-top .d-snd{padding:0 9px}}
/* ===== r12 · life atlas command deck (MW-20261018-006) ===== */
:root{--t-fast:.2s;--t-med:.4s;--t-slow:.9s;--ease-d:cubic-bezier(.22,.8,.24,1)}
.cabin-atlas .atlas-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,410px);column-gap:clamp(28px,4vw,64px);align-items:end;padding-block:clamp(28px,4vw,52px) 56px}
.cabin-atlas .atlas-section>.section-heading{grid-column:1;grid-row:1/3;margin:0 0 6px;max-width:none;width:auto}
.cabin-atlas .atlas-section>.section-heading h1{font-size:clamp(56px,7.2vw,112px);line-height:.98;margin-top:14px;text-wrap:balance}
.cabin-atlas .atlas-section>.section-heading p:not(.eyebrow){max-width:30em;margin-top:18px;color:var(--muted,#9fb2ab)}
.cabin-atlas .map-console{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;gap:8px;border:1px solid color-mix(in srgb,var(--acc,#6fe3c1) 22%,#2a3a3d);border-bottom:0;border-radius:10px 10px 0 0;padding:14px;background:linear-gradient(180deg,rgba(111,227,193,.07),rgba(13,23,26,.6));position:relative}
.cabin-atlas .map-console::before{content:"CONTROL DECK / 控制台";flex:1 0 100%;font:600 10px/1 var(--d-mono,ui-monospace,monospace);letter-spacing:.18em;color:var(--acc,#6fe3c1);opacity:.85;margin-bottom:4px}
.cabin-atlas .map-console{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cabin-atlas .map-console::before{grid-column:1/-1}
.cabin-atlas .map-console .lens-buttons{display:contents}
.cabin-atlas .map-console .button{min-height:46px;justify-content:center;padding-inline:8px;white-space:nowrap;transition:border-color var(--t-fast) var(--ease-d),background var(--t-fast) var(--ease-d),color var(--t-fast)}
.cabin-atlas .map-console>.button{flex:0 0 auto}
.cabin-atlas .map-console .button:hover{border-color:var(--acc,#6fe3c1);background:rgba(111,227,193,.08);color:#fff}
.cabin-atlas .region-switch{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;border:1px solid color-mix(in srgb,var(--acc,#6fe3c1) 22%,#2a3a3d);border-radius:0 0 10px 10px;overflow:hidden;background:rgba(13,23,26,.6)}
.cabin-atlas .region-switch button{min-height:46px;border:0;border-left:1px solid #22312f;border-bottom:0;font-size:12px;letter-spacing:.06em;transition:background var(--t-fast),color var(--t-fast)}
.cabin-atlas .region-switch button:first-child{border-left:0}
.cabin-atlas .region-switch button:hover{color:#fff;background:rgba(255,255,255,.03)}
.cabin-atlas .region-switch .is-active{color:#061512;background:var(--acc,#6fe3c1);font-weight:700}
.cabin-atlas .route-atlas,.cabin-atlas .d-scrub,.cabin-atlas .filter-summary,.cabin-atlas .atlas-place-card{grid-column:1/-1}
.cabin-atlas .route-atlas{position:relative;width:100vw;margin:clamp(26px,3vw,40px) 0 0 calc(50% - 50vw);padding:0}
.cabin-atlas .atlas-canvas{border-radius:0;border-inline:0;border-color:#22383a;background:radial-gradient(120% 90% at 70% 40%,#15282a 0,#0e1a1c 55%,#0a1214 100%)}
.cabin-atlas .atlas-map{height:clamp(440px,68vh,660px);background:transparent}
.cabin-atlas .route-atlas::before,.cabin-atlas .route-atlas::after{content:"";position:absolute;pointer-events:none;z-index:2}
.cabin-atlas .route-atlas::before{inset:18px clamp(18px,4vw,64px);--c:color-mix(in srgb,var(--acc,#6fe3c1) 70%,transparent);background:linear-gradient(var(--c),var(--c)) 0 0/22px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 22px,linear-gradient(var(--c),var(--c)) 100% 0/22px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 22px,linear-gradient(var(--c),var(--c)) 0 100%/22px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 22px,linear-gradient(var(--c),var(--c)) 100% 100%/22px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 22px;background-repeat:no-repeat}
.cabin-atlas .route-atlas::after{inset:0;background:repeating-linear-gradient(90deg,rgba(111,227,193,.045) 0 1px,transparent 1px 8.333%),repeating-linear-gradient(0deg,rgba(111,227,193,.035) 0 1px,transparent 1px 16.66%),linear-gradient(180deg,rgba(7,12,14,.0) 70%,rgba(7,12,14,.55));mix-blend-mode:screen}
.cabin-atlas .atlas-toolbar{top:28px;right:clamp(28px,4.4vw,76px)}
.cabin-atlas .map-legend{left:clamp(28px,4.4vw,76px);bottom:28px;border:1px solid #2a3c3c;border-radius:6px;backdrop-filter:blur(6px)}
.cabin-atlas .atlas-canvas::before{content:"LIFE ATLAS · LIVE FEED";position:absolute;z-index:3;top:34px;left:clamp(32px,4.6vw,80px);font:600 10px/1 var(--d-mono,ui-monospace,monospace);letter-spacing:.2em;color:var(--acc,#6fe3c1);pointer-events:none;padding-left:14px;background:radial-gradient(circle at 4px 50%,var(--acc,#6fe3c1) 0 3px,transparent 3.5px) no-repeat;animation:d-live 2.4s ease-in-out infinite}
@keyframes d-live{50%{opacity:.45}}
.cabin-atlas.map-fullscreen .route-atlas::before,.cabin-atlas.map-fullscreen .route-atlas::after{display:none}
.cabin-atlas .d-scrub{margin-top:0;border-radius:0 0 10px 10px;border-top:0}
.cabin-atlas .filter-summary{padding-block:14px 0;font:500 11px/1.6 var(--d-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase}
.cabin-atlas .atlas-place-card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(24px,3vw,40px);padding-top:clamp(28px,3vw,40px);border-top:1px solid #22312f;align-items:start}
.cabin-atlas .atlas-place-card>img{width:100%;height:auto;aspect-ratio:4/3;border-radius:8px;box-shadow:0 30px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05);order:0;background:#121c1e}
.cabin-atlas .atlas-place-card .mini-label{color:var(--acc,#6fe3c1);font:600 10px/1 var(--d-mono,ui-monospace,monospace);letter-spacing:.2em}
.cabin-atlas .atlas-place-card h3{font-weight:700;letter-spacing:.01em;font-size:clamp(30px,3.2vw,46px);line-height:1.1;margin:14px 0 14px}
.cabin-atlas .atlas-place-card p{font-size:15px;line-height:1.85}
.cabin-atlas .atlas-auth-panel{margin-top:22px;padding:18px;border:1px solid #22312f;border-radius:10px;background:rgba(255,255,255,.02)}
@media (max-width:900px){
  .cabin-atlas .atlas-section{display:block;padding-block:28px 40px}
  .cabin-atlas .atlas-section>.section-heading h1{font-size:clamp(44px,13vw,64px)}
  .cabin-atlas .map-console{margin-top:22px;padding:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .cabin-atlas .map-console::before{grid-column:1/-1;margin-bottom:6px}
  .cabin-atlas .map-console .lens-buttons{display:contents}
  .cabin-atlas .map-console .button{min-height:44px;padding-inline:4px}
  .cabin-atlas .route-atlas{margin-top:18px}
  .cabin-atlas .atlas-map{height:clamp(380px,60svh,520px)}
  .cabin-atlas .route-atlas::before{inset:10px}
  .cabin-atlas .atlas-canvas::before{display:none}
  .cabin-atlas .atlas-toolbar{top:12px;right:12px}
  .cabin-atlas .map-legend{left:14px;bottom:14px}
  .cabin-atlas .atlas-place-card{display:block}
  .cabin-atlas .atlas-place-card>img{display:block;aspect-ratio:16/10;margin-bottom:20px}
}
/* r12 · 404 cabin (static, inactive until nginx error_page is approved) */
body.cabin-404{--acc:#ff8f6b;--acc-2:#ffd27a}
.d404{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(36px,6vw,88px) clamp(48px,6vw,96px)}
.d404 .cabin-mast{grid-column:2;grid-row:1;margin:0}
.d404 .cabin-mast h1{font-family:var(--d-han),var(--d-display),serif;font-weight:900;font-size:clamp(44px,5.6vw,84px);line-height:1.04}
.d404 .cabin-mast p:not(.eyebrow){max-width:28em;color:var(--muted,#9fb2ab);margin-top:18px;line-height:1.85}
.d404 .eyebrow{color:var(--acc)}
.d404-scope{grid-column:1;grid-row:1;position:relative;aspect-ratio:1;max-width:560px;width:100%;border-radius:50%;background:radial-gradient(circle,rgba(255,143,107,.08) 0,transparent 62%),repeating-radial-gradient(circle,transparent 0 46px,rgba(255,255,255,.05) 46px 47px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 120px -40px rgba(255,143,107,.4);overflow:hidden}
.d404-scope::before,.d404-scope::after{content:"";position:absolute;background:rgba(255,255,255,.08)}
.d404-scope::before{left:50%;top:0;bottom:0;width:1px}.d404-scope::after{top:50%;left:0;right:0;height:1px}
.d404-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,143,107,.28),rgba(255,143,107,0) 16%,transparent);animation:d404-spin 5s linear infinite}
.d404-ring{position:absolute;inset:18%;border:1px dashed rgba(255,143,107,.35);border-radius:50%;animation:d404-spin 40s linear infinite}
.d404-ring.r2{inset:34%;border-style:solid;border-color:rgba(255,255,255,.08);animation-duration:70s;animation-direction:reverse}
@keyframes d404-spin{to{transform:rotate(360deg)}}
.d404-num{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(84px,12vw,180px)/1 var(--d-display),ui-monospace,monospace;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,210,170,.85);text-shadow:0 0 40px rgba(255,143,107,.25);z-index:1}
.d404-blip{position:absolute;left:68%;top:30%;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(255,143,107,.6);animation:d404-blip 2.4s ease-out infinite;z-index:2}
@keyframes d404-blip{0%{box-shadow:0 0 0 0 rgba(255,143,107,.55)}80%,100%{box-shadow:0 0 0 22px rgba(255,143,107,0)}}
.d404-read{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);font:600 10px/1.7 var(--d-mono,ui-monospace,monospace);letter-spacing:.2em;color:var(--acc);text-align:center;white-space:nowrap;z-index:2}
.d404-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#22312f;border:1px solid #22312f;border-radius:12px;overflow:hidden}
.d404-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;background:#0d1416;color:var(--text,#e8efe9);text-decoration:none;min-height:132px;transition:background var(--t-fast) var(--ease-d)}
.d404-card strong{font-family:var(--d-han),serif;font-weight:900;font-size:22px;letter-spacing:.02em}
.d404-k{font:600 10px/1 var(--d-mono,ui-monospace,monospace);letter-spacing:.18em;color:var(--acc)}
.d404-m{font-size:13px;color:var(--muted,#9fb2ab)}
.d404-card i{position:absolute;right:20px;top:20px;font-style:normal;color:var(--muted,#9fb2ab);transition:transform var(--t-fast) var(--ease-d),color var(--t-fast)}
.d404-card:hover,.d404-card:focus-visible{background:#131d1f}
.d404-card:hover i,.d404-card:focus-visible i{color:var(--acc);transform:translate(3px,-3px)}
.d404-card:focus-visible{outline:2px solid var(--acc);outline-offset:-4px}
.d404-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-size:13px;color:var(--muted,#9fb2ab)}
.d404-foot span a{color:var(--acc)}
@media (max-width:900px){.d404{grid-template-columns:1fr}.d404 .cabin-mast,.d404-scope{grid-column:1;grid-row:auto}.d404-scope{max-width:300px;margin-inline:auto}.d404-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.d404-card{min-height:112px;padding:18px}.d404-card strong{font-size:19px}}
@media (prefers-reduced-motion:reduce){.d404-scope,.d404-sweep,.d404-ring,.d404-blip,.cabin-atlas .atlas-canvas::before{animation:none}}
/* r12 · polish pass */
.cabin-ai .cabin-stack .cabin-lead{align-items:flex-start!important;text-align:left;padding:clamp(24px,2.6vw,36px)!important;gap:14px;background:radial-gradient(90% 80% at 85% 10%,color-mix(in srgb,var(--acc,#6fe3c1) 12%,transparent),transparent 60%),linear-gradient(180deg,#0e1719,#0a1113)}
.cabin-ai .cabin-stack .cabin-lead .eyebrow{color:var(--acc,#6fe3c1)}
.cabin-ai .cabin-stack .cabin-lead h3{font-family:var(--d-han),var(--d-display),serif;font-weight:900;font-size:clamp(24px,2.4vw,36px);line-height:1.2;margin:0 0 10px}
.cabin-ai .cabin-stack .cabin-lead p{font-size:14px;max-width:26em}
.cabin-ai .cabin-stack .cabin-lead>svg{position:absolute;right:22px;top:22px}
.cabin-ai .cabin-stack .cabin-lead{position:relative}
.cabin-ai .cabin-stack .case-row{transition:border-color var(--t-fast) var(--ease-d),background var(--t-fast) var(--ease-d),transform var(--t-med) var(--ease-d)}
.cabin-ai .cabin-stack .case-row:hover{transform:translateY(-2px)}
.cabin-ai .cabin-stack .case-row>svg{transition:transform var(--t-fast) var(--ease-d)}
.cabin-ai .cabin-stack .case-row:hover>svg{transform:translate(3px,-3px)}
/* loading state: quiet shimmer behind photos until they paint */
.cabin-bleed,.cabin-cinema a,.cabin-cinema figure,.atlas-place-card>img,.d-sheet figure{background:linear-gradient(100deg,#0f181a 30%,#16231f 50%,#0f181a 70%) 0 0/300% 100%;animation:d-shim 1.6s linear infinite}
.cabin-bleed:has(img[data-ld]),.cabin-cinema a:has(img[data-ld]),.cabin-cinema figure:has(img[data-ld]),.atlas-place-card>img[data-ld],.d-sheet figure:has(img[data-ld]){animation:none;background:#0f181a}
@keyframes d-shim{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){.cabin-bleed,.cabin-cinema a,.cabin-cinema figure,.atlas-place-card>img,.d-sheet figure{animation:none}}
@media (max-width:900px){.cabin-about .cabin-bleed img{height:auto!important;aspect-ratio:4/3!important;max-height:60svh}}
/* ===== r14 · works signal field (WebGL #2) ===== */
.cabin-works .cabin-mast{position:relative;isolation:isolate}
.cabin-works .d-field-gl{position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:-48px;height:calc(100% + 150px);pointer-events:none;opacity:.95;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 70%,transparent 100%)}
.cabin-works .cabin-mast.d-has-gl h1,.cabin-works .cabin-mast.d-has-gl p{text-shadow:0 2px 24px rgba(5,9,10,.85)}
/* ===== r14 · life-atlas sealed archive (password + album, CSS only; gate logic untouched) ===== */
.cabin-atlas .atlas-auth-panel{position:relative;margin-top:26px;padding:22px 22px 18px;border:1px solid color-mix(in srgb,var(--acc,#5ff2d0) 28%,#22312f);border-radius:14px;background:radial-gradient(120% 140% at 100% 0,rgba(95,242,208,.10),transparent 55%),linear-gradient(180deg,#0f1a1c,#0b1213);box-shadow:0 24px 60px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
.cabin-atlas .atlas-auth-panel::before{content:"SEALED ARCHIVE / 私密相册";display:block;margin-bottom:14px;padding-left:22px;font:600 10px/14px var(--d-mono,ui-monospace,monospace);letter-spacing:.2em;color:var(--acc,#5ff2d0);background:no-repeat 0 50%/14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ff2d0' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.cabin-atlas .atlas-auth-panel form{margin:0;display:block}
.cabin-atlas .atlas-auth-panel label{display:block;font-size:12px;font-weight:600;color:var(--muted,#9fb2ab);letter-spacing:.06em;margin-bottom:10px}
.cabin-atlas .atlas-auth-panel form>div{display:flex;gap:0;align-items:stretch;border:1px solid #2a3c3c;border-radius:999px;background:rgba(5,9,10,.6);padding:4px;transition:border-color var(--t-fast) var(--ease-d),box-shadow var(--t-fast) var(--ease-d)}
.cabin-atlas .atlas-auth-panel form>div:focus-within{border-color:var(--acc,#5ff2d0);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc,#5ff2d0) 16%,transparent)}
.cabin-atlas .atlas-auth-panel input{flex:1 1 auto;min-width:0;min-height:44px;border:0!important;background:transparent!important;box-shadow:none!important;color:#e8efe9;padding:0 16px;font-size:15px;letter-spacing:.18em;outline:none}
.cabin-atlas .atlas-auth-panel input::placeholder{letter-spacing:.04em;color:#6f817b}
.cabin-atlas .atlas-auth-panel button[type=submit]{flex:0 0 auto;min-height:44px;min-width:92px;border:0;border-radius:999px;background:var(--acc,#5ff2d0);color:#061512;font-weight:700;letter-spacing:.12em;padding:0 20px;transition:transform var(--t-fast) var(--ease-d),filter var(--t-fast)}
.cabin-atlas .atlas-auth-panel button[type=submit]:hover{filter:brightness(1.08);transform:translateX(2px)}
.cabin-atlas .atlas-auth-panel button[type=submit]:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cabin-atlas .atlas-auth-panel [data-atlas-auth-status]{margin:12px 2px 0;font:500 11px/1.6 var(--d-mono,ui-monospace,monospace);letter-spacing:.06em;color:var(--muted,#9fb2ab)}
.cabin-atlas .atlas-album-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:16px;border-top:1px dashed #22312f}
.cabin-atlas .atlas-album-head span{font:600 11px/1.5 var(--d-mono,ui-monospace,monospace);letter-spacing:.1em;color:#cad8d1}
.cabin-atlas .atlas-album-head button{min-height:40px;padding:0 16px;border:1px solid #2a3c3c;border-radius:999px;background:transparent;color:#e8efe9;font-size:12px;letter-spacing:.06em;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.cabin-atlas .atlas-album-head button:not(:disabled):hover{border-color:var(--acc,#5ff2d0);background:rgba(95,242,208,.08)}
.cabin-atlas .atlas-album-head button:disabled{opacity:.42;cursor:not-allowed}
.cabin-atlas .atlas-auth-panel:not([hidden])~.atlas-album-grid:empty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;height:auto;min-height:0}
.cabin-atlas .atlas-auth-panel:not([hidden])~.atlas-album-grid:empty::before{content:"";grid-column:1/-1;aspect-ratio:4/1;border-radius:10px;background:linear-gradient(90deg,transparent 0 calc(25% - 3px),#0d1617 calc(25% - 3px) calc(25% + 3px),transparent calc(25% + 3px) calc(50% - 3px),#0d1617 calc(50% - 3px) calc(50% + 3px),transparent calc(50% + 3px) calc(75% - 3px),#0d1617 calc(75% - 3px) calc(75% + 3px),transparent calc(75% + 3px)),repeating-linear-gradient(135deg,rgba(95,242,208,.07) 0 6px,transparent 6px 14px),#101a1c;box-shadow:inset 0 0 0 1px #1d2b2c}
.cabin-atlas .atlas-album-grid:not(:empty){display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:14px}
.cabin-atlas .atlas-album-thumb{position:relative;aspect-ratio:1;overflow:hidden;border-radius:10px;border:1px solid #22312f;padding:0;background:#101a1c;transition:border-color var(--t-fast),transform var(--t-med) var(--ease-d)}
.cabin-atlas .atlas-album-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-med) var(--ease-d),filter var(--t-med)}
.cabin-atlas .atlas-album-thumb:hover{border-color:var(--acc,#5ff2d0);transform:translateY(-2px)}
.cabin-atlas .atlas-album-thumb:hover img{transform:scale(1.05)}
.cabin-atlas .atlas-album-thumb span{position:absolute;left:8px;bottom:6px;font:600 10px/1 var(--d-mono,ui-monospace,monospace);letter-spacing:.12em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (max-width:900px){.cabin-atlas .atlas-auth-panel{padding:18px 16px 14px}.cabin-atlas .atlas-auth-panel button[type=submit]{min-width:76px;padding:0 14px}.cabin-atlas .atlas-album-head{flex-wrap:wrap}}
.cabin-atlas .atlas-auth-panel:not([hidden])~.atlas-album-grid:empty{position:relative}
.cabin-atlas .atlas-auth-panel:not([hidden])~.atlas-album-grid:empty::after{content:"LOCKED · 口令后显示";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 12px;border-radius:999px;background:rgba(5,9,10,.82);border:1px solid #2a3c3c;font:600 10px/1 var(--d-mono,ui-monospace,monospace);letter-spacing:.18em;color:#9fb2ab;white-space:nowrap}
@media (max-width:900px){.cabin-atlas .atlas-album-head{flex-direction:column;align-items:flex-start}}
/* r14 · home mobile: app rows — "下载" link overlapped the screenshot button */
@media (max-width:700px){
  .field-app-row{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px auto;column-gap:12px;align-items:center}
  .field-app-row>.field-row-index{display:none}
  .field-app-row>.icon-button{position:static!important;margin:0!important;transform:none!important}
  .field-app-row>.field-arrow{position:static!important;margin:0!important;gap:6px;white-space:nowrap;font-size:13px}
}
/* r14 · CLS: reserve the signature band's final height (JS adds the distance line + SOUND control) */
@media (min-width:721px){.d-sig{min-height:126px}}
@media (max-width:720px){.d-sig{min-height:239px}body.cabin-atlas .d-sig{min-height:221px}}
html{scrollbar-gutter:stable}
.cabin-play img[width],.field-work img[width]{height:auto}
.field-photo-strip .field-photo-intro .field-number{color:#8aa39a}
/* r14 · CLS: the wipe scanline moved with `top` (a layout shift every frame on every page load); move it with transform instead */
.d-wipe::after{top:0!important;transform:translateY(calc(var(--d-k,0) * (100vh - var(--d-nav,0px))));will-change:transform}
/* r14 · CLS: reserve the SOUND button row in the home hero top bar before d.js inserts it */
@media (prefers-reduced-motion:no-preference){.field-hero-top{min-height:64px}@media (max-width:720px){.field-hero-top{min-height:52px}}}
/* r14 · CLS: match the pre-JS --d-nav fallback to the measured header height (69px / 61px at ≤700px) so 100svh heroes don't jump when d.js measures it */
:root{--d-nav:69px}@media (max-width:700px){:root{--d-nav:61px}}
.product-image img[width]{height:auto}
/* r14 · mobile legibility floor: HUD / label micro-type was 9–11px on phones (Lighthouse: only 43–50% legible text). Lift the common label systems to 12px on ≤700px. */
@media (max-width:700px){
.d-hud,.d-voyage-hud,.footer-bottom,.eyebrow,.field-number,.d-wipe-hud span,.d-wipe-hud b,.d-snd,.d-voyage-card div.meta,.d-voyage-progress,.orbit-photo-heading,.orbit-photo-caption>span:last-child,.field-place-tabs small,.field-photo>span>small,.field-tab-number,.field-section-label,
.cabin-atlas .filter-summary,.cabin-atlas .atlas-auth-panel [data-atlas-auth-status],.cabin-atlas .atlas-album-head span,.preview-atlas .map-legend,.cabin-atlas .atlas-place-card .mini-label,.cabin-about .cabin-bleed figcaption,.cabin-about .cabin-stops em{font-size:12px!important}
.d-hud,.d-voyage-hud,.footer-bottom{letter-spacing:.08em!important}
}
/* r17 · LCP: during the first-visit intro the overlay already covers the page, so the hero photo is allowed to paint
   underneath (d-ihold, set in <head>, cleared by d.js when the overlay lifts); the WebGL assembly then runs as before. */
html.d-glr.d-ihold .field-hero picture img{opacity:1;animation:none}
/* when the overlay lifts the photo drops back to the pre-assembly state instantly (no fade visible through the wipe), and the
   no-WebGL safety reveal restarts from that moment instead of from page load (d-iend, set by d.js) */
html.d-glr.d-iend .field-hero picture img{transition:none;animation:d-glsafe2 .6s 3.2s forwards}
@keyframes d-glsafe2{to{opacity:1}}
/* ===== r18 · 2026-10-18 · iteration 8 「收笔」 (MW-20261018-012) ===== */
/* 1. end of log: the ink signature re-written in stardust as the footer arrives (mask attached only when near; clip-path sweep + nib on transform) */
.footer .d-end{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 24px;padding:clamp(34px,6vw,76px) 0 clamp(16px,3vw,34px);border-bottom:1px solid var(--line)}
.d-end-k{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0!important;font:500 11px/1.5 var(--d-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.d-end-k span:first-child{color:var(--acc,#5ff2d0)}
.d-end-k [data-end-c]{color:var(--text);font-variant-numeric:tabular-nums}
.footer .d-end-top{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text);font-size:13px;letter-spacing:.06em}
.d-end-top .icon{width:16px;height:16px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.d-end-top:hover .icon,.d-end-top:focus-visible .icon{transform:translateY(-4px)}
.d-end-art{grid-column:1/-1;position:relative;width:min(100%,1180px);aspect-ratio:3/1;margin:clamp(6px,2vw,22px) auto 0}
.d-end-sig{position:absolute;inset:0;overflow:hidden;visibility:hidden;clip-path:inset(-3% 100% -3% 0);transition:clip-path 1.7s cubic-bezier(.65,0,.25,1);
  background:radial-gradient(240px 170px at var(--mx,32%) var(--my,46%),rgba(236,255,250,.6),transparent 70%),linear-gradient(100deg,color-mix(in oklab,var(--acc,#5ff2d0) 62%,transparent),rgba(233,255,249,.5) 48%,color-mix(in oklab,var(--acc-2,#8fd3ff) 62%,transparent))}
.d-end.is-near .d-end-sig{visibility:visible;-webkit-mask:url(../site-20261018/malone-ink-1200.webp?v=e95f6498a4) center/contain no-repeat;mask:url(../site-20261018/malone-ink-1200.webp?v=e95f6498a4) center/contain no-repeat}
.d-end.is-in .d-end-sig{clip-path:inset(-3% 0 -3% 0)}
.d-end-sig::before{content:"";position:absolute;inset:-28px;background:radial-gradient(circle,rgba(255,255,255,.95) 0 .9px,transparent 1.4px) 0 0/7px 7px}
.d-end-sig::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);transform:translateX(-120%)}
.d-end.is-vis .d-end-sig::before{animation:d-end-drift 18s linear infinite}
.d-end.is-vis.is-in .d-end-sig::after{animation:d-end-sheen 7s cubic-bezier(.6,0,.3,1) 1.8s infinite}
@keyframes d-end-drift{to{transform:translate3d(-28px,-14px,0)}}
@keyframes d-end-sheen{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.d-end-track{position:absolute;inset:0;transform:translateX(-100%);opacity:0;pointer-events:none}
.d-end-track i{position:absolute;right:0;top:6%;bottom:6%;width:2px;background:linear-gradient(transparent,#fff 30%,#fff 70%,transparent);box-shadow:0 0 16px 3px color-mix(in oklab,var(--acc,#5ff2d0) 70%,transparent)}
.d-end.is-in .d-end-track{animation:d-end-nib 1.7s cubic-bezier(.65,0,.25,1) forwards}
@keyframes d-end-nib{0%{transform:translateX(-100%);opacity:0}8%,86%{opacity:1}100%{transform:translateX(0);opacity:0}}
@media (max-width:700px){.footer .d-end{grid-template-columns:1fr;padding-top:30px}.d-end-k{gap:4px 14px;font-size:11px}.footer .d-end-top{justify-self:start}}
@media (prefers-reduced-motion:reduce){.d-end-sig{clip-path:none!important;transition:none!important}.d-end-sig::before,.d-end-sig::after{animation:none!important}.d-end-track{display:none}}

/* 2. works stage: one feature row + two half cards (no more hole under the first card), screenshots in real-size bezels,
      the app's own extra screenshots as a fan/deck, outlined index numerals, cursor glare + light tilt */
.cabin-works .cabin-stage{counter-reset:pc}
.cabin-works .cabin-stage .product-card{counter-increment:pc}
.cabin-works .cabin-stage .product-image{isolation:isolate;perspective:1100px}
.cabin-works .cabin-stage .product-image>img:not(.d-fan){position:relative;z-index:2;width:auto!important;max-width:100%;height:100%!important;min-height:0!important;object-fit:cover!important;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.cabin-works .cabin-stage .product-card:hover .product-image>img:not(.d-fan){transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.cabin-works .product-image>.d-fan{position:absolute;z-index:1;top:50%;left:50%;height:78%;width:auto;border:6px solid #15191b;border-radius:18px;box-shadow:0 0 0 1px #2c3638,0 22px 44px rgba(0,0,0,.6);filter:brightness(.48) saturate(.8);opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .6s ease,filter .5s ease}
.cabin-works .product-image>.d-fan-l.is-ready{opacity:1;transform:translate(-50%,-50%) translateX(-60%) rotate(-7deg)}
.cabin-works .product-image>.d-fan-r.is-ready{opacity:1;transform:translate(-50%,-50%) translateX(60%) rotate(7deg)}
.cabin-works .product-card:hover .product-image>.d-fan-l.is-ready{transform:translate(-50%,-50%) translateX(-78%) rotate(-10deg);filter:brightness(.7) saturate(.9)}
.cabin-works .product-card:hover .product-image>.d-fan-r.is-ready{transform:translate(-50%,-50%) translateX(78%) rotate(10deg);filter:brightness(.7) saturate(.9)}
.cabin-works .product-image[data-product=memory]>.d-fan{height:62%;border-width:8px;filter:brightness(.36) saturate(.7)}
.cabin-works .product-image[data-product=memory]>.d-fan-l.is-ready{transform:translate(-50%,-50%) translate(-24%,-12%) rotate(-3.5deg)}
.cabin-works .product-image[data-product=memory]>.d-fan-r.is-ready{transform:translate(-50%,-50%) translate(24%,10%) rotate(3.5deg)}
.cabin-works .product-card:hover .product-image[data-product=memory]>.d-fan-l.is-ready{transform:translate(-50%,-50%) translate(-31%,-15%) rotate(-5deg)}
.cabin-works .product-card:hover .product-image[data-product=memory]>.d-fan-r.is-ready{transform:translate(-50%,-50%) translate(31%,13%) rotate(5deg)}
.cabin-works .cabin-stage .product-image::before{content:counter(pc,decimal-leading-zero);position:absolute;z-index:3;left:20px;top:14px;font:700 clamp(38px,4.6vw,68px)/1 var(--d-display);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--pc,#5ff2d0) 72%,transparent);opacity:.85;pointer-events:none}
.cabin-works .cabin-stage .product-image::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(420px 300px at var(--gx,50%) var(--gy,30%),color-mix(in oklab,var(--pc,#5ff2d0) 24%,transparent),transparent 66%);mix-blend-mode:screen;opacity:0;transition:opacity .45s ease}
.cabin-works .cabin-stage .product-card:hover .product-image::after{opacity:1}
.cabin-works .cabin-stage .image-action{z-index:4}
@media (min-width:901px){
  .cabin-works .cabin-stage{grid-template-columns:1fr 1fr!important}
  .cabin-works .cabin-stage .product-card:first-child{grid-row:auto!important;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
  .cabin-works .cabin-stage .product-card:first-child .product-image{height:460px;border-bottom:0;border-right:1px solid var(--line)}
  .cabin-works .cabin-stage .product-card:first-child .product-info{align-self:center;padding:40px 36px}
  .cabin-works .cabin-stage .product-card:not(:first-child) .product-image{height:350px}
}
@media (prefers-reduced-motion:reduce){.cabin-works .cabin-stage .product-image>*{transition:none!important}}

/* 3. craft: stardust cursor trail canvas, brush-stroke underline on text links, arrows that lean toward where they go */
.d-dust{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:10002}
.text-link[href],.footer-links a,.footer .d-end-top{position:relative}
.text-link[href]::after,.footer-links a::after,.footer .d-end-top::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:6px;background:currentColor;opacity:.8;pointer-events:none;transform:scaleX(0);transform-origin:right center;transition:transform .5s cubic-bezier(.65,0,.25,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.8C38 3.9 88 2.6 138 3.9c24 .6 43 1.9 61 3.6-19 .2-38 1.2-60 1.5C93 9.6 46 9.2 1 8Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.8C38 3.9 88 2.6 138 3.9c24 .6 43 1.9 61 3.6-19 .2-38 1.2-60 1.5C93 9.6 46 9.2 1 8Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.text-link[href]:hover::after,.text-link[href]:focus-visible::after,.footer-links a:hover::after,.footer-links a:focus-visible::after,.footer .d-end-top:hover::after,.footer .d-end-top:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.text-link[href] .icon,.footer-links a .icon{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.text-link[href]:hover .icon,.footer-links a:hover .icon{transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){.text-link[href]::after,.footer-links a::after,.footer .d-end-top::after,.text-link[href] .icon,.footer-links a .icon{transition:none}}
/* ===== r19 · 2026-10-18 · iteration 9 「顺手」 (MW-20261018-013) · mobile / usability / technical ===== */
/* typing caret no longer widens a no-wrap Latin title (390/414px: malonetang.com overflowed by ~10px while typing) */
.page-heading h1 .d-fit,.section-heading h1 .d-fit{position:relative}
.d-fit .d-caret{position:absolute}
/* touch targets ≥ 44px tall where they were 11–30px (visual size unchanged for the pills: the hit area is extended) */
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
.footer .brand{min-height:44px}
.d-weight-orig summary{display:flex;align-items:center;min-height:44px}
.reading .article-nav a{display:inline-flex;align-items:center;min-height:44px}
.d-snd,.d-scrub button{position:relative}
.d-snd::before,.d-scrub button::before{content:"";position:absolute;inset:-8px -3px}
/* mobile micro-type floor: nothing under 11px */
@media (max-width:700px){
  .field-hero-top span,.field-image-action,.photo-link span,.d-snd b,.d404-k,.orbit-photo-heading span,.orbit-photo-caption span{font-size:11px!important}
}
/* touch: no "sticky hover" after a tap (fan stays in its resting pose); keyboard focus gets the same spread as hover */
@media (hover:none){
  .cabin-works .cabin-stage .product-card:hover .product-image>img:not(.d-fan){transform:none}
  .cabin-works .product-card:hover .product-image>.d-fan-l.is-ready{transform:translate(-50%,-50%) translateX(-60%) rotate(-7deg);filter:brightness(.48) saturate(.8)}
  .cabin-works .product-card:hover .product-image>.d-fan-r.is-ready{transform:translate(-50%,-50%) translateX(60%) rotate(7deg);filter:brightness(.48) saturate(.8)}
  .cabin-works .product-card:hover .product-image[data-product=memory]>.d-fan-l.is-ready{transform:translate(-50%,-50%) translate(-24%,-12%) rotate(-3.5deg);filter:brightness(.36) saturate(.7)}
  .cabin-works .product-card:hover .product-image[data-product=memory]>.d-fan-r.is-ready{transform:translate(-50%,-50%) translate(24%,10%) rotate(3.5deg);filter:brightness(.36) saturate(.7)}
  .cabin-works .cabin-stage .product-card:hover .product-image::after{opacity:0}
}
.cabin-works .product-image:focus-visible>img:not(.d-fan){transform:translateY(-6px)}
.cabin-works .product-image:focus-visible>.d-fan-l.is-ready{transform:translate(-50%,-50%) translateX(-78%) rotate(-10deg);filter:brightness(.7) saturate(.9)}
.cabin-works .product-image:focus-visible>.d-fan-r.is-ready{transform:translate(-50%,-50%) translateX(78%) rotate(10deg);filter:brightness(.7) saturate(.9)}
.cabin-works .product-image[data-product=memory]:focus-visible>.d-fan-l.is-ready{transform:translate(-50%,-50%) translate(-31%,-15%) rotate(-5deg)}
.cabin-works .product-image[data-product=memory]:focus-visible>.d-fan-r.is-ready{transform:translate(-50%,-50%) translate(31%,13%) rotate(5deg)}
/* the end-of-log mask uses the 600w signature on phones */
@media (max-width:700px){.d-end.is-near .d-end-sig{-webkit-mask-image:url(../site-20261019/malone-ink-600.webp?v=5c1e02e96c);mask-image:url(../site-20261019/malone-ink-600.webp?v=5c1e02e96c)}}
/* r19: the typing caret after a full-width fitted title must not widen the page (ai-collaboration 375-414px) */
.page-heading,.section-heading{overflow-x:clip}