/* Home v2: math × code × anime. Colors come from the shared --zh-* palette. */
:root{--zh-violet:#c9b8ff;--zh-grad:linear-gradient(100deg,var(--zh-accent) 0%,#b9d4ff 46%,var(--zh-violet) 100%)}
html:root[data-theme="zhang-math-light"]{--zh-violet:#6b5fd0;--zh-grad:linear-gradient(100deg,#315eaf 0%,#3f7fdc 45%,#6b5fd0 100%)}
@media(prefers-color-scheme:light){html:root:not([data-theme="zhang-math-dark"]){--zh-violet:#6b5fd0;--zh-grad:linear-gradient(100deg,#315eaf 0%,#3f7fdc 45%,#6b5fd0 100%)}}

/* ---------- Four-point star (font independent) ---------- */
.zh-star{display:inline-block;width:.9em;height:.9em;vertical-align:-.08em;background:currentColor;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.sparkle{width:18px;height:18px;background:currentColor;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.symbol-star .zh-star{width:26px;height:26px;background:var(--zh-grad)}
.closing-mark .zh-star{width:30px;height:30px;vertical-align:middle}

/* ---------- Hero copy ---------- */
.eyebrow{color:var(--zh-gold)}
.eyebrow i{font-style:normal;opacity:.55;margin:0 2px}
h1 .accent{background:var(--zh-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
h1 .accent .period{-webkit-text-fill-color:var(--zh-text);color:var(--zh-text)}
.intro{max-width:30em}
.button.primary{background:var(--zh-grad);border-color:transparent;box-shadow:0 10px 26px -14px color-mix(in srgb,var(--zh-accent) 90%,transparent)}
.button.primary:hover{background:var(--zh-grad);filter:brightness(1.06)}

.hero-terminal{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:9px 14px 9px 12px;border:1px solid var(--zh-border);border-radius:9px;background:color-mix(in srgb,var(--zh-panel) 72%,transparent);font:12px/1.5 ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;color:var(--zh-subtle);max-width:100%;overflow:hidden}
.term-dots{display:inline-flex;gap:5px;flex:none}
.term-dots i{width:7px;height:7px;border-radius:50%;background:var(--zh-border-strong);opacity:.7}
.term-dots i:first-child{background:var(--zh-gold)}
.hero-terminal code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:inherit}
.term-prompt{color:var(--zh-accent);margin-right:4px}
.term-str{color:var(--zh-gold)}
.term-caret{display:inline-block;width:7px;height:14px;margin-left:4px;vertical-align:-2px;background:var(--zh-accent);animation:zh-caret 1.1s steps(1) infinite}
@keyframes zh-caret{50%{opacity:0}}

/* ---------- Figure ---------- */
.figure-top{align-items:center}
.render-toggle{display:inline-flex;padding:2px;border:1px solid var(--zh-border);border-radius:999px;background:color-mix(in srgb,var(--zh-panel) 60%,transparent)}
.render-toggle[hidden]{display:none}
.render-toggle button{appearance:none;border:0;background:transparent;color:var(--zh-muted);font:inherit;font-size:10px;letter-spacing:1.5px;padding:4px 11px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.render-toggle button:hover{color:var(--zh-text)}
.render-toggle button[aria-pressed="true"]{background:var(--zh-grad);color:var(--zh-accent-ink)}
.render-toggle button:focus-visible{outline:2px solid var(--zh-accent);outline-offset:2px}
.plot{isolation:isolate;background:radial-gradient(ellipse at 50% 46%,var(--zh-plot-glow),transparent 62%),radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--zh-violet) 12%,transparent),transparent 40%)}
.plot>picture{display:block;transition:opacity .6s}
.cy3-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;opacity:0;transition:opacity .8s}
.cy3-canvas.is-dragging{cursor:grabbing}
.plot.is-live .cy3-canvas{opacity:1}
.plot.is-live>picture{opacity:0}
.plot-note{z-index:2;pointer-events:none}
.note-a i{font-style:italic}
.note-b sub{font-size:.8em}
.note-b{top:8%;bottom:auto;right:2%}

.sparkle{position:absolute;z-index:2;pointer-events:none;color:var(--zh-gold);line-height:1;animation:zh-twinkle 3.6s ease-in-out infinite}
.sparkle.s1{top:16%;right:15%;width:20px;height:20px}
.sparkle.s2{top:34%;left:9%;width:13px;height:13px;color:var(--zh-accent);animation-delay:-1.2s}
.sparkle.s3{bottom:32%;right:6%;width:11px;height:11px;color:var(--zh-violet);animation-delay:-2.1s}
.sparkle.s4{top:9%;left:44%;width:9px;height:9px;color:var(--zh-accent);animation-delay:-.6s}
@keyframes zh-twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}

/* galgame-style dialogue box */
.vn-box{position:absolute;z-index:3;left:6%;right:6%;bottom:3%;padding:14px 18px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--zh-accent) 35%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--zh-panel) 78%,transparent),color-mix(in srgb,var(--zh-panel) 92%,transparent));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 34px -18px var(--zh-shadow-menu),inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent)}
.vn-box:before{content:"";position:absolute;inset:4px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--zh-gold) 28%,transparent);pointer-events:none}
.vn-name .zh-star{width:9px;height:9px;vertical-align:0;margin-left:2px}
.vn-name{position:absolute;top:-11px;left:16px;padding:2px 12px;border-radius:999px;background:var(--zh-grad);color:var(--zh-accent-ink);font-size:10px;font-weight:600;letter-spacing:1.6px}
.vn-box p{margin:2px 0 0;padding-right:16px;font-size:13px;line-height:1.75;color:var(--zh-text);letter-spacing:.4px}
.vn-next{position:absolute;right:14px;bottom:7px;font-size:9px;color:var(--zh-gold);animation:zh-bob 1.4s ease-in-out infinite}
@keyframes zh-bob{50%{transform:translateY(3px);opacity:.5}}
.figure-detail .drag-hint{color:var(--zh-accent)}
.plot:not(.is-live)~figcaption~.figure-detail .drag-hint,.plot:not(.is-live) .drag-hint{display:none}

/* ---------- Interests ---------- */
.section-heading h2{letter-spacing:4px}
.interest{position:relative;transition:background .25s}
.interest:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--zh-accent) 5%,transparent),transparent 70%)}
.interest .symbol:not(.symbol-star){background:var(--zh-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.symbol-star{font-size:25px}
.interest .index{color:var(--zh-gold)}
.closing-mark{color:var(--zh-gold);font-size:30px;animation:zh-twinkle 4.2s ease-in-out infinite}

/* ---------- Responsive ---------- */
@media(max-width:1050px){.vn-box{left:3%;right:3%}.vn-box p{font-size:12px}}
@media(max-width:760px){.hero-terminal{font-size:11px;margin-top:22px}.vn-box{position:relative;left:auto;right:auto;bottom:auto;margin:10px 0 4px}.render-toggle button{padding:4px 9px}.note-b{display:none}.sparkle.s1{right:6%}}
@media(prefers-reduced-motion:reduce){.sparkle,.term-caret,.vn-next,.closing-mark{animation:none}.sparkle{opacity:.7}}