:root{--bg:#f4f1eb;--ink:#111;--muted:#686868;--line:rgba(0,0,0,.12);--card-h:252px;--accent:#ead56f;--deep1:#554b23;--deep2:#17150b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"PingFang SC","Noto Sans SC",sans-serif;overflow-x:hidden}button,input,select{font:inherit}button{color:inherit}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.016) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.016) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.38),transparent 94%)}
body.detail-open{overflow:hidden}
.cursor-x,.cursor-y{position:fixed;left:0;top:0;pointer-events:none;will-change:transform;z-index:60;background:#111;opacity:.05}.cursor-x{width:100vw;height:1px}.cursor-y{width:1px;height:100vh}.focus-outline{position:fixed;z-index:58;pointer-events:none;border:1px solid #111;opacity:0;transition:left .24s cubic-bezier(.16,.82,.16,1),top .24s cubic-bezier(.16,.82,.16,1),width .24s cubic-bezier(.16,.82,.16,1),height .24s cubic-bezier(.16,.82,.16,1),opacity .12s}.focus-outline.show{opacity:.28}
.topbar{position:sticky;top:0;z-index:120;height:58px;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(244,241,235,.98);border-bottom:1px solid #111;font-size:9px;letter-spacing:.2em}.topbar>span:nth-child(2){text-align:center}.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px}.connection{display:flex;align-items:center;gap:7px}.status-dot{width:6px;height:6px;border-radius:50%;border:1px solid #111;background:transparent;transition:background .2s}.status-dot.on{background:#111}.admin-top{position:relative;color:#111;text-decoration:none;padding:8px 0}.admin-top::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:#111;transform:scaleX(0);transform-origin:right;transition:transform .25s cubic-bezier(.16,.82,.16,1)}.admin-top:hover::after,.admin-top:focus-visible::after{transform:scaleX(1);transform-origin:left}
.hero{position:relative;z-index:2;min-height:70vh;border-bottom:1px solid #111;display:grid;grid-template-columns:1.08fr .92fr}.hero-main{position:relative;padding:5vw 4vw 4vw;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.hero-kicker{font-size:10px;letter-spacing:.22em;margin-bottom:16px;position:relative;z-index:2}.hero h1{margin:0;position:relative;z-index:2;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(84px,10.7vw,158px);line-height:.78;letter-spacing:-.075em}.hero h1 i{display:block;margin-left:8.5vw}.hero-sub{position:relative;z-index:2;max-width:36ch;margin-top:24px;font-size:13px;line-height:1.92;color:#444}.hero-date{position:absolute;right:2.7vw;top:7vh;text-align:right;font-family:Arial,sans-serif;font-weight:800;font-size:clamp(60px,7.8vw,118px);line-height:.76;letter-spacing:-.055em;color:rgba(0,0,0,.038);pointer-events:none;user-select:none}.hero-date small{display:block;font-size:.48em;letter-spacing:-.02em;margin-top:.18em}
.hero-side{position:relative;border-left:1px solid #111;padding:28px;display:grid;grid-template-rows:1fr auto;gap:24px;overflow:hidden}.hero-upper{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(280px,1.22fr);gap:24px;min-height:390px}.statement{position:relative;z-index:5;align-self:start}.eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:14px}.curatorial-copy{max-width:29ch;font-size:12px;line-height:1.9}.geometry-stage{position:relative;min-height:360px;border-left:1px solid rgba(0,0,0,.1);overflow:hidden;isolation:isolate}.geo{position:absolute;pointer-events:none;will-change:transform}.geo-ring{width:min(26vw,420px);height:min(26vw,420px);border:1px solid rgba(0,0,0,.6);border-radius:50%;right:-15%;top:4%}.geo-line-h{width:62%;height:1px;background:#111;left:8%;bottom:25%}.geo-line-v{width:1px;height:48%;background:#111;left:25%;bottom:0}.geo-mark{position:absolute;right:12%;bottom:14%;width:72px;height:72px;border:1px solid #111;transform:rotate(45deg);opacity:.18}.hero-stats{position:relative;z-index:6;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:var(--bg);padding-top:4px}.hero-stats div{padding-top:12px;border-top:1px solid #111;min-width:0}.hero-stats b{display:block;font-size:8px;letter-spacing:.14em;margin-bottom:8px;white-space:nowrap}.hero-stats span{font-family:Georgia,"Times New Roman",serif;font-size:28px}
.toolbar{position:relative;z-index:5;border-bottom:1px solid #111;padding:18px 4vw;background:rgba(244,241,235,.97)}.toolbar-row{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(130px,.45fr));gap:12px;align-items:end}.control label{display:block;margin-bottom:6px;font-size:8px;letter-spacing:.18em;color:#555}.control input,.control select{width:100%;height:44px;padding:0 13px;border:1px solid #111;border-radius:0;background:rgba(255,255,255,.36);outline:none;color:#111;transition:background .16s,box-shadow .16s}.control input:focus,.control select:focus{background:#fff;box-shadow:0 0 0 1px #111 inset}.reset{height:44px;width:100%;border:1px solid #111;background:#111;color:#fff;cursor:pointer;letter-spacing:.08em;transition:background .18s,color .18s}.reset:hover{background:#fff;color:#111}.facet-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}.facet-label{font-size:8px;letter-spacing:.18em;margin-right:4px;color:#555}.chip{height:30px;padding:0 11px;border:1px solid #111;background:#fff;cursor:pointer;font-size:9px;letter-spacing:.08em;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s,background .16s,color .16s}.chip:hover{transform:translateY(-1px)}.chip.active{background:#111;color:#fff}.chip.swatch{width:30px;padding:0}.chip.swatch.active{outline:2px solid #111;outline-offset:2px}.toolbar-status{margin-top:12px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:#555}
.section-head{position:relative;z-index:2;padding:14px 4vw;border-bottom:1px solid #111;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.18em}.section-head .meta{display:flex;gap:18px;color:#555}.collection{position:relative;z-index:2;padding:30px 4vw 110px}.grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:20px;align-items:start}.grid.hovering .note-card:not(.active){opacity:.18;transform:scale(.989)}
.note-card{position:relative;height:var(--card-h);background:linear-gradient(to bottom,rgba(255,255,255,.24),rgba(255,255,255,0) 22%),linear-gradient(to bottom,rgba(0,0,0,.025),rgba(0,0,0,0) 62%),var(--note,#ead56f);border:1px solid rgba(0,0,0,.09);box-shadow:0 14px 30px rgba(0,0,0,.045),0 2px 0 rgba(255,255,255,.42) inset;overflow:hidden;cursor:pointer;outline:none;transform-style:preserve-3d;backface-visibility:hidden;contain:layout paint style;transition:opacity .28s,box-shadow .28s,border-radius .24s,transform .14s ease-out}.note-card.active{z-index:8;border-radius:8px;box-shadow:0 24px 52px rgba(0,0,0,.13),0 2px 0 rgba(255,255,255,.45) inset;will-change:transform}.card-shell{height:100%;padding:20px;display:flex;align-items:center;justify-content:center;position:relative}.note-card h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(25px,2.15vw,33px);line-height:1.04;text-align:center;max-width:10ch;overflow-wrap:anywhere}.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.1;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.36) 0 1px,transparent 1px),radial-gradient(circle at 70% 42%,rgba(0,0,0,.05) 0 1px,transparent 1px);background-size:20px 20px,26px 26px}.tape{position:absolute;top:10px;width:48px;height:13px;background:rgba(255,255,255,.42);border:1px solid rgba(0,0,0,.04);opacity:.7;mix-blend-mode:screen}.tape-l{left:18px;transform:rotate(-8deg)}.tape-r{right:24px;transform:rotate(9deg)}.fold{position:absolute;right:0;top:0;width:56px;height:56px;background:linear-gradient(135deg,rgba(255,255,255,.98) 0 48%,rgba(255,255,255,0) 49% 100%);clip-path:polygon(100% 0,0 0,100% 100%);transform-origin:100% 0;opacity:.92;transition:transform .28s cubic-bezier(.16,.82,.16,1)}.note-card:hover .fold,.note-card:focus-visible .fold{transform:translate(-8px,8px) rotate(-12deg) scale(1.12)}.shimmer{position:absolute;inset:-10% 120% -10% -50%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%);transform:skewX(-14deg);pointer-events:none;opacity:0}.note-card:hover .shimmer{animation:shimmer .72s ease-out}@keyframes shimmer{0%{transform:translateX(-4%) skewX(-14deg);opacity:0}18%{opacity:.75}100%{transform:translateX(140%) skewX(-14deg);opacity:0}}
.note-ghost{position:fixed;z-index:155;pointer-events:none;border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 48px rgba(0,0,0,.12);transform-origin:center center;will-change:transform,opacity}
.skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:20px}.skeleton{position:relative;overflow:hidden;height:var(--card-h);border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.028)}.skeleton::after{content:"";position:absolute;inset:0;width:52%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.46),transparent);transform:translate3d(-150%,0,0);will-change:transform;animation:skeletonSweep 1.15s ease-in-out infinite}@keyframes skeletonSweep{to{transform:translate3d(290%,0,0)}}.empty{padding:70px 0;font-family:Georgia,"Times New Roman",serif;font-size:28px}.load-more{display:block;margin:34px auto 0;height:44px;padding:0 24px;border:1px solid #111;background:transparent;cursor:pointer;font-size:9px;letter-spacing:.16em;transition:background .18s,color .18s}.load-more:hover{background:#111;color:#fff}
/* GPU-friendly detail scene */
.detail{position:fixed;inset:0;z-index:160;color:#fff;pointer-events:none;visibility:hidden;transform:translate3d(0,102%,0);transition:transform .62s cubic-bezier(.16,.84,.16,1),visibility 0s linear .62s;background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.075),transparent 18%),radial-gradient(circle at 80% 72%,rgba(255,255,255,.055),transparent 20%),linear-gradient(135deg,var(--deep1),var(--deep2));overflow:hidden;will-change:transform}.detail.open{pointer-events:auto;visibility:visible;transform:translate3d(0,0,0);transition:transform .62s cubic-bezier(.16,.84,.16,1),visibility 0s}.detail::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px;opacity:.14;pointer-events:none}.detail-wipe{position:absolute;inset:-8%;pointer-events:none;opacity:.16;will-change:transform}.detail-wipe.a{background:rgba(255,255,255,.16);transform:translate3d(-120%,0,0) rotate(8deg)}.detail-wipe.b{background:rgba(0,0,0,.18);transform:translate3d(120%,0,0) rotate(-8deg)}.detail.open .detail-wipe.a{animation:wipeA .88s cubic-bezier(.16,.84,.16,1)}.detail.open .detail-wipe.b{animation:wipeB .92s cubic-bezier(.16,.84,.16,1) .05s}@keyframes wipeA{0%{transform:translate3d(-120%,0,0) rotate(8deg)}52%{transform:translate3d(-10%,0,0) rotate(8deg)}100%{transform:translate3d(120%,0,0) rotate(8deg)}}@keyframes wipeB{0%{transform:translate3d(120%,0,0) rotate(-8deg)}52%{transform:translate3d(10%,0,0) rotate(-8deg)}100%{transform:translate3d(-120%,0,0) rotate(-8deg)}}.detail-orbit{position:absolute;right:-7vw;top:8vh;width:31vw;height:31vw;border:1px solid rgba(255,255,255,.22);border-radius:50%;transform:translate3d(40px,-24px,0) scale(.78) rotate(-18deg);opacity:.4;transition:transform .9s cubic-bezier(.12,.82,.16,1),opacity .6s;will-change:transform}.detail.open .detail-orbit{transform:translate3d(0,0,0) scale(1) rotate(0);opacity:1}.detail-plane{position:absolute;left:-8vw;bottom:-16vh;width:36vw;height:36vw;background:rgba(255,255,255,.04);transform:translate3d(-50px,60px,0) rotate(22deg);transition:transform .86s cubic-bezier(.12,.82,.16,1);will-change:transform}.detail.open .detail-plane{transform:translate3d(0,0,0) rotate(22deg)}
.detail-bar{position:absolute;left:0;right:0;top:0;z-index:5;height:68px;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.12)}.detail-bar button{height:44px;border:0;background:transparent;color:#fff;cursor:pointer;font-size:9px;letter-spacing:.16em}.detail-bar button:hover{text-decoration:underline;text-underline-offset:4px}.detail-back{text-align:left;justify-self:start}.detail-actions{justify-self:end;display:flex;gap:6px}.detail-position{font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.72)}
.detail-scroll{position:absolute;inset:68px 0 0;overflow:auto;overscroll-behavior:contain}.detail-inner{position:relative;min-height:calc(100vh - 68px);padding:10vh 7vw 7vh;display:grid;grid-template-columns:.82fr 1.18fr;gap:6vw;align-items:end}.detail-index{align-self:start;font-size:15vw;line-height:.8;font-weight:900;color:rgba(255,255,255,.08);opacity:0;transform:translate3d(-24px,16px,0);transition:transform .58s cubic-bezier(.16,.84,.16,1) .12s,opacity .42s .12s}.detail-content{max-width:760px;opacity:0;transform:translate3d(0,28px,0);transition:transform .58s cubic-bezier(.16,.84,.16,1) .18s,opacity .42s .18s}.detail-neighbors{grid-column:1/-1;margin-top:8vh;border-top:1px solid rgba(255,255,255,.24);display:grid;grid-template-columns:1fr 1fr;opacity:0;transform:translate3d(0,18px,0);transition:transform .5s cubic-bezier(.16,.84,.16,1) .26s,opacity .38s .26s}.detail.open .detail-index,.detail.open .detail-content,.detail.open .detail-neighbors{opacity:1;transform:translate3d(0,0,0)}.detail-kicker{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.7)}.detail h2{margin:15px 0 26px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(52px,6.5vw,96px);font-weight:400;line-height:.92;letter-spacing:-.04em}.detail-body{font-size:18px;line-height:1.95;white-space:pre-wrap;color:rgba(255,255,255,.92);max-width:38ch}.detail-meta{margin-top:36px;padding-top:15px;border-top:1px solid rgba(255,255,255,.22);display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.75)}.detail-meta strong{display:block;color:#fff;font-weight:400;margin-top:6px;font-size:11px;letter-spacing:.08em}.neighbor{min-height:120px;padding:22px 0;border:0;background:transparent;color:#fff;cursor:pointer;text-align:left}.neighbor+.neighbor{border-left:1px solid rgba(255,255,255,.24);padding-left:26px}.neighbor.next{text-align:right}.neighbor small{display:block;font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.58);margin-bottom:10px}.neighbor b{font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:400}.neighbor:disabled{opacity:.25;cursor:default}.detail-loading{opacity:.55}.detail-scan{position:absolute;left:0;right:0;top:68px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);opacity:0;pointer-events:none}.detail.open .detail-scan{animation:panelScan 1.05s ease-out .08s}@keyframes panelScan{0%{transform:translate3d(0,0,0);opacity:0}18%{opacity:.72}100%{transform:translate3d(0,calc(100vh - 68px),0);opacity:0}}

/* v0.162 motion choreography — transform/opacity only */
.detail.open.closing{transform:translate3d(0,104%,0);transition:transform .54s cubic-bezier(.5,0,.9,.3),visibility 0s linear .54s}
.detail.open.closing .detail-orbit{transform:translate3d(60px,-30px,0) scale(.72) rotate(18deg);opacity:0;transition-duration:.42s}
.detail.open.closing .detail-plane{transform:translate3d(-70px,80px,0) rotate(30deg);opacity:0;transition:transform .42s,opacity .28s}
.detail.open.closing .detail-index,.detail.open.closing .detail-content,.detail.open.closing .detail-neighbors{opacity:0;transform:translate3d(0,24px,0);transition-delay:0s;transition-duration:.25s}
.detail.switch-out-next .detail-index,.detail.switch-out-next .detail-content,.detail.switch-out-next .detail-neighbors{transition:none!important;animation:switchOutNext .2s cubic-bezier(.4,0,1,1) forwards}
.detail.switch-out-prev .detail-index,.detail.switch-out-prev .detail-content,.detail.switch-out-prev .detail-neighbors{transition:none!important;animation:switchOutPrev .2s cubic-bezier(.4,0,1,1) forwards}
.detail.switch-in-next .detail-index,.detail.switch-in-next .detail-content,.detail.switch-in-next .detail-neighbors{transition:none!important;animation:switchInNext .38s cubic-bezier(.16,.84,.16,1) forwards}
.detail.switch-in-prev .detail-index,.detail.switch-in-prev .detail-content,.detail.switch-in-prev .detail-neighbors{transition:none!important;animation:switchInPrev .38s cubic-bezier(.16,.84,.16,1) forwards}
@keyframes switchOutNext{to{opacity:0;transform:translate3d(-46px,0,0) scale(.985)}}
@keyframes switchOutPrev{to{opacity:0;transform:translate3d(46px,0,0) scale(.985)}}
@keyframes switchInNext{from{opacity:0;transform:translate3d(54px,0,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes switchInPrev{from{opacity:0;transform:translate3d(-54px,0,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.detail.switch-in-next .detail-orbit{animation:orbitNudgeNext .46s cubic-bezier(.16,.84,.16,1)}
.detail.switch-in-prev .detail-orbit{animation:orbitNudgePrev .46s cubic-bezier(.16,.84,.16,1)}
@keyframes orbitNudgeNext{0%{transform:translate3d(28px,0,0) scale(.95) rotate(5deg)}100%{transform:translate3d(0,0,0) scale(1) rotate(0)}}
@keyframes orbitNudgePrev{0%{transform:translate3d(-28px,0,0) scale(.95) rotate(-5deg)}100%{transform:translate3d(0,0,0) scale(1) rotate(0)}}
.detail-bar .detail-back{position:relative;padding-left:24px;text-decoration:none!important}
.detail-bar .detail-back::before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:#fff;transition:width .22s;transform:translateY(-50%)}
.detail-bar .detail-back::after{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-left:1px solid #fff;border-bottom:1px solid #fff;transform:translateY(-50%) rotate(45deg)}
.detail-bar .detail-back:hover::before{width:19px}
.detail-actions{display:flex;align-items:center;gap:18px}
.detail-actions .keyhint{font-size:8px;letter-spacing:.14em;color:rgba(255,255,255,.46)}

.toast{position:fixed;z-index:220;left:50%;bottom:28px;transform:translate3d(-50%,20px,0);padding:11px 15px;background:#111;color:#fff;font-size:10px;letter-spacing:.08em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate3d(-50%,0,0)}
@media(max-width:1280px){.grid,.skeleton-grid{grid-template-columns:repeat(3,minmax(220px,1fr))}.toolbar-row{grid-template-columns:1fr 1fr}.control.search{grid-column:1/-1}.hero-upper{grid-template-columns:1fr}.geometry-stage{min-height:270px;border-left:0;border-top:1px solid rgba(0,0,0,.1)}.geo-ring{width:310px;height:310px}.hero-stats{grid-template-columns:1fr 1fr}}
@media(max-width:980px){.hero{grid-template-columns:1fr}.hero-side{border-left:0;border-top:1px solid #111;min-height:260px}.hero-date{font-size:16vw;top:5vh}.hero-upper{min-height:auto}.detail-inner{grid-template-columns:1fr;padding-top:7vh}.detail-index{font-size:24vw}.detail-content{max-width:none}.detail-neighbors{margin-top:3vh}}
@media(max-width:760px){.grid,.skeleton-grid{grid-template-columns:1fr 1fr}.toolbar-row{grid-template-columns:1fr}.control.search{grid-column:auto}.section-head .meta{display:none}.topbar{grid-template-columns:1fr auto}.topbar>span:nth-child(2){display:none}.top-actions{grid-column:2}.connection{display:none}.hero-stats{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid,.skeleton-grid{grid-template-columns:1fr}.hero h1{font-size:21vw}.hero-date{font-size:18vw;top:4vh}.focus-outline,.cursor-x,.cursor-y{display:none}.geometry-stage{min-height:240px}.detail-bar{grid-template-columns:1fr auto}.detail-position{display:none}.detail-actions{grid-column:2}.detail-inner{padding:7vh 7vw 5vh}.detail h2{font-size:13vw}.detail-body{font-size:16px}.detail-meta{grid-template-columns:1fr}.detail-neighbors{grid-template-columns:1fr}.neighbor+.neighbor{border-left:0;border-top:1px solid rgba(255,255,255,.24);padding-left:0}.neighbor.next{text-align:left}.toolbar-status{display:block}.toolbar-status span{display:block;margin-top:5px}}
@media(pointer:coarse){.cursor-x,.cursor-y,.focus-outline{display:none}.note-card{transform:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.cursor-x,.cursor-y,.focus-outline{display:none}}

/* v0.165 — line-only crosshair navigation */
@media(pointer:fine){
  body,body *{cursor:none!important}
}
.cursor-x,.cursor-y{z-index:260!important;opacity:.075!important;mix-blend-mode:multiply;transition:opacity .16s,background .18s}
body.line-action .cursor-x,body.line-action .cursor-y{opacity:.18!important}
body.detail-open .cursor-x,body.detail-open .cursor-y{background:#fff!important;opacity:.13!important;mix-blend-mode:screen}
body.detail-open.line-action .cursor-x,body.detail-open.line-action .cursor-y{opacity:.28!important}
.focus-outline{z-index:258!important}
body.detail-open .focus-outline{border-color:rgba(255,255,255,.7)}
.hero h1{font-size:clamp(78px,9.65vw,148px);line-height:.82;letter-spacing:-.072em}
.hero h1 i{margin-left:7.2vw}
.hero-sub{max-width:39ch}
.hero-date{right:2.7vw;top:5.5vh;width:46%;text-align:right;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(34px,4.6vw,70px);line-height:.86;letter-spacing:-.045em;color:rgba(0,0,0,.045);pointer-events:none;user-select:none}
.hero-date small{display:block;margin-top:14px;font-family:Arial,"PingFang SC",sans-serif;font-size:8px;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,0,0,.24)}

.geometry-stage{--stage-accent:#111;min-height:390px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16));}
.geometry-stage::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--stage-accent),transparent);opacity:.09;transform:scaleX(.5);transition:opacity .35s,transform .6s cubic-bezier(.16,.82,.16,1)}
.geometry-stage.note-linked::before{opacity:.34;transform:scaleX(1)}
.geo-ring{width:min(25vw,404px);height:min(25vw,404px);right:-13%;top:5%;border-color:rgba(0,0,0,.52);transition:border-color .3s}
.geometry-stage.note-linked .geo-ring{border-color:var(--stage-accent)}
.geo-ring-secondary{width:min(15vw,236px);height:min(15vw,236px);border:1px solid rgba(0,0,0,.17);border-radius:50%;right:31%;top:36%}
.geo-arc{right:2%;top:7%;width:min(28vw,450px);height:min(28vw,450px);border-radius:50%;border:1px solid transparent;border-top-color:rgba(0,0,0,.24);border-left-color:rgba(0,0,0,.13);transform:rotate(17deg)}
.geo-line-diag{width:44%;height:1px;background:rgba(0,0,0,.36);left:20%;top:59%;transform:rotate(-23deg)}
.geo-line-short{width:24%;height:1px;background:#111;right:9%;bottom:13%}
.stage-node{position:absolute;width:7px;height:7px;border-radius:50%;background:#111;opacity:.82;pointer-events:none;animation:stagePulse 3.6s ease-in-out infinite}
.stage-node.n1{left:26%;top:26%}.stage-node.n2{right:24%;bottom:29%;animation-delay:-1.2s}.stage-node.n3{left:48%;bottom:13%;animation-delay:-2.2s}
@keyframes stagePulse{0%,100%{transform:scale(.72);opacity:.28}50%{transform:scale(1.3);opacity:.82}}
.stage-word{position:absolute;pointer-events:none;font-size:9px;letter-spacing:.22em;color:rgba(0,0,0,.22);will-change:transform;transition:color .28s,opacity .28s}
.stage-word.w1{left:8%;top:17%}.stage-word.w2{right:8%;top:47%}.stage-word.w3{left:32%;bottom:9%}.stage-word.w4{right:34%;top:8%}
.geometry-stage.note-linked .stage-word{color:color-mix(in srgb,var(--stage-accent) 60%,#111 40%)}
.stage-quote{position:absolute;left:8%;bottom:28%;max-width:190px;font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.12;color:rgba(0,0,0,.56);pointer-events:none}
.stage-quote small{display:block;margin-top:8px;font-family:Arial,sans-serif;font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.38)}
.stage-focus{position:absolute;right:8%;bottom:4%;width:43%;padding-top:9px;border-top:1px solid rgba(0,0,0,.18);opacity:.42;transition:opacity .25s,border-color .25s;pointer-events:none}
.stage-focus small{display:block;font-size:7px;letter-spacing:.18em;margin-bottom:6px}.stage-focus b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:16px;font-weight:400;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-focus em{display:block;margin-top:4px;font-style:normal;font-size:7px;letter-spacing:.14em;color:#666}
.geometry-stage.note-linked .stage-focus{opacity:1;border-color:var(--stage-accent)}
.geometry-stage.note-linked .stage-focus em{color:var(--stage-accent)}


/* v0.165 — kinetic cover refinements */
.hero h1 .title-line{display:block;will-change:transform;transition:transform .12s linear}
.hero h1 .title-a{transform:translate3d(calc(var(--hero-x,0) * 1px),calc(var(--hero-y,0) * 1px),0)}
.hero h1 .title-b{transform:translate3d(calc(var(--hero-x,0) * -1.35px),calc(var(--hero-y,0) * -.72px),0)}
.hero-main::after{content:"KEEP / RETURN / TRACE / REMAIN";position:absolute;left:4vw;right:3vw;bottom:2.2vh;font-size:8px;letter-spacing:.42em;color:rgba(0,0,0,.13);white-space:nowrap;overflow:hidden;pointer-events:none;transform:translate3d(calc(var(--hero-x,0) * -.35px),0,0)}
.hero-date{will-change:transform;transform:translate3d(calc(var(--hero-x,0) * -.62px),calc(var(--hero-y,0) * -.45px),0)}
.geometry-stage{--sx:50%;--sy:50%}
.stage-sweep{position:absolute;inset:-20% auto -20% -18%;width:22%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.035),transparent);transform:skewX(-12deg);animation:stageSweep 8.5s ease-in-out infinite;pointer-events:none}
@keyframes stageSweep{0%,18%{transform:translate3d(-20%,0,0) skewX(-12deg);opacity:0}35%{opacity:1}72%{opacity:.35}100%{transform:translate3d(610%,0,0) skewX(-12deg);opacity:0}}
.stage-network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.stage-network path{fill:none;stroke:rgba(0,0,0,.22);stroke-width:.34;vector-effect:non-scaling-stroke;stroke-dasharray:4 9;animation:networkFlow 14s linear infinite;transition:stroke .3s,opacity .3s}
.stage-network path.secondary{opacity:.45;stroke-dasharray:2 12;animation-duration:19s;animation-direction:reverse}
.geometry-stage.note-linked .stage-network path{stroke:var(--stage-accent);opacity:.58}
@keyframes networkFlow{to{stroke-dashoffset:-100}}
.stage-cross-x,.stage-cross-y,.stage-cross-node{position:absolute;pointer-events:none;z-index:7;opacity:0;transition:opacity .18s}
.stage-cross-x{left:0;right:0;top:var(--sy);height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.34),transparent)}
.stage-cross-y{top:0;bottom:0;left:var(--sx);width:1px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.34),transparent)}
.stage-cross-node{left:var(--sx);top:var(--sy);width:8px;height:8px;border:1px solid rgba(0,0,0,.5);border-radius:50%;transform:translate(-50%,-50%)}
.geometry-stage.stage-active .stage-cross-x,.geometry-stage.stage-active .stage-cross-y,.geometry-stage.stage-active .stage-cross-node{opacity:1}
.geometry-stage.note-linked .stage-cross-node{border-color:var(--stage-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--stage-accent) 10%,transparent)}
.stage-word{transition:color .28s,opacity .28s,transform .18s linear!important}
.stage-word.w1{transform:translate3d(calc(var(--stage-x,0) * .55px),calc(var(--stage-y,0) * .28px),0)}
.stage-word.w2{transform:translate3d(calc(var(--stage-x,0) * -.42px),calc(var(--stage-y,0) * .36px),0)}
.stage-word.w3{transform:translate3d(calc(var(--stage-x,0) * .32px),calc(var(--stage-y,0) * -.48px),0)}
.stage-word.w4{transform:translate3d(calc(var(--stage-x,0) * -.28px),calc(var(--stage-y,0) * -.3px),0)}
@media(prefers-reduced-motion:reduce){.stage-sweep,.stage-network path{animation:none!important}.hero h1 .title-line,.hero-date,.stage-word{transform:none!important}}

/* quieter public-facing copy hierarchy */
.statement .curatorial-copy{font-size:12px;line-height:1.95}
.hero-kicker{letter-spacing:.24em}
.section-head .meta{opacity:1;color:#4f4f4f}

@media(max-width:1280px){.geometry-stage{min-height:320px}.stage-quote{bottom:22%}}
@media(max-width:620px){.hero-date{font-size:10vw;width:56%;top:3vh}.stage-word,.stage-node{display:none}.stage-quote{font-size:16px}}


/* v0.166 shared pointer language */
.interaction-locator{position:fixed;left:0;top:0;z-index:268;pointer-events:none;transform:translate3d(-50%,-50%,0);will-change:transform,width,height,opacity;color:#111;mix-blend-mode:multiply}
.interaction-locator .loc-label{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:8px;letter-spacing:.18em;opacity:0;transition:opacity .16s,transform .18s;color:currentColor}
body.locator-action .interaction-locator .loc-label{opacity:.72;transform:translate3d(3px,-50%,0)}
body.detail-open .interaction-locator{color:#fff;mix-blend-mode:screen}
body.detail-open .interaction-locator *{border-color:currentColor!important}
body.detail-open .interaction-locator .loc-label{color:#fff}
.locator-ripple{position:fixed;z-index:267;pointer-events:none;border:1px solid currentColor;border-radius:50%;width:36px;height:36px;transform:translate3d(-50%,-50%,0) scale(.6);opacity:.8;animation:locatorRipple .58s cubic-bezier(.16,.84,.16,1) forwards;mix-blend-mode:multiply}
body.detail-open .locator-ripple{color:#fff;mix-blend-mode:screen}
@keyframes locatorRipple{to{transform:translate3d(-50%,-50%,0) scale(4.2);opacity:0}}
@media(pointer:coarse),(max-width:620px){.interaction-locator{display:none!important}}
@media(prefers-reduced-motion:reduce){.interaction-locator *{animation:none!important}.locator-ripple{display:none!important}}

/* v0.166 — Expanded Archive Radar */
.interaction-locator{width:52px;height:52px}
.radar-ring{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;opacity:.5}.radar-ring::before{content:"";position:absolute;inset:8px;border:1px dashed currentColor;border-radius:50%;opacity:.3;animation:radSpin 10s linear infinite}.radar-sweep{position:absolute;left:50%;top:50%;width:48%;height:1px;background:currentColor;transform-origin:0 50%;opacity:.45;animation:radSpin 3.5s linear infinite}.radar-pip{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%)}.radar-coord{position:absolute;left:calc(100% + 10px);top:calc(50% + 12px);font-size:7px;letter-spacing:.13em;opacity:.72;white-space:nowrap}
body.locator-action .radar-ring{opacity:.95}body.locator-action .radar-ring::before{animation-duration:2s;opacity:.58}.interaction-locator.loc-click .radar-ring{animation:radPulse .46s ease-out}@keyframes radSpin{to{transform:rotate(360deg)}}@keyframes radPulse{50%{transform:scale(1.42);opacity:.3}}
.geometry-stage>.stage-network,.geometry-stage>.stage-cross-x,.geometry-stage>.stage-cross-y,.geometry-stage>.stage-cross-node,.geometry-stage>.geo-ring-secondary,.geometry-stage>.geo-arc,.geometry-stage>.geo-line-diag,.geometry-stage>.geo-line-short,.geometry-stage>.stage-node,.geometry-stage>.stage-word,.geometry-stage>.stage-quote{display:none!important}
.archive-radar{position:absolute;inset:4%;z-index:3;pointer-events:none}.radar-disc{position:absolute;right:5%;top:4%;width:min(28vw,390px);height:min(28vw,390px);border:1px solid rgba(0,0,0,.42);border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 16%,rgba(0,0,0,.07) 16.2% 16.6%,transparent 16.8% 32%)}.radar-disc::before{content:"";position:absolute;left:50%;top:50%;width:48%;height:1px;background:#111;transform-origin:0 50%;opacity:.25;animation:stageRadar 7s linear infinite}.radar-disc::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#111;transform:translate(-50%,-50%)}@keyframes stageRadar{to{transform:rotate(360deg)}}
.rnode{position:absolute;width:7px;height:7px;border:1px solid #111;border-radius:50%;transform:translate(-50%,-50%);transition:transform .18s,background .18s,border-color .18s}.rnode::after{content:attr(data-word);position:absolute;left:10px;top:-4px;font-size:7px;letter-spacing:.14em;opacity:.36;white-space:nowrap}.rnode.active{background:var(--stage-accent,#111);border-color:var(--stage-accent,#111);transform:translate(-50%,-50%) scale(1.65)}.rnode.active::after{opacity:1;color:var(--stage-accent,#111)}
.radar-link{position:absolute;left:50%;top:50%;width:0;height:1px;background:var(--stage-accent,#111);transform-origin:0 50%;opacity:.46;will-change:transform,width}.radar-ping-stage{position:absolute;width:16px;height:16px;border:1px solid var(--stage-accent,#111);border-radius:50%;transform:translate(-50%,-50%);opacity:.3;will-change:left,top}
.radar-readout{position:absolute;left:2%;bottom:2%;max-width:170px}.radar-readout small{font-size:7px;letter-spacing:.18em;opacity:.45}.radar-readout b{display:block;margin-top:7px;font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:400}.radar-readout em{display:block;margin-top:6px;font-style:normal;font-size:8px;letter-spacing:.14em;opacity:.42}



/* v0.166 — radar-only hero: remove prose column and let the interaction become the curatorial statement */
.hero-side{padding:18px 22px 28px}
.hero-upper.radar-only{display:block;min-height:510px}
.radar-stage{min-height:510px;border-left:0;background:transparent;overflow:visible}
.radar-caption{position:absolute;left:1%;right:1%;top:1%;z-index:12;display:flex;justify-content:space-between;gap:16px;font-size:7px;letter-spacing:.2em;color:rgba(0,0,0,.46);pointer-events:none}
.archive-radar{position:absolute;inset:4px 0 0;z-index:4;pointer-events:none}
.radar-disc{right:-7%;top:4%;width:min(42vw,680px);height:min(42vw,680px);border-color:rgba(0,0,0,.48);background:repeating-radial-gradient(circle at 50% 50%,transparent 0 12.3%,rgba(0,0,0,.068) 12.5% 12.75%,transparent 12.95% 25%);overflow:visible;transition:border-color .3s,box-shadow .45s cubic-bezier(.16,.82,.16,1),transform .25s ease-out}
.radar-disc::before{width:50%;opacity:.34;animation-duration:6.4s}
.radar-disc::after{width:5px;height:5px}
.radar-field{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from var(--radar-angle,0deg),transparent 0deg,transparent 320deg,color-mix(in srgb,var(--stage-accent) 14%,transparent) 345deg,color-mix(in srgb,var(--stage-accent) 3%,transparent) 360deg);opacity:.85;transition:background .2s}
.radar-axis{position:absolute;left:50%;top:50%;background:rgba(0,0,0,.1);pointer-events:none}.radar-axis.axis-x{width:100%;height:1px;transform:translate(-50%,-50%)}.radar-axis.axis-y{height:100%;width:1px;transform:translate(-50%,-50%)}
.radar-orbit{position:absolute;border:1px dashed rgba(0,0,0,.14);border-radius:50%;pointer-events:none;will-change:transform}.orbit-a{inset:6%;animation:orbitDrift 24s linear infinite}.orbit-b{inset:20%;border-style:solid;border-color:rgba(0,0,0,.08);animation:orbitDrift 17s linear infinite reverse}@keyframes orbitDrift{to{transform:rotate(360deg)}}
.radar-tick{position:absolute;font-style:normal;font-size:7px;letter-spacing:.16em;opacity:.34;pointer-events:none}.tick-n{left:50%;top:-20px;transform:translateX(-50%)}.tick-s{left:50%;bottom:-20px;transform:translateX(-50%)}.tick-e{right:-18px;top:50%;transform:translateY(-50%)}.tick-w{left:-18px;top:50%;transform:translateY(-50%)}
.rnode{width:8px;height:8px;background:var(--bg);z-index:4}.rnode::before{content:"";position:absolute;inset:-7px;border:1px solid currentColor;border-radius:50%;opacity:.08;transition:transform .25s,opacity .25s}.rnode.active::before{transform:scale(1.45);opacity:.28}.rnode.active{box-shadow:0 0 0 5px color-mix(in srgb,var(--stage-accent) 10%,transparent)}
.radar-link{height:1px;opacity:.58;z-index:2}.radar-ping-stage{width:22px;height:22px;opacity:.5;z-index:5;transition:width .18s,height .18s}.radar-ping-stage::after{content:"";position:absolute;inset:-8px;border:1px solid var(--stage-accent,#111);border-radius:50%;opacity:.16}
.radar-echo-stage{position:absolute;width:20px;height:20px;border:1px solid var(--stage-accent,#111);border-radius:50%;transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none}.radar-echo-stage.fire{animation:radarEcho .8s cubic-bezier(.16,.82,.16,1)}@keyframes radarEcho{0%{opacity:.75;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.4)}}
.radar-readout{left:2%;bottom:4%;max-width:190px;padding-left:11px;border-left:1px solid rgba(0,0,0,.28)}.radar-readout b{font-size:28px;line-height:.95}.radar-readout em{font-size:8px}
.radar-depth{position:absolute;right:3%;bottom:4%;text-align:right;pointer-events:none}.radar-depth small{display:block;font-size:7px;letter-spacing:.18em;opacity:.4}.radar-depth b{display:block;margin-top:5px;font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:400}
.radar-stage .stage-focus{right:28%;bottom:3%;width:34%;z-index:8;opacity:.35}.radar-stage.note-linked .stage-focus{opacity:1}.radar-stage.note-linked .radar-disc{border-color:var(--stage-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--stage-accent) 16%,transparent),0 0 80px color-mix(in srgb,var(--stage-accent) 8%,transparent);animation:radarLock .58s cubic-bezier(.16,.82,.16,1)}@keyframes radarLock{0%{transform:scale(.985)}55%{transform:scale(1.018)}100%{transform:scale(1)}}
.geometry-stage.stage-active .radar-disc{transform:translate3d(calc(var(--radar-dx,0) * 1px),calc(var(--radar-dy,0) * 1px),0)}
.geometry-stage.stage-active .radar-readout,.geometry-stage.stage-active .radar-depth{opacity:1}
@media(max-width:1280px){.hero-upper.radar-only,.radar-stage{min-height:460px}.radar-disc{width:min(44vw,580px);height:min(44vw,580px);right:-8%}}
@media(max-width:980px){.hero-upper.radar-only,.radar-stage{min-height:430px}.radar-disc{width:min(68vw,560px);height:min(68vw,560px);right:-6%;top:4%}.radar-stage .stage-focus{right:2%;bottom:3%;width:42%}}
@media(max-width:620px){.hero-upper.radar-only,.radar-stage{min-height:350px}.radar-disc{width:82vw;height:82vw;right:-21%;top:6%}.radar-caption span:last-child,.radar-depth,.radar-stage .stage-focus{display:none}.radar-readout{bottom:1%}}
@media(prefers-reduced-motion:reduce){.radar-orbit,.radar-echo-stage,.radar-stage.note-linked .radar-disc{animation:none!important}}


/* v0.18 — 1.0 release-candidate composition + continuous radar handoff */
.hero{min-height:76vh}
.hero-main{padding-bottom:3.4vw}
.hero-main .hero-stats{
  position:relative;z-index:4;width:min(88%,760px);margin-top:28px;padding-top:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:transparent
}
.hero-main .hero-stats div{padding-top:10px;border-top:1px solid #111;min-width:0}
.hero-main .hero-stats b{display:block;margin-bottom:6px;font-size:7px;letter-spacing:.15em;white-space:nowrap}
.hero-main .hero-stats span{font-family:Georgia,"Times New Roman",serif;font-size:22px}
.hero-side{display:block;padding:14px 18px 18px}
.hero-upper.radar-only{height:100%;min-height:calc(76vh - 34px)}
.radar-stage{height:100%;min-height:calc(76vh - 34px)}
.radar-disc{
  width:min(52vw,800px);height:min(52vw,800px);right:-16%;top:-5%;
  border-color:rgba(0,0,0,.5)
}
.archive-radar{inset:0}
.radar-caption{top:8px;left:8px;right:8px}
.radar-readout{left:2%;bottom:4.5%}
.radar-depth{right:2%;bottom:4.5%}
.radar-stage .stage-focus{
  right:23%;bottom:3.8%;width:38%;padding-top:10px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg) 88%,transparent) 14%,color-mix(in srgb,var(--bg) 88%,transparent) 86%,transparent)
}
.radar-stage.note-linked .stage-focus{transform:translate3d(0,-2px,0)}
.radar-stage.handoff-active .radar-disc{
  animation:radarCommit .46s cubic-bezier(.16,.82,.16,1)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--stage-accent) 24%,transparent),0 0 95px color-mix(in srgb,var(--stage-accent) 13%,transparent)
}
.radar-stage.return-pulse .radar-disc{animation:radarReturn .58s cubic-bezier(.16,.82,.16,1)!important}
@keyframes radarCommit{0%{transform:scale(1)}42%{transform:scale(1.026)}100%{transform:scale(.995)}}
@keyframes radarReturn{0%{transform:scale(.98);opacity:.72}55%{transform:scale(1.018);opacity:1}100%{transform:scale(1);opacity:1}}
.radar-ping-stage.locked{width:30px;height:30px;box-shadow:0 0 0 8px color-mix(in srgb,var(--stage-accent) 10%,transparent)}
.radar-ping-stage.locked::after{opacity:.34;animation:lockHalo 1.25s ease-out infinite}
@keyframes lockHalo{0%{transform:scale(.65);opacity:.42}100%{transform:scale(2.1);opacity:0}}
.radar-disc.lock-confirm::after{animation:centerConfirm .5s ease-out}
@keyframes centerConfirm{0%{box-shadow:0 0 0 0 var(--stage-accent)}100%{box-shadow:0 0 0 22px transparent}}

.radar-handoff{
  position:fixed;inset:0;z-index:159;pointer-events:none;opacity:0;visibility:hidden;
  --hx1:50vw;--hy1:50vh;--hx2:50vw;--hy2:50vh;--hlen:0px;--hang:0deg;--hc:#111
}
.radar-handoff.active{opacity:1;visibility:visible}
.handoff-line{
  position:absolute;left:var(--hx1);top:var(--hy1);width:var(--hlen);height:1px;
  background:linear-gradient(90deg,var(--hc),color-mix(in srgb,var(--hc) 40%,transparent));
  transform-origin:0 50%;transform:rotate(var(--hang)) scaleX(0);opacity:.75
}
.radar-handoff.active .handoff-line{animation:handoffLine .38s cubic-bezier(.16,.82,.16,1) forwards}
.handoff-source,.handoff-target{
  position:absolute;width:18px;height:18px;border:1px solid var(--hc);border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);opacity:0
}
.handoff-source{left:var(--hx1);top:var(--hy1)}
.handoff-target{left:var(--hx2);top:var(--hy2)}
.radar-handoff.active .handoff-source{animation:handoffSource .5s ease-out forwards}
.radar-handoff.active .handoff-target{animation:handoffTarget .55s ease-out .06s forwards}
.handoff-ghost{
  position:absolute;left:var(--hx2);top:var(--hy2);width:28px;height:28px;background:var(--hc);
  transform:translate(-50%,-50%) scale(.3);opacity:0;box-shadow:0 10px 34px color-mix(in srgb,var(--hc) 26%,transparent)
}
.radar-handoff.active .handoff-ghost{animation:handoffGhost .44s cubic-bezier(.16,.84,.16,1) .08s forwards}
.handoff-label{
  position:absolute;left:var(--hx1);top:calc(var(--hy1) + 22px);transform:translateX(-50%);
  font-size:7px;letter-spacing:.18em;color:var(--hc);opacity:0;white-space:nowrap
}
.radar-handoff.active .handoff-label{animation:handoffLabel .46s ease-out forwards}
@keyframes handoffLine{0%{transform:rotate(var(--hang)) scaleX(0);opacity:.15}100%{transform:rotate(var(--hang)) scaleX(1);opacity:.7}}
@keyframes handoffSource{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}38%{opacity:.9}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
@keyframes handoffTarget{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}45%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1.35);opacity:.3}}
@keyframes handoffGhost{
  0%{left:var(--hx2);top:var(--hy2);transform:translate(-50%,-50%) scale(.3);opacity:0}
  18%{opacity:.84;transform:translate(-50%,-50%) scale(.72)}
  100%{left:var(--hx1);top:var(--hy1);transform:translate(-50%,-50%) scale(.12);opacity:0}
}
@keyframes handoffLabel{0%{transform:translate(-50%,6px);opacity:0}35%{opacity:.72}100%{transform:translate(-50%,0);opacity:.28}}

.detail.from-radar{
  transform:translate3d(4vw,-1.5vh,0) scale(.982);opacity:0;
  transition:transform .58s cubic-bezier(.16,.84,.16,1),opacity .46s ease,visibility 0s
}
.detail.from-radar.open{transform:translate3d(0,0,0) scale(1);opacity:1}
.detail.open.closing{
  transform:translate3d(4vw,-2vh,0) scale(.972);opacity:0;
  transition:transform .48s cubic-bezier(.5,0,.9,.3),opacity .36s ease,visibility 0s linear .48s
}
.detail.open.closing .detail-orbit{
  transform:translate3d(9vw,-4vh,0) scale(.42) rotate(22deg);opacity:0;transition-duration:.42s
}
.detail.open.closing .detail-plane{transform:translate3d(-50px,40px,0) scale(.9) rotate(30deg);opacity:0}
.detail.open .detail-orbit{transform-origin:78% 22%}

.note-card{content-visibility:auto;contain-intrinsic-size:auto var(--card-h)}
body.page-hidden .radar-disc::before,
body.page-hidden .radar-orbit,
body.page-hidden .radar-ping-stage::after{animation-play-state:paused!important}

@media(max-width:1280px){
  .hero-main .hero-stats{grid-template-columns:repeat(2,1fr);width:min(78%,520px)}
  .hero-upper.radar-only,.radar-stage{min-height:520px}
  .radar-disc{width:min(58vw,680px);height:min(58vw,680px);right:-18%;top:-2%}
}
@media(max-width:980px){
  .hero-main .hero-stats{width:100%;max-width:620px}
  .hero-upper.radar-only,.radar-stage{min-height:500px}
  .radar-disc{width:min(82vw,660px);height:min(82vw,660px);right:-12%}
}
@media(max-width:620px){
  .hero-main .hero-stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .hero-main .hero-stats span{font-size:20px}
  .radar-disc{width:100vw;height:100vw;right:-33%;top:3%}
  .radar-handoff{display:none}
}
@media(prefers-reduced-motion:reduce){
  .radar-handoff{display:none!important}
  .radar-ping-stage.locked::after{animation:none!important}
}


/* v0.18 — immediate return / zero-perceived-delay close pass */
.detail.open.closing{
  transform:translate3d(2.4vw,-1vh,0) scale(.988);
  opacity:0;
  transition:
    transform .34s cubic-bezier(.22,.72,.24,1),
    opacity .26s ease,
    visibility 0s linear .34s;
  pointer-events:none;
}
.detail.open.closing .detail-index,
.detail.open.closing .detail-content,
.detail.open.closing .detail-neighbors{
  opacity:0;
  transform:translate3d(0,12px,0);
  transition:
    transform .20s cubic-bezier(.22,.72,.24,1),
    opacity .16s ease;
  transition-delay:0s;
}
.detail.open.closing .detail-orbit{
  transform:translate3d(5vw,-2vh,0) scale(.82) rotate(11deg);
  opacity:.12;
  transition:
    transform .30s cubic-bezier(.22,.72,.24,1),
    opacity .22s ease;
}
.detail.open.closing .detail-plane{
  transform:translate3d(-28px,34px,0) scale(.94) rotate(26deg);
  opacity:0;
  transition:
    transform .28s cubic-bezier(.22,.72,.24,1),
    opacity .18s ease;
}
.detail.open.closing .detail-wipe{animation:none!important}
.detail.returning-fast .detail-scan{opacity:0!important;transition:opacity .12s ease}
@media(prefers-reduced-motion:reduce){
  .detail.open.closing{transition-duration:.01ms!important}
}


/* v0.18 — seamless color-layer return
   Fixes the second visible retreat caused by removing .open/.closing together. */
.detail{
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,102%,0);
  transition:
    transform .58s cubic-bezier(.16,.84,.16,1),
    opacity .20s ease,
    visibility 0s linear .58s;
}
.detail.open{
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0);
  transition:
    transform .58s cubic-bezier(.16,.84,.16,1),
    opacity .24s ease,
    visibility 0s;
}
.detail.open.closing{
  opacity:0;
  transform:translate3d(1.5vw,-.6vh,0) scale(.992);
  visibility:visible;
  transition:
    transform .30s cubic-bezier(.22,.72,.24,1),
    opacity .20s cubic-bezier(.22,.72,.24,1),
    visibility 0s linear .30s;
}
.detail.open.closing .detail-index,
.detail.open.closing .detail-content,
.detail.open.closing .detail-neighbors{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:transform .16s cubic-bezier(.22,.72,.24,1),opacity .12s ease;
  transition-delay:0s;
}
.detail.open.closing .detail-orbit{
  transform:translate3d(4vw,-1.2vh,0) scale(.88) rotate(8deg);
  opacity:.08;
  transition:transform .24s cubic-bezier(.22,.72,.24,1),opacity .16s ease;
}
.detail.open.closing .detail-plane{
  transform:translate3d(-18px,24px,0) scale(.96) rotate(24deg);
  opacity:0;
  transition:transform .22s cubic-bezier(.22,.72,.24,1),opacity .14s ease;
}
.detail.open.closing .detail-wipe,
.detail.open.closing .detail-scan{animation:none!important;opacity:0!important}

/* During the DOM reset the whole detail layer is forced invisible and non-animating.
   This prevents the colored background from doing a second "drop" after the wall is visible. */
.detail.resetting{
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,102%,0)!important;
  transition:none!important;
  pointer-events:none!important;
}
.detail.resetting *{
  transition:none!important;
  animation:none!important;
}

.return-flash{
  position:fixed;inset:0;z-index:159;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
    color-mix(in srgb,var(--return-color,#fff) 16%,transparent) 0 7%,
    transparent 18%);
}
.return-flash.run{animation:returnFlash .30s ease-out}
@keyframes returnFlash{
  0%{opacity:0;transform:scale(.985)}
  30%{opacity:.62}
  100%{opacity:0;transform:scale(1.02)}
}


/* v0.18 — detail page composition repair */
.detail-inner{
  min-height:calc(100vh - 68px);
  padding:8vh 6vw 6vh;
  display:grid;
  grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);
  gap:4.5vw;
  align-items:center;
}
.detail-index{
  min-width:0;
  align-self:center;
  justify-self:start;
  width:min(34vw,520px);
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:clamp(120px,18vw,300px);
  line-height:.72;
  letter-spacing:-.075em;
  font-weight:800;
  color:rgba(255,255,255,.075);
  white-space:nowrap;
  overflow:hidden;
  user-select:none;
}
.detail-content{
  min-width:0;
  width:min(100%,680px);
  max-width:680px;
  justify-self:start;
  align-self:center;
  padding-right:1vw;
}
.detail-kicker{margin-bottom:12px}
.detail h2{
  max-width:11ch;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:clamp(48px,5.3vw,82px);
  line-height:.98;
}
.detail-body{
  max-width:34ch;
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.92;
}
.detail-meta{
  max-width:620px;
}
.detail-neighbors{
  grid-column:1/-1;
  margin-top:5vh;
}

/* subtle guide: makes the reading column feel deliberately anchored */
.detail-content::before{
  content:"";
  display:block;
  width:46px;
  height:1px;
  background:rgba(255,255,255,.45);
  margin-bottom:20px;
}

/* prevent decorative geometry from competing with text */
.detail-orbit{opacity:.52}
.detail-plane{opacity:.5}

@media(max-width:1180px){
  .detail-inner{
    grid-template-columns:minmax(180px,.58fr) minmax(0,1.42fr);
    gap:3vw;
    padding-left:5vw;
    padding-right:5vw;
  }
  .detail-index{font-size:clamp(110px,15vw,220px);width:min(28vw,360px)}
  .detail-content{width:min(100%,640px)}
}
@media(max-width:900px){
  .detail-inner{
    grid-template-columns:1fr;
    align-items:start;
    padding:5vh 7vw 5vh;
  }
  .detail-index{
    font-size:clamp(86px,22vw,160px);
    width:auto;
    margin-bottom:2vh;
  }
  .detail-content{max-width:none;width:100%}
  .detail h2{max-width:14ch}
  .detail-neighbors{margin-top:3vh}
}


/* v0.18 — previous / next alignment repair
   Both navigation cells now share the same exact geometry regardless of title length. */
.detail-neighbors{
  grid-column:1/-1;
  margin-top:5vh;
  border-top:1px solid rgba(255,255,255,.24);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
.neighbor{
  position:relative;
  min-width:0;
  height:154px;
  min-height:154px;
  padding:22px 0 20px;
  margin:0;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  text-align:left;
  display:grid;
  grid-template-rows:18px 1fr;
  align-items:start;
  align-content:start;
}
.neighbor + .neighbor{
  border-left:1px solid rgba(255,255,255,.24);
  padding-left:26px;
}
.neighbor.next{
  text-align:right;
  padding-right:0;
}
.neighbor small{
  display:block;
  height:18px;
  margin:0;
  font-size:8px;
  line-height:18px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.58);
}
.neighbor b{
  display:block;
  align-self:start;
  margin-top:10px;
  min-width:0;
  max-width:min(100%,22ch);
  font-family:Georgia,"Songti SC","Noto Serif SC","Times New Roman",serif;
  font-size:clamp(22px,1.8vw,28px);
  font-weight:400;
  line-height:1.14;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.neighbor.next b{
  justify-self:end;
}
.neighbor:disabled{
  opacity:.22;
}
.neighbor::after{
  content:"";
  position:absolute;
  bottom:18px;
  width:34px;
  height:1px;
  background:currentColor;
  opacity:.35;
  transition:width .22s ease,opacity .22s ease;
}
.neighbor:first-child::after{left:0}
.neighbor.next::after{right:0}
.neighbor:not(:disabled):hover::after{
  width:64px;
  opacity:.8;
}
@media(max-width:620px){
  .detail-neighbors{grid-template-columns:1fr}
  .neighbor{
    height:auto;
    min-height:122px;
    grid-template-rows:18px auto;
  }
  .neighbor + .neighbor{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.24);
    padding-left:0;
  }
  .neighbor.next{text-align:left}
  .neighbor.next b{justify-self:start}
  .neighbor.next::after{left:0;right:auto}
}


/* v0.18 — release hardening */
.skip-link{position:fixed;left:12px;top:10px;z-index:9999;padding:9px 12px;background:#111;color:#fff;text-decoration:none;transform:translateY(-160%);transition:transform .16s ease;font-size:11px;letter-spacing:.08em}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.note-card:focus-visible{outline:2px solid #111;outline-offset:4px}
.detail button:focus-visible{outline-color:#fff}
button,input,select,a{touch-action:manipulation}
.note-card.touch-press{transform:translate3d(0,-4px,0) scale(.992)!important;box-shadow:0 18px 40px rgba(0,0,0,.12)}
.state-panel{max-width:720px;padding:46px 0 22px;border-top:1px solid #111;font-family:Georgia,"Times New Roman",serif}
.state-panel .state-code{font:700 11px/1 Arial,sans-serif;letter-spacing:.18em;margin-bottom:14px}
.state-panel h2{font-size:clamp(34px,4vw,58px);font-weight:400;line-height:.98;margin:0 0 16px}
.state-panel p{max-width:44ch;font:13px/1.8 Arial,"PingFang SC",sans-serif;color:#555}
.inline-retry{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:16px;padding:0 15px;border:1px solid currentColor;background:transparent;letter-spacing:.1em;font-size:9px;cursor:pointer}
.inline-retry:hover{background:#111;color:#fff}
.detail .inline-retry:hover{background:#fff;color:#111}
.network-banner{position:fixed;left:50%;bottom:18px;z-index:200;transform:translate(-50%,140%);background:#111;color:#fff;border:1px solid #fff;padding:10px 14px;font-size:9px;letter-spacing:.12em;transition:transform .24s cubic-bezier(.16,.82,.16,1)}
.network-banner.show{transform:translate(-50%,0)}
.site-footer{position:relative;z-index:2;border-top:1px solid #111;padding:20px 4vw 26px;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:end;font-size:8px;letter-spacing:.16em;color:#555}
.site-footer .center{text-align:center}.site-footer .right{text-align:right}
.site-footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}.site-footer a:hover{border-bottom-color:currentColor}
.detail-error{max-width:40ch}.detail-error .inline-retry{border-color:rgba(255,255,255,.6);color:#fff}
@media(pointer:coarse){
  .note-card{min-height:252px}
  .note-card:hover .shimmer{animation:none}
  .note-card:hover .fold{transform:none}
  .note-card:active{transform:translate3d(0,-3px,0) scale(.992)}
  .chip,.reset,.load-more,.neighbor,.detail-back,.detail-actions button{min-height:44px}
}
@media(max-width:760px){
  .hero{min-height:auto}
  .hero-main{min-height:72svh;padding:12vh 6vw 7vh}
  .hero-side{min-height:52svh}
  .toolbar{padding:16px 5vw}
  .collection{padding-left:5vw;padding-right:5vw}
  .site-footer{grid-template-columns:1fr;gap:8px}
  .site-footer .center,.site-footer .right{text-align:left}
}
@media(max-width:620px){
  .topbar{height:54px;padding:0 14px}
  .top-actions{gap:10px}
  .admin-top{font-size:8px}
  .hero-main h1{max-width:96vw}
  .hero-sub{font-size:12px}
  .hero-main .hero-stats{grid-template-columns:1fr 1fr}
  .note-card{height:220px}
  .detail-bar{height:62px;padding:0 14px}
  .detail-scroll{inset:62px 0 0}
  .detail-inner{min-height:calc(100svh - 62px)}
  .detail-actions .keyhint{display:none}
}