/* cs-type-scenes (2026-10-14): animated illustrations for the eight product types in partials/hx-show
   (/custom-system #types and the home page #hm-types). Markup: partials/cs-type-scene(.blade.php + /<scene>).
   Timeline engine: the .sa scene player in public/js/rh-showcase.js. Everything is scoped under .cst so the
   RoamerHost scene rules (.sa in rh-showcase-scenes.css) never collide with these.
   Canvas: 42em x 33.6em (5:4), centred in the scene box and scaled to fit; 1em = canvas width / 42.
   Colours come from the rt-hue tokens (--c = the panel hue, --hx-surface, --hx-text ...) so both themes follow the
   site toggle; light theme has no dark blocks. Direction colours: up = blue (site rule for colour-blind readers). */

/* ---------- canvas + engine states ---------- */
.cst{position:absolute;inset:0;z-index:1;container-type:size;overflow:hidden;
  --ink:var(--hx-text);--ink2:var(--hx-text-2);--sk:color-mix(in srgb,var(--hx-text) 13%,transparent);--sk2:color-mix(in srgb,var(--hx-text) 7%,transparent);
  --sh:0 1.2em 2.4em -1.3em rgba(15,40,70,.34),0 .12em .4em rgba(15,40,70,.07);--up:var(--hx-blue);--warn:var(--hx-orange)}
html[data-theme="dark"] .cst{--sh:0 1.4em 2.8em -1.2em rgba(0,0,0,.72),0 .1em .3em rgba(0,0,0,.25)}
.cst-cv{position:absolute;left:50%;top:50%;width:min(100cqw,125cqh);aspect-ratio:5/4;translate:-50% -50%;container-type:inline-size}
.cst .sa-stage{position:absolute;inset:0;font-size:calc(100cqw / 42);line-height:1.45;color:var(--ink);transition:opacity .6s ease}
.cst .sa-stage.sa-fading{opacity:0}
.cst .sa-noanim,.cst .sa-noanim *{transition:none!important}
.cst *,.cst *::before,.cst *::after{box-sizing:border-box}
.cst p,.cst label{margin:0}
.cst b{font-weight:800}
.cst small{font-size:.74em}
.cst em{font-style:normal}
.cst u{text-decoration:none}
.cst svg{display:block;flex:none}

.cst [data-at]{transition:opacity .5s cubic-bezier(.16,.84,.3,1),transform .7s cubic-bezier(.16,.84,.3,1)}
.cst.sa-js [data-at]:not(.on){opacity:0;transform:translateY(.8em)}
.cst .pop[data-at]{transition:opacity .35s ease,transform .6s cubic-bezier(.2,.9,.3,1.4)}
.cst.sa-js .pop[data-at]:not(.on){transform:scale(.8)}
.cst.sa-js .fade[data-at]:not(.on){transform:none}
.cst.sa-js .fl[data-at]:not(.on){transform:translateX(-1.6em)}
.cst.sa-js .fr[data-at]:not(.on){transform:translateX(1.6em)}
.cst.sa-js .fd[data-at]:not(.on){transform:translateY(-1.2em)}
.cst .gx{transform-origin:0 50%}.cst .gy{transform-origin:50% 100%}
.cst.sa-js .gx[data-at]:not(.on){opacity:1;transform:scaleX(0)}
.cst.sa-js .gy[data-at]:not(.on){opacity:1;transform:scaleY(0)}
.cst .draw[data-at]{stroke-dasharray:1 1.1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.45,0,.2,1),opacity .3s}
.cst.sa-js .draw[data-at]:not(.on){opacity:1;transform:none;stroke-dashoffset:1.05} /* gap > 1 so no round cap dot shows at the ends */
.cst [data-move]{transition:translate .9s cubic-bezier(.65,0,.25,1),opacity .5s ease,transform .7s cubic-bezier(.16,.84,.3,1)}
.cst:not(.sa-js) [data-out]{display:none}
.cst .sa-typing::after{content:"";display:inline-block;width:.07em;height:1em;margin-left:.06em;background:currentColor;vertical-align:-.12em;animation:cstCaret .7s steps(1) infinite}
@keyframes cstCaret{50%{opacity:0}}
@keyframes cstSpin{to{transform:rotate(360deg)}}
@keyframes cstPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent)}50%{box-shadow:0 0 0 .45em color-mix(in srgb,var(--c) 0%,transparent)}}
@keyframes cstPress{40%{transform:scale(.9)}}

/* ---------- shared pieces ---------- */
.cst-win{position:absolute;display:flex;flex-direction:column;border-radius:.85em;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));box-shadow:var(--sh);overflow:hidden}
.cst-bar{flex:none;display:flex;align-items:center;gap:.36em;height:2em;padding:0 .75em;background:var(--hx-surface-2);border-bottom:1px solid var(--line-soft)}
.cst-bar>i{flex:none;width:.6em;height:.6em;border-radius:50%;background:#FF7A7A}
.cst-bar>i+i{background:#FFC857}.cst-bar>i+i+i{background:#58D68D}
.cst-url{display:inline-flex;align-items:center;gap:.4em;min-width:0;margin-left:.55em;padding:.22em .8em;border-radius:99px;background:var(--hx-surface);border:1px solid var(--line-soft);font:500 .74em/1.2 var(--font-mono,ui-monospace,monospace);color:var(--ink2);white-space:nowrap;overflow:hidden}
.cst-url svg{width:1.05em;height:1.05em;color:var(--c)}
.cst-body{position:relative;flex:1;min-height:0;overflow:hidden}
.cst-card{position:absolute;border-radius:.85em;background:var(--hx-surface);border:1px solid var(--line);box-shadow:var(--sh)}
.cst-sk{display:block;height:.5em;border-radius:.3em;background:var(--sk)}
.cst-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:.45em;padding:.55em .9em .55em .7em;border-radius:.75em;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:var(--sh);font-size:1.05em;font-weight:800;line-height:1.2;white-space:nowrap;color:var(--ink)}
.cst-chip svg{width:1.1em;height:1.1em;color:var(--c)}
.cst-toast{position:absolute;z-index:5;display:flex;align-items:center;gap:.65em;padding:.6em 1em .6em .6em;border-radius:.85em;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:var(--sh);white-space:nowrap}
.cst-toast>svg{width:2.2em;height:2.2em;padding:.45em;border-radius:.6em;background:color-mix(in srgb,var(--c) 16%,var(--hx-surface));color:var(--c)}
.cst-toast .t{display:flex;flex-direction:column;line-height:1.3}
.cst-toast .t small{font-weight:700;color:var(--muted)}
.cst-toast .t b{font-size:.95em;color:var(--ink)}
.cst-line{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:.6em;background:#06C755;color:#fff}
.cst-line svg{width:1.2em;height:1.2em}
.cst-phone{position:absolute;padding:.38em;border-radius:1.7em;background:color-mix(in srgb,var(--hx-text) 14%,var(--hx-surface));border:1px solid var(--line);box-shadow:var(--sh)}
.cst-scr{position:relative;width:100%;height:100%;border-radius:1.35em;background:var(--hx-surface);border:1px solid var(--line-soft);overflow:hidden}
.cst-scr::before{content:"";position:absolute;left:50%;top:.42em;z-index:3;width:3em;height:.7em;margin-left:-1.5em;border-radius:99px;background:color-mix(in srgb,var(--hx-text) 14%,var(--hx-surface))}
.cst-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35em;padding:.5em .9em;border-radius:.55em;background:var(--c);color:var(--hx-on);font-size:.82em;font-weight:800;white-space:nowrap}
.cst-btn svg{width:1.1em;height:1.1em}
/* pointer: the tip of the arrow sits at the element's top-left; tap1..3 replay the ring */
.cst-cur{position:absolute;z-index:7;width:1.7em;height:1.7em;margin:-.2em 0 0 -.35em;filter:drop-shadow(0 .15em .3em rgba(0,0,0,.3));pointer-events:none}
.cst-cur svg{width:100%;height:100%}
.cst-cur::after{content:"";position:absolute;left:-.35em;top:-.55em;width:1.4em;height:1.4em;border-radius:50%;border:2px solid var(--c);opacity:0}
.cst-cur.tap1::after{animation:cstTap1 .6s ease-out}
.cst-cur.tap2::after{animation:cstTap2 .6s ease-out}
.cst-cur.tap3::after{animation:cstTap3 .6s ease-out}
@keyframes cstTap1{0%{opacity:.95;transform:scale(.25)}100%{opacity:0;transform:scale(1.6)}}
@keyframes cstTap2{0%{opacity:.95;transform:scale(.25)}100%{opacity:0;transform:scale(1.6)}}
@keyframes cstTap3{0%{opacity:.95;transform:scale(.25)}100%{opacity:0;transform:scale(1.6)}}
.cst .is-press{animation:cstPress .35s ease}

/* stacked layout (phones, narrow columns): the box takes the canvas shape plus a strip on top for the case label,
   and the canvas sits at the bottom so the label never covers the drawing */
@container hxs (max-width:820px){
  .hxs-scene.is-anim{min-height:0;aspect-ratio:1/.95}
  .hxs-scene.is-anim .cst-cv{top:auto;bottom:3cqw;translate:-50% 0}
}
@container hxs (max-width:520px){.hxs-scene.is-anim .hxs-case{font-size:11px;padding:5px 9px 5px 7px}}

/* ---------- 01 形象官網 · JD Reserva ---------- */
.cst-brand .b-nav{display:flex;align-items:center;gap:.9em;height:2.6em;padding:0 1.1em;border-bottom:1px solid var(--line-soft)}
.cst-brand .b-logo{font-size:.8em;font-weight:900;letter-spacing:.3em;color:var(--ink)}
.cst-brand .b-nav i{width:2.2em;height:.42em;border-radius:.2em;background:var(--sk)}
.cst-brand .b-nav i:first-of-type{margin-left:auto}
.cst-brand .b-nav em{font-size:.68em;font-weight:800;padding:.35em .85em;border-radius:99px;border:1px solid color-mix(in srgb,var(--hx-sub) 60%,transparent);color:var(--hx-sub)}
.cst-brand .b-hero{position:relative;height:13.2em;overflow:hidden;background:linear-gradient(115deg,color-mix(in srgb,var(--hx-sub) 8%,var(--hx-surface)) 0%,color-mix(in srgb,var(--hx-sub) 22%,var(--hx-surface-2)) 100%)}
.cst-brand .b-floor{position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(transparent,color-mix(in srgb,var(--hx-sub) 16%,transparent))}
.cst-brand .b-car{position:absolute;right:.4em;bottom:.9em;width:17.5em;height:5.6em;color:color-mix(in srgb,var(--hx-sub) 88%,var(--ink));overflow:visible}
.cst-brand .b-car path,.cst-brand .b-car circle{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cst-brand .b-shine{position:absolute;top:-10%;bottom:-10%;left:-30%;width:22%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg)}
html[data-theme="dark"] .cst-brand .b-shine{background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)}
.cst-brand .b-shine.on{animation:bShine 1.5s cubic-bezier(.4,0,.2,1) both}
@keyframes bShine{from{left:-30%}to{left:125%}}
.cst-brand .b-copy{position:absolute;left:1.3em;top:1.6em;display:flex;flex-direction:column;align-items:flex-start;gap:.6em}
.cst-brand .b-h{font-size:1.75em;font-weight:900;letter-spacing:.07em;line-height:1.2;color:var(--ink);white-space:nowrap}
.cst-brand .b-btns{display:flex;gap:.5em;margin-top:.3em}
.cst-brand .b-btns em{font-size:.74em;font-weight:800;padding:.45em 1em;border-radius:99px}
.cst-brand .b-gold{background:var(--hx-sub);color:var(--hx-on)}
.cst-brand .b-ghost{border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);color:var(--ink)}
.cst-brand .b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:1.1em}
.cst-brand .b-cards>span{display:flex;flex-direction:column;gap:.45em;padding:.8em;border-radius:.7em;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-brand .b-cards i{width:1.7em;height:1.7em;border-radius:.5em;background:color-mix(in srgb,var(--hx-sub) 22%,var(--hx-surface))}
.cst-brand .b-cards b{font-size:.8em}
.cst-brand .b-phone .cst-scr{display:flex;flex-direction:column}
.cst-brand .b-mnav{display:flex;align-items:center;justify-content:space-between;padding:1.6em .8em .5em}
.cst-brand .b-mnav b{font-size:.56em;letter-spacing:.24em}
.cst-brand .b-mnav i{width:1em;height:.6em;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.cst-brand .b-mhero{position:relative;margin:0 .5em;padding:.8em .7em;height:8.4em;border-radius:.7em;background:linear-gradient(160deg,color-mix(in srgb,var(--hx-sub) 8%,var(--hx-surface)),color-mix(in srgb,var(--hx-sub) 24%,var(--hx-surface-2)))}
.cst-brand .b-mhero span{display:block;font-size:.95em;font-weight:900;letter-spacing:.06em;line-height:1.3}
.cst-brand .b-mhero em{display:inline-block;margin-top:.5em;font-size:.6em;font-weight:800;padding:.35em .8em;border-radius:99px;background:var(--hx-sub);color:var(--hx-on)}
.cst-brand .b-mhero svg{position:absolute;right:.4em;bottom:.5em;width:6.4em;height:2em;color:color-mix(in srgb,var(--hx-sub) 88%,var(--ink));overflow:visible}
.cst-brand .b-mhero svg path,.cst-brand .b-mhero svg circle{fill:none;stroke:currentColor;stroke-width:3}
.cst-brand .b-mrow{display:flex;align-items:center;gap:.5em;margin:.55em .5em 0;padding:.55em .6em;border-radius:.55em;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-brand .b-mrow i{width:1.1em;height:1.1em;border-radius:.35em;background:color-mix(in srgb,var(--hx-sub) 22%,var(--hx-surface))}
.cst-brand .b-mrow b{font-size:.62em}
.cst-brand .b-serp{padding:.8em .9em .85em}
.cst-brand .b-q{display:flex;align-items:center;gap:.5em;height:2.2em;padding:0 .9em;border-radius:99px;border:1px solid var(--line);background:var(--hx-surface-2);font-size:.86em;font-weight:600;color:var(--ink)}
.cst-brand .b-q svg{width:1.1em;height:1.1em;color:var(--muted)}
.cst-brand .b-res{display:flex;flex-direction:column;gap:.25em;margin-top:.7em;padding-left:.2em}
.cst-brand .b-res small{font-family:var(--font-mono,ui-monospace,monospace);color:var(--muted)}
.cst-brand .b-res b{font-size:.9em;color:var(--hx-blue)}
.cst-brand .b-res .cst-sk{width:88%;margin-top:.2em}
.cst-brand .b-ok{display:flex;width:max-content;margin:.6em 0 0 auto;align-items:center;gap:.3em;padding:.3em .7em;border-radius:99px;background:color-mix(in srgb,var(--c) 14%,var(--hx-surface));border:1px solid color-mix(in srgb,var(--c) 45%,transparent);font-size:.72em;font-weight:800;color:var(--c)}
.cst-brand .b-ok svg{width:1.1em;height:1.1em}

/* ---------- 02 動態網站 · 東訊 ---------- */
.cst-dynamic .d-form{display:flex;flex-direction:column;gap:.45em;padding:.9em 1em}
.cst-dynamic .d-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2em}
.cst-dynamic .d-head b{font-size:.95em}
.cst-dynamic .d-st{display:grid;font-size:.66em;font-weight:800}
.cst-dynamic .d-st span{grid-area:1/1;padding:.3em .75em;border-radius:99px;transition:opacity .35s}
.cst-dynamic .d-st span:first-child{background:var(--sk2);color:var(--muted)}
.cst-dynamic .d-st span+span{opacity:0;background:color-mix(in srgb,var(--c) 16%,var(--hx-surface));color:var(--c)}
.cst-dynamic .d-st.is-done span:first-child{opacity:0}.cst-dynamic .d-st.is-done span+span{opacity:1}
.cst-dynamic label{display:flex;align-items:center;justify-content:space-between;min-height:2.3em;font-size:.7em;font-weight:700;color:var(--muted)}
.cst-dynamic .d-in{display:flex;align-items:center;height:2.3em;padding:0 .8em;border-radius:.55em;border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));background:var(--hx-surface-2);font-size:.95em;font-weight:800}
.cst-dynamic .d-ai{display:inline-flex;align-items:center;gap:.3em;padding:.35em .8em;border-radius:99px;background:var(--hx-ai);color:#fff;font-size:1.05em;font-weight:800;animation:cstPulse 1.8s ease-in-out infinite;--c:var(--hx-ai)}
.cst-dynamic .d-ai svg{width:1.15em;height:1.15em}
.cst-dynamic .d-ai.is-press{animation:cstPress .35s ease}
.cst-dynamic .d-txt{position:relative;display:flex;flex-direction:column;gap:.55em;height:7em;padding:.75em .8em;border-radius:.55em;border:1px solid var(--line);background:var(--hx-surface-2)}
.cst-dynamic .d-tag{display:inline-flex;align-items:center;gap:.3em;align-self:flex-start;margin-bottom:.1em;padding:.2em .6em;border-radius:99px;background:color-mix(in srgb,var(--hx-ai) 14%,var(--hx-surface));color:var(--hx-ai);font-size:.64em;font-weight:800}
.cst-dynamic .d-tag svg{width:1.1em;height:1.1em}
.cst-dynamic .d-txt .cst-sk{background:color-mix(in srgb,var(--hx-ai) 22%,var(--sk2))}
.cst-dynamic .d-row{display:flex;gap:.6em;margin-top:.15em}
.cst-dynamic .d-cover{display:grid;place-items:center;width:5.4em;height:3.6em;flex:none;border-radius:.55em;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--hx-orange) 75%,#fff),color-mix(in srgb,var(--hx-sub) 85%,#fff))}
.cst-dynamic .d-cover svg{width:1.8em;height:1.8em}
.cst-dynamic .d-when{flex:1;display:flex;align-items:center;gap:.5em;padding:0 .7em;border-radius:.55em;border:1px solid var(--line);background:var(--hx-surface-2)}
.cst-dynamic .d-when>svg{width:1.4em;height:1.4em;color:var(--c)}
.cst-dynamic .d-when>span{display:flex;flex-direction:column;line-height:1.25}
.cst-dynamic .d-when>span small{color:var(--muted);font-weight:700}
.cst-dynamic .d-when>span b{font-size:.85em}
.cst-dynamic .d-tg{position:relative;margin-left:auto;width:2.3em;height:1.3em;border-radius:99px;background:var(--sk);transition:background .3s}
.cst-dynamic .d-tg::after{content:"";position:absolute;left:.15em;top:.15em;width:1em;height:1em;border-radius:50%;background:var(--hx-surface);box-shadow:0 .1em .2em rgba(0,0,0,.25);transition:translate .3s cubic-bezier(.3,1.4,.5,1)}
.cst-dynamic .d-tg.is-on{background:var(--c)}.cst-dynamic .d-tg.is-on::after{translate:1em 0}
.cst-dynamic .d-pub{display:grid;margin-top:auto;border-radius:.6em;background:var(--c);color:var(--hx-on);font-size:.9em;font-weight:800;text-align:center}
.cst-dynamic .d-pub>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:.35em;padding:.65em;transition:opacity .3s}
.cst-dynamic .d-pub>span+span{opacity:0}
.cst-dynamic .d-pub.is-done>span:first-child{opacity:0}.cst-dynamic .d-pub.is-done>span+span{opacity:1}
.cst-dynamic .d-pub svg{width:1.1em;height:1.1em}
.cst-dynamic .d-snav{display:flex;align-items:center;gap:.7em;height:2.4em;padding:0 1em;border-bottom:1px solid var(--line-soft)}
.cst-dynamic .d-snav b{font-size:.8em;font-weight:900;letter-spacing:.12em;color:var(--c)}
.cst-dynamic .d-snav i{width:2em;height:.4em;border-radius:.2em;background:var(--sk)}
.cst-dynamic .d-snav i:first-of-type{margin-left:auto}
.cst-dynamic .d-list{position:relative;padding:.9em 1em}
.cst-dynamic .d-lh{display:flex;align-items:baseline;gap:.5em;margin-bottom:.7em}
.cst-dynamic .d-lh b{font-size:1em}
.cst-dynamic .d-lh small{font-family:var(--font-mono,ui-monospace,monospace);color:var(--muted);letter-spacing:.12em}
.cst-dynamic .d-new,.cst-dynamic .d-item{display:flex;align-items:center;gap:.7em;height:3.5em;padding:.45em;border-radius:.6em;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-dynamic .d-item{margin-bottom:.6em}
.cst-dynamic .d-item span{flex:1;display:flex;flex-direction:column;gap:.45em}
.cst-dynamic .th{flex:none;width:3.4em;height:2.6em;border-radius:.4em;background:linear-gradient(135deg,hsl(var(--h,200) 60% 72%),hsl(calc(var(--h,200) + 40) 55% 82%))}
html[data-theme="dark"] .cst-dynamic .th{background:linear-gradient(135deg,hsl(var(--h,200) 40% 40%),hsl(calc(var(--h,200) + 40) 35% 30%))}
.cst-dynamic .d-new{position:absolute;left:1em;right:1em;top:3.05em;z-index:2;border-color:color-mix(in srgb,var(--c) 55%,var(--line));background:color-mix(in srgb,var(--c) 9%,var(--hx-surface));box-shadow:0 .8em 1.6em -1em color-mix(in srgb,var(--c) 70%,transparent)}
.cst-dynamic .d-new .th{background:linear-gradient(135deg,color-mix(in srgb,var(--hx-orange) 75%,#fff),color-mix(in srgb,var(--hx-sub) 85%,#fff))}
.cst-dynamic .d-new span{flex:1;display:flex;flex-direction:column;line-height:1.3}
.cst-dynamic .d-new span b{font-size:.85em}
.cst-dynamic .d-new span small{color:var(--muted);font-weight:700}
.cst-dynamic .d-new em{align-self:flex-start;padding:.15em .5em;border-radius:.35em;background:var(--c);color:var(--hx-on);font-size:.58em;font-weight:900;letter-spacing:.06em}
.cst-dynamic .d-clock>svg{color:var(--c)}

/* two-state buttons: the second label fades in when the timeline adds .is-done */
.cst :is(.s-add,.s-go,.a-pub,.p-sub){display:grid}
.cst :is(.s-add,.s-go,.a-pub,.p-sub)>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:.35em;transition:opacity .3s}
.cst :is(.s-add,.s-go,.a-pub,.p-sub)>span+span{opacity:0}
.cst :is(.s-add,.s-go,.a-pub,.p-sub).is-done>span:first-child{opacity:0}
.cst :is(.s-add,.s-go,.a-pub,.p-sub).is-done>span+span{opacity:1}
.cst :is(.s-add,.s-go,.a-pub,.p-sub) svg{width:1.1em;height:1.1em}

/* ---------- 03 互動網站 · 浪花 AI 分享會活動頁 ---------- */
.cst-motion .m-page{position:absolute;left:0;right:0;top:0}
.cst-motion .m-hero{position:relative;height:15.6em;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;text-align:center;
  background:radial-gradient(60% 70% at 15% 10%,color-mix(in srgb,var(--hx-pink) 22%,transparent),transparent 70%),radial-gradient(60% 70% at 88% 92%,color-mix(in srgb,var(--hx-ai) 22%,transparent),transparent 70%),var(--hx-surface-2)}
.cst-motion .m-dots{position:absolute;inset:0}
.cst-motion .m-dots i{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:var(--k);opacity:.8;
  transition:left 1.6s cubic-bezier(.6,0,.2,1),top 1.6s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--d) * 25ms);animation:mTw 2.6s ease-in-out calc(var(--d) * -170ms) infinite}
.cst-motion .m-dots.is-in i{left:calc(var(--tx) * 1%);top:calc(var(--ty) * 1%)}
@keyframes mTw{50%{opacity:.35;transform:scale(.6)}}
.cst-motion .m-kick{position:relative;font-weight:800;letter-spacing:.14em;color:var(--hx-pink)}
.cst-motion .m-title{position:relative;font-size:1.55em;font-weight:900;line-height:1.3;background:linear-gradient(100deg,var(--hx-pink),var(--hx-ai));-webkit-background-clip:text;background-clip:text;color:transparent}
.cst-motion .m-go{position:relative;margin-top:.2em;padding:.5em 1.4em;border-radius:99px;background:var(--hx-pink);color:var(--hx-on);font-size:.84em;font-weight:800;box-shadow:0 .6em 1.2em -.6em var(--hx-pink)}
.cst-motion .m-sec{display:flex;flex-direction:column;gap:.6em;padding:1.1em 1.4em 1.5em 1.1em}
.cst-motion .m-sh{font-size:1em}
.cst-motion .m-card{display:grid;grid-template-columns:auto 1fr;column-gap:.75em;row-gap:.35em;align-items:center;padding:.7em .8em;border-radius:.7em;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-motion .m-card i{grid-row:span 2;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:.65em;background:color-mix(in srgb,var(--hx-pink) 16%,var(--hx-surface));color:var(--hx-pink)}
.cst-motion .m-card i svg{width:1.3em;height:1.3em}
.cst-motion .m-card b{font-size:.88em}
.cst-motion .m-card .cst-sk{width:80%}
.cst-motion .m-track{position:absolute;right:.35em;top:.6em;bottom:.6em;width:.35em;border-radius:99px;background:var(--sk2)}
.cst-motion .m-track i{position:absolute;left:0;right:0;top:0;height:9em;border-radius:99px;background:color-mix(in srgb,var(--hx-pink) 55%,transparent)}
.cst-motion .m-ticket{overflow:hidden}
.cst-motion .m-tk-h{display:flex;align-items:center;gap:.6em;padding:.75em .9em;background:color-mix(in srgb,var(--hx-pink) 12%,var(--hx-surface));border-bottom:1.5px dashed color-mix(in srgb,var(--hx-pink) 45%,var(--line))}
.cst-motion .m-tk-h>span{display:grid;place-items:center;width:2em;height:2em;flex:none;border-radius:50%;background:var(--hx-pink);color:var(--hx-on)}
.cst-motion .m-tk-h svg{width:1.2em;height:1.2em}
.cst-motion .m-tk-h p{display:flex;flex-direction:column;line-height:1.25}
.cst-motion .m-tk-h b{font-size:.95em}
.cst-motion .m-tk-h small{font-weight:700;color:var(--muted)}
.cst-motion .m-tk-b{display:flex;align-items:center;gap:.8em;padding:.8em .9em}
.cst-motion .m-qr{display:grid;grid-template-columns:repeat(6,1fr);gap:.12em;width:3.6em;flex:none}
.cst-motion .m-qr i{aspect-ratio:1;border-radius:.08em;background:var(--sk2)}
.cst-motion .m-qr i.f{background:var(--ink)}
.cst-motion .m-tk-b p{display:flex;flex-direction:column;gap:.3em;flex:1;min-width:0}
.cst-motion .m-tk-b small{color:var(--muted);font-weight:700}
.cst-motion .m-tk-b b{font-size:.8em}
.cst-motion .m-curve{display:flex;flex-direction:column;padding:.8em .9em .75em}
.cst-motion .m-ch{display:flex;flex-direction:column;line-height:1.3}
.cst-motion .m-ch small{color:var(--muted);font-weight:700}
.cst-motion .m-ch b{font-size:.98em}
.cst-motion .m-curve svg{width:100%;height:auto;margin-top:.5em;overflow:visible}
.cst-motion .m-grid{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.cst-motion .m-ln{fill:none;stroke:var(--hx-pink);stroke-width:3.2;stroke-linecap:round}
.cst-motion .m-pt{fill:var(--hx-surface);stroke:var(--hx-pink);stroke-width:3;transform-box:fill-box;transform-origin:center}
.cst-motion .m-pt.is-dip{stroke:var(--warn)}
.cst-motion .m-lbl{display:grid;grid-template-columns:repeat(5,1fr);margin-top:.2em;text-align:center;font:700 .64em/1 var(--font-mono,ui-monospace,monospace);color:var(--muted)}
.cst-motion .m-lbl .is-dip{color:var(--warn)}
.cst-motion .m-dip{display:inline-flex;align-items:center;gap:.3em;align-self:flex-start;margin-top:auto;padding:.28em .65em;border-radius:99px;background:color-mix(in srgb,var(--warn) 14%,var(--hx-surface));color:var(--warn);font-size:.68em;font-weight:800}
.cst-motion .m-dip svg{width:1.15em;height:1.15em}

/* ---------- 04 電商網站 · Lionelo ---------- */
.cst-shop .s-nav{display:flex;align-items:center;gap:.8em;height:2.6em;padding:0 1em;border-bottom:1px solid var(--line-soft)}
.cst-shop .s-nav>b{font-size:1.05em;font-weight:900;letter-spacing:-.02em}
.cst-shop .s-nav>i{width:2em;height:.4em;border-radius:.2em;background:var(--sk)}
.cst-shop .s-nav>i:first-of-type{margin-left:auto}
.cst-shop .s-cart{position:relative;margin-left:.4em;color:var(--ink)}
.cst-shop .s-cart svg{width:1.45em;height:1.45em}
.cst-shop .s-badge{position:absolute;right:-.6em;top:-.5em;display:grid;place-items:center;min-width:1.5em;height:1.5em;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:.7em;font-weight:900}
.cst-shop .s-prod{display:grid;grid-template-columns:10.4em 1fr;gap:1em;padding:1em}
.cst-shop .s-pic{display:flex;flex-direction:column;gap:.5em}
.cst-shop .s-pic svg{width:100%;height:10em;padding:.8em;border-radius:.7em;border:1px solid var(--line-soft);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 12%,var(--hx-surface-2)),var(--hx-surface-2));color:color-mix(in srgb,var(--c) 80%,var(--ink));overflow:visible}
.cst-shop .s-pic path,.cst-shop .s-pic circle{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cst-shop .s-thumbs{display:flex;gap:.4em}
.cst-shop .s-thumbs i{flex:1;height:2.2em;border-radius:.4em;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-shop .s-thumbs i.on{border-color:var(--c)}
.cst-shop .s-info{display:flex;flex-direction:column;align-items:flex-start;gap:.42em;padding-top:.1em}
.cst-shop .s-info>small{font-weight:800;letter-spacing:.06em;color:var(--muted)}
.cst-shop .s-info>b{font-size:1.02em;line-height:1.3}
.cst-shop .s-stars{font-size:.72em;letter-spacing:.1em;color:var(--hx-sub)}
.cst-shop .s-k{margin-top:.2em;font-size:.68em;font-weight:700;color:var(--muted)}
.cst-shop .s-sw{position:relative;display:flex;gap:.55em;padding:.25em}
.cst-shop .s-sw i{width:1.3em;height:1.3em;border-radius:50%;background:var(--k);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cst-shop .s-ring{position:absolute;left:0;top:0;width:1.8em;height:1.8em;border-radius:50%;border:2px solid var(--c)}
.cst-shop .s-add{margin-top:.45em;border-radius:.6em;background:var(--c);color:var(--hx-on);font-size:.82em;font-weight:800}
.cst-shop .s-add>span{padding:.6em 1em;white-space:nowrap}
.cst-shop .s-more{display:flex;flex-direction:column;gap:.5em;margin:0 1em;padding:.8em;border-radius:.7em;border:1px solid var(--line-soft)}
.cst-shop .s-more b{font-size:.8em}
.cst-shop .s-fly{position:absolute;z-index:3;left:15.4em;top:14em;width:1em;height:1em;border-radius:50%;background:var(--c);box-shadow:0 0 0 .3em color-mix(in srgb,var(--c) 25%,transparent)}
.cst-shop .s-pay{display:flex;flex-direction:column;gap:.55em;padding:.9em 1em 1em}
.cst-shop .s-ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:.15em}
.cst-shop .s-ph b{font-size:1em}
.cst-shop .s-steps{display:flex;gap:.3em}
.cst-shop .s-steps i{width:1.6em;height:.35em;border-radius:99px;background:var(--sk);transition:background .4s}
.cst-shop .s-steps i.on{background:var(--c)}
.cst-shop .s-row{display:flex;align-items:center;gap:.6em;padding:.55em .65em;border-radius:.6em;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-shop .s-row>i{display:grid;place-items:center;width:2em;height:2em;flex:none;border-radius:.5em;background:color-mix(in srgb,var(--c) 15%,var(--hx-surface));color:var(--c)}
.cst-shop .s-row>i svg{width:1.15em;height:1.15em}
.cst-shop .s-row>span{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cst-shop .s-row small{color:var(--muted);font-weight:700}
.cst-shop .s-row b{font-size:.8em;white-space:nowrap}
.cst-shop .s-row>em{display:grid;place-items:center;width:1.45em;height:1.45em;flex:none;border-radius:50%;background:var(--up);color:var(--hx-on)}
.cst-shop .s-row>em svg{width:.95em;height:.95em}
.cst-shop .s-go{margin-top:.3em;border-radius:.6em;background:var(--c);color:var(--hx-on);font-size:.86em;font-weight:800}
.cst-shop .s-go>span{padding:.6em}
.cst-shop .s-order .t small:last-child{color:var(--up)}

/* ---------- 05 會員平台與預約 · 爬練道 ---------- */
.cst-member .e-phone .cst-scr{display:flex;flex-direction:column;gap:.5em;padding:1.7em .75em .75em}
.cst-member .e-top{display:flex;align-items:center;justify-content:space-between}
.cst-member .e-top b{font-size:.95em;letter-spacing:.06em}
.cst-member .e-top i{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--sk2);color:var(--muted)}
.cst-member .e-top svg{width:1em;height:1em}
.cst-member .e-card{display:flex;align-items:flex-end;justify-content:space-between;padding:.7em .8em;border-radius:.75em;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,var(--hx-web)));color:var(--hx-on)}
.cst-member .e-card>small{font-weight:800}
.cst-member .e-card>span{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.cst-member .e-card>span small{opacity:.85}
.cst-member .e-card>span b{font-size:1.3em;font-weight:900}
.cst-member .e-k{margin-top:.1em;font-size:.66em;font-weight:800;color:var(--muted)}
.cst-member .e-week{position:relative;display:grid;grid-template-columns:repeat(7,1.55em);gap:.12em}
.cst-member .e-week span{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.4em 0;font-size:.7em;font-weight:800}
.cst-member .e-week span i{width:.45em;height:.45em;border-radius:50%;background:var(--sk)}
.cst-member .e-sel{position:absolute;left:3.34em;top:0;width:1.55em;height:100%;border-radius:.5em;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 18%,var(--hx-surface))}
.cst-member .e-slot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5em;padding:.5em .6em;border-radius:.6em;border:1.5px solid var(--line-soft);background:var(--hx-surface-2);transition:border-color .3s,background .3s}
.cst-member .e-slot b{font-size:.78em}
.cst-member .e-slot span{font-size:.72em;font-weight:700}
.cst-member .e-slot em{font-size:.62em;font-weight:800;color:var(--c)}
.cst-member .e-slot.is-full{opacity:.5}
.cst-member .e-slot.is-full em{color:var(--muted)}
.cst-member .e-slot.is-sel{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--hx-surface))}
.cst-member .e-btn{margin-top:auto;padding:.6em;border-radius:.6em;background:var(--c);color:var(--hx-on);font-size:.82em;font-weight:800;text-align:center}
.cst-member .e-ok{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;background:var(--hx-surface);text-align:center}
.cst-member .e-ok svg{width:4.4em;height:4.4em;margin-bottom:.3em}
.cst-member .e-ok circle,.cst-member .e-ok path{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cst-member .e-ok b{font-size:1.15em}
.cst-member .e-ok span{font-size:.8em;font-weight:700}
.cst-member .e-ok small{display:inline-flex;align-items:center;gap:.3em;margin-top:.3em;padding:.3em .7em;border-radius:99px;background:color-mix(in srgb,#06C755 14%,var(--hx-surface));color:#04813C;font-weight:800}
html[data-theme="dark"] .cst-member .e-ok small{color:#4ADE80}
.cst-member .e-ok small svg{width:1.1em;height:1.1em}
.cst-member .e-line{padding:.8em .9em .9em}
.cst-member .e-lh{display:flex;align-items:center;gap:.55em}
.cst-member .e-lh .cst-line{width:1.9em;height:1.9em}
.cst-member .e-lh b{font-size:.82em}
.cst-member .e-lh small{margin-left:auto;color:var(--muted);font-weight:700}
.cst-member .e-bub{margin:.6em 0 0 2.45em;padding:.6em .8em;border-radius:.2em .9em .9em .9em;border:1px solid var(--line-soft);background:var(--hx-surface-2);font-size:.8em;font-weight:600;line-height:1.5}
.cst-member .e-tbl{display:flex;flex-direction:column;gap:.3em;padding:.6em .8em .7em}
.cst-member .e-th,.cst-member .e-tr{display:grid;grid-template-columns:2.9em 3.4em 1fr 4.2em;align-items:center;gap:.3em;padding:.38em .55em;border-radius:.45em}
.cst-member .e-th span{font-size:.64em;font-weight:800;color:var(--muted)}
.cst-member .e-tr{background:var(--hx-surface-2)}
.cst-member .e-tr span{font-size:.72em;font-weight:700;white-space:nowrap}
.cst-member .e-tr.is-new{background:color-mix(in srgb,var(--c) 12%,var(--hx-surface));box-shadow:inset 0 0 0 1.5px var(--c)}
.cst-member .e-tr em{padding:.15em .5em;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:.9em;font-weight:800}
.cst-member .e-cap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.35em .6em;margin-top:auto;padding:.4em .2em 0}
.cst-member .e-cap>span{font-size:.68em;font-weight:700;color:var(--muted)}
.cst-member .e-cap>b{display:grid;font-size:.72em}
.cst-member .e-cap>b em{grid-area:1/1;text-align:right;transition:opacity .3s}
.cst-member .e-cap>b em+em{opacity:0}
.cst-member .e-cap>b.is-upd em:first-child{opacity:0}.cst-member .e-cap>b.is-upd em+em{opacity:1}
.cst-member .e-cap>i{grid-column:1/-1;height:.45em;border-radius:99px;background:var(--sk2);overflow:hidden}
.cst-member .e-cap>i u{display:block;width:70%;height:100%;background:var(--c);transition:width .8s cubic-bezier(.3,1,.4,1)}
.cst-member .e-cap>i u.is-upd{width:80%}

/* ---------- 06 企業後台 · 元智排課 (grid step 4.3em x 4.5em) ---------- */
.cst-admin .a-body{display:flex}
.cst-admin .a-side{flex:none;display:flex;flex-direction:column;align-items:center;gap:.7em;width:2.8em;padding:.8em 0;border-right:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-admin .a-side b{width:1.5em;height:1.5em;margin-bottom:.3em;border-radius:.45em;background:var(--c)}
.cst-admin .a-side i{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.5em;color:var(--muted)}
.cst-admin .a-side i.on{background:color-mix(in srgb,var(--c) 16%,var(--hx-surface));color:var(--c)}
.cst-admin .a-side svg{width:1.1em;height:1.1em}
.cst-admin .a-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6em;padding:.8em .8em .8em .7em}
.cst-admin .a-head{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.cst-admin .a-head>span{display:flex;flex-direction:column;line-height:1.25}
.cst-admin .a-head>span b{font-size:.92em}
.cst-admin .a-head>span small{font-weight:800;color:var(--c)}
.cst-admin .a-pub{border-radius:.55em;background:var(--c);color:var(--hx-on);font-size:.74em;font-weight:800}
.cst-admin .a-pub>span{padding:.5em .85em;white-space:nowrap}
.cst-admin .a-days{display:grid;grid-template-columns:2.6em repeat(5,4em);column-gap:.3em;margin-bottom:.3em}
.cst-admin .a-days span{font-size:.66em;font-weight:800;color:var(--muted);text-align:center}
.cst-admin .a-grid{position:relative;display:flex;flex-direction:column;gap:.3em}
.cst-admin .a-grid>p{display:grid;grid-template-columns:2.6em repeat(5,4em);column-gap:.3em;height:4.2em}
.cst-admin .a-grid>p small{align-self:start;padding-top:.3em;font:600 .62em/1 var(--font-mono,ui-monospace,monospace);color:var(--muted)}
.cst-admin .a-grid>p i{border-radius:.45em;border:1px dashed var(--line);background:var(--sk2)}
.cst-admin .a-blocks{position:absolute;inset:0}
.cst-admin .a-c{position:absolute;left:calc(2.9em + var(--x) * 4.3em);top:calc(var(--y) * 4.5em);display:flex;flex-direction:column;justify-content:space-between;width:4em;height:4.2em;padding:.45em .5em;border-radius:.45em;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-left:.25em solid var(--c);background:color-mix(in srgb,var(--c) 16%,var(--hx-surface))}
.cst-admin .a-c b{font-size:.64em;line-height:1.25;color:var(--ink)}
.cst-admin .a-c small{font:600 .58em/1 var(--font-mono,ui-monospace,monospace);color:var(--c)}
.cst-admin .a-new{z-index:2;margin:.4em 0 0 .4em;box-shadow:var(--sh);transition:margin .6s ease,opacity .35s ease,transform .6s cubic-bezier(.2,.9,.3,1.4),translate .9s cubic-bezier(.65,0,.25,1)}
.cst-admin .a-c.is-bad{border-color:var(--warn);box-shadow:0 0 0 .18em color-mix(in srgb,var(--warn) 40%,transparent);animation:aShake .35s ease 2}
.cst-admin .a-c.is-ok{border-color:color-mix(in srgb,var(--c) 40%,transparent);border-left-color:var(--c);box-shadow:none;animation:none}
.cst-admin .a-new.is-ok{margin:0;box-shadow:var(--sh)}
@keyframes aShake{25%{transform:translateX(-.18em)}75%{transform:translateX(.18em)}}
.cst-admin .a-flag{position:absolute;z-index:3;left:calc((2.6em + var(--x) * 4.3em) / .66);top:calc((var(--y) * 4.5em - 1.3em) / .66);display:inline-flex;align-items:center;gap:.3em;padding:.3em .65em;border-radius:99px;font-size:.66em;font-weight:800;white-space:nowrap;box-shadow:var(--sh)}
.cst-admin .a-flag svg{width:1.15em;height:1.15em}
.cst-admin .a-flag.is-warn{background:var(--warn);color:var(--hx-on)}
.cst-admin .a-flag.is-ok{background:var(--up);color:var(--hx-on)}
.cst-admin .a-rule,.cst-admin .a-role{display:flex;flex-direction:column;gap:.45em;padding:.8em .85em .85em}
.cst-admin .a-ch{display:flex;align-items:center;gap:.4em;margin-bottom:.15em}
.cst-admin .a-ch svg{width:1.1em;height:1.1em;color:var(--c)}
.cst-admin .a-ch b{font-size:.85em}
.cst-admin .a-r{display:flex;align-items:center;gap:.45em;font-size:.7em;font-weight:700;line-height:1.3}
.cst-admin .a-r em{display:grid;place-items:center;width:1.5em;height:1.5em;flex:none;border-radius:50%;background:color-mix(in srgb,var(--up) 16%,var(--hx-surface));color:var(--up)}
.cst-admin .a-r em svg{width:1em;height:1em}
.cst-admin .a-p{display:flex;align-items:center;justify-content:space-between;gap:.4em;padding:.4em .55em;border-radius:.5em;background:var(--hx-surface-2)}
.cst-admin .a-p span{font-size:.7em;font-weight:700}
.cst-admin .a-p em{display:inline-flex;align-items:center;gap:.25em;font-size:.64em;font-weight:800;color:var(--muted)}
.cst-admin .a-p em.is-edit{color:var(--c)}
.cst-admin .a-p em svg{width:1.1em;height:1.1em}

/* ---------- 07 數據分析後台 · 博山科技 ---------- */
.cst-data .t-body{display:flex;flex-direction:column;gap:.7em;padding:.85em .95em}
.cst-data .t-head{display:flex;align-items:center;justify-content:space-between}
.cst-data .t-head>b{font-size:.95em}
.cst-data .t-sync{display:inline-flex;align-items:center;gap:.35em;padding:.25em .75em .25em .45em;border-radius:99px;border:1px solid var(--line-soft);background:var(--hx-surface-2);font-size:.68em;font-weight:700;color:var(--ink2)}
.cst-data .t-sync>i{width:1.25em;height:1.25em;color:var(--c)}
.cst-data .t-sync>i svg{width:100%;height:100%}
.cst-data .t-sync>i:first-child{animation:cstSpin 1s linear infinite}
.cst-data .t-sync>i+i{display:none;color:var(--up)}
.cst-data .t-sync.is-done>i:first-child{display:none}
.cst-data .t-sync.is-done>i+i{display:block}
.cst-data .t-row{display:grid;grid-template-columns:1.75fr 1fr;gap:.7em}
.cst-data .t-box{position:relative;padding:.7em .8em;border-radius:.7em;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-data .t-k{display:flex;align-items:baseline;gap:.45em;margin-bottom:.4em}
.cst-data .t-k b{font-size:.78em}
.cst-data .t-k small{font-weight:700;color:var(--muted)}
.cst-data .t-band svg{width:100%;height:auto;overflow:visible}
.cst-data .t-gl{fill:none;stroke:var(--line);stroke-width:.8;stroke-dasharray:3 4}
.cst-data .t-area{fill:color-mix(in srgb,var(--up) 18%,transparent);stroke:color-mix(in srgb,var(--up) 45%,transparent);stroke-width:1}
.cst-data .t-now{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.cst-data .t-hist{fill:none;stroke:var(--up);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cst-data .t-mid{fill:none;stroke:var(--up);stroke-width:1.6;stroke-linecap:round;opacity:.8}
.cst-data .t-tx{font-size:9px;font-weight:700;fill:var(--muted)}
.cst-data .t-tx.is-b{fill:var(--up);font-weight:800}
.cst-data .t-mix{display:flex;flex-direction:column}
.cst-data .t-mix svg{width:6em;height:6em;margin:0 auto .35em;transform:rotate(-90deg)}
.cst-data .t-ring{fill:none;stroke:var(--sk2);stroke-width:6}
.cst-data .t-seg{fill:none;stroke:var(--k);stroke-width:6;stroke-dasharray:var(--v) 100;stroke-dashoffset:var(--o);transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1),opacity .3s}
.cst-data.sa-js .t-seg[data-at]:not(.on){opacity:1;transform:none;stroke-dasharray:0 100}
.cst-data .t-mix ul{display:flex;flex-direction:column;gap:.25em;margin:0;padding:0;list-style:none}
.cst-data .t-mix li{display:flex;align-items:center;gap:.4em;font-size:.68em;font-weight:700}
.cst-data .t-mix li i{width:.75em;height:.75em;border-radius:.2em;background:var(--k)}
.cst-data .t-mix li b{margin-left:auto}
.cst-data .t-api{flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:1.1em}
.cst-data .t-api .t-k{grid-column:1/-1}
.cst-data .t-num{display:flex;flex-direction:column;justify-content:flex-end;gap:.25em}
.cst-data .t-num b{font-size:1.6em;font-weight:900;line-height:1}
.cst-data .t-num small{font-weight:700;color:var(--muted)}
.cst-data .t-num em{display:inline-flex;align-items:center;gap:.15em;align-self:flex-start;padding:.15em .5em;border-radius:99px;background:color-mix(in srgb,var(--up) 14%,var(--hx-surface));color:var(--up);font-size:.68em;font-weight:800}
.cst-data .t-num em svg{width:1.1em;height:1.1em}
.cst-data .t-bars{display:flex;align-items:flex-end;gap:.45em;min-height:4.4em}
.cst-data .t-bars i{flex:1;border-radius:.3em .3em .1em .1em;background:color-mix(in srgb,var(--c) 35%,var(--hx-surface))}
.cst-data .t-bars i.is-now{background:var(--c)}
.cst-data .t-term{display:flex;flex-direction:column;gap:.35em;padding:.75em .85em .8em}
.cst-data .t-th{display:flex;align-items:center;gap:.4em;margin-bottom:.1em;font-size:.68em;font-weight:800;color:var(--muted)}
.cst-data .t-th svg{width:1.2em;height:1.2em;color:var(--c)}
.cst-data .t-term code{display:block;padding:.3em .55em;border-radius:.35em;background:var(--hx-surface-2);font:600 .7em/1.45 var(--font-mono,ui-monospace,monospace);color:var(--ink);white-space:nowrap}
.cst-data .t-term .t-ok{color:var(--up)}

/* ---------- 08 新創產品 · 玄燈 DestineAI ---------- */
.cst-startup .p-phone .cst-scr{display:flex;flex-direction:column;gap:.6em;padding:1.7em .75em .8em}
.cst-startup .p-top{display:flex;align-items:center;gap:.45em}
.cst-startup .p-top i{width:1.3em;height:1.3em;border-radius:50%;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--hx-sub) 80%,#fff),var(--c))}
.cst-startup .p-top b{font-size:.95em;letter-spacing:.1em}
.cst-startup .p-top span{display:grid;place-items:center;width:1.6em;height:1.6em;margin-left:auto;border-radius:50%;background:var(--sk2);color:var(--muted)}
.cst-startup .p-top span svg{width:1em;height:1em}
.cst-startup .p-read{padding:.7em .75em;border-radius:.75em;border:1px solid color-mix(in srgb,var(--c) 30%,transparent);background:color-mix(in srgb,var(--c) 9%,var(--hx-surface-2))}
.cst-startup .p-read small{display:flex;align-items:center;gap:.3em;font-weight:800;color:var(--c)}
.cst-startup .p-read small svg{width:1.1em;height:1.1em}
.cst-startup .p-read p{min-height:3.2em;margin-top:.35em;font-size:.8em;font-weight:700;line-height:1.6}
.cst-startup .p-lock{display:flex;flex-direction:column;gap:.45em;padding:.7em .75em;border-radius:.75em;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.cst-startup .p-lock small{display:flex;align-items:center;gap:.3em;font-weight:800;color:var(--muted);transition:color .4s}
.cst-startup .p-lock small svg{width:1.1em;height:1.1em}
.cst-startup .p-lock .cst-sk{filter:blur(.12em);transition:filter .6s,background .6s}
.cst-startup .p-lock.is-open .cst-sk{filter:none;background:color-mix(in srgb,var(--c) 30%,var(--sk2))}
.cst-startup .p-lock.is-open small{color:var(--c)}
.cst-startup .p-sub{margin-top:auto;border-radius:.6em;background:var(--c);color:var(--hx-on);font-size:.76em;font-weight:800}
.cst-startup .p-sub>span{padding:.65em .5em;white-space:nowrap}
.cst-startup .p-road{padding:.8em 1.1em}
.cst-startup .p-k{display:flex;align-items:center;justify-content:space-between}
.cst-startup .p-k>b{font-size:.85em}
.cst-startup .p-track{position:relative;height:3.6em;margin:1.1em 1em 0}
.cst-startup .p-track::before{content:"";position:absolute;left:0;right:0;top:.9em;height:.3em;border-radius:99px;background:var(--sk2)}
.cst-startup .p-fill{position:absolute;left:0;top:.9em;width:33.333%;height:.3em;border-radius:99px;background:var(--c);transition-duration:.5s,1.2s}
.cst-startup .p-node{position:absolute;left:calc(var(--n) * 33.333%);top:-.05em;display:flex;flex-direction:column;align-items:center;width:7em;translate:-50% 0}
.cst-startup .p-node>i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;border:.18em solid var(--sk);background:var(--hx-surface);color:var(--muted)}
.cst-startup .p-node>i svg{width:1.1em;height:1.1em}
.cst-startup .p-node>b{margin-top:.3em;font-size:.7em;font-weight:800;color:var(--ink2)}
.cst-startup .p-node.is-live>i{border-color:var(--c);background:var(--c);color:var(--hx-on)}
.cst-startup .p-node.is-live>b{color:var(--c)}
.cst-startup .p-node>em{position:absolute;top:-1.6em;left:calc(50% + .9em);padding:.1em .5em;border-radius:99px;background:var(--c);color:var(--hx-on);font-size:.6em;font-weight:900}
.cst-startup .p-node .p-q{left:auto;top:5.9em;white-space:nowrap;background:color-mix(in srgb,var(--up) 14%,var(--hx-surface));color:var(--up);opacity:0;transition:opacity .4s}
.cst-startup .p-node.is-next.is-on>i{border-color:var(--up);color:var(--up);animation:pPing 1.4s ease-out infinite}
.cst-startup .p-node.is-next.is-on .p-q{opacity:1}
@keyframes pPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 45%,transparent)}100%{box-shadow:0 0 0 .6em transparent}}
.cst-startup .p-grow{padding:.8em 1.1em}
.cst-startup .p-big{display:flex;align-items:center;gap:.5em}
.cst-startup .p-big b{font-size:1.5em;font-weight:900;line-height:1}
.cst-startup .p-big em{display:inline-flex;align-items:center;gap:.15em;padding:.15em .5em;border-radius:99px;background:color-mix(in srgb,var(--up) 14%,var(--hx-surface));color:var(--up);font-size:.7em;font-weight:800}
.cst-startup .p-big em svg{width:1.1em;height:1.1em}
.cst-startup .p-grow svg{width:100%;height:auto;margin-top:.5em;overflow:visible}
.cst-startup .p-gl{fill:none;stroke:var(--line);stroke-width:.8;stroke-dasharray:3 4}
.cst-startup .p-area{fill:color-mix(in srgb,var(--up) 14%,transparent)}
.cst-startup .p-ln{fill:none;stroke:var(--up);stroke-width:2.6;stroke-linecap:round}
.cst-startup .p-v{fill:none;stroke:var(--c);stroke-width:1.2;stroke-dasharray:3 3}
.cst-startup .p-tx{font-size:8.5px;font-weight:800;fill:var(--c)}
.cst-startup .p-dot{fill:var(--up);stroke:var(--hx-surface);stroke-width:2;transform-box:fill-box;transform-origin:center}
.cst-startup .p-fb>svg{color:var(--c)}