/* ════════════════════════════════════════════════════════════════
   Ciao Hong — shared styles (portfolio rebuild)
   Design tokens, components, layout. Linked by every page.
   "New bones, same skin" — ported from the legacy monolith.
   ════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FAF9F2; --bg-work:#FAF9F2; --bg-about:#FAF9F2; --ink:#1F1F1F; --ink-soft:#46433B;
  --muted:#6E6657; --line:#E2DBCB; --card:#f2f2f2;
  --coral:#1F1F1F; --coral-deep:#1F1F1F; --ochre:#F5BD2E; --sage:#43DD83; --sky:#5B8DF0; --clay:#F6BEEF;
  --green:#43DD83; --yellow:#F5BD2E; --pink:#F6BEEF; --blue:#5B8DF0; --orange:#F0884A;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Roboto","Noto Sans TC",system-ui,"Helvetica Neue",sans-serif;
  --serif:var(--ui); --sans:var(--ui); --mono:var(--ui);
  --sh-sm:0 2px 12px rgba(31,31,31,.06);
  --sh-lg:0 30px 70px -24px rgba(31,31,31,.3);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--yellow);color:var(--ink)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;overflow-x:hidden;transition:background 1.1s ease}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ═════ inline dual-text bilingual model ═════
   Every translatable node carries an [lang="en"] and an [lang="zh"] sibling.
   A class on <html> decides which set shows. Default = English. */
/* 全站英文版：中文節點一律不顯示（原始文字保留在 HTML 中方便日後恢復雙語） */
[lang="zh"]{display:none!important}
#langBtn{display:none!important}

/* ═════ loader ═════ */
#loader{position:fixed;inset:0;background:var(--ink);z-index:400;display:grid;place-items:center;transition:clip-path .9s var(--ease);clip-path:inset(0 0 0 0)}
#loader.off{clip-path:inset(0 0 100% 0)}
#loader .word{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(40px,6vw,72px);color:var(--bg);display:flex}
#loader .word span{opacity:0;transform:translateY(.45em);animation:lup .7s var(--ease) forwards}
@keyframes lup{to{opacity:1;transform:none}}

/* ═════ cursor (hand-drawn arrow + click burst) ═════ */
#cur{position:fixed;left:0;top:0;z-index:500;pointer-events:none;will-change:transform}
#cur svg{display:block;filter:drop-shadow(0 1px 1px rgba(31,31,31,.25))}
.click-burst{position:fixed;z-index:498;pointer-events:none;translate:-50% -50%;animation:burst .5s var(--ease) forwards}
@keyframes burst{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.2);opacity:0}}
@media(pointer:fine){body,body *{cursor:none!important}}
@media(pointer:coarse){#cur,.click-burst{display:none}}

/* ═════ nav ═════ */
nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;justify-content:space-between;align-items:center;padding:20px 42px;transition:background .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent}
nav.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);border-color:var(--line);padding:13px 42px}
.logo{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.logo i{font-style:italic;color:var(--coral)}
nav ul{display:flex;gap:2px;list-style:none;align-items:center}
nav ul a{text-decoration:none;color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:8px 14px;border-radius:999px;transition:background .25s,color .25s}
nav ul a:hover{background:var(--ink);color:var(--bg)}
nav .cv{border:1px solid var(--ink);margin-left:8px}
nav .lang{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:8px 14px;border-radius:999px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;transition:background .25s,color .25s;margin-left:8px}
nav .lang:hover{background:var(--ink);color:var(--bg)}

/* ═════ hero ═════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:120px 0 70px}
.hero-title{text-align:center;position:relative;z-index:6;pointer-events:none;padding:0 20px}
.hero-title .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.hero-title .k b{color:var(--coral);font-weight:500}
/* mission-line hero: single sentence + emphasis, no repeated headline */
.mission{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.6vw,60px);line-height:1.16;letter-spacing:-.018em;margin:24px auto 0;max-width:18ch;text-wrap:balance}
.mission em{font-style:normal;font-weight:700;color:var(--ink);background:linear-gradient(transparent 60%,rgba(245,189,46,.55) 60%);padding:0 .06em}
.mission .heart{font-style:italic;font-weight:400;color:var(--coral)}
.hero-context{margin-top:24px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted)}
.hero-title .reveal{opacity:0;animation:fade .9s .35s forwards}
.hero-context.reveal{animation-delay:.55s}
@keyframes fade{to{opacity:1}}

/* stage — needs a DEFINITE height so the objects' percentage top/bottom
   offsets resolve (flex:1 leaves height indefinite → % offsets collapse to 0) */
.stage{position:relative;height:clamp(440px,56vh,580px);margin-top:30px;perspective:1500px;perspective-origin:50% 38%}
.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:6;opacity:0;animation:fade .8s .4s forwards;perspective:780px}
.center .pill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:12px;padding:10px 19px;border-radius:999px;letter-spacing:.04em;box-shadow:var(--sh-lg)}
.center .pill .plus{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px}

/* avatar */
.me{transition:transform .14s ease-out;will-change:transform;transform-style:preserve-3d;display:block}
.me .meSvg{display:block;width:clamp(176px,17vw,212px);height:auto;margin:0 auto;
  filter:drop-shadow(0 22px 26px rgba(31,31,31,.18));animation:meFloat 6s ease-in-out infinite}
@keyframes meFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.me .cap{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);line-height:1.6}
.center .ground{position:absolute;left:50%;top:84%;width:188px;height:34px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(31,31,31,.14),rgba(31,31,31,0) 70%);z-index:-1}

/* flip-up objects — .objs fills the stage so it (the objects' containing
   block) has a definite height for their percentage top/bottom offsets */
.objs{position:absolute;inset:0;transform-style:preserve-3d}
.obj{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;border:none;background:none;font-family:inherit;z-index:5;
  opacity:0;transform-origin:50% 100%;transform:rotateX(86deg) translateY(22px);
  transition:transform .95s var(--ease),opacity .5s ease;transition-delay:var(--d,.5s);will-change:transform}
.obj.up{opacity:1;transform:rotateX(0deg) translateY(0)}
.obj .art{font-size:clamp(42px,4.6vw,58px);line-height:1;transition:transform .45s var(--ease);animation:bob 5.5s ease-in-out infinite;animation-delay:var(--ph,0s);filter:drop-shadow(0 5px 4px rgba(31,31,31,.12))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.obj .lab{font-family:var(--mono);font-size:11px;letter-spacing:.02em;background:var(--card);border:1px solid var(--line);padding:5px 12px;border-radius:999px;box-shadow:var(--sh-sm);white-space:nowrap;transition:all .35s var(--ease)}
.obj:hover .lab,.obj:focus-visible .lab{background:var(--ink);color:var(--bg);transform:translateY(-3px)}
.obj:focus-visible{outline:none}
.obj::after{content:"";position:absolute;left:50%;bottom:-14px;width:54%;height:14px;
  border-radius:50%;background:rgba(31,31,31,.16);filter:blur(5px);
  transform:translateX(-50%) scaleX(.4);opacity:0;transition:transform .95s var(--ease),opacity .95s ease;transition-delay:var(--d,.5s)}
.obj.up::after{opacity:1;transform:translateX(-50%) scaleX(1)}
@media(pointer:fine){
  .obj.up:hover,.obj.up:focus-visible{transform:rotateX(-11deg) translateY(-4px) scale(1.035)}
}
/* element micro-animations on hover */
.obj .art .pearl,.obj .art .dot,.obj .art .spin,.obj .art .jiggle{transform-box:fill-box;transform-origin:center}
@keyframes pearlPop{0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes spin360{to{transform:rotate(360deg)}}
@keyframes jiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.obj:hover .art .pearl,.obj:focus-visible .art .pearl{animation:pearlPop .55s var(--ease)}
.obj:hover .art .pearl:nth-of-type(2){animation-delay:.07s}
.obj:hover .art .pearl:nth-of-type(3){animation-delay:.14s}
.obj:hover .art .pearl:nth-of-type(4){animation-delay:.21s}
.obj:hover .art .dot,.obj:focus-visible .art .dot{animation:dotBlink .5s ease}
.obj:hover .art .dot:nth-of-type(2){animation-delay:.12s}
.obj:hover .art .dot:nth-of-type(3){animation-delay:.24s}

.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;opacity:0;animation:fade 1s 1.4s forwards}
.scroll-cue .ln{width:46px;height:1px;background:var(--muted);position:relative;overflow:hidden}
.scroll-cue .ln::after{content:"";position:absolute;inset:0;background:var(--coral);transform:translateX(-100%);animation:sweep 2.2s ease-in-out infinite}
@keyframes sweep{40%,100%{transform:translateX(100%)}}

/* ═════ story popover ═════ */
#pop{position:fixed;z-index:140;width:312px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);padding:22px 22px 20px;opacity:0;pointer-events:none;transform:translateY(10px) scale(.97);transition:opacity .28s var(--ease),transform .28s var(--ease)}
#pop.on{opacity:1;pointer-events:auto;transform:none}
#pop .pk{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-bottom:9px}
#pop h4{font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
#pop p{font-size:13px;color:var(--ink-soft);line-height:1.7}
#pop a{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-family:var(--mono);font-size:11.5px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ochre);padding-bottom:2px;transition:color .2s,border-color .2s}
#pop a:hover{color:var(--coral);border-color:var(--coral)}
#pop .x{position:absolute;top:12px;right:14px;border:none;background:none;font-size:13px;color:var(--muted);cursor:pointer;padding:4px}

/* ═════ marquee ═════ */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;position:relative;z-index:4}
.mq-in{display:flex;gap:0;width:max-content;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq span{display:flex;align-items:center;gap:34px;padding-right:34px;font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.01em;white-space:nowrap}
.mq i{font-style:italic;font-weight:300;color:var(--coral)}
.mq .s{color:var(--orange);font-style:normal}

/* ═════ shared layout ═════ */
.wrap{max-width:1180px;margin:0 auto;padding:0 42px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:54px}
.sec-head .l{display:flex;align-items:baseline;gap:18px}
.sec-head .no{font-family:var(--mono);font-size:12px;color:var(--coral)}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em}
.sec-head h2 i,.sec-head h2 strong{font-style:italic;font-weight:300}
.sec-head .r{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.08em;text-align:right;line-height:1.8}

/* ═════ work / case cards ═════ */
#work{padding:110px 0 80px}
.case{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--card);margin-bottom:30px;cursor:pointer;text-decoration:none;color:inherit;transition:transform .45s var(--ease),box-shadow .45s var(--ease);position:relative;opacity:0;transform:translateY(34px)}
.case.rev{opacity:1;transform:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .7s var(--ease)}
.case:hover{transform:translateY(-7px);box-shadow:var(--sh-lg)}
.case .idx{position:absolute;top:18px;left:26px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:15px;color:var(--muted);z-index:3}
.case .media{position:relative;min-height:380px;overflow:hidden;display:grid;place-items:center}
.case .media>svg{transition:transform .8s var(--ease)}
.case:hover .media>svg{transform:scale(1.045)}
.case .media img.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.case:hover .media img.card-img{transform:scale(1.045)}
#card-tue .media img.card-img{object-position:left center}
.case .media .badge{position:absolute;bottom:18px;left:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid var(--line);padding:6px 12px;border-radius:999px;color:var(--ink-soft)}
.case .body{padding:48px 48px 42px;display:flex;flex-direction:column;gap:16px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.hot{background:var(--ink);border-color:var(--ink);color:var(--card)}
.case h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.5vw,33px);letter-spacing:-.02em;line-height:1.1}
.case h3 i,.case h3 strong{font-style:italic;font-weight:300;color:var(--coral)}
.case .body p{color:var(--ink-soft);font-size:14.5px;line-height:1.75;max-width:430px}
.stats{display:flex;gap:0;margin-top:auto;border-top:1px solid var(--line)}
.stat{flex:1;padding:16px 18px 0 0}
.stat+.stat{padding-left:18px;border-left:1px solid var(--line)}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:-.01em}
.stat span{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.case .cta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink);margin-top:14px;display:flex;align-items:center;gap:8px}
.case .cta .ar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--ink);transition:all .3s var(--ease)}
.case:hover .cta .ar{background:var(--coral);border-color:var(--coral);color:#fff;transform:rotate(-45deg)}
.m-pp{background:linear-gradient(150deg,#FBD9B8,#F8E6A6)}
.m-bot{background:linear-gradient(150deg,#C2D6FA,#BEF0D2)}
.m-coast{background:linear-gradient(150deg,#C9F0D8,#C6DBF6)}

/* ═════ about ═════ */
#about{padding:120px 0 110px}
.ab-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:start}
.ab-state{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.7vw,36px);line-height:1.45;letter-spacing:-.015em}
.ab-state i{font-style:italic;font-weight:300;color:var(--coral)}
.ab-state .hl{background:linear-gradient(transparent 58%,rgba(245,189,46,.6) 58%);padding:0 2px}
.ab-meta{display:flex;flex-direction:column}
.ab-item{border-top:1px solid var(--line);padding:20px 0}
.ab-item:last-child{border-bottom:1px solid var(--line)}
.ab-item .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:flex;justify-content:space-between}
.ab-item .t em{font-style:normal;color:var(--coral)}
.ab-item p{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.ab-item p b{color:var(--ink);font-weight:600}

/* ═════ footer ═════ */
footer{background:var(--ink);color:var(--bg);padding:130px 42px 50px;position:relative;overflow:hidden}
footer .k{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#595959;text-align:center}
footer .big{display:block;text-align:center;margin-top:26px;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(52px,9vw,128px);letter-spacing:-.02em;line-height:1;color:var(--bg);text-decoration:none;position:relative;transition:color .35s}
footer .big:hover{color:var(--ochre)}
footer .big .ar{font-style:normal;display:inline-block;transition:transform .35s var(--ease)}
footer .big:hover .ar{transform:translate(12px,-10px)}
footer .row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:110px;gap:20px;flex-wrap:wrap}
footer .row .col{font-family:var(--mono);font-size:11.5px;line-height:2;color:#595959}
footer .row a{color:var(--bg);text-decoration:none;border-bottom:1px solid #595959;transition:border-color .2s,color .2s}
footer .row a:hover{color:var(--ochre);border-color:var(--ochre)}
footer .clock{color:var(--bg)}

/* ═════ generic page shell (case stubs) ═════ */
.page{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:140px 24px 90px}
.page .k{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--coral)}
.page h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,64px);letter-spacing:-.02em;line-height:1.08;margin:18px 0 14px;max-width:16ch}
.page h1 i{font-style:italic;font-weight:300;color:var(--coral)}
.page .lede{font-size:16px;color:var(--ink-soft);line-height:1.75;max-width:44ch}
.page .soon{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--card)}
.page .back{margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ochre);padding-bottom:3px;transition:color .2s,border-color .2s}
.page .back:hover{color:var(--coral);border-color:var(--coral)}

/* ═════ motion / responsive ═════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .obj,.center,.hero-title .reveal,.scroll-cue{opacity:1!important}
}
@media(max-width:900px){
  nav{padding:16px 22px}
  nav.scrolled{padding:12px 22px}
  nav ul a{padding:10px 12px}
  .wrap{padding:0 22px}
  .hero{min-height:0;padding:110px 0 40px}
  .stage{height:auto;min-height:0;margin-top:30px;perspective:none}
  .center{position:static;transform:none}
  .objs{position:static;display:flex;gap:14px;overflow-x:auto;padding:34px 22px 10px;scrollbar-width:none}
  .obj{position:static!important;flex:0 0 auto;transform:none!important;opacity:1!important;transition:none}
  .obj::after{display:none}
  .scroll-cue{display:none}
  .case{grid-template-columns:1fr}
  .case .media{min-height:230px}
  .case .body{padding:30px 26px}
  .ab-grid{grid-template-columns:1fr;gap:44px}
  footer .row{justify-content:center;text-align:center}
}
@media(max-width:560px){
  nav{padding:13px 15px}
  nav.scrolled{padding:11px 15px}
  .logo{font-size:17px}
  nav ul a{padding:7px 8px;font-size:11px;letter-spacing:.02em}
  nav .cv,nav .lang{margin-left:5px;padding:7px 10px}
}

/* ═════ case study (template — reused by every /work/<slug> page) ═════ */
.cs{max-width:1000px;margin:0 auto;padding:120px 56px 90px;position:relative}
.cs .back{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;color:var(--muted);text-decoration:none;margin-bottom:28px}
.cs .back:hover{color:var(--coral)}
.cs>.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--coral)}
.cs-title{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;line-height:1.09;margin:14px 0 12px;max-width:none}
.cs-title i{font-style:italic;font-weight:300;color:var(--coral)}
.cs-sub{font-size:15.5px;color:var(--ink-soft);line-height:1.7;max-width:none}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:34px 0 4px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.fact b{display:block;font-family:var(--serif);font-weight:500;font-size:15px;line-height:1.25}
.fact span{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.cs section{display:grid;grid-template-columns:168px minmax(0,1fr);column-gap:52px;padding:56px 0;border-top:1px solid var(--line)}
.cs section>h3{grid-column:1;position:sticky;top:92px;align-self:start;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.cs section>h3 .no{color:var(--coral);font-weight:500}
.cs section>:not(h3){grid-column:2}
.cs section p{font-size:15.5px;line-height:1.8;margin-bottom:14px;max-width:600px;color:var(--ink-soft)}
.cs section p strong{color:var(--ink);font-weight:600}
.cs .cs-punch{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);max-width:560px;margin-top:18px}
.pd{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:12px}
.pd .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px;color:var(--ink)}
.pd.prob .lab{color:var(--coral-deep)}
.pd.dec .lab{color:var(--sky)}
.pd p{margin:0;font-size:14px;max-width:none;color:var(--ink-soft)}
.cs blockquote{font-family:var(--serif);font-style:italic;font-weight:400;border-left:3px solid var(--ochre);padding:6px 0 6px 22px;font-size:19px;line-height:1.6;margin:6px 0 14px;max-width:560px;color:var(--ink)}
.media-slot{background:#efefef;border:1.5px dashed #cfcfcf;border-radius:16px;min-height:120px;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:11.5px;line-height:1.6;text-align:center;padding:20px;margin:14px 0}
.media-slot.filled{display:grid;gap:12px;border:none;background:none;padding:0;min-height:0}
.media-slot.filled.cols-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.media-slot.filled img{width:100%;height:auto;display:block;border-radius:12px}
/* 04 · do/don't card centered on darkened research photo */
.dd-hero{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;display:grid;place-items:center;margin:14px 0}
.dodont{width:min(460px,62%);display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.dodont .dd-col{padding:20px 24px 24px}
.dodont .dd-col+.dd-col{border-left:1px solid var(--line)}
.dodont .dd-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.dodont .dd-col.good .dd-h{color:#2f9e5f}
.dodont .dd-col.bad .dd-h{color:#c4574e}
.dodont ul{list-style:none;margin:0;padding:0}
.dodont li{font-size:12px;line-height:2;color:var(--ink-soft);border-bottom:1px dashed var(--line)}
.dodont li:last-child{border-bottom:none}
@media (max-width:760px){.dd-hero{aspect-ratio:auto;padding:24px 0}.dodont{width:92%;grid-template-columns:1fr}.dodont .dd-col+.dd-col{border-left:none;border-top:1px solid var(--line)}}
/* 05 · Style Lock, text left + spec image right */
.slock-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin:34px 0}
.slock-text .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.slock-text p{font-size:14.5px;line-height:1.85;color:var(--ink-soft);max-width:none;margin:0}
.slock-text p strong{color:var(--ink);font-weight:600}
.slock-shot{background:#0f1420;border:1px solid var(--line);border-radius:14px;aspect-ratio:16/10;display:grid;place-items:center;color:#8a93a6;font-family:var(--mono);font-size:11px;line-height:1.7;text-align:center;padding:14px}
.slock-shot code{color:#c3ccdd}
.slock-shot.filled{padding:0;border:none;background:none}
.slock-shot img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}
@media(max-width:760px){.slock-row{grid-template-columns:1fr;gap:18px}}
.fig{margin:22px 0}
.fig img,.fig svg{width:100%;height:auto;border:1px solid var(--line);border-radius:16px;display:block;background:var(--card)}
.fig figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:9px;letter-spacing:.03em;line-height:1.6}
.three-up{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:14px}
.cs-cover{position:relative;width:100vw;margin:30px 0 50px;margin-left:calc(50% - 50vw);background:var(--card);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-cover img{display:block;width:100%;height:auto}
.cs-cover.placeholder{aspect-ratio:5/2;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-align:center;padding:20px}
@media(max-width:760px){.cs-cover.placeholder{aspect-ratio:16/9}}
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:22px 0 6px;padding:22px 0 0;border-top:1px solid var(--line)}
.cs-meta-item .ml{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.cs-meta-item .mv{font-size:13.5px;line-height:1.5;color:var(--ink)}
.cs-meta-item .mv small{display:block;color:var(--muted);font-size:11.5px;line-height:1.45;margin-top:3px}
.cs-end{border-top:1px solid var(--line);padding:44px 0 0;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.cs-end a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ochre);padding-bottom:3px}
.cs-end a:hover{color:var(--coral);border-color:var(--coral)}
/* problem: image + text rows, alternating sides */
.prob-row{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;align-items:center;margin:22px 0}
.prob-row.flip .prob-media{order:2}
.prob-media{background:#eef0f3;border:1.5px dashed rgba(31,31,31,.2);border-radius:14px;aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:11px;line-height:1.9;text-align:center;padding:14px}
.prob-media code{font-size:11px;color:var(--ink-soft)}
.prob-media img{width:100%;height:100%;object-fit:cover;display:block}
.prob-media.filled{border:none;background:none;padding:0;overflow:hidden}
/* solution 3-step flow */
.sflow{display:flex;align-items:stretch;gap:0;margin:20px 0}
.sflow-step{flex:1;background:#f7f7f7;border:1px solid var(--line);border-radius:14px;padding:14px}
.sflow-pill{display:inline-block;border-radius:999px;padding:4px 11px;font-family:var(--mono);font-size:11px;font-weight:700;color:#1F1F1F}
.sflow-body{font-size:12.5px;color:var(--ink-soft);line-height:1.8;margin-top:10px}
.sflow-arrow{display:flex;align-items:center;padding:0 8px;color:#bbb;font-size:20px}
@media(max-width:760px){.sflow{flex-direction:column}.sflow-arrow{transform:rotate(90deg);padding:8px 0;justify-content:center}}
/* research automate-vs-human split */
.rsplit{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 16px}
.rs-chip{border-radius:10px;padding:9px 13px;font-size:12px;font-weight:500;line-height:1.3}
.rs-chip.auto{background:#E6F0FE;color:#1d5bb0;border:1px solid #bcd6f7}
.rs-chip.user{background:#1F1F1F;color:#fff}
.rs-sep{color:#cfcfcf}
.rs-legend{display:flex;gap:22px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.rs-dot{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-1px}
.rs-dot.auto{background:#E6F0FE;border:1px solid #bcd6f7}
.rs-dot.user{background:#1F1F1F}
/* system map (rebuilt arch diagram, clean style) */
.sysmap{margin:22px 0}
.sysmap-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:18px 0 10px}
.sysmap-card{background:#f7f7f7;border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.sysmap-card .sm-pill{display:inline-block;border-radius:999px;padding:3px 10px;font-family:var(--mono);font-size:10.5px;font-weight:700;color:#1F1F1F;margin-right:10px;vertical-align:middle}
.sysmap-card .sm-title{font-size:13px;font-weight:600;color:#1F1F1F}
.sysmap-card .sm-sub{font-size:12px;color:var(--ink-soft);line-height:1.65;margin-top:5px}
.sysmap-down{display:flex;justify-content:center;color:#c2c2c2;font-size:18px;padding:5px 0}
.sysmap-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sysmap-card.lock{background:#FDEAD9;border-color:#F0884A}
@media(max-width:760px){.sysmap-row{grid-template-columns:1fr}}
.prob-text .lab{font-family:var(--serif);font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
.prob-text .lab .lab-ic{font-family:initial;font-style:normal;margin-right:9px;font-size:18px;line-height:1}
.prob-text p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-soft);max-width:none}
@media(max-width:760px){.prob-row{grid-template-columns:1fr;gap:14px}.prob-row.flip .prob-media{order:0}}
/* details: feature blocks with a big framed image/gif */
.detail{margin:32px 0}
.detail h4{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:8px}
.detail>p{font-size:14.5px;line-height:1.7;color:var(--ink-soft);margin-bottom:16px;max-width:600px}
.detail-media{background:#eef0f3;border:1.5px dashed rgba(31,31,31,.2);border-radius:16px;min-height:320px;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:11.5px;line-height:1.9;text-align:center;padding:22px}
.detail-media code{color:var(--ink-soft)}
.detail-media video{width:100%;height:auto;display:block;border-radius:16px}
.detail-media.filled{display:block;border:none;background:none;padding:0;min-height:0}
.rfig{margin:24px 0 26px}
.rfig-media{background:#eef0f3;border:1.5px dashed rgba(31,31,31,.2);border-radius:16px;min-height:300px;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:11.5px;line-height:1.9;text-align:center;padding:22px}
.rfig-media code{color:var(--ink-soft)}
.rfig-media img{width:100%;height:auto;display:block;border-radius:16px}
.rfig-media.filled{display:block;border:none;background:none;padding:0;min-height:0}
.rfig-cap{margin-top:11px;font-size:13px;line-height:1.6;color:var(--muted)}
/* 04 · fixed↔custom spectrum */
.spec{background:var(--card);border-radius:18px;padding:26px 26px 22px;margin-top:24px}
.spec-ends{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.spec-ends b{color:var(--ink);font-weight:600}
.spec-rail{height:8px;border-radius:999px;background:linear-gradient(90deg,#d9d9d9 0%,#dfe8dc 30%,#f4e6b3 58%,#f6d2ea 100%)}
.spec-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.sg-lab{font-size:11px;letter-spacing:.02em;color:var(--muted);text-align:center;margin-bottom:9px}
.sg-chips{display:flex;flex-direction:column;gap:8px}
.spec-chip{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:13px;font-weight:500}
.spec-chip i{width:9px;height:9px;border-radius:50%;flex:none}
.dot-fix{background:#c4c4c4}.dot-light{background:var(--sage)}.dot-mid{background:var(--ochre)}.dot-deep{background:var(--clay)}
.spec-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:12.5px;color:var(--muted)}
.spec-legend span{display:flex;align-items:center;gap:7px}
.spec-legend i{width:11px;height:11px;border-radius:50%}
.pullout{margin:38px 0 34px;border-left:3px solid var(--ochre);padding:2px 0 2px 22px}
.pullout .po-k{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.pullout p{font-family:var(--serif);font-size:18px;line-height:1.62;color:var(--ink);max-width:640px}
.pullout b{font-weight:600}
/* 05 · three-stage steps, screenshot on top + step card below */
.sol-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0}
.sol-step{display:flex;flex-direction:column;gap:14px}
.sol-step .shot{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#eef0f3;border:1.5px dashed rgba(31,31,31,.2);display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:11px;text-align:center;padding:14px}
.sol-step .shot.filled{border:none;padding:0}
.sol-step .shot img{width:100%;height:100%;object-fit:cover;display:block}
.sol-step .sflow-step{flex:1}
@media(max-width:760px){.sol-steps{grid-template-columns:1fr}}
@media(max-width:720px){.spec-groups{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.three-shot{grid-template-columns:1fr}}
@media(max-width:760px){
  .cs{padding:100px 22px 64px}
  .cs section{grid-template-columns:1fr;column-gap:0;padding:40px 0}
  .cs section>h3{position:static;margin-bottom:14px}
  .cs section>:not(h3){grid-column:1}
  .facts{grid-template-columns:1fr 1fr}
  .cs-meta{grid-template-columns:1fr 1fr;gap:16px}
}

/* 04 · TU/e research flow / timelines / guidelines map */
.rflow{display:flex;align-items:stretch;margin:18px 0;overflow-x:auto}
.rflow .rf{flex:1;min-width:118px;position:relative;padding-right:32px}
.rflow .rf:last-child{padding-right:0}
.rflow .rf::after{content:"\2192";position:absolute;right:9px;top:4px;color:var(--muted);font-size:15px}
.rflow .rf:last-child::after{content:none}
.rflow .fn{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--muted);display:block;margin-bottom:6px}
.rflow .rf b{display:block;font-size:13px;margin-bottom:5px}
.rflow .fd{display:block;font-size:11px;line-height:1.55;color:var(--ink-soft)}
.rflow-hero{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;margin:14px 0;padding:26px 28px}
.rflow-hero .rflow{margin:0;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.rflow-hero .fn{color:rgba(255,255,255,.75)}
.rflow-hero .rf b{color:#fff}
.rflow-hero .fd{color:rgba(255,255,255,.88)}
.rflow-hero .rf::after{color:rgba(255,255,255,.8)}
@media (max-width:760px){.rflow-hero{aspect-ratio:auto}}
/* 04 · vertical research timeline */
.vtl{max-width:760px;margin:18px auto 30px}
.vtl .row{display:grid;grid-template-columns:1fr 40px 1fr}
.vtl .mid{position:relative}
.vtl .mid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:var(--ink);transform:translateX(-50%)}
.vtl .row:first-child .mid::before{top:6px}
.vtl .row:last-child .mid::before{bottom:auto;height:6px}
.vtl .mid i{position:absolute;left:50%;top:2px;width:11px;height:11px;border-radius:50%;transform:translateX(-50%);border:2px solid var(--bg,#fff)}
.vtl .cell{padding:0 6px 30px}
.vtl .cell.l{text-align:right}
.vtl .hd{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em}
.vtl .pill{display:inline-block;margin-top:6px;border-radius:999px;padding:5px 13px;font-family:var(--mono);font-size:10.5px}
.vtl .tx{margin-top:7px;font-family:var(--mono);font-size:10px;line-height:1.65;color:var(--muted)}
.vtl .p1{background:#F8DCB0}.vtl .p2{background:#F5CE56}.vtl .p3{background:#C9D8F8}
.vtl .d1{background:#E0A23C}.vtl .d2{background:#CFA31B}.vtl .d3{background:#5B8DF0}
.vtl .slot{border:1.5px dashed #cfcfcf;border-radius:12px;width:230px;height:140px;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:10px;padding:8px}
.vtl .cell.l .slot,.vtl .row .cell:first-child .slot{margin-left:auto}
.vtl .slot.filled{border:none;padding:0;overflow:hidden}
.vtl .slot.filled.outline{border:1.5px dashed #cfcfcf;padding:5px;background:#fff}
.vtl .slot img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.vtl .slot.filled.outline img{object-fit:contain;border-radius:8px}
@media (max-width:640px){
  .vtl .row{grid-template-columns:22px 1fr;column-gap:12px;padding-bottom:34px}
  .vtl .mid{grid-column:1;grid-row:1 / span 2}
  .vtl .cell{padding:0}
  .vtl .cell.l,.vtl .cell.r{grid-column:2;grid-row:1;text-align:left}
  .vtl .row .cell:not(.l):not(.r){grid-column:2;grid-row:2}
  .vtl .slot{width:100%;max-width:320px;height:auto;min-height:0;margin:10px 0 0}
  .vtl .cell.l .slot,.vtl .row .cell:first-child .slot{margin-left:0}
  .vtl .slot img{width:100%;height:auto;display:block}
}
@media (max-width:760px){.rmap2{flex-wrap:wrap}.rmap2 .grp{flex-wrap:wrap}.rmap2 .a{display:none}.rmap2 .n{max-width:none;flex:1 1 40%}}
.rtl{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:22px 24px 16px;margin:14px 0}
.rtl h4{font-size:14px;margin-bottom:4px}
.rtl h4 .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.rtl .topic{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.rtl-bar{display:flex;gap:3px;position:relative}
.rtl-ph{padding:12px 10px 14px;min-height:118px;border-radius:8px}
.rtl-ph b{display:block;font-size:11.5px;line-height:1.35;margin-bottom:7px}
.rtl-ph .it{display:block;font-size:10px;line-height:1.55;color:var(--ink-soft)}
.rtl-axis{display:flex;font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:8px}
.rtl-axis i{font-style:normal;flex:1}
.rtl .ai-mark{position:absolute;top:-17px;font-size:10px;font-family:var(--mono);color:var(--sky);white-space:nowrap}
.rtl .ai-mark::before{content:"\25BC";margin-right:4px}
.rtl .t1{background:#FCF6E9}.rtl .t2{background:#FAEED3}.rtl .t3{background:#F8E5BA}.rtl .t4{background:#F5D99A}.rtl .t5{background:#F2CE7E}.rtl .t6{background:#EFC161}
.rtl .ai{background:#E8EFFD;outline:1.5px solid var(--sky)}
.gmap2{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;margin:18px 0}
.gmap2 .gp{display:inline;font-size:13.5px;font-weight:600;line-height:1.75;background:linear-gradient(transparent 64%,#F8DFA2 0);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gmap2 .kids{margin:11px 0 0 4px;border-left:1.5px solid #C9C2B4;display:flex;flex-direction:column;gap:8px;padding:2px 0}
.gmap2 .kid{display:flex;align-items:center}
.gmap2 .kid::before{content:"";width:13px;height:1.5px;background:#C9C2B4;flex:none}
.gmap2 .kp{color:var(--muted);font-size:11px;line-height:1.6;display:inline-block}
.gmap2 .kt{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.1em;margin-right:6px;text-transform:uppercase}
.gmap2 .kt.f{color:#2f9e5f}
.gmap2 .kt.l{color:#D9782D}
@media (max-width:900px){.gmap2{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gmap2{grid-template-columns:1fr}}
@media (max-width:760px){.gl-map{grid-template-columns:1fr}.gl-map .arrow{transform:rotate(90deg);padding:6px 0}.rtl-bar{flex-direction:column}.rtl .ai-mark{position:static;display:block;margin-bottom:6px}.rtl-axis{display:none}}

/* 05 · Level of Involvement 動畫輪播 */
.mcar{max-width:620px;margin:18px 0;position:relative}
.mcar .stage{position:relative;height:320px}
.mcar .mslide{position:absolute;inset:0;background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 172px;opacity:0;transition:opacity .6s ease;pointer-events:none}
.mcar .mslide.on{opacity:1;pointer-events:auto}
.mcar .aside{border-left:1.5px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:#FDFCF9}
.mcar .aside .mn{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em}
.mcar .aside .md{font-size:11px;color:var(--muted);line-height:1.6}
.mcar .orb{position:relative;width:52px;height:52px;flex:none;margin-top:6px}
.mcar .orb i{position:absolute;border-radius:50%}
.mcar .orb .halo{inset:0;background:var(--hc);opacity:.16;animation:orbhalo 4.2s ease-in-out infinite}
.mcar .orb .halo2{inset:0;background:var(--hc);opacity:.09;filter:blur(2px);animation:orbhalo 4.2s ease-in-out infinite 1.1s}
.mcar .orb .core{inset:11px;background:var(--cf);box-shadow:0 0 18px 6px var(--gl);animation:orbbreathe 4.2s ease-in-out infinite}
@keyframes orbbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes orbhalo{0%,100%{transform:scale(1)}50%{transform:scale(1.34)}}
.mcar .mr{--cf:#4A6FC4;--gl:rgba(91,141,240,.38);--hc:#5B8DF0}
.mcar .me{--cf:#E0A93C;--gl:rgba(245,189,46,.42);--hc:#F5BD2E}
.mcar .ma{--cf:#D65A4A;--gl:rgba(230,110,95,.4);--hc:#E66E5F}
.mcar .mboard{position:relative;background:#F7F6F3;overflow:hidden}
.mcar .mnote{position:absolute;width:60px;height:58px;padding:6px;font-size:7.5px;line-height:1.4;box-shadow:0 2px 5px rgba(0,0,0,.12)}
.mcar .mnote.base{left:18px;top:120px;background:#F5DE8F;opacity:1}
.mcar .mbubble{position:absolute;right:14px;top:16px;max-width:64%;background:#fff;border:1px solid #E4E1DA;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.1);padding:10px 12px;font-size:9px;line-height:1.6;color:var(--ink-soft);opacity:0}
.mcar .mbubble::after{content:"×";position:absolute;top:3px;right:7px;font-size:8px;color:#bbb}
.mcar .pnote{opacity:0}
.mcar .pnote.p1{left:94px;top:44px;background:#F5DE8F}
.mcar .pnote.p2{left:24px;top:196px;background:#D9B8F0}
.mcar .pnote.p3{left:102px;top:170px;background:#AFC5F2}
.mcar .pnote.p4{left:180px;top:64px;background:#9FDCB4}
.mcar .mslide.play .mbubble{animation:mpop .6s cubic-bezier(.3,1.4,.5,1) .5s forwards}
.mcar .mslide.play .pnote.p1{animation:mdrop .45s cubic-bezier(.3,1.5,.5,1) .4s forwards}
.mcar .mslide.play .pnote.p2{animation:mdrop .45s cubic-bezier(.3,1.5,.5,1) .8s forwards}
.mcar .mslide.play .pnote.p3{animation:mdrop .45s cubic-bezier(.3,1.5,.5,1) 1.2s forwards}
.mcar .mslide.play .pnote.p4{animation:mdrop .45s cubic-bezier(.3,1.5,.5,1) 1.6s forwards}
.mcar .mslide.play .mbubble.late{animation-delay:2s}
@keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.88)}to{opacity:1;transform:none}}
@keyframes mdrop{from{opacity:0;transform:scale(.35) rotate(-9deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.mcar .tabs{display:flex;gap:10px;margin-top:14px}
.mcar .tab{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--muted);cursor:pointer;border:1.5px solid var(--line);border-radius:999px;background:#fff;padding:7px 15px;transition:.25s}
.mcar .tab i{width:8px;height:8px;border-radius:50%;background:#D9D2C2;transition:.25s}
.mcar .tab:hover{border-color:var(--ink);color:var(--ink)}
.mcar .tab.on{color:var(--ink);border-color:var(--ink)}
.mcar .tab.on.tr{background:#EDF2FD}.mcar .tab.on.tr i{background:#33518F}
.mcar .tab.on.te{background:#FBF3DC}.mcar .tab.on.te i{background:#E0A93C}
.mcar .tab.on.ta{background:#FBE9E6}.mcar .tab.on.ta i{background:#C8483C}
.mcar .bar{height:2px;background:#EFE9DA;border-radius:2px;margin-top:10px;overflow:hidden}
.mcar .bar b{display:block;height:100%;width:0;background:#C9C2B4}
.mcar:not(:hover) .bar b{animation:mload 3s linear infinite}
@keyframes mload{from{width:0}to{width:100%}}
@media (max-width:640px){.mcar .mslide{grid-template-columns:1fr}.mcar .aside{border-left:none;border-top:1.5px solid var(--line);flex-direction:row;text-align:left;padding:12px 16px}.mcar .stage{height:400px}}
/* 06 · decision media (stacked figures) */
.dec-media{display:flex;flex-direction:column;gap:8px}
.dec-media img{width:100%;display:block;border-radius:12px;background:#fff;border:1px solid var(--line)}

/* 06 · 決策動畫(球體 = O2+O3 扁平柔光) */
.dec-anim{background:#fff;border:1.5px solid var(--line);border-radius:14px;aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden}
.dorb{position:relative;flex:none}
.dorb i{position:absolute;border-radius:50%}
.dorb .dh1{inset:0;background:var(--hc);opacity:.16;animation:orbhalo 4.2s ease-in-out infinite}
.dorb .dh2{inset:0;background:var(--hc);opacity:.09;filter:blur(2px);animation:orbhalo 4.2s ease-in-out infinite 1.1s}
.dorb .dco{inset:20%;background:var(--cf);box-shadow:0 0 16px 5px var(--gl);animation:orbbreathe 4.2s ease-in-out infinite}
.dorb.dr{--cf:#4A6FC4;--gl:rgba(91,141,240,.38);--hc:#5B8DF0}
.dorb.de{--cf:#E0A93C;--gl:rgba(245,189,46,.42);--hc:#F5BD2E}
.dorb.da{--cf:#D65A4A;--gl:rgba(230,110,95,.4);--hc:#E66E5F}
.dorb.dg{--cf:#B7B0A1;--gl:rgba(160,152,138,.28);--hc:#B7B0A1}
.dorb.dg .dco,.dorb.dg .dh1,.dorb.dg .dh2{animation:none}
.davatar{position:relative;width:96px;height:96px}
.davatar i{position:absolute;background:#fff}
.davatar .hd{left:50%;top:8px;width:36px;height:36px;border:2.5px solid var(--ink);border-radius:50%;transform:translateX(-50%)}
.davatar .bd{left:50%;bottom:6px;width:64px;height:38px;border:2.5px solid var(--ink);border-bottom:none;border-radius:32px 32px 0 0;transform:translateX(-50%)}
.dcap{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* A1 交叉變形 */
.anim1 .davatar,.anim1 .dorb{grid-area:1/1}
.anim1 .davatar{animation:decav 6s ease-in-out infinite}
.anim1 .dorb{width:96px;height:96px;animation:decorb 6s ease-in-out infinite}
@keyframes decav{0%,32%{opacity:1;transform:scale(1)}45%,88%{opacity:0;transform:scale(.75)}100%{opacity:1;transform:scale(1)}}
@keyframes decorb{0%,32%{opacity:0;transform:scale(.75)}45%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.75)}}
/* B2 前後對比 */
.anim2 .wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.anim2 .row{display:flex;gap:26px}
.anim2 .dorb{width:56px;height:56px}
.anim2 .mid{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:8px;margin:4px 0;text-transform:uppercase}
.anim2 .mid::before,.anim2 .mid::after{content:"";width:36px;height:1px;background:var(--line)}
.anim2 .lb{font-family:var(--mono);font-size:8.5px;color:var(--muted);text-align:center;margin-top:6px}
.anim2 .col{display:flex;flex-direction:column;align-items:center}
/* 08 · limitation next-step line */
.lim-next{margin-top:10px;font-size:12px;font-weight:500;color:#9A7B15}
.pd .lab .lab-ic{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em}

/* ═════ shared masthead (matches homepage) ═════ */
@font-face{font-family:'TeX Gyre Termes';src:url('font/texgyre/TeXGyreTermes-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
.mast{padding:24px clamp(20px,4vw,44px) 16px;border-bottom:3px double var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;background:transparent}
.mast .wordmark{font-family:'TeX Gyre Termes',Georgia,serif;font-size:27px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.mast .wordmark .ch{display:inline-block;transition:transform .22s cubic-bezier(.22,.8,.24,1),color .22s}
.mast .wordmark .ch:hover{transform:translateY(-4px);color:#3D5BC4}
.mast .wordmark .bk{text-transform:uppercase;font-size:1.18em}
.mast .issue{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mast .mnav{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline}
.mast .mnav a,.mast .mnav button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;background:none;border:none;cursor:pointer;
  padding:7px 13px;margin:-3px -4px;border-radius:999px;transition:color .2s,background .2s}
.mast .mnav a:hover,.mast .mnav button:hover{color:var(--ink);background:rgba(31,31,31,.07)}

/* ═════ limitations · now → future arrow flow (tue §08) ═════ */
.limflow{display:grid;grid-template-columns:minmax(0,5fr) 56px minmax(0,5fr);
  grid-auto-rows:1fr;gap:18px 12px;margin-top:14px}
.limflow .item{display:contents}
.limflow .now{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.limflow .now .ttl{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600}
.limflow .now .ttl svg{flex:none;width:17px;height:17px;color:#3D5BC4}
.limflow .now p{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.6}
.limflow .arr{color:#3D5BC4;display:grid;place-items:center;align-self:center}
.limflow .arr svg{width:44px}
.limflow .future{border:1.5px dashed #3D5BC4;border-radius:10px;padding:16px 18px;color:var(--ink-soft);
  font-size:13px;line-height:1.6;background:rgba(61,91,196,.04)}
.limflow .future b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#3D5BC4;margin-bottom:5px;font-weight:500}
@media(max-width:640px){
  .limflow{grid-template-columns:1fr;grid-auto-rows:auto}
  .limflow .arr svg{transform:rotate(90deg);width:26px}
}

/* ═══ smart-coastline case: sub-headings, lists, personas, impact, placeholders ═══ */
.cs section h4{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.01em;margin:32px 0 8px;color:var(--ink)}
.cs section .dp-sub:first-child{margin-top:0}
.cs section ol{margin:10px 0 0;padding-left:0;list-style:none;counter-reset:csol;max-width:660px}
.cs section ol li{position:relative;padding:7px 0 7px 32px;font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.cs section ol li::before{counter-increment:csol;content:counter(csol);position:absolute;left:0;top:7px;width:21px;height:21px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;display:grid;place-items:center;font-weight:600}
.cs section ol li strong{color:var(--ink);font-weight:600}
.ins{margin:24px 0}
.ins .ih{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.ins p{margin-top:7px}
.ins .ico{font-family:initial;font-style:normal}
.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:18px 0}
.persona{text-align:center}
.persona .pfoto{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#eef0f3;margin:0 auto 12px;display:block}
.persona .pname{font-weight:600;font-size:15px}
.persona .pquote{font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:6px}
.impact{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:8px 0}
.impact .stat{text-align:center}
.impact .fig{font-weight:700;font-size:clamp(38px,5vw,56px);letter-spacing:-.02em;line-height:1.05;color:var(--ink)}
.impact .slab{font-weight:600;font-size:15px;margin-top:10px}
.impact .sdesc{font-size:12.5px;line-height:1.6;color:var(--muted);margin-top:8px;max-width:280px;margin:8px auto 0}
.img2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 16px}
.cshot{background:#eef0f3;border:1.5px dashed rgba(31,31,31,.2);border-radius:14px;aspect-ratio:16/9;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:11px;line-height:1.7;text-align:center;padding:14px;margin:16px 0}
.cshot.tall{aspect-ratio:4/3}
.cshot.filled{border:none;background:none;padding:0;aspect-ratio:auto;display:block}
.cshot.filled img,.cshot.filled video{width:100%;height:auto;object-fit:contain;border-radius:14px;display:block}
.img2 .cshot.filled{aspect-ratio:16/9}
.img2 .cshot.filled img{height:100%;object-fit:cover}
.cshot.filled.crop169{aspect-ratio:16/9}
.cshot.filled.crop169 img{height:100%;object-fit:cover}
.cs-cover video{display:block;width:100%;height:auto}
.cshot code{color:var(--ink-soft)}
.cs-rationale{margin-top:14px;font-size:13.5px;line-height:1.7;color:var(--ink-soft);border-left:3px solid var(--ochre);padding-left:14px;max-width:660px}
.cs-rationale b{color:var(--ink);font-weight:600}
@media(max-width:720px){.personas,.impact,.img2{grid-template-columns:1fr}.impact{gap:34px}}