:root{
  --bg:#f6f9ff; --surface:#fff; --ink:#091938; --muted:#475877; --line:#d8e3f5;
  --accent:#1d4ed8; --accent-deep:#0a1c42; --accent-soft:#e8f0fe;
  --yellow:#facc15; --yellow-warm:#f59e0b; --yellow-soft:#fef9c3;
  --ok:#10b981; --ok-soft:#e6f9f1; --warn:#d97706; --warn-soft:#fef3c7;
  --radius:24px; --top:156px; --bottom:0px;
  --shadow:0 4px 12px rgba(9,25,56,.05),0 14px 36px rgba(29,78,216,.08);
  --sans:"Plus Jakarta Sans","Inter","PingFang TC","Noto Sans TC",system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif;
  --serif:"Plus Jakarta Sans","PingFang TC","Noto Sans TC",system-ui,-apple-system,"Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* Top bar */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--top);display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,40px);background:rgba(250,248,244,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand-mark{width:32px;height:32px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:18px}
.nav-desktop{display:flex;gap:6px}
.nav-desktop a{padding:8px 16px;border-radius:999px;color:var(--muted);font-weight:500;font-size:15px;transition:.15s}
.nav-desktop a:hover{color:var(--ink);background:#f0ece4}
.nav-desktop a.active{color:var(--accent);background:var(--accent-soft)}
.topbar-right{display:flex;align-items:center;gap:12px;min-width:90px;justify-content:flex-end}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface)}
.lang button{padding:3px 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.lang button.on{background:var(--ink);color:#fff}

main{padding-top:var(--top);min-height:100%}
.view{min-height:calc(100vh - var(--top));min-height:calc(100dvh - var(--top))}

/* Ask home */
#view-ask{display:flex;flex-direction:column}
.ask-home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:32px 20px 80px;max-width:820px;width:100%;margin:0 auto}
.greet-pill{font-size:14px;color:var(--muted);margin-bottom:18px}
.greet-pill b{color:var(--ink);font-weight:600}
.ask-home h1{font-family:var(--serif);font-size:clamp(34px,6vw,56px);line-height:1.2;letter-spacing:-.01em}
.sub{margin:14px 0 32px;font-size:clamp(16px,2.2vw,19px);color:var(--muted)}
#composerSlot{width:100%}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.chip{padding:9px 16px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:14.5px;transition:.15s;text-align:left}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.notice-link{margin-top:30px;display:inline-flex;gap:8px;align-items:center;color:var(--accent);font-weight:600;font-size:15px;padding:8px 14px;border-radius:12px}
.notice-link:hover{background:var(--accent-soft)}

/* Composer */
.composer{display:flex;align-items:flex-end;gap:6px;background:var(--surface);border:1.5px solid var(--line);border-radius:28px;padding:10px 10px 10px 22px;box-shadow:var(--shadow);transition:.15s;width:100%;max-width:760px;margin:0 auto}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(31,79,163,.1),var(--shadow)}
.composer textarea{flex:1;border:0;outline:0;resize:none;font:inherit;font-size:18px;line-height:1.5;padding:10px 0;background:transparent;color:var(--ink);max-height:160px}
.composer textarea::placeholder{color:#98a2b3}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none}
.icon-btn:hover{background:#f0ece4;color:var(--ink)}
.send{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;transition:.15s}
.send:hover{background:#173d80}
.send:disabled{background:#cbd2dd;cursor:default}
.ask-home .composer{padding:14px 14px 14px 26px}
.ask-home .composer textarea{font-size:clamp(17px,2.4vw,20px)}

/* Chat */
.chat{flex:1;width:100%;max-width:760px;margin:0 auto;padding:16px 20px 24px}
.chat-head{margin-bottom:8px}
.ghost{color:var(--muted);font-size:14px;padding:6px 10px;border-radius:10px}
.ghost:hover{background:#f0ece4;color:var(--ink)}
.messages{display:flex;flex-direction:column;gap:22px}
.msg-user{align-self:flex-end;background:var(--ink);color:#fff;padding:11px 18px;border-radius:20px 20px 6px 20px;max-width:85%}
.msg-ai{background:var(--surface);border:1px solid var(--line);border-radius:6px 22px 22px 22px;padding:22px;box-shadow:var(--shadow);animation:rise .25s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.answer{font-size:clamp(18px,2.4vw,21px);font-weight:600;line-height:1.5;letter-spacing:-.005em}
.answer-more{margin-top:8px;color:var(--muted);font-size:15.5px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.fact{background:var(--bg);border-radius:14px;padding:11px 14px}
.fact small{display:block;color:var(--muted);font-size:12.5px}
.fact span{font-weight:600;font-size:15.5px}
.steps{margin:14px 0 0;padding-left:22px;font-size:15.5px}
.steps li{margin:4px 0}
.source{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;color:var(--muted)}
.source a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.verified{display:inline-flex;gap:6px;align-items:center;margin-top:10px;color:var(--ok);background:var(--ok-soft);font-weight:600;font-size:13.5px;padding:4px 12px;border-radius:999px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{padding:10px 18px;border-radius:999px;font-weight:600;font-size:14.5px;border:1.5px solid var(--accent);color:var(--accent);transition:.15s;display:inline-block}
.btn:hover{background:var(--accent-soft)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:#173d80}
.followups{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.followups .chip{font-size:13.5px;padding:6px 13px;background:var(--bg)}
.typing{display:flex;gap:5px;padding:6px 2px}
.typing i{width:8px;height:8px;border-radius:50%;background:#b8c0cf;animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.3;transform:translateY(-3px)}}
#view-ask.chatting .composer{position:sticky;bottom:calc(var(--bottom) + 14px);margin-bottom:14px;width:calc(100% - 32px)}

/* Pages */
.page{max-width:960px;margin:0 auto;padding:40px 20px 60px}
.page h1{font-family:var(--serif);font-size:clamp(28px,4.5vw,40px);line-height:1.25}
.page .lead{color:var(--muted);margin:6px 0 28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.card h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px}
.today{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--accent);color:#fff;border-radius:var(--radius);padding:22px 26px;margin-bottom:18px}
.today small{opacity:.8;font-size:14px}
.today .big{font-size:clamp(26px,4vw,34px);font-weight:700;letter-spacing:-.01em}
.today .date{text-align:right;opacity:.9;font-size:15px}
.list{list-style:none;padding:0}
.list li{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.dot.test{background:var(--warn)}.dot.club{background:var(--ok)}
.list .t{flex:1;font-weight:500}
.item-tag{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:2px 9px;border-radius:999px;white-space:nowrap}
.when{font-size:13.5px;font-weight:600;padding:3px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.when.soon{background:var(--warn-soft);color:var(--warn)}
.ask-inline{display:flex;margin-top:18px;gap:10px;align-items:center;color:var(--muted);font-size:14.5px;flex-wrap:wrap}
.ask-inline a{color:var(--accent);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-align:left;transition:.15s;display:flex;flex-direction:column;gap:6px}
.tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.tile h4{font-size:16.5px}
.tile p{color:var(--muted);font-size:14px}
.tile .tag{font-size:12.5px;color:var(--accent);font-weight:600}
.section-title{font-size:19px;font-weight:700;margin:32px 0 14px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14.5px;font-weight:500}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .btn{margin-top:16px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row small{color:var(--muted);display:block}
.profile-head{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.avatar{width:68px;height:68px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:28px;font-weight:700}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.seg button{padding:5px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--ink);color:#fff}
.switch{width:46px;height:26px;border-radius:999px;background:#cfd5df;position:relative;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch.on{background:var(--accent)}.switch.on::after{left:23px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Notice sheet */
.sheet-backdrop{position:fixed;inset:0;background:rgba(20,33,61,.4);z-index:40;display:flex;align-items:center;justify-content:center;padding:20px}
.sheet{background:var(--bg);border-radius:24px;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 8px 26px}
.sheet-head h2{font-size:20px}
.sheet-body{padding:8px 26px 26px;overflow:auto}
.drop{border:2px dashed #cfc8ba;border-radius:18px;padding:28px 18px;text-align:center;color:var(--muted);background:var(--surface)}
.drop .btn{margin:12px 6px 0}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;gap:12px;align-items:center;margin-bottom:14px;font-size:14.5px}
.doc b{display:block}
.doc small{color:var(--muted)}
.qa{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.qa .chip{padding:7px 14px;font-size:14px}
.qa .chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.result{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.result h4{font-size:15px;color:var(--accent);margin-bottom:6px}
.result ol{padding-left:22px;font-size:16px}
.result li{margin:5px 0}
.result li b{color:var(--ink)}

/* Mobile nav */
.nav-mobile{display:none}
@media (max-width:760px){
  :root{--bottom:68px}
  .nav-desktop{display:none}
  .topbar-right{min-width:0}
  main{padding-bottom:calc(var(--bottom) + env(safe-area-inset-bottom))}
  .nav-mobile{display:flex;position:fixed;inset:auto 0 0 0;height:calc(var(--bottom) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);z-index:30}
  .nav-mobile a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--muted)}
  .nav-mobile svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .nav-mobile a.active{color:var(--accent)}
  .view{min-height:calc(100dvh - var(--top) - var(--bottom))}
  .ask-home{justify-content:flex-start;padding-top:12vh}
  .two{grid-template-columns:1fr}
  .today{flex-direction:column;align-items:flex-start}.today .date{text-align:left}
  .chips{justify-content:flex-start}
  .ask-home{text-align:left;align-items:stretch}
  .ask-home h1,.sub,.greet-pill{text-align:left}
  .notice-link{align-self:flex-start}
  .sheet-backdrop{align-items:flex-end;padding:0}
  .sheet{border-radius:24px 24px 0 0;max-height:92vh}
}
@media (min-width:761px) and (max-width:1024px){
  .nav-desktop a{padding:8px 12px}
}

/* Editorial typography, full-bleed airy Modern Blue & Warm Sunlight fluid background, and polished inner views. */
html{scroll-behavior:smooth}
body{background:#fafcff;color:var(--ink);position:relative;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}
.ambient-fluid-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0}
main,.topbar{position:relative;z-index:1}
.topbar{position:absolute;top:0;left:0;right:0;width:100%;height:68px;padding:0 clamp(20px,4vw,48px);background:none;border:0;backdrop-filter:none;z-index:25;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--serif);font-weight:800;font-size:20px;letter-spacing:-.03em;line-height:1;color:var(--ink);transition:opacity .2s,transform .2s}
.brand:hover{opacity:.82;transform:translateY(-1px)}
.brand-name{white-space:nowrap}
.brand-name::after{content:"";display:inline-block;width:.26em;height:.26em;border-radius:50%;background:var(--yellow);margin-left:.1em}

/* Desktop inline pill navigation */
.nav-inline{display:flex;align-items:center;gap:2px;padding:3px;background:rgba(255,255,255,.78);backdrop-filter:blur(16px);border:1px solid rgba(29,78,216,.1);border-radius:999px;box-shadow:0 4px 16px rgba(15,35,75,.05)}
.nav-inline a{padding:5px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s}
.nav-inline a:hover{color:var(--ink);background:rgba(29,78,216,.06)}
.nav-inline a.active{background:var(--accent);color:#fff;font-weight:700;box-shadow:0 2px 10px rgba(29,78,216,.22)}

.topbar-right{min-width:0;display:flex;align-items:center;gap:8px}
.topbar-lang{background:rgba(255,255,255,.78);backdrop-filter:blur(16px);border:1px solid rgba(29,78,216,.1)!important;padding:2px!important;border-radius:999px!important;box-shadow:0 4px 16px rgba(15,35,75,.05)}
.topbar-lang button{border-radius:999px!important;padding:4px 9px!important;font-size:12px!important}
.menu-toggle{background:var(--accent);color:#fff;padding:11px 18px;min-height:42px;border-radius:999px;font-size:13.5px;font-weight:600;display:none;gap:12px;align-items:center;box-shadow:0 4px 14px rgba(29,78,216,.25);transition:background .2s,transform .2s}
.menu-toggle:hover{background:#1e40af;transform:translateY(-1px)}
.menu-toggle-icon{font-size:20px;font-weight:400;transition:transform .2s}
.menu-toggle[aria-expanded=true] .menu-toggle-icon{transform:rotate(45deg)}
.nav-desktop{position:absolute;top:82px;right:clamp(20px,5vw,64px);display:flex;flex-direction:column;gap:2px;min-width:250px;padding:16px;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px rgba(9,25,56,.14);animation:menu-enter .2s both}
.nav-desktop a{padding:11px 16px;border-radius:10px;font-size:16px;color:var(--ink);font-weight:600}
.nav-desktop a:hover,.nav-desktop a.active{background:var(--accent-soft);color:var(--accent)}
.menu-language{margin-top:12px;padding-top:12px!important;border-top:1px solid var(--line)!important;justify-content:flex-start}
.lang{border:0;padding:0;background:transparent;border-radius:0;gap:4px}
.lang button{padding:6px 10px;font-size:12px;border-radius:6px;font-weight:600;transition:.15s;color:var(--muted)}
.lang button.on{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(29,78,216,.22)}

main{padding-top:0}
#view-ask{min-height:0}
.ask-home{max-width:none;margin:0;padding:0;text-align:center;display:block;flex:none}
.landing-hero{position:relative;background:transparent;border-radius:0;padding:118px 24px 64px;overflow:hidden;box-shadow:none}
.landing-hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(52px,7vw,92px);letter-spacing:-.035em;line-height:1.1;color:var(--ink);animation:hero-title-enter 1s cubic-bezier(.16,1,.3,1) both}
.sub{font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.55;color:#33426a;margin:18px auto 40px;max-width:620px;animation:hero-title-enter 1s .12s cubic-bezier(.16,1,.3,1) backwards}
.example-stage{position:relative;width:min(82%,660px);height:452px;margin:auto;perspective:1400px;animation:hero-title-enter 1.1s .22s cubic-bezier(.16,1,.3,1) backwards}
.home-composer-floating .example-stage{animation:none}
.example-track{position:absolute;inset:0;z-index:1;pointer-events:none;transform-style:preserve-3d}
.example-card{position:absolute;inset:0;border-radius:56px;pointer-events:auto;transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity 1.05s cubic-bezier(.16,1,.3,1),filter 1.05s ease;will-change:transform,opacity}
.example-card.is-wrapping{transition:none!important}
.example-card[data-pos="0"]{transform:translate3d(0,0,0) scale(1) rotateY(0deg);opacity:1;z-index:3}
.example-card[data-pos="0"] .example-photo{animation:card-float 6s ease-in-out infinite}
.example-card[data-pos="-1"]{transform:translate3d(calc(-94% - 26px),10px,-50px) scale(.89) rotateY(7deg);opacity:.78;filter:brightness(.93);z-index:2;cursor:pointer}
.example-card[data-pos="1"]{transform:translate3d(calc(94% + 26px),10px,-50px) scale(.89) rotateY(-7deg);opacity:.78;filter:brightness(.93);z-index:2;cursor:pointer}
.example-card[data-pos="-1"]:hover{opacity:.94;filter:brightness(.99);transform:translate3d(calc(-94% - 18px),4px,-30px) scale(.91) rotateY(4deg)}
.example-card[data-pos="1"]:hover{opacity:.94;filter:brightness(.99);transform:translate3d(calc(94% + 18px),4px,-30px) scale(.91) rotateY(-4deg)}
.example-card[data-pos="-2"]{transform:translate3d(calc(-185% - 56px),24px,-120px) scale(.8) rotateY(12deg);opacity:0;z-index:0;pointer-events:none}
.example-card[data-pos="2"]{transform:translate3d(calc(185% + 56px),24px,-120px) scale(.8) rotateY(-12deg);opacity:0;z-index:0;pointer-events:none}
.example-photo{position:absolute;inset:0;z-index:0;border-radius:56px;overflow:hidden;background:#dce6f7;border:1px solid rgba(255,255,255,.85);box-shadow:0 28px 80px rgba(15,35,75,.22)}
.example-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,42,.06) 18%,rgba(6,16,42,0) 46%,rgba(6,16,42,.82) 100%);pointer-events:none}
.example-photo img{filter:saturate(.88);width:100%;height:100%;object-fit:cover;object-position:55% center;display:block;user-select:none;-webkit-user-drag:none;transform:scale(1.08);transition:transform 3.8s cubic-bezier(.16,1,.3,1)}
.example-card[data-pos="0"] .example-photo img{transform:scale(1)}
#composerSlot{position:relative;z-index:4;width:100%;padding:18px 18px 0;min-height:114px}
.composer,.ask-home .composer{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border:1.5px solid rgba(29,78,216,.22);border-radius:99px;padding:18px 22px 18px 34px;box-shadow:0 14px 40px rgba(15,35,75,.14);max-width:760px;min-width:0;transition:box-shadow .25s,border-color .25s,transform .25s}
.composer textarea,.ask-home .composer textarea{min-width:0;flex:1;font-size:18px;font-weight:500;line-height:1.45;padding:6px 0;max-height:140px;letter-spacing:-.01em;resize:none;color:var(--ink)}
.composer textarea::placeholder{color:#64748b;opacity:1}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(37,99,235,.14),0 18px 46px rgba(15,35,75,.18)}
.icon-btn{width:40px;height:40px;border-radius:50%;color:var(--ink);transition:background .2s,color .2s}
.icon-btn:hover{background:#eff6ff;color:var(--accent)}
.send{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;transition:background .2s,transform .2s,box-shadow .2s;flex:none;box-shadow:0 6px 16px rgba(29,78,216,.28)}
.send:hover{background:#1e40af;transform:translateX(2px);box-shadow:0 8px 22px rgba(29,78,216,.38)}
.send:disabled{background:var(--accent);color:#fff;opacity:.38;cursor:default;transform:none;box-shadow:none}
.example-question{position:absolute;z-index:1;bottom:28px;left:32px;right:32px;color:#fff;text-align:left;display:grid;grid-template-columns:1fr auto;gap:6px 20px;border-radius:16px;padding:12px 16px;transition:background .2s,transform .7s cubic-bezier(.16,1,.3,1),opacity .7s cubic-bezier(.16,1,.3,1)}
.example-card:not([data-pos="0"]) .example-question{opacity:0;transform:translateY(16px);pointer-events:none}
.example-question:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.example-question>span:first-child{font-size:11px;letter-spacing:.09em;text-transform:uppercase;grid-column:1;color:#fde68a;font-weight:700}
.example-question strong{font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.6vw,28px);line-height:1.3;grid-column:1;letter-spacing:-.015em}
.example-question>span:last-child{grid-column:2;grid-row:1/3;align-self:center;font-size:28px;color:#fde68a}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px}
.carousel-controls>button{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border:1px solid rgba(29,78,216,.12);color:var(--ink);font:24px var(--sans);line-height:1;transition:background .2s,transform .2s,border-color .2s}
.carousel-controls>button:hover{background:#fff;border-color:var(--accent);color:var(--accent);transform:scale(1.06)}
.carousel-dots{display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(29,78,216,.1);border-radius:999px}
.carousel-dot{width:10px;height:10px;border-radius:999px;background:rgba(15,35,75,.18);padding:0;position:relative;overflow:hidden;transition:width .35s cubic-bezier(.22,1,.36,1),background .25s}
.carousel-dot:hover{background:rgba(37,99,235,.4)}
.carousel-dot.on{width:38px;background:rgba(250,204,21,.35)}
.carousel-dot i{position:absolute;inset:0;background:var(--yellow-warm);border-radius:999px;transform:scaleX(0);transform-origin:left center}
.carousel-dot.on i{animation:dot-progress 3.2s linear forwards}
.landing-hero:has(.is-paused) .carousel-dot.on i{animation-play-state:paused}
@keyframes dot-progress{to{transform:scaleX(1)}}

/* Intro statement: yellow marker on the second line */
.manifesto{padding:88px 40px 96px;max-width:1120px;margin:auto;text-align:center}
.manifesto h2{font-family:var(--serif);font-size:clamp(30px,4.2vw,56px);line-height:1.36;letter-spacing:-.025em;font-weight:800;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px}
.manifesto-line{display:block}
.manifesto-line:first-child>span:first-child{color:var(--accent)}
.manifesto-line:nth-child(2){background:linear-gradient(transparent 62%,rgba(250,204,21,.7) 62%,rgba(250,204,21,.7) 94%,transparent 94%);padding:0 .2em;border-radius:6px}
.ib{display:inline-block}

/* Features */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px 56px;max-width:1060px;padding:0 20px 110px;margin:auto;text-align:left}
.feature h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;line-height:1.22;max-width:440px;margin:26px 0 12px}
.feature p{font-size:18px;line-height:1.65;color:#3a496b;max-width:440px;letter-spacing:-.01em}
.feature a,.text-link{display:inline-flex;align-items:center;gap:4px;font-size:16px;font-weight:600;color:var(--accent);margin-top:20px;text-decoration:underline;text-underline-offset:5px;transition:color .2s,transform .2s}
.feature a:hover,.text-link:hover{color:#1e40af;transform:translateX(2px)}
.feature-visual{position:relative;height:340px;display:grid;place-items:center;border-radius:32px;overflow:hidden;isolation:isolate;border:1px solid rgba(29,78,216,.1);box-shadow:0 12px 32px rgba(15,35,75,.05);transition:transform .3s ease,box-shadow .3s ease;background:rgba(255,255,255,.65);backdrop-filter:blur(10px)}
.feature:hover .feature-visual{transform:translateY(-4px);box-shadow:0 22px 48px rgba(29,78,216,.11)}

/* Suggestion cards */
.questions-section{max-width:1060px;margin:0 auto 130px;padding:0 20px;text-align:left}
.section-kicker{display:inline-block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#92400e;background:var(--yellow-soft);border:1px solid rgba(245,158,11,.3);padding:4px 12px;border-radius:999px;margin-bottom:12px}
.questions-section h2{font:700 clamp(30px,3.6vw,46px)/1.18 var(--serif);letter-spacing:-.025em;margin-bottom:32px}
.questions-section .chips{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0;text-align:left}
.questions-section .chip{padding:20px 22px;display:flex;align-items:center;gap:16px;border:1px solid var(--line);background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 4px 14px rgba(9,25,56,.04);transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;position:relative}
.questions-section .chip:hover{transform:translateY(-3px);border-color:var(--accent);background:#fff;box-shadow:0 14px 32px rgba(29,78,216,.1);color:var(--accent)}
.suggestion-icon-wrap{width:46px;height:46px;border-radius:14px;background:#e8f0fe;color:var(--accent);display:grid;place-items:center;flex:none;transition:background .2s,color .2s,transform .2s}
.questions-section .chip:nth-child(even) .suggestion-icon-wrap{background:#fef3c7;color:#b45309}
.questions-section .chip:hover .suggestion-icon-wrap{background:var(--accent);color:#fff;transform:scale(1.05)}
.suggestion-icon{width:22px;height:22px;flex:none;color:currentColor}
.suggestion-copy{padding-right:28px;display:flex;flex-direction:column;gap:4px}
.suggestion-copy strong{font-size:16px;font-weight:600;color:var(--ink)}
.suggestion-copy small{font-size:13px;color:var(--muted)}
.card-arrow{position:absolute;right:20px;font-size:20px;color:var(--muted);transition:transform .2s,color .2s}
.chip:hover .card-arrow{transform:translate(3px,-3px);color:var(--accent)}

.site-footer{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border-top:1px solid rgba(29,78,216,.1);padding:60px clamp(24px,5vw,64px) 35px;text-align:left}
.footer-links{display:flex;gap:30px;flex-wrap:wrap;font-size:14.5px;font-weight:600;color:var(--ink)}
.footer-links a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.footer-wordmark{font:800 clamp(76px,13vw,180px)/1.18 var(--serif);letter-spacing:-.045em;display:block;padding:35px 0;color:var(--ink);border-bottom:1px solid rgba(9,25,56,.12)}
.footer-bottom{padding-top:25px;display:flex;align-items:center;gap:25px;justify-content:space-between;font-size:12px;color:var(--muted)}
.footer-bottom>a{text-decoration:underline;text-underline-offset:3px;font-weight:500;color:var(--accent)}

.home-composer-floating .composer{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 48px));padding:13px 18px 13px 28px;background:rgba(255,255,255,.95);backdrop-filter:blur(18px);border-color:rgba(29,78,216,.24);box-shadow:0 16px 48px rgba(15,35,75,.18);z-index:22;animation:floating-enter .3s both}
.home-composer-floating .send{width:40px;height:40px}
.home-composer-floating textarea{font-size:16px}

/* Inner pages (For You, Explore, Profile) */
.page{max-width:1040px;padding:132px 32px 110px;animation:hero-enter .4s both}
.page-head{margin-bottom:28px}
.page h1{font-family:var(--serif);font-weight:800;font-size:clamp(36px,4.5vw,52px);letter-spacing:-.03em;line-height:1.18}
.page .lead{font-size:17px;margin:10px 0 0;color:var(--muted)}
.today{background:radial-gradient(circle at 90% 20%,rgba(250,204,21,.28),transparent 55%),linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 100%);border-radius:26px;padding:26px 30px;margin-bottom:22px;box-shadow:0 16px 40px rgba(29,78,216,.18)}
.cls-pill{display:inline-block;margin-top:6px;padding:2px 11px;border-radius:999px;background:rgba(254,243,199,.95);color:#92400e;font-size:12.5px;font-weight:700}
.card{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:24px;padding:22px 24px;box-shadow:0 8px 28px rgba(9,25,56,.04)}
.list li{padding:0;border-top:1px solid #edf2fa}
.list-item{width:100%;display:flex;align-items:center;gap:14px;padding:15px 10px;border-radius:14px;text-align:left;transition:background .15s,transform .15s}
.list-item:hover{background:#f4f8ff;transform:translateX(2px)}
.item-arrow{color:var(--muted);font-size:16px;transition:transform .15s,color .15s}
.list-item:hover .item-arrow{color:var(--accent);transform:translate(2px,-2px)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tabs button{padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.88);font-size:14.5px;font-weight:600;color:var(--muted);transition:.15s}
.tabs button:hover{color:var(--ink);border-color:#93c5fd}
.tabs button.on{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(29,78,216,.22)}
.tile{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:0 4px 14px rgba(9,25,56,.04);transition:transform .2s,border-color .2s,box-shadow .2s}
.tile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 16px 36px rgba(29,78,216,.1)}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.tile-arrow{color:var(--muted);font-size:18px;transition:transform .2s,color .2s}
.tile:hover .tile-arrow{color:var(--accent);transform:translate(3px,-3px)}
.profile-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.btn.primary{background:var(--accent);border-color:transparent;box-shadow:0 4px 14px rgba(29,78,216,.22)}
.btn.primary:hover{background:#1e40af}

/* Notice Assistant Sheet */
.sheet-open{overflow:hidden}
.sheet-backdrop{background:#000c1f66;backdrop-filter:blur(6px);animation:veil-in .2s both}
.sheet{background:#f7f8fa;border-radius:32px;animation:menu-enter .3s both}
.sheet-head{padding:24px 24px 14px 28px}
.sheet-head h2{font:700 26px var(--serif)}
.drop{border:2px dashed #b7c1cf;border-radius:22px;padding:32px 20px;background:#fff}
.drop-icon{font-size:36px;margin-bottom:8px}
.drop-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.drop-actions .btn{margin:0}

/* Traditional Chinese typography adjustments */
html[lang="zh-Hant"] .landing-hero h1,
html[lang="zh-Hant"] .manifesto h2,
html[lang="zh-Hant"] .feature h2,
html[lang="zh-Hant"] .questions-section h2,
html[lang="zh-Hant"] .page h1{letter-spacing:.01em;line-height:1.22}
html[lang="zh-Hant"] .sub,
html[lang="zh-Hant"] .feature p,
html[lang="zh-Hant"] .composer textarea{letter-spacing:0}

.reveal{opacity:1}
.reveal.reveal-pending{opacity:0;transform:translateY(30px)}
.reveal.is-visible{animation:section-enter .8s cubic-bezier(.2,.7,.2,1) backwards}

@keyframes hero-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-title-enter{from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes section-enter{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
@keyframes menu-enter{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@keyframes floating-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(min-width:1450px){.landing-hero{padding-top:128px}.example-stage{width:760px;height:480px}.landing-hero h1{font-size:104px}}
@media(max-width:900px){
  .topbar{padding-inline:28px}
  .nav-inline{display:none}
  .menu-toggle{display:flex}
  .nav-desktop{right:28px}
  .feature-grid{gap:76px 35px}
  .feature-visual{height:290px}
  .feature p{font-size:16px}
  .manifesto{padding-inline:25px}
}
@media(max-width:760px){
  :root{--top:84px;--bottom:64px}
  main{padding-bottom:calc(var(--bottom) + env(safe-area-inset-bottom))}
  .topbar{top:0;left:0;right:0;height:76px;padding:0 18px}
  .brand{font-size:24px}
  .topbar-lang{display:none}
  .menu-toggle{font-size:12.5px;min-height:38px;padding:8px 14px;gap:8px}.menu-toggle-icon{font-size:17px}
  .nav-desktop{top:68px;left:14px;right:14px;min-width:0;padding:14px}.nav-desktop a{font-size:16px;padding:10px 12px}
  .ask-home{padding:0;text-align:center}
  .landing-hero{border-radius:0;padding:92px 16px 40px}
  .landing-hero h1{font-size:clamp(42px,11.5vw,72px);line-height:1.12;text-align:center}
  .sub{font-size:16px;line-height:1.5;margin:18px auto 28px;max-width:340px;text-align:center}
  .example-stage{height:360px;width:min(86%,400px)}
  .example-card,.example-photo{border-radius:32px}
  .example-photo{box-shadow:0 20px 60px #000c1f25}
  .example-card[data-pos="-1"]{transform:translate3d(calc(-95% - 14px),0,0) scale(.9)}
  .example-card[data-pos="1"]{transform:translate3d(calc(95% + 14px),0,0) scale(.9)}
  #composerSlot{padding:12px 10px 0;min-height:90px}
  .composer,.ask-home .composer{padding:12px 12px 12px 20px;gap:4px;border-width:1.5px;border-radius:38px}
  .composer textarea,.ask-home .composer textarea{font-size:16px;line-height:1.4;padding:4px 0}
  .send{width:40px;height:40px}.icon-btn{width:34px;height:38px}.icon-btn svg{width:18px}
  .example-question{left:14px;right:14px;bottom:20px;gap:4px 12px;padding:10px 12px}.example-question strong{font-size:23px}.example-question>span:first-child{font-size:9.5px}
  .carousel-controls{margin-top:26px;gap:10px}.carousel-controls>button{width:40px;height:40px;font-size:22px}
  .manifesto{padding:76px 16px 84px}.manifesto h2{font-size:clamp(26px,6.8vw,40px);line-height:1.35}
  .feature-grid{grid-template-columns:1fr;gap:64px;padding:0 14px 84px;max-width:520px}
  .feature-visual{height:300px;border-radius:25px}.feature h2{font-size:32px;margin-top:22px}.feature p{font-size:16px}.feature a,.text-link{font-size:15px;margin-top:16px}
  .questions-section{margin-bottom:76px;padding-inline:14px}.questions-section h2{font-size:32px}.questions-section .chips{grid-template-columns:1fr;gap:12px}
  .questions-section .chip{padding:16px 18px}.suggestion-copy strong{font-size:15px}
  .site-footer{padding:35px 22px 44px}.footer-links{gap:20px;font-size:13px}.footer-wordmark{font-size:clamp(68px,20vw,140px);padding-block:26px}
  .footer-bottom{flex-wrap:wrap;gap:16px;font-size:11px}.footer-bottom p{flex-basis:100%}
  .home-composer-floating .composer{width:calc(100vw - 28px);bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + 12px);padding:10px 12px 10px 18px}
  .page{padding:104px 20px 48px}.page h1{font-size:38px}.page .lead{font-size:15px}.view{min-height:calc(100dvh - var(--bottom))}
  .sheet-backdrop{padding:0;align-items:flex-end}.sheet{border-radius:28px 28px 0 0}.sheet-head h2{font-size:24px}.sheet-body{padding-inline:20px}
}
@media(max-width:360px){.landing-hero{padding-inline:10px}.example-stage{height:330px}.example-question strong{font-size:21px}.feature h2{font-size:28px}}

/* ---------- Motion and depth ---------- */

/* Fine paper grain over the light, so the colour has some body. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Scroll progress, blue to yellow */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;transform-origin:left center;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),var(--yellow))}

/* Brand dot hops on hover */
.brand-name::after{transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.brand:hover .brand-name::after{transform:translateY(-.22em)}

/* Yellow marker is drawn in when the statement scrolls into view */
.manifesto-line:nth-child(2){background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1s cubic-bezier(.2,.7,.2,1) .5s}
.manifesto.is-visible .manifesto-line:nth-child(2){background-size:100% 100%}

/* Feature cards: staggered entrance, tilt toward the cursor, glass glare */
.reveal.is-visible{animation-delay:var(--d,0s)}
.feature-visual{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.feature:hover .feature-visual{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);box-shadow:0 26px 54px rgba(29,78,216,.14)}
.feature-visual::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),rgba(255,255,255,0) 62%)}
.feature:hover .feature-visual::after{opacity:1}

/* Suggestion cards slide in one after another */
.questions-section .chip:nth-child(1){--i:0}.questions-section .chip:nth-child(2){--i:1}.questions-section .chip:nth-child(3){--i:2}
.questions-section .chip:nth-child(4){--i:3}.questions-section .chip:nth-child(5){--i:4}.questions-section .chip:nth-child(6){--i:5}
.questions-section.is-visible .chip{animation:chip-in .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 80ms + .15s)}
@keyframes chip-in{from{opacity:0;transform:translateY(18px) scale(.97)}}

/* Magnetic buttons */
.send{transition:background .2s,transform .2s,box-shadow .2s,translate .25s cubic-bezier(.2,.7,.2,1)}
.carousel-controls>button{transition:background .2s,transform .2s,border-color .2s,translate .25s cubic-bezier(.2,.7,.2,1)}

/* Press feedback */
.chip:active,.send:active,.carousel-controls>button:active,.btn:active,.ghost:active,.tabs button:active,.tile:active,.list-item:active,.text-link:active{scale:.96}

/* ---------- Carousel motion ---------- */

/* Springy slide instead of a fast-start crawl; no filter on 3D layers (expensive). */
.example-card{transition:transform 1.15s cubic-bezier(.32,1.12,.42,1),opacity .9s ease;backface-visibility:hidden}
.example-card[data-pos="-1"],.example-card[data-pos="1"],
.example-card[data-pos="-1"]:hover,.example-card[data-pos="1"]:hover{filter:none}

/* Side cards are dimmed with an overlay rather than a filter. */
.example-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(9,25,56,.2);opacity:0;transition:opacity .9s ease}
.example-card:not([data-pos="0"]) .example-photo::before{opacity:1}

/* Gentle bob on every card on the same animation, so changing slides never restarts it (that caused a visible jump). */
@keyframes photo-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.example-photo{animation:photo-bob 7s ease-in-out infinite}
.example-card[data-pos="0"] .example-photo{animation:photo-bob 7s ease-in-out infinite}
.example-card:nth-child(2n) .example-photo{animation-delay:-2.5s}
.example-card:nth-child(3n) .example-photo{animation-delay:-4.5s}

/* Photo slides inside its frame while the card moves, which gives depth. */
.example-card .example-photo img{transform:scale(1.18);transition:transform 1.4s cubic-bezier(.22,.9,.3,1)}
.example-card[data-pos="-1"] .example-photo img{transform:translateX(7%) scale(1.18)}
.example-card[data-pos="1"] .example-photo img{transform:translateX(-7%) scale(1.18)}
.example-card[data-pos="0"] .example-photo img{transform:translateX(0) scale(1.05)}

/* Question text comes in piece by piece once the card is in the middle. */
.example-question>*{opacity:0;translate:0 14px;transition:opacity .35s ease,translate .35s ease}
.example-card[data-pos="0"] .example-question>*{opacity:1;translate:0 0;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.example-card[data-pos="0"] .example-question>:nth-child(1){transition-delay:.4s}
.example-card[data-pos="0"] .example-question>:nth-child(2){transition-delay:.5s}
.example-card[data-pos="0"] .example-question>:nth-child(3){transition-delay:.62s}

/* ---------- Lighter glass ---------- */
/* Large or nearly opaque panels do not need a live blur; it re-runs every frame over the moving background. */
.feature-visual,.questions-section .chip,.card,.tile,.msg-ai,.carousel-controls>button,.carousel-dots{backdrop-filter:none}
.carousel-controls>button{background:rgba(255,255,255,.92)}
.carousel-dots{background:rgba(255,255,255,.88)}

.motion-toggle{font-size:12px;font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.motion-toggle:hover{color:#1e40af}

/* ---------- Feature illustrations: small, readable product mock-ups ---------- */
.feature-visual{background:linear-gradient(150deg,#e3edff 0%,#f4f8ff 55%,#ffeeb8 100%);padding:24px}
.fv-card{width:min(100%,430px);background:#fff;border-radius:20px;padding:18px 20px;border:1px solid rgba(29,78,216,.08);box-shadow:0 18px 44px rgba(15,35,75,.12)}

/* 1. Week strip */
.fv-week{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-bottom:6px}
.fv-day{position:relative;text-align:center;padding:10px 4px 12px;border-radius:14px;background:#f1f5fc;color:var(--muted)}
.fv-day small{display:block;font-size:12px;font-weight:600}
.fv-day b{display:block;font:700 26px/1.2 var(--serif);color:var(--ink)}
.fv-day.on{background:var(--accent);color:rgba(255,255,255,.85);box-shadow:0 10px 22px rgba(29,78,216,.3);translate:0 -3px}
.fv-day.on b{color:#fff}
.fv-day em{position:absolute;left:50%;bottom:-9px;translate:-50% 0;font-style:normal;font-size:11px;font-weight:700;background:var(--yellow);color:#4a3600;padding:1px 9px;border-radius:99px;white-space:nowrap}
.fv-rows{list-style:none;padding:0;margin:16px 0 0}
.fv-rows li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #edf1f9;font-size:16px;font-weight:600;color:var(--ink)}
.fv-rows li:first-child{border-top:0}
.fv-rows em{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.fv-dot{width:10px;height:10px;border-radius:50%;flex:none}
.fv-dot.b{background:var(--accent)}.fv-dot.y{background:var(--yellow-warm)}

/* 2. Notice turned into a checklist */
.fv-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.fv-head b{font:700 19px var(--serif)}
.fv-tag{font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--yellow-soft);color:#8a5a00}
.fv-chk{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;font-style:normal;flex:none}

/* 3. Reminders */
.fv-stack{display:flex;flex-direction:column;gap:12px;width:min(100%,400px)}
.fv-note{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:16px 18px;font-size:16px;font-weight:600;box-shadow:0 10px 28px rgba(15,35,75,.1);transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.fv-note:nth-child(1){translate:-14px 0}.fv-note:nth-child(2){translate:10px 0}.fv-note:nth-child(3){translate:-6px 0}
.feature:hover .fv-note:nth-child(1){translate:-24px -4px}.feature:hover .fv-note:nth-child(2){translate:18px 0}.feature:hover .fv-note:nth-child(3){translate:-12px 4px}
.fv-note em{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.fv-bar{width:4px;align-self:stretch;border-radius:4px;flex:none}
.fv-bar.b{background:var(--accent)}.fv-bar.y{background:var(--yellow-warm)}
.fv-note:first-child::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--yellow-warm);box-shadow:0 0 0 0 rgba(245,158,11,.5);animation:fv-ping 2.2s ease-out infinite}

/* 4. Browser window */
.fv-browser{width:min(100%,430px);background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(29,78,216,.1);box-shadow:0 20px 50px rgba(15,35,75,.16)}
.fv-top{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef2fa}
.fv-top i{width:9px;height:9px;border-radius:50%;background:#cbd3e4}
.fv-top span{margin-left:10px;flex:1;background:#fff;border-radius:99px;padding:3px 12px;font-size:12px;font-weight:600;color:var(--muted)}
.fv-page{padding:22px 18px 24px;display:flex;flex-direction:column;gap:14px}
.fv-ask{display:flex;align-items:center;gap:10px;border:1.5px solid rgba(29,78,216,.28);border-radius:99px;padding:8px 8px 8px 18px;font-size:14px;color:var(--muted)}
.fv-ask span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-ask span::after{content:"";display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:3px;vertical-align:-2px;animation:fv-caret 1s steps(1) infinite}
.fv-ask b{margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:16px;flex:none}
.fv-chips{display:flex;flex-wrap:wrap;gap:8px}
.fv-chips span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.fv-chips span:nth-child(2){background:var(--yellow-soft);color:#8a5a00}

/* Entrance and small motion */
.feature.is-visible .fv-day,.feature.is-visible .fv-rows li,.feature.is-visible .fv-note,.feature.is-visible .fv-head,.feature.is-visible .fv-ask,.feature.is-visible .fv-chips span{animation:fv-in .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 90ms + .35s)}
.feature.is-visible .fv-chk{animation:fv-pop .5s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(var(--i,0) * 130ms + .55s)}
.fv-day:nth-child(1){--i:0}.fv-day:nth-child(2){--i:1}.fv-day:nth-child(3){--i:2}.fv-day:nth-child(4){--i:3}
.fv-chips span:nth-child(1){--i:2}.fv-chips span:nth-child(2){--i:3}
.feature:hover .fv-day.on{translate:0 -6px}
.fv-day.on{transition:translate .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes fv-in{from{opacity:0;transform:translateY(12px)}}
@keyframes fv-pop{from{opacity:0;transform:scale(.3)}}
@keyframes fv-caret{50%{opacity:0}}
@keyframes fv-ping{70%,100%{box-shadow:0 0 0 12px rgba(245,158,11,0)}}

/* ---------- Chat page (Gemini-style, everything scales with the screen) ---------- */
/* One size drives the whole chat. Text, spacing, icons, buttons and the column width are all in em,
   so they grow and shrink together with the viewport width and height. */
:root{--chat-fs:clamp(16px,calc(.45vw + .75vh + 4px),30px);--chat-w:calc(var(--chat-fs) * 50);--chat-pad:clamp(14px,4vw,40px)}

/* The background light is dimmed while reading. */
.ambient-fluid-canvas{transition:opacity .8s ease}
body:has(#view-ask.chatting:not([hidden])) .ambient-fluid-canvas{opacity:.3}

.chat{width:100%;max-width:var(--chat-w);font-size:var(--chat-fs);padding:clamp(92px,11vh,150px) var(--chat-pad) clamp(150px,24vh,260px)}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:.75em;margin:0 0 clamp(20px,3vh,40px);padding:0;border:0}
.ghost{display:inline-flex;align-items:center;gap:.4em;color:var(--ink);background:rgba(255,255,255,.9);border:1px solid rgba(29,78,216,.12);font-size:.78em;font-weight:600;padding:.55em 1.1em;border-radius:999px;box-shadow:0 2px 8px rgba(9,25,56,.05);transition:border-color .15s,background .15s,color .15s}
.ghost:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
.chat-notice-btn{color:#7a4a00;background:var(--yellow-soft);border-color:#f0dd8a}
.chat-notice-btn:hover{background:#fff3b0;border-color:#e6c84a;color:#7a4a00}

.messages{display:flex;flex-direction:column;gap:clamp(22px,3.2vh,44px)}

/* You: a soft bubble on the right */
.msg-user{align-self:flex-end;max-width:min(82%,34em);background:#e3ebfb;color:var(--ink);padding:.7em 1.15em;border-radius:1.2em;font-weight:500;line-height:1.6;box-shadow:none;animation:msg-in-right .5s cubic-bezier(.3,1.3,.5,1) both}

/* Ask CDG: no card, text sits on the page next to a star */
.msg-ai{align-self:stretch;display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:0 .8em;background:none;border:0;border-radius:0;padding:0;box-shadow:none;scroll-margin-top:24px;animation:msg-in-left .5s cubic-bezier(.2,.8,.2,1) both}
.ai-avatar{position:relative;width:2.4em;height:2.4em;margin-top:.1em;display:grid;place-items:center}
.ai-avatar img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
/* While thinking: the emblem breathes and a blue and yellow ring runs around it */
.msg-ai.thinking .ai-avatar img{animation:emblem-pulse 1.6s ease-in-out infinite}
.msg-ai.thinking .ai-avatar::before{content:"";position:absolute;inset:-.28em;border-radius:50%;background:conic-gradient(from 0deg,rgba(37,99,235,0),#2563eb 35%,#facc15 70%,rgba(250,204,21,0));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));animation:ring-spin 1.1s linear infinite}
.ai-content{min-width:0;line-height:1.75;color:var(--ink)}

/* Thinking */
.think-label{margin:.2em 0 .65em;font-weight:600;font-size:.95em;background:linear-gradient(90deg,#5b6b8c 0%,#5b6b8c 35%,#1d4ed8 45%,#f59e0b 55%,#5b6b8c 65%,#5b6b8c 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer-text 2s linear infinite}
.skel{display:flex;flex-direction:column;gap:.55em;max-width:min(28em,100%)}
.skel i{display:block;height:.75em;border-radius:.4em;background:linear-gradient(90deg,#e6edfb 0%,#c9d9fb 35%,#fde9a2 55%,#e6edfb 100%);background-size:220% 100%;animation:shimmer-bar 1.6s ease-in-out infinite}
.skel i:nth-child(1){width:100%}
.skel i:nth-child(2){width:88%;animation-delay:.15s}
.skel i:nth-child(3){width:56%;animation-delay:.3s}

/* Answer */
.answer{font-size:1.15em;font-weight:600;line-height:1.55;letter-spacing:-.005em}
.answer-more{margin-top:.45em;color:var(--muted);font-size:.94em;line-height:1.7}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(7em,1fr));gap:.45em;margin-top:.9em}
.fact{background:#eef3fc;border:0;border-radius:.75em;padding:.55em .8em}
.fact small{display:block;color:var(--muted);font-size:.68em;font-weight:600;line-height:1.4}
.fact span{display:block;font-size:.95em;font-weight:700;line-height:1.5}
.steps{font-size:1em;list-style:none;margin:1em 0 0;padding:0;display:flex;flex-direction:column;gap:.65em}
.steps li{display:flex;align-items:flex-start;gap:.65em;margin:0;padding:0;background:none;border:0;line-height:1.65}
.step-num{width:1.85em;height:1.85em;border-radius:50%;background:#dbe7ff;color:var(--accent);font-size:.75em;font-weight:700;display:grid;place-items:center;flex:none;margin-top:.15em}
.source{display:flex;flex-wrap:wrap;align-items:center;gap:.45em .55em;margin-top:1em;padding:0;border:0;font-size:.76em;color:var(--muted)}
.source a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#eef3fc;color:var(--accent);font-weight:600;padding:.4em .9em;border-radius:99px;text-decoration:none;transition:background .15s}
.source a:hover{background:#dde8fc}
.verified{margin:0;display:inline-flex;align-items:center;gap:.3em;font-size:.95em;font-weight:700;color:#0f7b5a;background:#e3f4ec;padding:.3em .8em;border-radius:99px}
.actions{display:flex;flex-wrap:wrap;gap:.55em;margin-top:.9em}
.msg-ai .btn{font-size:.8em;padding:.65em 1.3em}
.btn{transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.followups{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.9em}
.followups .chip{font-size:.8em;padding:.6em 1.05em;background:#eef3fc;border:0;border-radius:1em;color:var(--ink);transition:background .15s,transform .15s}
.followups .chip:hover{background:#dde8fc;transform:translateY(-1px);color:var(--ink)}

/* Copy and rate */
.msg-tools{display:flex;gap:.1em;margin:.75em 0 0 -.4em}
.msg-tools button{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s}
.msg-tools button:hover{background:#e6edf9;color:var(--ink)}
.msg-tools button.on{color:var(--accent)}
.msg-tools svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Answer parts arrive one after another */
.answer-ready .ai-content>*{animation:enter-up .5s cubic-bezier(.2,.8,.2,1) both}
.answer-ready .ai-content>:nth-child(2){animation-delay:.06s}.answer-ready .ai-content>:nth-child(3){animation-delay:.12s}
.answer-ready .ai-content>:nth-child(4){animation-delay:.18s}.answer-ready .ai-content>:nth-child(5){animation-delay:.24s}
.answer-ready .ai-content>:nth-child(6){animation-delay:.3s}.answer-ready .ai-content>:nth-child(7){animation-delay:.36s}
.answer-ready .ai-content>:nth-child(8){animation-delay:.42s}

/* Composer: a large soft field docked at the bottom, as wide as the text above it */
#view-ask.chatting .composer{position:sticky;bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + clamp(12px,2.4vh,30px));font-size:var(--chat-fs);width:calc(100% - 2 * var(--chat-pad));max-width:calc(var(--chat-w) - 2 * var(--chat-pad));margin:0 auto clamp(12px,2.4vh,30px);padding:.45em .5em .45em 1.2em;border-radius:1.6em;background:#eef3fc;border:1px solid transparent;box-shadow:0 10px 36px rgba(15,35,75,.12);backdrop-filter:none;transition:background .2s,border-color .2s,box-shadow .2s}
#view-ask.chatting .composer:focus-within{background:#fff;border-color:rgba(29,78,216,.35);box-shadow:0 0 0 4px rgba(29,78,216,.1),0 14px 40px rgba(15,35,75,.16)}
#view-ask.chatting .composer textarea{font-size:1em;padding:.5em 0}
#view-ask.chatting .send{width:2.5em;height:2.5em}
#view-ask.chatting .send svg{width:1.1em;height:1.1em}
#view-ask.chatting .icon-btn{width:2.2em;height:2.2em}
#view-ask.chatting .icon-btn svg{width:1.05em;height:1.05em}

@keyframes msg-in-right{from{opacity:0;transform:translateX(26px) scale(.94)}}
@keyframes msg-in-left{from{opacity:0;transform:translateY(14px)}}
@keyframes enter-up{from{opacity:0;transform:translateY(10px)}}
@keyframes emblem-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes ring-spin{to{transform:rotate(360deg)}}
@keyframes shimmer-text{to{background-position:-250% 0}}
@keyframes shimmer-bar{0%{background-position:120% 0}100%{background-position:-120% 0}}

@media(max-width:760px){
  .chat-head{margin-bottom:20px}
  .msg-user{max-width:88%}
  #view-ask.chatting .composer{bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + 10px);margin-bottom:10px}
}

/* ---------- Fluid sizing: sizes follow the screen (width and height) ---------- */
/* The first screen is sized from both the viewport width and height, so it fits a 720px-high laptop and fills a 1440px-high monitor. */
:root{--stage-h:clamp(250px,50vh,760px)}

.landing-hero{padding-top:clamp(84px,13vh,200px);padding-bottom:clamp(28px,6vh,72px)}
.landing-hero h1{font-size:clamp(42px,min(6.6vw,11.5vh),150px)}
.sub{font-size:clamp(16px,min(1.5vw,2.6vh),26px);margin:clamp(8px,1.6vh,20px) auto clamp(16px,3.4vh,44px);max-width:min(620px,90vw)}

.example-stage{height:var(--stage-h);width:min(82%,calc(var(--stage-h) * 1.46))}
.example-card,.example-photo{border-radius:calc(var(--stage-h) * .12)}
.example-question{left:calc(var(--stage-h) * .07);right:calc(var(--stage-h) * .07);bottom:calc(var(--stage-h) * .06)}
.example-question strong{font-size:clamp(18px,calc(var(--stage-h) * .062),36px)}
.example-question>span:first-child{font-size:clamp(9.5px,calc(var(--stage-h) * .025),13px)}
.example-question>span:last-child{font-size:clamp(20px,calc(var(--stage-h) * .062),36px)}
.carousel-controls{margin-top:clamp(16px,3.4vh,40px)}

#composerSlot{padding-top:clamp(8px,1.8vh,18px);min-height:clamp(78px,12.6vh,140px)}
.composer,.ask-home .composer{padding:clamp(10px,2vh,18px) clamp(10px,1.6vw,22px) clamp(10px,2vh,18px) clamp(16px,2.4vw,34px)}
.composer textarea,.ask-home .composer textarea{font-size:clamp(15px,min(1.3vw,2.4vh),21px)}

/* Sections below the first screen grow with the width, up to a sensible limit */
.manifesto{max-width:clamp(720px,72vw,1500px);padding:clamp(56px,9vh,130px) clamp(16px,4vw,56px) clamp(64px,11vh,150px)}
.manifesto h2{font-size:clamp(26px,3.7vw,76px)}
.feature-grid{max-width:min(100%,clamp(720px,64vw,1500px));gap:clamp(40px,7vh,104px) clamp(28px,4vw,72px);padding-bottom:clamp(72px,12vh,160px)}
.feature h2{font-size:clamp(24px,2.5vw,48px)}
.feature p{font-size:clamp(16px,1.2vw,22px);max-width:min(100%,28em)}
.feature-visual{height:clamp(290px,24vw,520px)}
.questions-section{max-width:min(100%,clamp(720px,64vw,1500px));margin-bottom:clamp(72px,12vh,150px)}
.questions-section h2{font-size:clamp(26px,3vw,56px)}
.page{max-width:min(100%,clamp(720px,72vw,1400px))}
.page h1{font-size:clamp(34px,3.6vw,64px)}

@media(max-width:760px){
  :root{--stage-h:clamp(250px,44vh,420px)}
  .example-stage{width:min(86%,400px)}
}

/* ---------- Chat window: on wide screens the chat fills the screen, with a side panel ---------- */
.chat-side{display:none}

@media(min-width:900px){
  :root{--side-w:clamp(230px,17vw,400px);--chat-top:60px;--frame-gap:clamp(12px,1.6vw,28px);--col-w:calc(var(--chat-fs) * 56)}

  body:has(#view-ask.chatting:not([hidden])) .scroll-progress{opacity:0}
  body:has(#view-ask.chatting:not([hidden])) main{padding-top:var(--chat-top);min-height:0}

  /* The whole chat is one window that fills the screen under the top bar; the background light shows around it. */
  #view-ask.chatting{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:calc(100dvh - var(--chat-top) - var(--frame-gap));min-height:0;margin:0 var(--frame-gap) var(--frame-gap);background:rgba(255,255,255,.74);border:1px solid rgba(29,78,216,.1);border-radius:clamp(20px,2vw,32px);box-shadow:0 24px 70px rgba(15,35,75,.1);overflow:hidden}
  #view-ask.chatting:has(.chat-side[hidden]){grid-template-columns:minmax(0,1fr)}

  /* Side panel */
  #view-ask.chatting .chat-side:not([hidden]){display:flex;flex-direction:column;gap:1.4em;grid-column:1;grid-row:1 / span 2;min-height:0;overflow-y:auto;padding:clamp(16px,1.6vw,30px);font-size:calc(var(--chat-fs) * .82);background:rgba(238,243,252,.72);border-right:1px solid rgba(29,78,216,.1)}
  .side-actions{display:flex;flex-direction:column;gap:.55em}
  .side-new,.side-notice{display:flex;align-items:center;gap:.6em;width:100%;padding:.75em 1.1em;border-radius:999px;font-weight:700;text-align:left;transition:background .15s,transform .15s}
  .side-new{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(29,78,216,.25)}
  .side-new:hover{background:#1e40af;transform:translateY(-1px)}
  .side-notice{background:var(--yellow-soft);color:#7a4a00;border:1px solid #f0dd8a}
  .side-notice:hover{background:#fff3b0;transform:translateY(-1px)}
  .side-block h3{margin:0 0 .5em .4em;font-size:.85em;font-weight:700;letter-spacing:.02em;color:var(--muted)}
  .side-list{display:flex;flex-direction:column;gap:.15em}
  .side-item{width:100%;padding:.6em .9em;border-radius:.9em;text-align:left;line-height:1.4;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .15s}
  .side-item:hover{background:rgba(29,78,216,.09)}

  /* Chat column: messages scroll inside the window, the composer stays at the bottom of it */
  #view-ask.chatting .chat{grid-column:2;grid-row:1;min-height:0;width:auto;max-width:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:clamp(20px,3.4vh,48px) var(--chat-pad) clamp(20px,3vh,40px)}
  #view-ask.chatting:has(.chat-side[hidden]) .chat{grid-column:1}
  #view-ask.chatting .chat-head{display:none}
  #view-ask.chatting .chat,#view-ask.chatting .chat-side{scrollbar-width:thin;scrollbar-color:rgba(29,78,216,.28) transparent}
  #view-ask.chatting .messages{max-width:var(--col-w);margin:0 auto}
  #view-ask.chatting .composer{position:static;grid-column:2;grid-row:2;width:calc(100% - 2 * var(--chat-pad));max-width:var(--col-w);margin:0 auto clamp(14px,2.6vh,32px)}
  #view-ask.chatting:has(.chat-side[hidden]) .composer{grid-column:1}
}

@media(min-width:900px){
  .side-head{display:flex;align-items:center;justify-content:space-between;gap:.5em;margin-bottom:.5em}
  .side-head h3{margin:0 0 0 .4em}
  .side-clear{padding:.2em .7em;border-radius:99px;font-size:.85em;font-weight:600;color:var(--accent);transition:background .15s}
  .side-clear:hover{background:rgba(29,78,216,.09)}
  .side-guest p{margin:0 0 .8em .4em;color:var(--muted);line-height:1.6}
  .side-signin{width:100%;padding:.7em 1em;border-radius:999px;border:1.5px solid var(--accent);color:var(--accent);font-weight:700;transition:background .15s}
  .side-signin:hover{background:var(--accent-soft)}
}

/* AI-generated answers: plain text, lists and a note that says so */
.answer-text{margin:.6em 0 0;line-height:1.75}
.answer-text:first-child{margin-top:0}
.md-list{margin:.6em 0 0;padding-left:1.5em}
.md-list li{margin:.3em 0;line-height:1.7}
.ai-note{margin-top:.9em;font-size:.76em;color:var(--muted)}

/* Hidden until the school data has loaded, or until we know it could not */
html.loading .topbar,html.loading main,html.loading .nav-mobile{visibility:hidden}
.load-error{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:var(--bg);font-size:18px}

/* Sign-in entry in the top bar (and in the phone menu) */
.topbar-signin{padding:5px 13px;border-radius:999px;border:1px solid rgba(29,78,216,.35);background:rgba(255,255,255,.78);color:var(--accent);font-size:13px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,transform .15s}
.topbar-signin:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.menu-signin{margin-top:8px;padding:11px 16px;border-radius:10px;border:1.5px solid var(--accent);color:var(--accent);font-size:16px;font-weight:700;text-align:center}
.menu-signin:hover{background:var(--accent-soft)}
@media(max-width:760px){.topbar-signin{padding:5px 12px;font-size:12.5px}}

/* ---------- Chat: quiet, minimal look ----------
   One neutral surface, hairline dividers, no coloured blocks. Blue is kept for the one thing to press: send. */
body:has(#view-ask.chatting:not([hidden])) .ambient-fluid-canvas{opacity:.16}
.msg-user{background:#f0f2f6;color:var(--ink)}
#view-ask.chatting .composer{background:#f4f6f9;border:1px solid rgba(15,27,51,.07);box-shadow:0 1px 2px rgba(15,27,51,.04)}
#view-ask.chatting .composer:focus-within{background:#fff;border-color:rgba(15,27,51,.18);box-shadow:0 0 0 3px rgba(29,78,216,.08)}
#view-ask.chatting .send{box-shadow:none}
#view-ask.chatting .send:disabled{background:#d8dde6;opacity:1}

@media(min-width:900px){
  #view-ask.chatting{background:rgba(255,255,255,.9);border:1px solid rgba(15,27,51,.06);box-shadow:0 1px 2px rgba(15,27,51,.04),0 24px 60px rgba(15,27,51,.06)}
  #view-ask.chatting .chat-side{background:transparent;border-right:1px solid rgba(15,27,51,.06);gap:1.8em}
  .side-actions{gap:.15em}
  .side-new,.side-notice{gap:.7em;padding:.6em .8em;border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--ink);font-weight:600}
  .side-new:hover,.side-notice:hover{background:rgba(15,27,51,.05);color:var(--ink);transform:none}
  .side-ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .side-notice .side-ico{color:var(--muted)}
  .side-block h3{margin:0 0 .4em .8em;font-size:.78em;font-weight:600;letter-spacing:.04em;color:#8a94a8}
  .side-head h3{margin:0 0 0 .8em}
  .side-item{padding:.5em .8em;border-radius:10px;font-size:.95em;color:#3b465c}
  .side-item:hover{background:rgba(15,27,51,.05);color:var(--ink)}
  .side-guest p{margin:0 .8em .3em;font-size:.85em;line-height:1.55;color:#8a94a8}
  .side-signin{width:auto;margin:0 .8em;padding:0;border:0;border-radius:0;background:none;color:var(--accent);font-size:.85em;font-weight:600}
  .side-signin:hover{background:none;text-decoration:underline;text-underline-offset:3px}
}
.fact{background:#f4f6f9}
.step-num{background:#eef1f5;color:var(--ink)}
.source a{background:#f4f6f9;color:var(--ink)}
.source a:hover{background:#eaedf2}
.followups .chip{background:#f4f6f9}
.followups .chip:hover{background:#eaedf2}
.msg-ai .btn,.msg-ai .btn.primary{background:#fff;color:var(--ink);border:1px solid rgba(15,27,51,.14);box-shadow:none}
.msg-ai .btn:hover,.msg-ai .btn.primary:hover{background:#f4f6f9;transform:none}
.chat-notice-btn,.chat-notice-btn:hover{background:#fff;color:var(--ink);border-color:rgba(15,27,51,.12)}

/* ---------- Chat: full screen, no frame, a calmer typeface ----------
   The chat fills the screen under a plain top bar, like a chat app, instead of a card floating on the
   coloured background. Inter is neutral and pairs better with Noto Sans TC than the geometric brand font. */
#view-ask.chatting{font-family:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;letter-spacing:0}
#view-ask.chatting .answer{font-weight:600;letter-spacing:0}
#view-ask.chatting .msg-user,#view-ask.chatting .ai-content{font-weight:400}
#view-ask.chatting .composer textarea{font-family:inherit;font-weight:400;letter-spacing:0}
body:has(#view-ask.chatting:not([hidden])){background:#fff}
body:has(#view-ask.chatting:not([hidden])) .ambient-fluid-canvas{opacity:0}
body:has(#view-ask.chatting:not([hidden])) .topbar{background:#fff;border-bottom:1px solid rgba(15,27,51,.07)}

@media(min-width:900px){
  :root{--chat-top:60px}
  body:has(#view-ask.chatting:not([hidden])) .topbar{height:var(--chat-top)}
  #view-ask.chatting{margin:0;height:calc(100dvh - var(--chat-top));border:0;border-radius:0;box-shadow:none;background:#fff}
  #view-ask.chatting .chat-side{background:#f7f8fa;border-right:0}
}