/* ===== ZoneOut Landing · base + 3 tones =================================== Tone is set via [data-tone] on : calm (default) · exchange · play Lang via [data-lang]. Everything responsive, mobile-first. */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;} :root{ /* type */ --sans:"Manrope","Noto Sans TC",-apple-system,BlinkMacSystemFont,sans-serif; --serif:"Noto Serif TC",Georgia,serif; --mono:"Roboto Mono",ui-monospace,SFMono-Regular,monospace; --display:var(--serif); --display-w:600; --h1: clamp(40px, 7vw, 78px); --h2: clamp(28px, 4.4vw, 46px); /* CALM palette (default) */ --bg:#e7dfce; --bg-grad:radial-gradient(120% 90% at 50% -10%, #efe8d7, #ddd3bf); --section:transparent; --section-alt:#efe9db; --surface:#faf5e9; --surface-2:#f3ecdb; --ink:#2c2415; --ink-dim:#6f6450; --ink-mute:#9a8e76; --gold:#b08738; --gold-soft:#d4b274; --gold-deep:#8a6a2c; --line:rgba(64,48,20,0.12); --line-soft:rgba(64,48,20,0.07); --up:#a9802f; --down:#3f73a6; --hero-bg:transparent; --hero-ink:var(--ink); --dark-panel:#19140d; --dark-ink:#f3ecdc; --radius:18px; --radius-lg:26px; --shadow:0 20px 50px -24px rgba(60,44,12,0.42); --shadow-soft:0 14px 34px -20px rgba(60,44,12,0.4); --badge-border:none; --badge-shadow:none; --maxw:1180px; } /* ===== EXCHANGE tone — trading-terminal, gold on warm dark =============== */ html[data-tone="exchange"]{ --display:var(--sans); --display-w:700; --bg:#15110b; --bg-grad:radial-gradient(130% 100% at 50% -10%, #221a10, #100c07); --section:transparent; --section-alt:#1c150d; --surface:#221a10; --surface-2:#2a2013; --ink:#f4ecda; --ink-dim:#bca981; --ink-mute:#8a7a5b; --gold:#e0bd6f; --gold-soft:#f0d18e; --gold-deep:#c79e4f; --line:rgba(224,189,111,0.18); --line-soft:rgba(224,189,111,0.09); --up:#e0bd6f; --down:#6fa6d6; --shadow:0 24px 60px -28px rgba(0,0,0,0.7); --shadow-soft:0 16px 40px -24px rgba(0,0,0,0.6); --dark-panel:#0e0a05; --dark-ink:#f4ecda; } /* ===== PLAY tone — bigger, rounder, sticker-y warmth ==================== */ html[data-tone="play"]{ --sans:"Baloo 2","Noto Sans TC",sans-serif; --display:"Baloo 2","Noto Sans TC",sans-serif; --display-w:700; --h1: clamp(42px, 7.6vw, 84px); --bg:#FBEFD6; --bg-grad:radial-gradient(120% 90% at 50% -10%, #FFF6E2, #F7E6C4); --section:transparent; --section-alt:#FFF3DC; --surface:#ffffff; --surface-2:#FFF6E6; --ink:#3a2c12; --ink-dim:#7a6437; --ink-mute:#a9925f; --gold:#E2A32B; --gold-soft:#FFC961; --gold-deep:#C2851A; --line:rgba(58,44,18,0.16); --line-soft:rgba(58,44,18,0.08); --up:#d9961f; --down:#3f7fc0; --radius:22px; --radius-lg:30px; --shadow:0 16px 0 -2px rgba(58,44,18,0.12); --shadow-soft:0 8px 0 -1px rgba(58,44,18,0.12); --badge-border:2.5px solid #3a2c12; --badge-shadow:4px 4px 0 #3a2c12; } body{ font-family:var(--sans); background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed; color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.55; transition:background-color .5s, color .5s; } /* ---- layout primitives ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;} .section{padding:96px 0;position:relative;} .section.alt{background:var(--section-alt);} .section.tight{padding:72px 0;} .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase; color:var(--gold);font-weight:500;display:inline-flex;align-items:center;gap:10px;} .kicker::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.6;} h1,h2,h3{margin:0;font-family:var(--display);font-weight:var(--display-w);letter-spacing:-.02em;color:var(--ink);line-height:1.05;} h2.title{font-size:var(--h2);margin:16px 0 0;text-wrap:balance;} .lead{font-size:clamp(16px,1.7vw,19px);color:var(--ink-dim);max-width:56ch;text-wrap:pretty;line-height:1.65;} .section-head{margin-bottom:48px;max-width:760px;} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;} .up{color:var(--up);} .down{color:var(--down);} /* ---- top controls (lang + style) ---- */ .controls{display:flex;gap:10px;align-items:center;} .icon-toggle{appearance:none;cursor:pointer;width:38px;height:38px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center;color:var(--ink-dim); background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-soft); transition:color .2s, transform .15s;} .icon-toggle:hover{color:var(--gold);} .icon-toggle:active{transform:translateY(1px);} html[data-tone="calm"] .icon-toggle .ic-sun, html[data-tone="play"] .icon-toggle .ic-sun{display:none;} html[data-tone="exchange"] .icon-toggle .ic-moon{display:none;} .seg{display:inline-flex;background:var(--surface);border:1px solid var(--line); border-radius:999px;padding:4px;box-shadow:var(--shadow-soft);backdrop-filter:blur(8px);} .seg button{appearance:none;border:0;background:transparent;cursor:pointer; font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-mute); padding:7px 14px;border-radius:999px;transition:.2s;font-weight:500;white-space:nowrap;} .seg button.on{background:var(--gold);color:#fff;} html[data-tone="exchange"] .seg button.on{color:#15110b;} .seg .lbl{font-size:10px;color:var(--ink-mute);align-self:center;padding:0 8px 0 10px;letter-spacing:.18em;text-transform:uppercase;} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line-soft);} .nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;} .brand img{width:34px;height:34px;border-radius:9px;display:block;box-shadow:var(--shadow-soft);} .nav-links{display:none;gap:26px;margin-left:18px;} .nav-links a{color:var(--ink-dim);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s;} .nav-links a:hover{color:var(--gold);} .nav-spacer{flex:1;} .btn{appearance:none;border:0;cursor:pointer;font-family:var(--sans);font-weight:600; border-radius:13px;transition:transform .15s, box-shadow .2s;text-decoration:none;display:inline-flex; align-items:center;justify-content:center;gap:8px;} .btn:active{transform:translateY(1px);} .btn-gold{background:var(--gold);color:#fff;padding:11px 20px;font-size:14.5px;box-shadow:var(--shadow-soft);} html[data-tone="exchange"] .btn-gold{color:#15110b;} html[data-tone="play"] .btn-gold{border:var(--badge-border);box-shadow:var(--badge-shadow);color:#3a2c12;background:var(--gold-soft);} .btn-gold:hover{box-shadow:var(--shadow);} /* ---- hero ---- */ .hero{padding:64px 0 84px;position:relative;overflow:hidden;} .hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;} .hero-grid>*{min-width:0;} .hero-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep); background:var(--surface);border:1px solid var(--line);padding:8px 15px;border-radius:999px;} html[data-tone="play"] .hero-badge{border:var(--badge-border);box-shadow:3px 3px 0 #3a2c12;color:#3a2c12;background:var(--gold-soft);} .hero h1{font-size:var(--h1);margin:22px 0 0;white-space:pre-line;text-wrap:balance;color:var(--hero-ink);} .hero .lead{margin:22px 0 0;font-size:clamp(16px,1.9vw,20px);} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px;} .bell{display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:#fff; border:0;cursor:pointer;padding:14px 24px;border-radius:15px;font-family:var(--display); font-weight:700;font-size:17px;box-shadow:var(--shadow);transition:transform .15s;} html[data-tone="exchange"] .bell{color:#15110b;} html[data-tone="play"] .bell{border:var(--badge-border);box-shadow:5px 5px 0 #3a2c12;color:#3a2c12;background:var(--gold-soft);} .bell:hover{transform:translateY(-2px);} .bell.ring{animation:bellRing .6s ease;} @keyframes bellRing{0%,100%{transform:rotate(0)}15%{transform:rotate(-11deg)}30%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}} .cta-note{font-size:13px;color:var(--ink-mute);font-family:var(--mono);letter-spacing:.04em;} /* ticker card */ .ticker{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px 28px;box-shadow:var(--shadow);width:100%;max-width:560px;} html[data-tone="play"] .ticker{border:var(--badge-border);box-shadow:8px 8px 0 #3a2c12;} .ticker-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono); font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);} .ticker-val{display:flex;align-items:baseline;gap:14px;margin:14px 0 0;flex-wrap:wrap;} .ticker-val .big{font-family:var(--mono);font-weight:500;font-size:clamp(40px,6vw,56px); letter-spacing:-.02em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;} .ticker-chg{font-family:var(--mono);font-size:15px;color:var(--up);font-weight:500;} .ticker-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px; padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-dim);} .ticker-foot a{color:var(--gold);text-decoration:none;font-weight:600;font-family:var(--mono);font-size:12px;letter-spacing:.08em;} .kline-wrap{margin-top:20px;} .kline-wrap svg{width:100%;height:120px;display:block;} /* ---- concept ---- */ .concept-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;} .concept-grid>.reveal:last-child{display:flex;flex-direction:column;min-width:0;} .concept-grid .code-card{flex:1;} .concept-body{font-size:clamp(17px,2vw,21px);line-height:1.7;color:var(--ink-dim);text-wrap:pretty;} .code-card{background:var(--dark-panel);color:var(--dark-ink);border-radius:var(--radius-lg); padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;flex-direction:column;} .code-card::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(224,189,111,.10) 1.4px,transparent 1.4px);background-size:22px 22px;pointer-events:none;} .code-card .lab{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);} .code-card .code{font-family:var(--mono);font-weight:500;font-size:clamp(34px,5vw,46px);letter-spacing:.04em;margin:8px 0 4px;color:#fff;} .code-card .nm{font-size:15px;color:rgba(243,236,220,.72);} .code-card .since{margin-top:auto;font-family:var(--mono);font-size:12px;color:rgba(243,236,220,.5);letter-spacing:.06em;padding-top:18px;} .cc-chart{width:100%;flex:1;min-height:90px;margin:22px 0;display:block;position:relative;z-index:1;} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;position:relative;z-index:1;} .chip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold-soft); border:1px solid rgba(224,189,111,.32);border-radius:999px;padding:6px 12px;} /* ---- indices ---- */ .idx-split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;} .idx-intro{max-width:760px;} .idx-arc{display:flex;flex-direction:column;gap:14px;} .idx-grid{display:grid;grid-template-columns:1fr;gap:14px;} .idx-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:20px 22px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow-soft); transition:transform .3s, box-shadow .25s;} html[data-tone="play"] .idx-card{border:var(--badge-border);box-shadow:var(--badge-shadow);} .idx-card:hover{transform:translateY(-3px) translateX(var(--arc,0)) !important;box-shadow:var(--shadow);} .idx-ic{width:56px;height:56px;flex:none;border-radius:16px;background:var(--surface-2); display:flex;align-items:center;justify-content:center;border:1px solid var(--line-soft);} .idx-ic .glyph{width:30px;height:30px;color:var(--gold);display:block;} .idx-meta{flex:1;min-width:0;} .idx-name{display:flex;align-items:baseline;gap:9px;} .idx-name b{font-family:var(--display);font-weight:var(--display-w);font-size:21px;color:var(--ink);} .idx-name span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);} .idx-desc{font-size:14.5px;color:var(--ink-dim);margin-top:3px;} .idx-quote{text-align:right;flex:none;font-family:var(--mono);} .idx-quote .v{font-size:20px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;} .idx-quote .c{font-size:12.5px;color:var(--up);margin-top:3px;} /* ---- try demo ---- */ .try-stage{background:var(--dark-panel);color:var(--dark-ink);border-radius:var(--radius-lg); padding:44px 28px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden;} .try-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(224,189,111,.08) 1.5px,transparent 1.5px);background-size:26px 26px;} .try-stage>*{position:relative;z-index:1;} .breath{width:180px;height:180px;margin:8px auto 0;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;} .breath-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold-soft); background:radial-gradient(circle, rgba(224,189,111,.22), transparent 68%); transition:transform 4s ease-in-out, opacity 4s ease-in-out;opacity:.5;} .breath.run .breath-ring{animation:breathe 8s ease-in-out infinite;} @keyframes breathe{0%,100%{transform:scale(.62);opacity:.4}50%{transform:scale(1);opacity:.9}} .breath-label{font-family:var(--display);font-weight:600;font-size:22px;color:#fff;letter-spacing:.04em;} .try-timer{font-family:var(--mono);font-size:13px;color:var(--gold-soft);letter-spacing:.16em;margin-top:18px;height:18px;} .dur-row{display:inline-flex;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(224,189,111,.2);border-radius:999px;padding:5px;margin:6px 0 4px;} .dur-row button{appearance:none;border:0;background:transparent;cursor:pointer;color:rgba(243,236,220,.7); font-family:var(--mono);font-size:13px;padding:8px 16px;border-radius:999px;transition:.2s;} .dur-row button.on{background:var(--gold);color:#15110b;font-weight:600;} .try-mini{width:100%;max-width:360px;height:70px;margin:18px auto 0;display:block;} .try-result{font-family:var(--mono);} .try-result .rv{font-size:34px;color:var(--up);font-weight:500;} /* ---- how ---- */ .how-grid{display:grid;grid-template-columns:1fr;gap:22px;counter-reset:step;} .step{display:flex;gap:18px;align-items:flex-start;padding:26px;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);} html[data-tone="play"] .step{border:var(--badge-border);box-shadow:var(--badge-shadow);} .step-n{flex:none;width:46px;height:46px;border-radius:14px;background:var(--gold);color:#fff; font-family:var(--mono);font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;} html[data-tone="exchange"] .step-n{color:#15110b;} html[data-tone="play"] .step-n{border:var(--badge-border);box-shadow:3px 3px 0 #3a2c12;color:#3a2c12;background:var(--gold-soft);} .step h3{font-size:20px;margin-bottom:6px;} .step p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.6;} /* ---- milestones ---- */ .ms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} .ms-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:24px 18px;text-align:center;box-shadow:var(--shadow-soft);transition:transform .25s;} html[data-tone="play"] .ms-card{border:var(--badge-border);box-shadow:var(--badge-shadow);} .ms-card:hover{transform:translateY(-4px);} .ms-card img{width:84px;height:84px;display:block;margin:0 auto 12px; filter:drop-shadow(0 10px 18px rgba(60,44,12,.28));} .ms-card .t{font-family:var(--display);font-weight:var(--display-w);font-size:17px;color:var(--ink);} .ms-card .d{font-size:13px;color:var(--ink-dim);margin-top:4px;line-height:1.45;} /* ---- screens ---- */ .screens-row{display:flex;gap:22px;overflow-x:auto;padding:8px 4px 22px;scroll-snap-type:x mandatory;justify-content:center;} .screen{flex:none;width:248px;scroll-snap-align:center;text-align:center;} .screen img{width:100%;border-radius:22px;display:block;box-shadow:var(--shadow); border:1px solid var(--line-soft);} .screen .cap{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-mute);} /* ---- charter ---- */ .charter-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);} .article{display:grid;grid-template-columns:1fr;gap:6px;padding:28px 0;border-bottom:1px solid var(--line);} .article .an{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);} .article h3{font-size:clamp(22px,3vw,30px);} .article p{margin:0;color:var(--ink-dim);font-size:16px;line-height:1.65;max-width:62ch;} /* ---- ipo ---- */ .ipo-stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:40px 32px;box-shadow:var(--shadow);} html[data-tone="play"] .ipo-stage{border:var(--badge-border);box-shadow:8px 8px 0 #3a2c12;} .ipo-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;} .ipo-form input{flex:1;min-width:200px;font-family:var(--sans);font-size:16px;color:var(--ink); background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:14px 18px;outline:none;} .ipo-form input:focus{border-color:var(--gold);} .ipo-result{margin-top:26px;} /* ---- download ---- */ .dl{text-align:center;} .store-row{display:inline-flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px;} .store{display:flex;align-items:center;gap:11px;background:var(--dark-panel);color:#fff; padding:13px 22px;border-radius:14px;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-soft);transition:transform .15s;} html[data-tone="play"] .store{border:var(--badge-border);box-shadow:4px 4px 0 #3a2c12;} .store:hover{transform:translateY(-2px);} .store .s1{font-size:10px;opacity:.78;font-weight:600;text-transform:uppercase;letter-spacing:.04em;} .store .s2{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.05;} /* official store badges */ .badge{display:inline-flex;text-decoration:none;transition:transform .15s;} .badge:hover{transform:translateY(-2px);} .badge img{height:52px;width:auto;display:block;} .badge.sm img{height:42px;} /* ---- faq ---- */ .faq-list{border-top:1px solid var(--line);max-width:820px;} .faq-item{border-bottom:1px solid var(--line);} .faq-q{width:100%;text-align:left;appearance:none;border:0;background:transparent;cursor:pointer; padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:20px; font-family:var(--display);font-weight:var(--display-w);font-size:clamp(17px,2.2vw,21px);color:var(--ink);} .faq-q .x{flex:none;width:26px;height:26px;position:relative;transition:transform .3s;} .faq-q .x::before,.faq-q .x::after{content:"";position:absolute;background:var(--gold);border-radius:2px;} .faq-q .x::before{left:50%;top:4px;width:2px;height:18px;transform:translateX(-50%);} .faq-q .x::after{top:50%;left:4px;height:2px;width:18px;transform:translateY(-50%);} .faq-item.open .faq-q .x{transform:rotate(135deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;} .faq-a p{margin:0;padding:0 0 24px;color:var(--ink-dim);font-size:16px;line-height:1.7;max-width:64ch;} /* ---- footer (tone-aware: follows the light/dark theme) ---- */ .footer{background:var(--surface-2);color:var(--ink-dim);padding:56px 0 40px;border-top:1px solid var(--line);} .footer-top{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;} .footer .brand{color:var(--ink);} .footer-tag{color:var(--ink-dim);font-size:15px;margin-top:14px;max-width:34ch;} .footer-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px; margin-top:40px;padding-top:24px;border-top:1px solid var(--line); font-size:13px;color:var(--ink-mute);font-family:var(--mono);letter-spacing:.04em;} .footer-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .footer-link{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--gold);transition:color .2s;} .footer-link:hover{color:var(--gold);} .footer-links{display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-size:14px;} .footer-links .footer-link{border-bottom:0;color:var(--ink-dim);} .footer-links .footer-link:hover{color:var(--gold);} /* ---- reveal ---- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;} .reveal.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}} /* ===== TRY · in-phone trial app (always the signature cream/gold app look) ===== */ .zo-phone{ --a-bg:#efe7d3; --a-bg2:#e6dbc4; --a-surface:#f8f2e4; --a-ink:#2c2415; --a-dim:#6f6450; --a-mute:#9a8e76; --a-accent:#b08738; --a-soft:#d4b274; --a-wash:rgba(176,135,56,0.13); --a-line:rgba(64,48,20,0.12); --a-line2:rgba(64,48,20,0.2); --a-ring:rgba(176,135,56,0.42); --a-good:#3f8f5b; --a-on:#fff; width:330px;max-width:88vw;margin:0 auto;padding:13px;border-radius:46px; background:linear-gradient(160deg,#2a2114,#17110a); box-shadow:0 40px 90px -30px rgba(40,28,8,.6), inset 0 0 0 1.5px rgba(212,178,116,.18); } .zo-phone-screen{position:relative;height:624px;border-radius:34px;overflow:hidden; background:var(--a-bg);font-family:var(--sans);} /* dark app theme (mirrors the app's 暖深金 dark mode) */ .zo-phone[data-app="dark"]{ --a-bg:#1b150d; --a-bg2:#2a2114; --a-surface:#231c11; --a-ink:#f3ead4; --a-dim:#bdac86; --a-mute:#8a7a5b; --a-accent:#e0bd6f; --a-soft:#f0d18e; --a-wash:rgba(224,189,111,0.12); --a-line:rgba(224,189,111,0.16); --a-line2:rgba(224,189,111,0.26); --a-ring:rgba(224,189,111,0.45); --a-good:#7fb8c4; --a-on:#1b150d; } /* in-phone top utility row: lang + theme */ .zo-util{display:flex;align-items:center;justify-content:space-between;padding:2px 0 0;min-height:30px;position:relative;} .zo-util .zo-tag{position:absolute;left:0;right:0;text-align:center;pointer-events:none;} .zo-langseg{display:inline-flex;padding:2px;border-radius:999px;background:var(--a-bg2);border:1px solid var(--a-line);} .zo-langseg button{padding:3px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:11px; letter-spacing:.06em;border:none;background:transparent;color:var(--a-dim);} .zo-langseg button.on{background:var(--a-accent);color:var(--a-on);font-weight:600;} .zo-themebtn{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--a-line2); border-radius:999px;background:transparent;cursor:pointer;color:var(--a-dim);} .zo-statusbar{position:absolute;top:0;left:0;right:0;height:38px;display:flex;align-items:center; justify-content:space-between;padding:0 24px;font-size:13px;font-weight:600;color:var(--a-ink);z-index:5;font-family:var(--mono);} .zo-stat-right{display:flex;align-items:center;gap:6px;} .zo-bars{width:17px;height:11px;background: linear-gradient(var(--a-ink),var(--a-ink)) 0 100%/3px 4px no-repeat, linear-gradient(var(--a-ink),var(--a-ink)) 5px 100%/3px 7px no-repeat, linear-gradient(var(--a-ink),var(--a-ink)) 10px 100%/3px 9px no-repeat, linear-gradient(var(--a-ink),var(--a-ink)) 15px 100%/3px 11px no-repeat;} .zo-batt{width:22px;height:11px;border:1.5px solid var(--a-ink);border-radius:3px;position:relative;opacity:.9;} .zo-batt::before{content:"";position:absolute;inset:1.5px;width:70%;background:var(--a-ink);border-radius:1px;} .zo-batt::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--a-ink);border-radius:0 1px 1px 0;} .zo-app{position:absolute;inset:38px 0 0;display:flex;flex-direction:column;} .zo-app *{box-sizing:border-box;} /* breathing mark */ .zo-mark{position:relative;display:grid;place-items:center;} .zo-mark .ring{position:absolute;border-radius:50%;border:1px solid var(--a-line2);animation:zoBreathe 7s ease-in-out infinite;} .zo-mark .ring.r2{background:var(--a-wash);border-color:var(--a-ring);animation-delay:.4s;} .zo-mark .candle{position:relative;overflow:visible;} @keyframes zoBreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.16);opacity:.62}} @keyframes zoBlink{0%,100%{opacity:1}50%{opacity:.3}} /* trial home */ .zo-home{flex:1;display:flex;flex-direction:column;padding:14px 22px 20px; background:radial-gradient(ellipse 90% 42% at 50% 14%, var(--a-wash), transparent 62%);} .zo-tag{text-align:center;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--a-mute);} .zo-hero{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;} .zo-hl{font-size:23px;font-weight:600;color:var(--a-ink);line-height:1.5;margin-top:18px;} .zo-modes{display:flex;flex-direction:column;gap:9px;margin-top:24px;} .zo-mode-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;cursor:pointer; background:var(--a-surface);border:1px solid var(--a-line);font-family:inherit;text-align:left;transition:border-color .15s;} .zo-mode-row:hover{border-color:var(--a-accent);} .zo-mode-ic{width:42px;height:42px;border-radius:13px;flex:none;background:var(--a-wash);color:var(--a-accent); display:flex;align-items:center;justify-content:center;} .zo-mode-ic svg{width:22px;height:22px;} .zo-mode-tx{flex:1;min-width:0;} .zo-mode-tx b{display:block;font-size:16px;font-weight:600;color:var(--a-ink);} .zo-mode-tx span{display:block;font-size:11.5px;color:var(--a-mute);margin-top:2px;} .zo-arrow{flex:none;color:var(--a-mute);} .zo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; padding:12px 14px;border-radius:16px;background:var(--a-surface);border:1px solid var(--a-line); font-family:inherit;cursor:default;transition:border-color .3s, box-shadow .3s;} .zo-foot.ready{border-color:var(--a-accent);box-shadow:0 0 0 3px var(--a-wash);cursor:pointer;} .zo-foot .fl{text-align:left;min-width:0;} .zo-foot .fl .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-mute);} .zo-foot.ready .fl .k{color:var(--a-accent);} .zo-foot .fl .s{font-size:12.5px;color:var(--a-dim);margin-top:3px;} .zo-prog{flex:none;width:34px;height:34px;display:grid;place-items:center;position:relative;} .zo-prog .pc{position:absolute;font-size:10.5px;font-weight:600;color:var(--a-mute);} .zo-prog .go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--a-accent);color:var(--a-on);} /* session */ .zo-session{flex:1;display:flex;flex-direction:column;align-items:center;padding:14px 24px 22px; background:radial-gradient(ellipse 80% 52% at 50% 44%, var(--a-wash), transparent 60%);} .zo-sess-top{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;} .zo-sess-top .ml{color:var(--a-mute);} .zo-sess-top .now{display:flex;align-items:center;gap:6px;color:var(--a-good);} .zo-sess-top .now i{width:6px;height:6px;border-radius:50%;background:var(--a-good);animation:zoBlink 1.6s infinite;} .zo-sess-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;} .zo-timer{margin-top:38px;font-size:50px;font-weight:600;color:var(--a-ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-family:var(--mono);} .zo-sess-state{font-size:10.5px;color:var(--a-mute);letter-spacing:.24em;margin-top:6px;text-transform:uppercase;} .zo-breathe-tx{margin-top:22px;font-size:13.5px;color:var(--a-dim);text-align:center;line-height:1.7;} .zo-breathe-tx small{font-size:12px;color:var(--a-mute);} .zo-end{padding:12px 30px;background:transparent;border:1px solid var(--a-line2);border-radius:999px; color:var(--a-dim);font-family:inherit;font-size:14px;cursor:pointer;letter-spacing:.04em;} .zo-end:hover{border-color:var(--a-accent);color:var(--a-accent);} /* letgo */ .zo-letgo{flex:1;display:flex;flex-direction:column;padding:8px 22px 22px;} .zo-back{width:38px;height:38px;border-radius:999px;background:transparent;border:1px solid var(--a-line); color:var(--a-dim);cursor:pointer;display:grid;place-items:center;} .zo-letgo-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;} .zo-letgo-ic{width:70px;height:70px;border-radius:22px;background:var(--a-wash);color:var(--a-accent);display:grid;place-items:center;} .zo-letgo h4{font-size:25px;font-weight:600;color:var(--a-ink);margin:16px 0 0;} .zo-letgo p{font-size:13.5px;color:var(--a-dim);margin:8px 0 0;max-width:230px;line-height:1.6;} .zo-letgo textarea{width:100%;min-height:120px;resize:none;margin-top:20px;padding:14px;border-radius:16px; background:var(--a-surface);border:1px solid var(--a-line);color:var(--a-ink);font-family:inherit;font-size:14px;line-height:1.7;outline:none;} .zo-letgo textarea:focus{border-color:var(--a-accent);} .zo-primary{width:100%;padding:16px;border-radius:999px;background:var(--a-accent);color:var(--a-on); border:none;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;} /* complete */ .zo-complete{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 28px; animation:zoUp .5s ease;} @keyframes zoUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .zo-check{width:64px;height:64px;border-radius:999px;background:var(--a-accent);color:var(--a-on);display:grid;place-items:center;} .zo-logged{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--a-mute);margin-top:22px;} .zo-amt{font-size:26px;font-weight:600;color:var(--a-ink);margin-top:9px;} .zo-cline{font-size:14px;color:var(--a-dim);margin-top:12px;line-height:1.6;max-width:230px;} .zo-settle{margin-top:18px;font-family:var(--mono);} .zo-settle .sl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--a-mute);} .zo-settle .sv{font-size:26px;color:var(--a-good);font-weight:500;margin-top:2px;} .zo-mini{width:200px;height:54px;margin:14px auto 0;display:block;} .zo-again{margin-top:24px;padding:13px 28px;border-radius:999px;background:var(--a-accent);color:var(--a-on);border:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;} .zo-nudge{margin-top:14px;font-size:11.5px;color:var(--a-mute);max-width:220px;line-height:1.5;} /* showcase: two static app phones (K線 + 放空) */ .showcase-row{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;} .sc-item{display:flex;flex-direction:column;align-items:center;gap:14px;} .sc-item .cap{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);} .zo-phone.sc .zo-phone-screen{height:580px;} /* K線 screen */ .zo-kl{flex:1;display:flex;flex-direction:column;padding:16px 22px 22px;} .zo-kl-head .code{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--a-mute);text-transform:uppercase;} .zo-kl-head .row{display:flex;align-items:baseline;gap:10px;margin-top:8px;} .zo-kl-head .v{font-family:var(--mono);font-size:38px;font-weight:500;color:var(--a-ink);font-variant-numeric:tabular-nums;} .zo-kl-head .c{font-family:var(--mono);font-size:14px;color:var(--up);} .zo-kl-chart{width:100%;height:150px;display:block;margin-top:14px;} .zo-kl-capm{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--a-mute);text-transform:uppercase;margin:18px 0 6px;} .zo-heat{display:flex;gap:4px;} .zo-heat i{flex:1;height:40px;border-radius:8px;display:block;} .zo-kl-spacer{flex:1;} /* IPO industry chips */ .ipo-pick{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px;} .ipo-industries{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;} .ind-chip{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;cursor:pointer; background:var(--surface-2);border:1px solid var(--line);font-family:inherit;color:var(--ink);text-align:left;transition:border-color .15s, background .15s;} html[data-tone="play"] .ind-chip{border:var(--badge-border);box-shadow:3px 3px 0 #3a2c12;} .ind-chip:hover{border-color:var(--gold);} .ind-chip.on{border-color:var(--gold);background:var(--surface);box-shadow:0 0 0 2px var(--gold-soft);} .ind-chip .ico{font-size:20px;line-height:1;} .ind-chip b{font-size:16px;font-weight:600;} .ind-chip span{display:block;font-size:11px;color:var(--ink-mute);font-family:var(--mono);letter-spacing:.08em;margin-top:2px;} @media(min-width:560px){.ipo-industries{grid-template-columns:repeat(4,1fr);}} /* ---- responsive ---- */ @media(max-width:520px){ .controls .seg .lbl{display:none;} .ind-chip .ico{display:none;} .ipo-industries{display:flex;flex-wrap:wrap;} } @media(min-width:680px){ .idx-grid{grid-template-columns:repeat(2,1fr);} .ms-grid{grid-template-columns:repeat(4,1fr);} .article{grid-template-columns:240px 1fr;gap:20px;align-items:baseline;} } @media(min-width:760px){ .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:48px;align-items:center;} .concept-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:48px;align-items:stretch;} } @media(min-width:900px){ .nav-links{display:flex;} .controls{flex-direction:row;align-items:center;} .hero-grid{gap:56px;} .concept-grid{gap:60px;} .how-grid{grid-template-columns:repeat(3,1fr);} .ms-grid{grid-template-columns:repeat(4,1fr);} .section{padding:120px 0;} .idx-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;} .idx-arc .idx-card{will-change:transform;} .idx-arc .idx-card:nth-child(1){--arc:0px;transform:translateX(0);} .idx-arc .idx-card:nth-child(2){--arc:26px;transform:translateX(26px);} .idx-arc .idx-card:nth-child(3){--arc:38px;transform:translateX(38px);} .idx-arc .idx-card:nth-child(4){--arc:26px;transform:translateX(26px);} .idx-arc .idx-card:nth-child(5){--arc:0px;transform:translateX(0);} } @media(min-width:1040px){ .idx-grid{grid-template-columns:repeat(1,1fr);max-width:920px;} }