:root {
  color-scheme: dark;
  --night: #0b1328;
  --panel: #111b32;
  --white: #f7f8fc;
  --muted: #b5c5dd;
  --soft: #8ca4c0;
  --cyan: #00d1ff;
  --violet: #6c63ff;
  --pink: #ff6ec7;
  --gold: #ffd699;
  --line: #06c755;
  --border: #b7c9f02b;
  --gradient: linear-gradient(105deg, #9beeff 5%, #aba5ff 48%, #ffb2df 81%, #ffd699);
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--white); font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; background: radial-gradient(ellipse at 5% 25%, #00d1ff0c, transparent 45%), radial-gradient(ellipse at 96% 58%, #6c63ff15, transparent 50%), var(--night); line-height: 1.7; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, #a8e0ff7a 1px, transparent 1.3px), radial-gradient(circle, #c7b3ff70 .8px, transparent 1.2px); background-size: 283px 229px, 397px 331px; background-position: 41px 110px, 167px 48px; opacity: .25; }
a { color: inherit; }
button { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #8deaff; outline-offset: 5px; }
[hidden] { display: none !important; }
.page-width { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; left: 20px; top: 12px; padding: 10px 16px; color: var(--night); background: var(--white); border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 110px; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 68px; height: 34px; object-fit: contain; }
.brand b { font-weight: 400; color: #a2e9ff; }
.test-label { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 7px 12px; border: 1px solid #b8cfff33; border-radius: 999px; color: #cbd6ea; background: #b1c1ef06; font-size: 12px; letter-spacing: .08em; }
.test-label > span { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px #ffd6994d; }
.event-layout { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: start; padding-block: 68px 80px; }
.event-story { padding-top: 6px; }
.date-line { display: flex; align-items: center; gap: 24px; margin-bottom: 40px; }
.date-line time { font-size: clamp(52px, 6vw, 72px); letter-spacing: -.055em; line-height: 1; color: #d9efff; font-weight: 300; }
.date-line time > span { color: #b6a6ed; padding-inline: .04em; }
.eyebrow, .section-kicker { margin: 0; color: #9db8d5; font-size: 10px; line-height: 1.6; letter-spacing: .16em; font-weight: 500; }
.date-line p { margin: 5px 0 0; color: var(--muted); font-size: 14px; letter-spacing: .025em; }
.section-kicker { font-size: 11px; }
h1 { margin: 18px 0 0; font-weight: 500; letter-spacing: -.02em; }
h1 > span { display: block; }
.event-english { font-family: Georgia, "Times New Roman", serif; font-size: clamp(39px, 4.6vw, 59px); line-height: 1.2; font-weight: 400; letter-spacing: -.04em; }
h1 .gradient-text { margin-top: 12px; font-size: clamp(23px, 2.45vw, 30px); line-height: 1.55; }
.gradient-text { color: #c9d8fc; background: var(--gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.event-intro { margin: 28px 0 36px; color: var(--muted); font-size: 16px; line-height: 1.95; }
.speaker-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 28px; border-top: 1px solid var(--border); }
.speaker { min-width: 0; }
.speaker-portrait { position: relative; overflow: hidden; width: 100%; height: 168px; border-radius: 10px; background: #19263c; }
.speaker-portrait::after { content: ""; position: absolute; inset: 0; border: 1px solid #d9ecff29; border-radius: inherit; pointer-events: none; }
.speaker-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coco-speaker .speaker-portrait img { object-position: 45% 33%; }
.mike-speaker .speaker-portrait img { object-position: 50% 22%; }
.speaker-order { margin: 17px 0 5px; color: #a8bedb; font-size: 11px; letter-spacing: .08em; }
.speaker h2 { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 500; }
.speaker h2 span { display: inline-block; padding-left: 4px; color: #aebfd8; font-size: 12px; font-weight: 400; }
.speaker-copy > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.quiet-link { display: inline-flex; gap: 16px; margin-top: 25px; color: #b7cfea; font-size: 12px; text-decoration: none; }
.quiet-link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 5px; }
.flow-panel { position: relative; isolation: isolate; padding: clamp(28px, 3vw, 40px); border: 1px solid #bfceff40; border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, #6c63ff18, transparent 65%), linear-gradient(142deg, #11243bdf, #10182ef5 70%); box-shadow: inset 0 1px 0 #e8f6ff12, 0 20px 80px #0002; }
.flow-panel::before { content: ""; position: absolute; inset: -1px 10% auto; z-index: -1; height: 1px; background: linear-gradient(90deg, transparent, #92deff9c, #cfb4ff7d, transparent); }
.panel-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 21px; }
.panel-topline > span { font-family: Georgia, serif; color: #b1b7f7; font-size: 28px; line-height: 1; }
.panel-topline .eyebrow { max-width: 230px; font-size: 9px; }
.flow-panel h2 { margin: 0; font-size: clamp(27px, 2.7vw, 32px); line-height: 1.65; font-weight: 500; letter-spacing: -.025em; }
.panel-intro { margin: 16px 0 23px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.flow-steps { display: grid; gap: 19px; padding: 25px 0; margin: 0 0 26px; border-block: 1px solid var(--border); list-style: none; }
.flow-steps li { display: flex; gap: 16px; }
.flow-steps li > span { width: 27px; flex-shrink: 0; padding-top: 1px; color: #8fd5f0; font-size: 13px; font-weight: 400; }
.flow-steps strong { font-size: 14px; font-weight: 500; }
.flow-steps p { margin: 2px 0 0; color: #a7bad2; font-size: 12px; line-height: 1.8; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 57px; padding: 14px 19px; border: 1px solid #91ecdd5c; border-radius: 999px; color: #f7fff9; background: linear-gradient(110deg, #176c56, #124844); font-size: 15px; font-weight: 500; line-height: 1.6; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.primary-button:hover { background: linear-gradient(110deg, #1b7d63, #165955); border-color: #91ecddbf; }
.primary-button:disabled { cursor: not-allowed; border-color: #91a7bb3b; color: #a1b2c4; background: #1a293a; }
.line-symbol { display: grid; place-items: center; flex-shrink: 0; width: 31px; height: 24px; color: #e2fbe9; font-size: 9px; font-weight: 800; line-height: 1; border: 1px solid #c5f2d5a3; border-radius: 7px; letter-spacing: -.03em; }
.button-arrow { margin-left: auto; font-size: 22px; font-weight: 300; line-height: 1; }
.primary-button > span:first-child:not(.line-symbol) { flex-grow: 1; text-align: center; }
.configuration-note { margin: 11px 0 0; color: #abc1d8; font-size: 12px; line-height: 1.8; }
.configuration-note.is-ready { color: #96d5bb; }
.consent-note { margin: 20px 0 14px; color: #a5b8d2; font-size: 11px; line-height: 1.9; }
.privacy-details { border-bottom: 1px solid var(--border); padding-bottom: 15px; }
.privacy-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 12px; color: #c1d2e9; cursor: pointer; font-size: 12px; list-style: none; }
.privacy-details summary::-webkit-details-marker { display: none; }
.privacy-details summary > span { color: #9cbadd; font-size: 18px; }
.privacy-details[open] summary > span { transform: rotate(45deg); }
.privacy-details div { padding: 5px 0 0; }
.privacy-details div p { color: #a5b8d2; font-size: 11px; line-height: 1.9; margin: 0 0 12px; }
.preview-entry { padding-top: 20px; }
.preview-entry a { display: inline-flex; align-items: center; gap: 14px; color: #c7c4f3; font-size: 12px; text-decoration: none; }
.preview-entry a:hover { text-decoration: underline; text-underline-offset: 4px; }
.preview-entry p { margin: 5px 0 0; color: #a1b3cc; font-size: 10px; }
.feedback-message { padding: 13px 15px; margin: 0 0 18px; color: #e3d2f4; background: #a28eea12; border: 1px solid #c5acf337; border-radius: 9px; font-size: 12px; line-height: 1.8; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 21px 34px; color: #8fa5c1; border-top: 1px solid var(--border); font-size: 10px; letter-spacing: .02em; }
.complete-layout { min-height: calc(100svh - 197px); align-items: center; padding-block: 50px 65px; }
.complete-story { padding-bottom: 25px; }
.infinity-stage { display: grid; place-items: center; width: min(100%, 390px); height: 190px; margin: 0 0 31px; border-radius: 50%; background: radial-gradient(ellipse, #326b9d22, #58458e0d 45%, transparent 68%); }
.infinity-stage img { width: 230px; height: 115px; max-width: 85%; object-fit: contain; filter: drop-shadow(0 4px 28px #4f62ff20); }
.complete-story .event-english { font-size: clamp(39px, 4.3vw, 54px); }
.complete-story h1 .gradient-text { font-size: clamp(23px, 2.5vw, 29px); }
.complete-story .event-intro { margin-bottom: 0; }
.completion-panel { min-height: 440px; }
.result-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border: 1px solid #a8d1ea45; border-radius: 50%; color: #ace6ef; font-family: Georgia, serif; font-size: 28px; background: #92d2f60b; }
.completion-panel .eyebrow { margin-bottom: 12px; font-size: 9px; }
.completion-panel h2 { font-size: 29px; }
.registration-record { padding: 20px 0; margin: 0 0 23px; border-block: 1px solid var(--border); }
.record-label { margin: 0 0 5px; color: #96abc6; font-size: 10px; }
.record-name { margin: 0; color: #ebf3fc; font-size: 20px; overflow-wrap: anywhere; }
.record-time { margin: 6px 0 0; color: #a4b8d2; font-size: 11px; }
.community-note { margin: 12px 0 0; color: #a5b8d2; font-size: 11px; line-height: 1.9; }
.redirect-controls { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 22px; }
.redirect-controls p { margin: 0; color: #b8cce3; font-size: 11px; }
.text-button { padding: 4px 0; color: #c9c4f2; background: transparent; border: 0; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.demo-warning { margin: 20px 0 0; padding: 13px 15px; color: #eadaba; background: #ffd6990b; border: 1px solid #ffd6992e; border-radius: 9px; font-size: 11px; line-height: 1.8; }
.return-link { margin-top: 24px; }
.is-demo .test-label { color: #f0dfc6; border-color: #ffd69949; }
.is-demo .result-symbol { color: #eccda3; border-color: #ffd69945; background: #ffd69908; }
@media (max-width: 1000px) {
  .page-width { width: calc(100% - 56px); }
  .event-layout { gap: 34px; grid-template-columns: 1fr 1fr; }
  .speaker-pair { gap: 16px; }
  .speaker-portrait { height: 148px; }
  .flow-panel { padding: 27px; }
  .event-english { font-size: 43px; }
  h1 .gradient-text { font-size: 24px; }
  .primary-button { padding-inline: 15px; font-size: 13px; gap: 8px; }
}
@media (max-width: 760px) {
  .page-width { width: calc(100% - 40px); }
  .site-header { min-height: 86px; gap: 15px; }
  .brand { font-size: 19px; gap: 8px; }
  .brand img { width: 50px; height: 25px; }
  .test-label { padding: 6px 9px; font-size: 10px; letter-spacing: .04em; gap: 6px; }
  .event-layout { grid-template-columns: 1fr; gap: 37px; padding-block: 37px 42px; }
  .date-line { gap: 21px; margin-bottom: 29px; }
  .date-line time { font-size: 59px; }
  .date-line p { font-size: 13px; }
  .eyebrow { font-size: 9px; }
  .section-kicker { font-size: 9px; letter-spacing: .12em; }
  .event-english { font-size: clamp(37px, 9vw, 48px); }
  h1 .gradient-text { font-size: clamp(21px, 5.4vw, 27px); margin-top: 11px; }
  .event-intro { margin: 22px 0 29px; font-size: 14px; }
  .speaker-pair { gap: 18px; padding-top: 23px; }
  .speaker-portrait { height: 175px; }
  .speaker-order { margin-top: 13px; font-size: 10px; }
  .speaker h2 { font-size: 20px; }
  .speaker-copy > p:last-child { font-size: 10px; }
  .quiet-link { margin-top: 23px; font-size: 11px; }
  .flow-panel { border-radius: 16px; padding: 27px 24px; }
  .flow-panel h2 { font-size: 28px; }
  .panel-intro { font-size: 13px; }
  .primary-button { font-size: 14px; }
  .site-footer { flex-direction: column; gap: 3px; padding-block: 20px 28px; font-size: 9px; }
  .complete-layout { gap: 31px; min-height: 0; }
  .complete-story { padding-bottom: 0; }
  .infinity-stage { height: 145px; margin-bottom: 20px; }
  .infinity-stage img { width: 204px; height: 102px; }
  .complete-story .event-english { font-size: clamp(37px, 9vw, 47px); }
  .complete-story h1 .gradient-text { font-size: clamp(21px, 5.4vw, 27px); }
  .completion-panel { min-height: 370px; }
}
@media (max-width: 420px) {
  .speaker-pair { grid-template-columns: 1fr; gap: 18px; }
  .speaker { display: flex; align-items: center; gap: 15px; }
  .speaker-portrait { width: 82px; height: 99px; flex-shrink: 0; border-radius: 8px; }
  .speaker-order { margin-top: 0; }
  .speaker-copy > p:last-child { max-width: 170px; }
  .flow-panel { padding-inline: 21px; }
  .primary-button { font-size: 13px; padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Keep LINE login fallback instructions visible before users leave the page. */
.line-login-help { margin: 16px 0; padding: 14px 16px; border: 1px solid rgba(150, 213, 187, .3); border-radius: 12px; background: rgba(150, 213, 187, .06); }
.line-login-help > strong { color: #b8ebd2; font-size: 14px; }
.line-login-help p { margin: 7px 0 0; color: #c2d3ea; font-size: 13px; line-height: 1.8; }
.line-login-help .line-login-completion { color: #b8ebd2; }
.line-login-help summary { padding: 10px 0 2px; color: #b8dfff; font-size: 13px; cursor: pointer; }
.line-login-help img { display: block; width: 100%; max-width: 320px; height: auto; margin: 12px auto 0; border-radius: 10px; }


/* AI employee examples, matching the existing Miracle AI visual identity. */
.employee-hero-link{display:inline-flex;gap:12px;margin:0 0 28px;color:#b8dcf4;font-size:13px;text-decoration:none}.employee-hero-link:hover{text-decoration:underline;text-underline-offset:4px}
.employee-section{padding:36px 0 72px;border-top:1px solid var(--border)}.employee-section-heading{max-width:800px;margin-bottom:34px}.employee-section-heading h2{font-size:clamp(28px,3.4vw,42px);line-height:1.4;letter-spacing:-.035em;margin:12px 0 18px}.employee-lead{font-size:16px;line-height:1.9;color:var(--muted);margin:0}.employee-cases{display:grid;grid-template-columns:1fr 1fr;gap:0 42px}.employee-case,.employee-manager{padding:28px 0 30px;border-top:1px solid var(--border);min-width:0}.employee-role{font-size:12px;letter-spacing:.04em;color:#a9c5df;display:flex;align-items:center;gap:14px;margin:0 0 14px}.employee-role span{color:#a0e5f6;font-size:11px;letter-spacing:.12em}.employee-case h3,.employee-manager h3{font-size:24px;letter-spacing:-.025em;line-height:1.5;margin:0 0 14px}.employee-case>p:not(.employee-role),.employee-manager>p:not(.employee-role){font-size:14px;color:var(--muted);line-height:1.9;margin:0 0 15px}.employee-case .employee-example{color:#d2c3ed!important;font-size:12px!important}.employee-output{font-size:11px;color:#8ea7c5;display:flex;flex-direction:column;gap:6px}.employee-output span{font-size:12px;color:#d2deed}.employee-manager{padding:28px 26px 30px;background:linear-gradient(135deg,#ffd69909,#6c63ff0c);border-top-color:#ffd69950}.employee-manager .employee-role span{color:#ffd699}.employee-manager .quiet-link{margin-top:8px}.employee-management{display:grid;grid-template-columns:1fr 1fr;gap:42px;margin-top:25px;padding:38px 0;border-block:1px solid var(--border)}.employee-management h3{font-size:27px;line-height:1.55;letter-spacing:-.025em;margin:12px 0 0}.employee-management ol{list-style:none;padding:0;margin:0;counter-reset:step}.employee-management li{display:grid;grid-template-columns:75px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #b7c9f01c}.employee-management li:last-child{border-bottom:0}.employee-management strong{font-size:14px;color:#d5eaf6}.employee-management li span{font-size:13px;color:var(--muted);line-height:1.8}.employee-section-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:30px}.employee-section-cta p{font-size:14px;color:var(--muted);margin:0}.employee-section-cta .primary-button{width:auto;max-width:100%;white-space:normal;text-align:center;font-size:13px;gap:16px;padding:13px 22px}
@media(max-width:760px){.employee-section{padding:24px 0 44px}.employee-section-heading h2{font-size:28px}.employee-lead{font-size:14px}.employee-cases,.employee-management{grid-template-columns:1fr;gap:0}.employee-case,.employee-manager{padding:24px 0}.employee-case h3,.employee-manager h3{font-size:21px}.employee-manager{padding:24px 20px}.employee-management{gap:24px;margin-top:16px;padding:30px 0}.employee-management h3{font-size:24px}.employee-section-cta{flex-direction:column;align-items:stretch;gap:16px}.employee-section-cta .primary-button{width:100%;font-size:12px;padding-inline:14px}.employee-hero-link{font-size:12px}}