/* Horizon controls: open light rails, quiet glass and a single active signal.
   Scene positioning and projective/solar entrance transforms stay upstream. */
:root {
  --control-cyan:#a8e8eb; --control-violet:#e1b3eb; --control-edge:#acd2e12e;
  --control-ink:#071221cc; --control-ease:cubic-bezier(.18,.78,.22,1);
  --control-wash:linear-gradient(180deg,#a1e6ed02,#a1e6ed0c);
}
:is(.hud-chip,#projectPortal button,#projectPortal .project-info-link,#projectPortal .project-external,#portfolioCategory button,#portfolioVisit,#bootRetry,#reader .cn-send,#aboutPanel .ap-links a,#tvMode button,#space .post-status-back) {
  appearance:none; box-sizing:border-box; border:0; border-bottom:1px solid var(--control-edge);
  border-radius:0; clip-path:none; background:var(--control-wash); color:#aec7d5; box-shadow:none;
  font:12px/1.5 'Microsoft YaHei','PingFang SC',sans-serif; letter-spacing:.06em; cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:color .3s var(--control-ease),border-color .35s var(--control-ease),background-color .35s var(--control-ease),box-shadow .4s var(--control-ease);
}
:is(.hud-chip,#projectPortal button,#projectPortal .project-info-link,#projectPortal .project-external,#portfolioCategory button,#portfolioVisit,#bootRetry,#reader .cn-send,#aboutPanel .ap-links a,#tvMode button,#space .post-status-back):hover {
  color:#eefbfc; border-color:var(--control-cyan); background-color:#a8e8eb08; box-shadow:0 5px 16px -12px #a8e8eb90;
}
:is(.hud-chip,#projectPortal button,#projectPortal a,#portfolioCategory button,#portfolioVisit,#bootRetry,#reader .cn-send,#aboutPanel .ap-links a,#tvMode button,.portfolioNav,#space .post-status-back):focus-visible { outline:2px solid var(--control-cyan); outline-offset:3px; }
:is(.hud-chip,#projectPortal button,#portfolioCategory button,#bootRetry,#reader .cn-send,#tvMode button):active { color:var(--control-violet); border-color:var(--control-violet); }
:is(#projectPortal button,#portfolioCategory button,#bootRetry,#reader .cn-send):disabled { opacity:.4; cursor:not-allowed; }
/* Return is an open direction marker, not another framed utility rectangle. */
.hud-chip { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 14px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); overflow:visible; }
.hud-chip::before { content:''; position:absolute; inset:auto 0 -1px; height:1px; background:linear-gradient(90deg,var(--control-cyan),#a8e8eb26 65%,transparent); opacity:.5; transform:none; pointer-events:none; }
.hud-chip::after { content:none; animation:none; }
.hud-chip .hc-ico { width:18px; height:18px; color:var(--control-cyan); opacity:1; transition:transform .35s var(--control-ease); }
.hud-chip .hc-key { border:0; background:none; padding:0; margin-left:8px; color:#6f8da1; font:8px 'Orbitron',Consolas,monospace; letter-spacing:.06em; }
.hud-chip:hover .hc-ico { transform:translateX(-3px); }
.hud-chip:active { transform:none; }
#aboutReturn.hud-chip,#worksBack.hud-chip {
  position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(24px,env(safe-area-inset-right)); left:auto; bottom:auto; z-index:2800;
  max-width:calc(100vw - 32px); min-height:44px; padding:8px 12px; border:0; border-bottom:1px solid var(--control-edge);
  background:linear-gradient(90deg,#08142585,#08142508); color:#c7dfe7; box-shadow:none;
}
#aboutReturn.hud-chip:hover,#worksBack.hud-chip:hover { color:#f0fbff; border-color:var(--control-cyan); background:linear-gradient(90deg,#12273b85,#12273b08); }
/* Categories and window tabs form a navigation rail, with one lit address. */
#portfolioCategory { gap:8px; margin-top:10px; }
#portfolioCategory button,#projectPortal .project-tabs button { min-height:40px; padding:8px 18px; border:0; background:none; color:#8198ae; box-shadow:none; }
#portfolioCategory button::after,#projectPortal .project-tabs button::after {
  content:''; position:absolute; bottom:0; left:18px; right:18px; height:1px;
  background:linear-gradient(90deg,var(--control-cyan),var(--control-violet)); transform:scaleX(.18); opacity:0;
  transition:transform .45s var(--control-ease),opacity .35s var(--control-ease); pointer-events:none;
}
#portfolioCategory button:hover,#projectPortal .project-tabs button:hover { color:#dbe8f1; box-shadow:none; background:#b8dce404; }
#portfolioCategory button[aria-pressed=true],#projectPortal .project-tabs button[aria-pressed=true] { color:#d9f2f4; border:0; background:none; box-shadow:none; }
#portfolioCategory button[aria-pressed=true]::after,#projectPortal .project-tabs button[aria-pressed=true]::after { opacity:.9; transform:scaleX(1); }
/* Unboxed direction controls leave the cover flow visually continuous. */
#portfolioStage .portfolioNav {
  appearance:none; box-sizing:border-box; display:grid; place-items:center; top:var(--works-nav-y,calc(50% - 32px)); width:56px; height:92px; padding:0;
  border:0; border-radius:0; clip-path:none; background:none; box-shadow:none; color:#a7ccd6; font:300 48px/1 system-ui,sans-serif;
  backdrop-filter:none; -webkit-backdrop-filter:none; touch-action:manipulation;
  transition:color .3s var(--control-ease),text-shadow .4s var(--control-ease);
}
.portfolioNav::before { content:none; }
.portfolioNav svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.portfolioNav::after { content:''; position:absolute; bottom:13px; left:18px; right:18px; height:1px; background:var(--control-cyan); opacity:.25; transition:transform .35s var(--control-ease),opacity .35s var(--control-ease); pointer-events:none; }
#portfolioStage .portfolioNav:hover { color:#e2faff; background:none; box-shadow:none; text-shadow:0 0 18px #9ddfe455; }
.portfolioNav:hover::after { transform:scaleX(1.6); opacity:.8; }
#portfolioPrev { left:20px; } #portfolioNext { right:20px; }
#portfolioVisit { min-height:32px; padding:5px 16px; margin:0; color:#abcfd8; font-size:11px; }
#projectPortal .project-close { min-width:86px; padding:8px 13px; background:linear-gradient(90deg,#a8e8eb0a,transparent); color:#cae1e9; }
#projectPortal .project-info-link { color:#c4e7ed; }
#reader .rd-bar { min-width:0; box-sizing:border-box; }
#reader .rd-file { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#reader #rdClose { flex:0 0 auto; min-height:44px; max-width:min(48vw,180px); }
#reader .cn-send,#bootRetry,#space .post-status-back { min-height:44px; padding:10px 24px; color:#c8edf0; border-bottom-color:#9eddde8c; background:linear-gradient(110deg,#83ced516,#ba83d211); }
#aboutPanel .ap-links a { min-height:44px; display:inline-flex; align-items:center; padding:10px 18px; transform:none; }
#aboutPanel .ap-links a:hover { border-color:var(--control-cyan); color:#f0fbff; background:var(--control-wash); box-shadow:0 5px 16px -12px #a8e8eb90; transform:none; }
:is(#reader .cn-in,#reader .cn-area) { box-sizing:border-box; min-width:0; border:0; border-bottom:1px solid var(--control-edge); border-radius:0; background:#09142688; color:#dce8ef; caret-color:var(--control-cyan); font:12px/1.7 'Microsoft YaHei',sans-serif; transition:border-color .3s var(--control-ease),background-color .3s var(--control-ease); }
:is(#reader .cn-in,#reader .cn-area):focus { outline:none; border-color:var(--control-cyan); background:#0c1c3088; box-shadow:0 5px 16px -12px #a8e8eb90; }
:is(#reader .cn-in,#reader .cn-area)::placeholder { color:#6f8da1; }
/* Solar addresses become light shelves. Preserve launch clipping and timing. */
#hero .home-gateway::before { border:0; border-radius:0; background:linear-gradient(120deg,#061126b8,#09192e48 60%,#09192e10); box-shadow:0 16px 22px -18px #000a; backdrop-filter:blur(10px) saturate(.9); -webkit-backdrop-filter:blur(10px) saturate(.9); }
#hero .home-gateway:not(.solar-launching)::before { clip-path:none; border-bottom:1px solid #b3d6e236; }
#hero .home-gateway::after { width:auto; height:1px; left:14px; right:14px; top:auto; bottom:0; background:linear-gradient(90deg,var(--gateway-accent),transparent); box-shadow:0 2px 10px var(--gateway-accent); transform:scaleX(.35); transform-origin:left; opacity:.4; }
#hero .home-gateway.solar-inward-right::after { background:linear-gradient(90deg,transparent,var(--gateway-accent)); transform-origin:right; }
#hero .home-gateway:not(.solar-launching):is(:hover,:focus-visible)::before { transform:translateY(-2px); border-bottom-color:var(--gateway-accent); box-shadow:0 14px 22px -18px #accddb55; background:linear-gradient(120deg,#0d2135c0,#10243b66 60%,#10243b18); }
#hero .home-gateway:not(.solar-launching):is(:hover,:focus-visible)::after { transform:scaleX(1); opacity:.8; }
#hero .home-gateway.solar-launching::after { opacity:calc(.4 * var(--launch-surface,0)); }
#hero .home-gateway:focus-visible { outline:2px solid var(--gateway-accent); outline-offset:4px; border-radius:0; }
/* Stable editorial bands: changing text/links cannot change the camera shot. */
#portfolioStage .portfolio-topline { display:grid; grid-template-columns:1fr 1fr; align-items:start; top:70px; left:max(24px,env(safe-area-inset-left)); right:max(24px,env(safe-area-inset-right)); }
#portfolioStage .portfolio-topline>span { min-width:0; }
#portfolioDetail { box-sizing:border-box; width:min(520px,calc(100% - 120px)); max-width:none; height:170px; bottom:max(32px,calc(env(safe-area-inset-bottom) + 24px)); padding:9px 12px; display:grid; grid-template-rows:10px 56px 36px 32px; align-items:center; justify-items:center; row-gap:6px; background:radial-gradient(ellipse,#06102160,transparent 72%); }
#portfolioDetail::before { content:none; }
#portfolioTitle { margin:0; max-width:100%; line-height:1.35; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#portfolioDescription { margin:0; max-width:100%; line-height:1.5; overflow-wrap:anywhere; }
#portfolioVisit { grid-row:4; }
#portfolioCover { display:none!important; }
body.works-active #scene { touch-action:none; }
.portfolioHint { font-size:9px; letter-spacing:.12em; bottom:14px; }
@media(max-width:767px) {
  #aboutReturn.hud-chip,#worksBack.hud-chip { right:max(16px,env(safe-area-inset-right)); top:max(10px,env(safe-area-inset-top)); }
  #portfolioStage .portfolio-topline { top:66px; left:16px; right:16px; font-size:9px; }
  #portfolioCategory { gap:0; margin-top:8px; }
  #portfolioCategory button { min-height:40px; padding:8px 10px; font-size:10px; }
  #portfolioCategory button::after { left:10px; right:10px; }
  #portfolioStage .portfolioNav { width:44px; height:72px; top:var(--works-nav-y,calc(50% - 36px)); font-size:40px; }
  #portfolioPrev { left:4px; } #portfolioNext { right:4px; }
  #portfolioDetail { width:calc(100% - 32px); height:160px; bottom:max(30px,calc(env(safe-area-inset-bottom) + 22px)); padding:6px 8px; grid-template-rows:10px 48px 36px 32px; row-gap:6px; }
  #portfolioTitle { font-size:17px; letter-spacing:.025em; }
  #portfolioDescription { font-size:11px; }
  .portfolioHint { font-size:8px; letter-spacing:.06em; bottom:12px; }
  #reader .cn-form .cn-row { display:flex; flex-wrap:wrap; } #reader .cn-in { flex:1 1 180px; }
}
@media(max-height:600px) {
  #portfolioStage .portfolio-topline { top:54px; left:16px; right:16px; font-size:8px; }
  #portfolioCategory { margin-top:4px; }
  #portfolioCategory button { min-height:40px; padding:5px 12px; }
  #portfolioDetail { height:72px; bottom:14px; padding:4px 8px; grid-template-rows:28px 32px; row-gap:4px; }
  #portfolioDetail::before,.portfolio-detail-kicker,#portfolioDescription,.portfolioHint { display:none; }
  #portfolioTitle { grid-row:1; font-size:15px; -webkit-line-clamp:1; }
  #portfolioVisit { grid-row:2; }
}
@media(max-width:460px) { #reader .rd-bar { padding:10px 12px; } #reader #rdClose .hc-key { display:none; } }
/* Resolve controls with the camera, including the interrupted return shot. */
#worksBack.hud-chip.show { animation:none; opacity:calc(var(--works-back,0) * var(--works-gallery,1)); transform:translateY(calc((1 - var(--works-back,0)) * -6px)); }
#worksBack.hud-chip.leaving { animation:none; }
#portfolioStage .portfolio-topline { opacity:calc(var(--works-top,0) * var(--works-gallery,1)); transform:translateY(calc((1 - var(--works-top,0)) * -8px)); }
#portfolioStage .portfolioNav { opacity:calc(var(--works-nav,0) * var(--works-gallery,1)); }
#portfolioStage #portfolioDetail { opacity:calc(var(--works-detail,0) * var(--works-gallery,1)); transform:translate(-50%,calc((1 - var(--works-detail,0)) * 8px)); }
#portfolioStage .portfolioHint { opacity:calc(var(--works-detail,0) * var(--works-gallery,1)); }
#portfolioRail:focus { outline:none; }
@media(prefers-reduced-motion:reduce) {
  :is(.hud-chip,.hud-chip .hc-ico,#projectPortal button,#portfolioCategory button,#portfolioVisit,#portfolioStage .portfolioNav,#reader input,#reader textarea,#reader .cn-send,#aboutPanel .ap-links a,#hero .home-gateway)::after,
  :is(.hud-chip,.hud-chip .hc-ico,#projectPortal button,#portfolioCategory button,#portfolioVisit,#portfolioStage .portfolioNav,#reader input,#reader textarea,#reader .cn-send,#aboutPanel .ap-links a,#hero .home-gateway)::before,
  :is(.hud-chip,.hud-chip .hc-ico,#projectPortal button,#portfolioCategory button,#portfolioVisit,#portfolioStage .portfolioNav,#reader input,#reader textarea,#reader .cn-send,#aboutPanel .ap-links a) { transition-duration:.01ms; }
}