:root {
  --pink: #ff77bc;
  --mint: #63f1c3;
  --gold: #ffc86b;
  --blue: #74a8ff;
  --acrylic: rgba(17, 24, 43, .62);
  --acrylic-strong: rgba(20, 28, 51, .82);
  --glass-line: rgba(210, 230, 255, .16);
}
html {
  height: 100%;
}
body {
  --studio-bg-x: 0px;
  --studio-bg-y: 0px;
  position: relative;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  background: #070a13;
}
/* 背景必须是独立层，不能用 body 伪元素负 z-index。
   iOS Safari 会把 isolation + z-index:-1 的伪元素画在整页内容之上，只剩背景图。 */
#studioBackdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #070a13;
}
#studioBackdrop::before {
  content: "";
  position: absolute;
  inset: -30px;
  background:
    linear-gradient(90deg, rgba(4, 8, 20, .66) 0%, rgba(6, 12, 28, .48) 29%, rgba(5, 11, 27, .18) 66%, rgba(3, 8, 19, .32) 100%),
    linear-gradient(0deg, rgba(5, 9, 21, .56) 0%, rgba(5, 10, 24, .05) 48%, rgba(4, 8, 18, .24) 100%),
    image-set(url('/studio/assets/studio-starlit-meadow-v1.webp?v=20260816b') type('image/webp'), url('/studio/assets/studio-starlit-meadow-v1.png?v=20260813a') type('image/png')) center center / cover no-repeat,
    #070a13;
  transform: translate3d(var(--studio-bg-x), var(--studio-bg-y), 0) scale(1.035);
  transition: transform .18s cubic-bezier(.2,.75,.25,1);
}
#studioBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 88%);
  mask-image: linear-gradient(120deg, #000, transparent 88%);
}
#app {
  position: relative;
  z-index: 1;
  min-height: 100%;
  min-height: 100dvh;
}
html.studio-booting #app { visibility: hidden; }
.studio-boot-fallback {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #e8eef7;
  background: rgba(7, 10, 19, .55);
}
.studio-boot-card {
  display: grid;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  padding: 22px 20px;
  border: 1px solid rgba(210, 230, 255, .2);
  border-radius: 18px;
  background: rgba(12, 18, 34, .94);
}
.studio-boot-fallback[hidden] { display: none !important; }
.studio-boot-fallback.is-loading { pointer-events: none; }
.studio-boot-fallback p { margin: 0; line-height: 1.6; }
.studio-boot-fallback a {
  color: #7ce9ff;
  text-decoration: none;
}
.side {
  border-right-color: rgba(169, 211, 255, .15);
  background: linear-gradient(165deg, rgba(10, 16, 31, .88), rgba(12, 12, 27, .72));
  box-shadow: 24px 0 80px rgba(0, 0, 0, .18);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
}
.side nav a:nth-child(1) span { color: var(--cyan); background: rgba(114,230,255,.11); }
.side nav a:nth-child(2) span { color: var(--mint); background: rgba(99,241,195,.10); }
.side nav a:nth-child(3) span { color: var(--pink); background: rgba(255,119,188,.10); }
.side nav a:nth-child(4) span { color: var(--gold); background: rgba(255,200,107,.10); }
.side nav a.active { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(42,128,255,.08); }
.side-clock {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(72, 136, 255, .14), rgba(188, 97, 255, .09));
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.side-clock b { font: 300 29px/1.1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: -.07em; color: #fff; }
.side-clock span { color: #bdd2ef; font-size: 9px; }
.side-clock small { margin-top: 4px; color: #8192ae; font-size: 8px; line-height: 1.5; }
.studio-header { position: relative; align-items: center; }
.header-clock {
  display: grid;
  min-width: 195px;
  padding: 13px 17px;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  text-align: right;
  background: rgba(16, 23, 42, .48);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.header-clock span { color: #899ab6; font-size: 9px; }
.header-clock b { margin-top: 3px; font: 300 25px ui-monospace, monospace; letter-spacing: -.06em; }
.acrylic-card, .stats article, .studio-home-launcher, .project, .detail-main {
  border-color: var(--glass-line);
  background: linear-gradient(145deg, rgba(27, 38, 65, .64), rgba(11, 17, 32, .58));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 22px 70px rgba(0,0,0,.20);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
}
.stats article:nth-child(1) { background: linear-gradient(145deg, rgba(63,142,255,.20), rgba(13,22,40,.62)); }
.stats article:nth-child(2) { background: linear-gradient(145deg, rgba(173,91,255,.18), rgba(21,17,40,.62)); }
.stats article:nth-child(3) { background: linear-gradient(145deg, rgba(44,218,176,.15), rgba(12,29,35,.62)); }
.hub-view { animation: hub-in .45s cubic-bezier(.2,.8,.2,1); }
.hub-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 210px; padding: 30px; border: 1px solid var(--glass-line); border-radius: 25px; overflow: hidden; }
.hub-hero h2 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(27px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.045em; }
.hub-hero p { max-width: 720px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.api-hero { position: relative; background: radial-gradient(circle at 86% 20%, rgba(106,106,255,.25), transparent 31%), linear-gradient(135deg, rgba(26,63,99,.7), rgba(35,20,68,.62)); }
.api-orbit { position: relative; display: grid; place-items: center; flex: 0 0 190px; width: 190px; height: 150px; }
.api-orbit::before,.api-orbit::after,.api-orbit i { content:""; position:absolute; border:1px solid rgba(155,226,255,.26); border-radius:50%; }
.api-orbit::before { width: 170px; height: 80px; transform: rotate(18deg); }
.api-orbit::after { width: 135px; height: 120px; transform: rotate(-32deg); border-color: rgba(255,138,213,.22); }
.api-orbit i:nth-child(1) { width: 8px; height: 8px; left: 13px; top: 54px; border: 0; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); animation: pulse 2s infinite; }
.api-orbit i:nth-child(2) { width: 7px; height: 7px; right: 30px; bottom: 18px; border: 0; background: var(--pink); }
.api-orbit i:nth-child(3) { width: 6px; height: 6px; top: 20px; right: 40px; border: 0; background: var(--mint); }
.api-orbit strong { position: relative; z-index: 2; max-width: 120px; padding: 10px 12px; border-radius: 12px; text-align: center; color: #eafbff; font: 9px/1.45 ui-monospace,monospace; background: rgba(7,13,28,.65); box-shadow: 0 0 35px rgba(105,205,255,.20); }
.api-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(350px,.8fr); gap: 16px; margin-top: 16px; }
.api-list-panel,.api-editor { padding: 22px; border: 1px solid var(--glass-line); border-radius: 22px; }
.hub-title { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom: 16px; }
.hub-title h3 { margin:5px 0 0; font-size:20px; }
.api-connection { display: grid; grid-template-columns: 42px 1fr auto auto 34px; align-items: center; gap: 10px; margin-bottom: 8px; padding: 11px; border: 1px solid rgba(190,218,255,.10); border-radius: 14px; background: rgba(7,13,27,.42); transition: .2s; }
.api-connection:hover { transform: translateX(3px); border-color: rgba(114,230,255,.32); }
.api-connection.active { border-color: rgba(99,241,195,.36); background: linear-gradient(90deg,rgba(67,226,188,.10),rgba(19,26,47,.5)); }
.api-connection>i { display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#06131c;font-size:9px;font-style:normal;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--violet)); }
.api-connection>div { display:grid;gap:3px;min-width:0; }.api-connection b{font-size:11px}.api-connection span{color:#b8c7dc;font-size:9px}.api-connection small{overflow:hidden;text-overflow:ellipsis;color:#62728d;font-size:8px}.api-connection button{padding:7px 9px;font-size:9px}.api-connection .danger{padding:7px;color:#ff9fb7}
.hub-empty { padding: 32px 15px; border: 1px dashed rgba(190,218,255,.14); border-radius: 14px; text-align:center; color:var(--muted); font-size:10px; }
.community-strip { display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;margin-top:14px;padding:14px;border:1px solid rgba(255,200,107,.22);border-radius:16px;background:linear-gradient(110deg,rgba(255,183,77,.09),rgba(255,102,174,.07)); }.community-strip.online{border-color:rgba(99,241,195,.30)}.community-strip div{display:grid;gap:3px}.community-strip div>span{color:var(--gold);font:7px monospace;letter-spacing:.18em}.community-strip b{font-size:11px}.community-strip small{color:var(--muted);font-size:8px}.community-strip button{padding:8px;font-size:9px}
.api-editor label { display:grid;gap:7px;margin:11px 0;color:#aab9cf;font-size:9px }.api-editor input{width:100%;padding:11px 12px;border:1px solid rgba(190,218,255,.16);border-radius:11px;outline:none;color:#fff;background:rgba(4,9,19,.54)}.api-editor input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(114,230,255,.07)}.api-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.api-switches{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.api-switches label{display:flex;align-items:center;gap:6px;padding:9px;border:1px solid rgba(190,218,255,.12);border-radius:10px;background:rgba(4,9,19,.3)}.api-switches input{width:auto}.api-editor-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:17px}.save-state{max-width:210px;color:var(--mint);font-size:9px;text-align:right}
.service-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px }.service-grid a{display:grid;gap:7px;padding:18px;border:1px solid var(--glass-line);border-radius:18px;color:#fff;text-decoration:none;transition:.2s}.service-grid a:hover{transform:translateY(-3px);border-color:rgba(114,230,255,.40)}.service-grid i{color:var(--cyan);font:8px monospace;letter-spacing:.16em}.service-grid b{font-size:13px}.service-grid span{color:var(--muted);font-size:9px}
.about-hub { --mx:0px;--my:0px; }
.about-hero { position:relative;min-height:min(680px,72vh);overflow:hidden;border:1px solid var(--glass-line);border-radius:28px;background:#0a0f1e;box-shadow:0 34px 100px rgba(0,0,0,.36);transform:translate(var(--mx),var(--my));transition:transform .15s ease-out; }
.about-image,.about-image img,.about-veil{position:absolute;inset:0;width:100%;height:100%}.about-image img{object-fit:cover;object-position:center;filter:saturate(1.06) contrast(1.03)}.about-veil{background:linear-gradient(90deg,rgba(5,10,25,.94) 0%,rgba(5,10,25,.75) 43%,rgba(5,10,25,.18) 76%),linear-gradient(0deg,rgba(5,10,25,.76),transparent 48%)}
.about-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;width:min(660px,62%);min-height:min(680px,72vh);padding:clamp(28px,6vw,80px)}.about-copy h2{margin:15px 0 18px;font-size:clamp(42px,6vw,82px);line-height:.98;letter-spacing:-.065em}.about-copy h2 span{color:transparent;background:linear-gradient(100deg,#fff,var(--cyan),#e899ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.about-copy p{color:#b6c0d3;font-size:13px;line-height:1.9}.about-copy>div{display:flex;align-items:center;gap:12px;margin-top:20px}.about-copy a{padding:10px 14px;color:#dceeff;text-decoration:none}
.about-hero figure{position:absolute;z-index:3;right:2%;bottom:0;width:clamp(120px,17vw,240px);margin:0;filter:drop-shadow(0 24px 28px rgba(0,0,0,.5));animation:float-spirit 4s ease-in-out infinite}.about-hero figure img{width:100%}.about-hero figcaption{position:absolute;right:75%;bottom:18%;width:max-content;padding:9px 12px;border:1px solid rgba(125,229,255,.28);border-radius:13px 13px 3px 13px;background:rgba(5,13,30,.63);backdrop-filter:blur(15px)}.about-hero figcaption b,.about-hero figcaption span{display:block}.about-hero figcaption b{color:var(--cyan);font-size:9px}.about-hero figcaption span{margin-top:3px;color:#aebbd0;font-size:8px}
.about-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.about-bento article{min-height:210px;padding:22px;border:1px solid var(--glass-line);border-radius:20px}.about-bento .wide{grid-column:span 2;background:linear-gradient(145deg,rgba(63,142,255,.18),rgba(77,41,110,.22))}.about-bento i{color:var(--cyan);font:8px monospace;letter-spacing:.15em}.about-bento h3{margin:22px 0 10px;font-size:18px;line-height:1.3}.about-bento p{color:var(--muted);font-size:10px;line-height:1.8}
.project .actions{display:grid;grid-template-columns:1fr 1fr}
@keyframes hub-in{from{opacity:0;transform:translateY(12px)}}@keyframes pulse{50%{opacity:.45;transform:scale(.75)}}@keyframes float-spirit{50%{transform:translateY(-9px) rotate(1deg)}}
@media(max-width:1100px){.header-clock{display:none}.api-layout{grid-template-columns:1fr}.about-bento{grid-template-columns:repeat(2,1fr)}.about-copy{width:72%}.side-clock{display:none}}
@media(max-width:850px){.side nav a:nth-child(n+5){display:none}.hub-hero{padding:20px}.api-orbit{display:none}.api-connection{grid-template-columns:38px 1fr auto}.api-connection button:nth-last-child(-n+2){display:none}.community-strip{grid-template-columns:1fr 1fr}.community-strip div{grid-column:1/-1}.service-grid{grid-template-columns:1fr}.about-hero{min-height:680px}.about-copy{justify-content:flex-end;width:100%;min-height:680px;padding:28px 20px 70px}.about-copy h2{font-size:46px}.about-copy p{font-size:11px}.about-veil{background:linear-gradient(0deg,rgba(5,10,25,.98) 0%,rgba(5,10,25,.75) 56%,rgba(5,10,25,.12))}.about-hero figure{right:5px;bottom:48%;width:130px}.about-hero figcaption{display:none}.about-bento{grid-template-columns:1fr}.about-bento .wide{grid-column:auto}.api-switches{grid-template-columns:1fr}}
@media(max-width:850px){
  #studioBackdrop::before{background-position:center,center,72% center,center;transform:none}
  .side{
    background:rgba(8,13,26,.94);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  main{width:min(1420px,calc(100vw - 24px));margin:0 auto;padding:22px 12px 80px}
}
@media(prefers-reduced-motion:reduce){#studioBackdrop::before{transform:none;transition:none}}