@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Noto+Serif+SC:wght@600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#f7f4ff; --soft:#c8c2dc; --muted:#8e88a6; --deep:#070815; --panel:#100f24; --purple:#a87bff; --blue:#68b8ff; --cyan:#79e4dc; font-family:"Space Grotesk","PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:#060712; }
* { box-sizing:border-box; } html { min-width:320px; max-width:100%; overflow-x:clip; background:#060712; } body { width:100%; margin:0; min-width:320px; max-width:100%; overflow-x:clip; background:#060712; } #app { width:100%; overflow-x:clip; } button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; } .screen { width:min(100%,390px); min-height:100dvh; margin:0 auto; overflow:hidden; position:relative; isolation:isolate; }
.screen:after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.34; background-image:radial-gradient(rgba(255,255,255,.8) .45px,transparent .7px); background-size:7px 7px; mask-image:linear-gradient(120deg,#000,transparent 75%); }
.brand { display:flex; align-items:center; gap:9px; color:inherit; font-weight:700; font-size:13px; letter-spacing:.09em; white-space:nowrap; } .brand-mark { width:23px; height:23px; position:relative; display:block; transform:rotate(45deg); filter:drop-shadow(0 0 9px rgba(151,110,255,.5)); } .brand-mark i { position:absolute; width:9px; height:9px; border-radius:2px; background:var(--purple); } .brand-mark i:nth-child(1) { left:0; top:0; background:#c6a5ff; }.brand-mark i:nth-child(2) { right:0; top:0; background:#72e6db; }.brand-mark i:nth-child(3) { left:7px; bottom:0; background:#f0b9e8; }
.eyebrow { margin:0 0 13px; color:#cbbaff; font:10px "DM Mono",monospace; letter-spacing:.18em; text-transform:uppercase; }.primary-button { border:1px solid rgba(255,255,255,.34); border-radius:15px; background:linear-gradient(104deg,#7663f4 0%,#af5cf0 54%,#6ea9f5 100%); color:#fff; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; font-weight:700; font-size:16px; box-shadow:0 13px 27px rgba(94,58,209,.34),inset 0 1px rgba(255,255,255,.38); transition:transform .2s,filter .2s; }.primary-button:active { transform:scale(.975); filter:brightness(.91); }.primary-button b { font-size:25px; font-weight:400; }

/* Home — concentrated light, fine lines and a composed hero rather than decorative empty space. */
.home-screen { display:flex; flex-direction:column; padding:21px 22px 23px; background:radial-gradient(90% 52% at 78% 44%,rgba(69,39,146,.33),transparent 63%),radial-gradient(62% 45% at 1% 83%,rgba(17,93,150,.23),transparent 70%),linear-gradient(145deg,#060714 0%,#0d0d26 48%,#0b112a 100%); }.home-screen:before { content:""; position:absolute; z-index:-1; inset:0; opacity:.4; background-image:linear-gradient(rgba(172,148,255,.095) 1px,transparent 1px),linear-gradient(90deg,rgba(110,190,255,.075) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(180deg,#000,transparent 74%); }.home-nav,.result-header { z-index:5; display:flex; align-items:center; justify-content:space-between; } .nav-status { color:#c5badf; font:10px "DM Mono",monospace; letter-spacing:.1em; } .home-hero { z-index:1; position:relative; display:flex; flex:1; flex-direction:column; padding-top:66px; }.home-hero:before { content:""; position:absolute; top:40px; left:-40px; width:120px; height:1px; background:linear-gradient(90deg,transparent,#7ec7ff,transparent); box-shadow:0 22px 0 rgba(122,100,255,.35),0 44px 0 rgba(122,100,255,.12); transform:rotate(-21deg); }.home-hero h1 { position:relative; z-index:3; margin:0; font:900 clamp(45px,12.4vw,64px)/1.05 "Noto Serif SC",serif; letter-spacing:-.09em; text-shadow:0 8px 28px rgba(0,0,0,.2); }.home-hero h1 em { color:#c1a2ff; font-style:normal; background:linear-gradient(100deg,#dfcbff,#9b75ff 50%,#73d8ed); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }.lead { position:relative; z-index:3; max-width:275px; margin:20px 0 0; color:#c7c1d6; font-size:14px; line-height:1.85; }.home-hero .lab-visual { top:86px; right:-69px; transform:scale(1.07); }.home-cta { position:relative; z-index:4; width:100%; margin-top:auto; }.home-cta:before { content:""; position:absolute; z-index:-1; inset:-12px -8px; border-radius:25px; background:radial-gradient(ellipse,rgba(137,92,255,.38),transparent 68%); filter:blur(8px); }.trust-row { z-index:3; display:flex; justify-content:center; align-items:center; gap:10px; margin-top:19px; color:#b9b2c8; font-size:11px; }.trust-row i { width:3px; height:3px; border-radius:100%; background:#8fdde2; box-shadow:0 0 7px #8fdde2; }.home-note { z-index:3; display:flex; justify-content:space-between; border-top:1px solid rgba(199,188,239,.13); padding-top:16px; color:#817b96; font-size:9px; }

/* Programmatic “personality core”: layered halos, rotating fields and a faceted center. */
.lab-visual { width:370px; height:370px; position:absolute; pointer-events:none; --accent:#a77cff; }.aura { position:absolute; top:50%; left:50%; border-radius:50%; transform:translate(-50%,-50%); }.aura-a { width:238px; height:238px; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 42%,transparent),transparent 66%); filter:blur(15px); }.aura-b { width:325px; height:325px; background:radial-gradient(circle,transparent 34%,color-mix(in srgb,var(--accent) 15%,transparent) 35%,transparent 61%); filter:blur(5px); }.orbit { position:absolute; left:50%; top:50%; border:1px solid color-mix(in srgb,var(--accent) 58%,transparent); border-radius:50%; transform:translate(-50%,-50%) rotate(-26deg); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 20%,transparent); }.orbit:after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:#f6f4ff; box-shadow:0 0 11px 3px var(--accent); }.orbit-a { width:334px; height:136px; }.orbit-a:after { left:39px; top:15px; }.orbit-b { width:187px; height:314px; border-color:color-mix(in srgb,#70caff 68%,transparent); transform:translate(-50%,-50%) rotate(43deg); }.orbit-b:after { right:24px; bottom:24px; }.orbit-c { width:268px; height:268px; opacity:.62; border-style:dashed; animation:spin 18s linear infinite; }.orbit-c:after { left:31px; bottom:31px; }.orbit-d { width:226px; height:102px; border-color:color-mix(in srgb,#ffb7ec 52%,transparent); transform:translate(-50%,-50%) rotate(18deg); }.orbit-d:after { right:11px; top:12px; }.core { position:absolute; left:50%; top:50%; width:96px; height:96px; transform:translate(-50%,-50%) rotate(45deg); border:1px solid color-mix(in srgb,#fff 74%,transparent); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 82%,#fff),rgba(72,40,167,.18) 46%,rgba(85,187,252,.85)); box-shadow:0 0 18px var(--accent),0 0 53px color-mix(in srgb,var(--accent) 54%,transparent),inset 0 0 23px rgba(255,255,255,.58); clip-path:polygon(50% 0,95% 18%,100% 50%,79% 94%,50% 100%,13% 81%,0 50%,17% 13%); }.core:before { content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.75); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }.core i { position:absolute; z-index:2; display:block; background:rgba(255,255,255,.65); transform-origin:0 0; }.core i:nth-child(1) { width:62px; height:1px; left:17px; top:25px; transform:rotate(42deg); }.core i:nth-child(2) { width:58px; height:1px; left:18px; top:68px; transform:rotate(-43deg); }.core i:nth-child(3) { width:1px; height:61px; left:47px; top:17px; }.signal { position:absolute; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 14px 5px var(--accent); }.s1 { left:55px; top:112px; }.s2 { right:54px; top:93px; }.s3 { bottom:42px; left:125px; }.s4 { right:104px; bottom:74px; width:4px; height:4px; }.glyph { position:absolute; color:var(--accent); font:20px "DM Mono",monospace; text-shadow:0 0 10px var(--accent); }.g1 { left:30px; top:54px; }.g2 { right:28px; bottom:94px; }.g3 { left:100px; bottom:19px; font-size:52px; }.g4 { right:72px; top:41px; font-size:16px; }

/* Quiz — still dark, with a quiet technical card and a tactile rather than questionnaire-like tendency control. */
.quiz-screen { display:flex; flex-direction:column; min-height:100dvh; padding:19px 20px 20px; color:#f4f1ff; background:radial-gradient(80% 50% at 50% 36%,rgba(82,48,168,.29),transparent 76%),radial-gradient(55% 35% at 5% 90%,rgba(20,99,159,.22),transparent 75%),linear-gradient(145deg,#080916,#11102a 55%,#091226); }.quiz-screen:before { content:""; position:absolute; z-index:-1; inset:0; opacity:.27; background-image:linear-gradient(90deg,rgba(159,132,255,.14) 1px,transparent 1px),linear-gradient(rgba(159,132,255,.1) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(180deg,#000,transparent 80%); }.quiz-header { display:flex; align-items:center; justify-content:space-between; min-height:35px; }.quiz-header .brand { color:#f3efff; }.icon-button { width:30px; height:30px; padding:0; border:1px solid rgba(208,197,242,.22); border-radius:50%; color:#d9d2eb; background:rgba(255,255,255,.05); font-size:21px; line-height:1; }.question-count { color:#d0c8e3; font:12px "DM Mono",monospace; }.question-count small { color:#807898; font-size:9px; }.progress-wrap { margin:28px 3px 0; }.progress-track { height:5px; overflow:hidden; border:1px solid rgba(189,176,225,.14); border-radius:99px; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 3px rgba(0,0,0,.35); }.progress-track span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#64cfe9,#a77aff 47%,#e68be1); box-shadow:0 0 12px #9d77ff; transition:width .35s ease; }.progress-wrap p { margin:10px 0; color:#a69ebd; font-size:11px; }.question-stage { position:relative; display:flex; flex:1; flex-direction:column; justify-content:center; margin:25px 0 15px; padding:39px 25px 34px; border:1px solid rgba(200,189,234,.17); border-radius:25px; background:linear-gradient(140deg,rgba(30,27,60,.8),rgba(12,15,34,.84)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 20px 50px rgba(1,2,15,.29); overflow:hidden; animation:enter .16s ease both; }.question-stage:before { content:""; position:absolute; right:-75px; top:-85px; width:230px; height:230px; border:1px solid rgba(157,119,255,.2); border-radius:50%; box-shadow:0 0 45px rgba(146,108,255,.12); }.question-stage:after { content:""; position:absolute; left:0; top:36px; width:3px; height:68px; border-radius:5px; background:linear-gradient(#78dfea,#a377ff); box-shadow:0 0 13px #9874ff; }.question-kicker { position:relative; z-index:1; margin:0 0 15px; color:#bca8ff; font:10px "DM Mono",monospace; letter-spacing:.18em; }.question-stage h1 { position:relative; z-index:1; margin:0; max-width:305px; font:700 26px/1.55 "Noto Serif SC",serif; letter-spacing:-.045em; }.choose-hint { position:relative; z-index:1; margin:17px 0 43px; color:#a8a1b8; font-size:12px; }.scale-labels { position:relative; z-index:1; display:flex; justify-content:space-between; color:#bbb4cd; font-size:10px; letter-spacing:.02em; margin-bottom:14px; }.scale-labels span:last-child { color:#8de2dc; }.answer-scale { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:3px; }.answer-scale:before { content:""; position:absolute; top:28px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,rgba(174,121,255,.62),rgba(192,187,217,.32) 46%,rgba(103,222,215,.7)); }.answer { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:11px; padding:0; border:0; color:#a8a1b8; background:transparent; }.dot { position:relative; z-index:1; display:grid; width:46px; height:56px; place-items:center; border:1px solid rgba(209,199,235,.48); border-radius:17px; background:linear-gradient(145deg,rgba(48,42,82,.94),rgba(17,20,43,.95)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 13px rgba(0,0,0,.25); transition:all .2s cubic-bezier(.2,.75,.25,1); }.dot:before { content:""; width:17px; height:17px; border:1px solid rgba(226,217,246,.8); border-radius:50%; background:radial-gradient(circle at 35% 30%,#faf9ff,#7a719a 66%); box-shadow:inset 0 1px rgba(255,255,255,.65); transition:all .2s; }.dot i { display:block; width:5px; height:5px; border-radius:50%; background:transparent; transition:all .2s; }.answer:nth-child(1) .dot,.answer:nth-child(5) .dot { width:50px; height:62px; border-radius:19px; }.answer:nth-child(2) .dot,.answer:nth-child(4) .dot { width:47px; height:58px; }.answer:nth-child(1) .dot { border-color:rgba(181,126,255,.62); }.answer:nth-child(5) .dot { border-color:rgba(108,230,218,.65); }.answer small { color:inherit; font-size:9px; white-space:nowrap; transform:scale(.92); }.answer:active .dot,.answer.selected .dot { transform:translateY(-7px) scale(1.06); }.answer.selected .dot { border-color:#e2d8ff; background:linear-gradient(145deg,#8e63eb,#4a5dbe); box-shadow:0 0 0 4px rgba(158,119,255,.14),0 0 23px rgba(145,93,255,.78),inset 0 1px rgba(255,255,255,.5); }.answer.selected .dot:before { width:23px; height:23px; border-color:#fff; background:radial-gradient(circle at 32% 28%,#fff,#bd9dff 46%,#5631ac 100%); box-shadow:0 0 15px #e8d7ff; }.answer.selected .dot i { background:#f7edff; box-shadow:0 0 10px 4px #fff; }.answer:nth-child(5).selected .dot { background:linear-gradient(145deg,#50c8d3,#4967c2); box-shadow:0 0 0 4px rgba(105,227,218,.15),0 0 23px rgba(74,218,211,.7),inset 0 1px rgba(255,255,255,.5); }.answer:nth-child(5).selected .dot:before { background:radial-gradient(circle at 32% 28%,#fff,#a8fff2 46%,#1e8e9e 100%); box-shadow:0 0 15px #b8fff6; }.answer.selected small { color:#f0ecff; font-weight:700; }.quiz-footer { display:flex; align-items:center; justify-content:space-between; min-height:30px; color:#938ba5; font:10px "DM Mono",monospace; }.back-button { border:0; padding:8px 0; color:#cfc8dc; background:transparent; font-size:12px; }.is-hidden { visibility:hidden; }

/* Reveal — brighter geometry, still restrained. */
.reveal-screen { display:grid; min-height:100dvh; place-items:center; background:radial-gradient(circle at 50% 45%,#352369,#100c27 43%,#060712 76%); }.reveal-grid { position:absolute; inset:0; opacity:.36; background-image:linear-gradient(rgba(171,145,251,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(171,145,251,.16) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle,#000,transparent 70%); }.reveal-screen:before,.reveal-screen:after { content:""; position:absolute; width:530px; height:160px; border:1px solid rgba(177,137,255,.34); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-29deg); }.reveal-screen:after { width:260px; height:440px; border-color:rgba(107,220,223,.34); transform:translate(-50%,-50%) rotate(38deg); }.reveal-content { z-index:1; width:100%; padding:40px 24px; text-align:center; }.reveal-content .brand { justify-content:center; margin-bottom:112px; }.analyzing { margin:0 0 22px; color:#e5e1ee; font:17px "Noto Serif SC",serif; }.letter-reveal { display:flex; align-items:center; justify-content:center; height:112px; gap:7px; font:700 82px/1 "Space Grotesk",sans-serif; letter-spacing:-.08em; }.letter-reveal:before { content:""; position:absolute; width:165px; height:165px; border:1px solid rgba(222,194,255,.54); transform:rotate(45deg); box-shadow:0 0 48px rgba(154,103,255,.44),inset 0 0 37px rgba(171,126,255,.24); }.letter-reveal span { z-index:1; color:#fff; opacity:0; transform:translateY(20px) scale(.8); text-shadow:0 0 22px #b692ff; animation:letter .42s calc(var(--delay) + .1s) cubic-bezier(.2,.8,.2,1) forwards; }.micro-progress { width:164px; height:3px; margin:60px auto 14px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.16); }.micro-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,#75e5df,#c986ff); box-shadow:0 0 10px #b779ff; animation:loading 1.5s ease forwards; }.reveal-note { color:#a39ab9; font-size:11px; }

/* Result & report — dark in the same visual world, but with measured reading cards. */
.result-screen { --family:#a67cff; color:#f4f1ff; background:#080916; }.family-nf { --family:#75ddcf; }.family-sj { --family:#eab878; }.family-sp { --family:#69c9ed; }.result-header { padding:19px 21px; background:rgba(8,9,20,.93); border-bottom:1px solid rgba(209,198,237,.1); }.text-button { border:1px solid rgba(211,201,237,.2); border-radius:99px; padding:7px 11px; color:#d7d1e3; background:rgba(255,255,255,.045); font-size:10px; }.identity-panel { position:relative; min-height:538px; padding:71px 25px 27px; overflow:hidden; background:radial-gradient(80% 65% at 75% 34%,color-mix(in srgb,var(--family) 34%,transparent),transparent 65%),linear-gradient(148deg,#0c0b1d,#15112e 62%,#0c1428); }.identity-panel:before { content:""; position:absolute; inset:0; opacity:.36; background-image:linear-gradient(90deg,rgba(185,162,255,.11) 1px,transparent 1px),linear-gradient(rgba(185,162,255,.09) 1px,transparent 1px); background-size:43px 43px; mask-image:linear-gradient(140deg,#000,transparent 80%); }.identity-panel:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,#090917 99%); pointer-events:none; }.identity-copy { position:relative; z-index:2; max-width:238px; }.identity-panel .eyebrow { color:#d5c7f1; }.result-type { margin:0; font:700 72px/.88 "Space Grotesk",sans-serif; letter-spacing:-.095em; background:linear-gradient(100deg,#fff,#d8cbff 42%,var(--family)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 18px color-mix(in srgb,var(--family) 34%,transparent)); }.identity-panel h1 { margin:14px 0 17px; font:700 28px/1.3 "Noto Serif SC",serif; }.result-hook { margin:0; color:#d6d0e2; font-size:14px; line-height:1.8; }.tag-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:21px; }.tag-list span { padding:6px 10px; border:1px solid rgba(230,222,255,.2); border-radius:99px; color:#e4ddf4; background:rgba(255,255,255,.07); box-shadow:inset 0 1px rgba(255,255,255,.07); font-size:10px; }.identity-panel .lab-visual { top:148px; right:-73px; opacity:.98; transform:scale(.98); }.family-caption { position:absolute; z-index:2; bottom:27px; left:25px; margin:0; color:#aaa2bd; font:10px "DM Mono",monospace; letter-spacing:.1em; }.family-caption i { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; box-shadow:0 0 8px var(--family); vertical-align:middle; }
.dimensions-panel { position:relative; z-index:4; margin:-14px 12px 0; padding:21px 18px 15px; border:1px solid rgba(205,195,235,.16); border-radius:19px; background:linear-gradient(145deg,rgba(34,28,62,.96),rgba(16,17,37,.97)); box-shadow:0 19px 38px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.1); }.section-label { margin:0 0 17px; color:#aaa2bd; font:10px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }.dimension { padding:10px 0 12px; border-bottom:1px solid rgba(255,255,255,.09); }.dimension:last-of-type { border-bottom:0; }.dimension>div:first-child { display:flex; align-items:baseline; justify-content:space-between; }.dimension span { color:#bdb6cc; font-size:11px; }.dimension b { color:#f4efff; font-size:14px; }.dimension b em { color:var(--family); font:11px "DM Mono",monospace; font-style:normal; }.dimension-bar { height:5px; margin:8px 0 6px; overflow:hidden; border:1px solid rgba(255,255,255,.06); border-radius:99px; background:#272342; }.dimension-bar span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--family),#72dbde); box-shadow:0 0 9px var(--family); }.dimension small { color:#8e87a1; font-size:9px; }.spectrum-note { margin:12px 0 0; color:#85809a; font-size:9px; line-height:1.65; }
.report { padding:61px 20px 28px; background:radial-gradient(70% 22% at 50% 0,rgba(71,48,123,.25),transparent 100%),#0a0a18; }.report-intro { margin:0 5px 34px; }.report .eyebrow { color:#bca3ff; }.report-intro h2 { margin:0; font:800 31px/1.34 "Noto Serif SC",serif; letter-spacing:-.06em; }.report-block { position:relative; margin:13px 0; padding:25px 20px 25px 23px; border:1px solid rgba(212,202,239,.13); border-radius:17px; background:linear-gradient(135deg,rgba(34,29,59,.81),rgba(15,16,34,.88)); box-shadow:inset 0 1px rgba(255,255,255,.07); }.report-block:before { content:""; position:absolute; top:24px; left:0; width:2px; height:31px; border-radius:3px; background:linear-gradient(var(--family),#77dedc); box-shadow:0 0 9px var(--family); }.report-num { margin:0 0 9px; color:var(--family); font:10px "DM Mono",monospace; letter-spacing:.13em; }.report-block h2,.growth-block h2 { margin:0 0 12px; color:#faf7ff; font:700 20px/1.35 "Noto Serif SC",serif; }.report-block p:last-child,.growth-block>p:nth-of-type(2) { margin:0; color:#c7c1d3; font-size:14px; line-height:1.9; }.context-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.context-grid .report-block { min-height:0; margin:0; padding:21px 15px 21px 17px; }.context-grid .report-block h2 { font-size:17px; }.context-grid .report-block p:last-child { font-size:12px; line-height:1.85; }.context-grid .report-block:before { top:20px; height:25px; }.growth-block { margin-top:18px; padding:28px 23px; border:1px solid color-mix(in srgb,var(--family) 32%,transparent); border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--family) 21%,#171430),rgba(21,25,47,.96)); box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.11); }.growth-block>span { display:block; margin-top:18px; color:#a9a2ba; font-size:11px; line-height:1.65; }
.share-section { padding:42px 21px 45px; background:radial-gradient(72% 40% at 50% 15%,rgba(91,62,169,.25),transparent 80%),#070713; }.share-card { position:relative; height:505px; overflow:hidden; padding:27px 25px; border:1px solid color-mix(in srgb,var(--family) 67%,rgba(255,255,255,.2)); border-radius:22px; color:#fff; background:radial-gradient(circle at 80% 21%,color-mix(in srgb,var(--family) 47%,transparent),transparent 28%),linear-gradient(145deg,#0e0d24,#241945 70%,#111d38); box-shadow:0 21px 44px rgba(0,0,0,.39),inset 0 1px rgba(255,255,255,.26),0 0 0 4px rgba(151,111,255,.05); }.share-card:before { content:""; position:absolute; top:114px; right:-92px; width:375px; height:164px; border:1px solid var(--family); border-radius:50%; opacity:.55; transform:rotate(-27deg); }.share-card:after { content:""; position:absolute; top:91px; right:8px; width:233px; height:334px; border:1px dashed var(--family); border-radius:50%; opacity:.35; transform:rotate(38deg); }.share-noise { position:absolute; inset:0; opacity:.13; background-image:radial-gradient(rgba(255,255,255,.9) .45px,transparent .7px); background-size:6px 6px; }.share-brand,.share-type,.share-card h3,.share-hook,.share-tags,.share-dims,.share-footer,.share-line { position:relative; z-index:1; }.share-brand { margin:0; color:#e4dff0; font-size:11px; letter-spacing:.14em; }.share-brand span { margin-left:5px; color:#948ca7; font:8px "DM Mono",monospace; }.share-line { width:100%; height:1px; margin:20px 0 43px; background:linear-gradient(90deg,var(--family),transparent); }.share-type { margin:0; font:700 67px/.88 "Space Grotesk",sans-serif; letter-spacing:-.085em; text-shadow:0 0 22px color-mix(in srgb,var(--family) 53%,transparent); }.share-card h3 { margin:11px 0 14px; color:var(--family); font:700 25px "Noto Serif SC",serif; }.share-hook { width:79%; margin:0; color:#eeeaf5; font-size:14px; line-height:1.75; }.share-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:23px; }.share-tags span { padding:5px 8px; border:1px solid rgba(255,255,255,.23); border-radius:99px; color:#ded8ea; background:rgba(255,255,255,.05); font-size:10px; }.share-dims { position:absolute; bottom:49px; left:25px; display:flex; gap:23px; }.share-dims span { font:700 17px "DM Mono",monospace; }.share-dims b { margin-left:3px; color:var(--family); font-size:10px; }.share-footer { position:absolute; bottom:21px; left:25px; color:#9c95aa; font-size:9px; }.secondary-button { display:flex; align-items:center; justify-content:space-between; width:100%; height:55px; margin-top:16px; padding:0 18px; border:1px solid rgba(209,197,239,.28); border-radius:14px; color:#f0ecf9; background:linear-gradient(130deg,rgba(70,55,116,.66),rgba(25,24,43,.87)); box-shadow:inset 0 1px rgba(255,255,255,.1); font-weight:600; }.secondary-button:active { background:#322b53; }.share-tip { margin:13px 0 0; color:#89829d; text-align:center; font-size:9px; }.explore-types { padding:36px 21px 40px; background:#0d0d1a; }.explore-types>div { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.explore-types button { height:38px; border:1px solid rgba(205,196,229,.16); border-radius:9px; color:#bfb8cf; background:rgba(255,255,255,.035); font:600 11px "DM Mono",monospace; }.explore-types button.active { border-color:var(--family); color:#fff; background:linear-gradient(135deg,color-mix(in srgb,var(--family) 63%,#6c49bf),#5d51ad); box-shadow:0 0 13px color-mix(in srgb,var(--family) 35%,transparent); }.result-footer { padding:28px 28px max(28px,env(safe-area-inset-bottom)); border-top:1px solid rgba(209,199,236,.1); background:#070711; color:#827b96; text-align:center; font-size:9px; line-height:1.8; }

@keyframes spin { to { transform:translate(-50%,-50%) rotate(334deg); } } @keyframes enter { from { opacity:0; transform:translateY(11px); } to { opacity:1; transform:none; } } @keyframes letter { to { opacity:1; transform:none; } } @keyframes loading { to { width:100%; } }
@media (min-width:561px) { body { background:radial-gradient(circle at 50% 10%,#171237,#050611 65%); } .screen { box-shadow:0 0 80px rgba(0,0,0,.48); } } @media (max-width:360px) { .home-hero h1 { font-size:43px; }.home-hero .lab-visual { right:-104px; transform:scale(.91); }.question-stage { padding-left:19px; padding-right:19px; }.question-stage h1 { font-size:23px; }.dot { width:42px; }.answer:nth-child(1) .dot,.answer:nth-child(5) .dot { width:46px; }.result-type { font-size:62px; }.identity-panel { padding-left:20px; padding-right:20px; } }

/* Final-reference reconstruction: actual DOM + SVG scene, not reference-image backgrounds. */
.brand>span:last-child { display:grid; gap:1px; }.brand b { font-size:14px; letter-spacing:.04em; }.brand small { color:#bdb5cc; font:7px "DM Mono",monospace; letter-spacing:.18em; }
.home-screen,.quiz-screen,.result-screen { border:1px solid rgba(220,208,255,.52); border-radius:25px; }
.home-screen { background:radial-gradient(105% 44% at 50% 54%,rgba(57,30,140,.42),transparent 69%),radial-gradient(55% 26% at 50% 78%,rgba(35,79,207,.23),transparent 78%),#040613; }.home-screen:before { opacity:.12; background-size:54px 54px; }.home-nav { padding:5px 4px 0; }.menu-mark { display:grid; gap:5px; width:26px; }.menu-mark i { display:block; height:2px; border-radius:4px; background:#e8e2f5; }.home-hero { padding-top:58px; }.home-hero:before { display:none; }.home-hero .eyebrow { display:none; }.home-hero h1 { font-size:52px; line-height:1.15; text-align:center; letter-spacing:-.07em; }.home-hero h1 em { background:linear-gradient(100deg,#bea4ff,#b471ff 54%,#907cff); -webkit-background-clip:text; background-clip:text; }.lead { max-width:none; margin-top:17px; text-align:center; color:#c7bed9; font-size:14px; line-height:2; }.home-hero .lab-visual { top:226px; right:50%; width:360px; height:370px; transform:translateX(50%); }.home-cta { height:62px; margin:0; border-radius:15px; background:linear-gradient(96deg,#a75aff,#7e65fd 50%,#69a6ff); box-shadow:0 15px 30px rgba(119,68,247,.36),inset 0 1px rgba(255,255,255,.68); }.trust-row { position:absolute; bottom:93px; left:0; right:0; justify-content:space-around; gap:4px; margin:0; }.trust-row span { padding:9px 11px; border:1px solid rgba(162,141,235,.22); border-radius:99px; background:rgba(17,13,49,.7); color:#c4bdd3; font-size:10px; }.trust-row span:first-letter { color:#b67bff; }.home-note { justify-content:center; gap:0; border:0; padding-top:14px; font-size:9px; }.home-note span:last-child { display:none; }
.lab-visual { width:360px; height:370px; }.scene-haze { position:absolute; inset:35px 23px 28px; border-radius:50%; background:radial-gradient(ellipse,rgba(111,56,255,.3),transparent 62%); filter:blur(16px); }.lab-visual .orbit { border-color:rgba(149,96,255,.52); box-shadow:none; }.lab-visual .orbit-a { width:340px; height:150px; top:57%; transform:translate(-50%,-50%) rotate(-14deg); }.lab-visual .orbit-b { width:290px; height:215px; top:51%; transform:translate(-50%,-50%) rotate(18deg); border-color:rgba(82,135,254,.35); }.lab-visual .orbit-c { width:250px; height:278px; top:45%; border-color:rgba(212,134,255,.35); animation:spin 25s linear infinite; }.lab-visual .orbit:after { width:5px; height:5px; box-shadow:0 0 12px 4px #c17bff; }.lab-visual .crystal-svg { position:absolute; z-index:3; top:26px; left:105px; width:150px; height:230px; overflow:visible; filter:drop-shadow(0 0 8px #b467ff) drop-shadow(0 0 23px rgba(91,74,255,.9)); }.crystal-glow ellipse { fill:#bf7cff; opacity:.85; filter:blur(4px); }.crystal-outline { fill:rgba(108,55,207,.23); stroke:#e4c8ff; stroke-width:1.6; }.ground-ring { position:absolute; z-index:2; bottom:21px; left:50%; border:1px solid rgba(193,112,255,.82); border-radius:50%; transform:translateX(-50%) perspective(100px) rotateX(61deg); box-shadow:0 0 16px rgba(150,81,255,.7),inset 0 0 16px rgba(80,116,255,.45); }.ring-a { width:330px; height:140px; }.ring-b { width:255px; height:104px; border-color:#6e9dff; }.ring-c { width:145px; height:58px; border-color:#f2a3ff; box-shadow:0 0 22px #d775ff; }.lab-visual .signal { z-index:4; width:6px; height:6px; background:#f9e9ff; box-shadow:0 0 11px 5px #c374ff; }.lab-visual .s1 { left:39px; top:159px; }.lab-visual .s2 { right:34px; top:145px; }.lab-visual .s3 { bottom:60px; left:53px; }.lab-visual .s4 { right:62px; bottom:95px; }

.quiz-screen { background:radial-gradient(75% 44% at 55% 48%,rgba(71,36,163,.27),transparent 74%),#060716; }.quiz-screen:before { opacity:.18; background-size:55px 55px; }.quiz-header { padding:4px 3px 0; }.progress-wrap { margin:27px 3px 0; }.progress-track { height:6px; }.progress-track span { background:linear-gradient(90deg,#62d7ff,#be79ff 60%,#ec9bff); }.question-stage { margin:21px 0 10px; padding:27px 4px 19px; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }.question-stage:before,.question-stage:after { display:none; }.question-kicker { margin:0 0 18px; color:#b789ff; font-size:12px; }.question-stage h1 { max-width:330px; font-size:29px; line-height:1.47; }.choose-hint { margin:20px 0 0; font-size:12px; }.question-atmosphere { position:absolute; z-index:-1; right:-8px; bottom:108px; left:-10px; height:265px; overflow:hidden; background:radial-gradient(ellipse at 68% 78%,rgba(116,61,238,.5),transparent 35%),linear-gradient(180deg,transparent 30%,rgba(36,26,101,.19)); }.scene-arc { position:absolute; right:-43px; bottom:20px; width:330px; height:190px; border:1px solid rgba(161,103,255,.43); border-left-color:transparent; border-radius:50%; transform:rotate(-19deg); }.scene-portal { position:absolute; right:55px; bottom:37px; width:74px; height:114px; background:linear-gradient(105deg,rgba(73,56,170,.1),rgba(148,85,255,.61)); clip-path:polygon(23% 0,100% 12%,100% 100%,0 100%); box-shadow:0 0 27px #874cff; }.scene-people { position:absolute; right:66px; bottom:28px; display:flex; align-items:end; gap:8px; }.scene-people i { display:block; width:13px; height:44px; border-radius:50% 50% 4px 4px; background:linear-gradient(#2b244b 0 24%,#17172e 25%); box-shadow:0 0 10px rgba(169,118,255,.35); }.scene-people i:nth-child(2) { height:58px; }.scene-people i:nth-child(3) { height:50px; }.scene-people i:nth-child(4) { height:62px; }.scene-star { position:absolute; width:4px; height:4px; border-radius:50%; background:#f7e8ff; box-shadow:0 0 10px 3px #c075ff; }.st-1 { top:50px; right:55px; }.st-2 { top:100px; right:125px; }.st-3 { bottom:88px; left:26px; }.st-4 { bottom:34px; right:190px; }.scale-labels { margin-top:auto; margin-bottom:20px; font-size:12px; }.scale-labels span:first-child { color:#8cdfff; }.answer-scale { gap:0; padding:0 1px; }.answer-scale:before { top:25px; left:7%; right:7%; height:3px; border-radius:99px; background:linear-gradient(90deg,#4dcaff,#715be7 48%,#e272ff); box-shadow:0 0 12px rgba(153,84,255,.65); }.answer { gap:5px; color:#c8c0d7; }.answer .dot,.answer:nth-child(1) .dot,.answer:nth-child(2) .dot,.answer:nth-child(4) .dot,.answer:nth-child(5) .dot { width:48px; height:48px; border-radius:50%; border-color:rgba(201,178,255,.55); background:radial-gradient(circle at 34% 24%,#9d89db,#37316c 62%,#17152e); box-shadow:inset 0 1px rgba(255,255,255,.42),0 0 0 4px rgba(103,72,195,.2); }.answer .dot:before { display:none; }.answer .dot i { width:auto; height:auto; color:#fff; background:transparent; box-shadow:none; font:700 15px "DM Mono",monospace; }.answer>b { display:block; color:#f0e9ff; font:700 17px "DM Mono",monospace; }.answer small { font-size:10px; transform:none; }.answer:nth-child(1) .dot { border-color:#5ddcff; box-shadow:0 0 0 4px rgba(73,201,255,.17),0 0 17px rgba(73,201,255,.55),inset 0 1px rgba(255,255,255,.47); }.answer:nth-child(5) .dot { border-color:#e68cff; box-shadow:0 0 0 4px rgba(218,93,255,.17),0 0 18px rgba(201,80,255,.66),inset 0 1px rgba(255,255,255,.47); }.answer.selected .dot,.answer:nth-child(5).selected .dot { transform:translateY(-5px) scale(1.2); border-color:#fff; background:radial-gradient(circle at 33% 22%,#f6e7ff,#bc6cff 48%,#5f32bd 76%); box-shadow:0 0 0 5px rgba(201,113,255,.2),0 0 30px rgba(206,99,255,.92),inset 0 1px rgba(255,255,255,.75); }.answer:nth-child(1).selected .dot { background:radial-gradient(circle at 33% 22%,#efffff,#75dfff 48%,#2d63c4 76%); box-shadow:0 0 0 5px rgba(83,207,255,.2),0 0 30px rgba(83,207,255,.92),inset 0 1px rgba(255,255,255,.75); }.answer.selected .dot i { background:transparent; box-shadow:none; }.answer.selected>b,.answer.selected small { color:#fff; }.quiz-footer { min-height:36px; }.back-button { color:#ede8f6; font-size:13px; }

.result-header { padding:16px 22px; }.result-header .text-button { font-size:0; border:0; background:transparent; }.result-header .text-button:after { content:"⌯"; color:#f0ebfb; font-size:28px; }.identity-panel { min-height:753px; padding:31px 23px 22px; background:radial-gradient(82% 47% at 72% 34%,rgba(91,44,198,.35),transparent 69%),#060716; }.identity-panel:before { opacity:.19; }.identity-panel:after { display:none; }.identity-copy { max-width:197px; }.identity-panel .eyebrow { margin-bottom:12px; font-size:9px; }.result-type { font-size:71px; line-height:.84; }.identity-panel h1 { margin:15px 0 15px; font-size:27px; }.identity-panel h1 i { color:#d5a7ff; font-size:19px; font-style:normal; }.result-hook { font-size:13px; line-height:1.75; }.identity-panel .lab-visual { top:87px; right:-72px; width:315px; height:330px; transform:none; }.identity-panel .lab-visual .crystal-svg { top:36px; left:85px; width:125px; height:205px; }.identity-panel .lab-visual .ground-ring { display:none; }.identity-panel .lab-visual .orbit-a { width:300px; }.identity-panel .lab-visual .orbit-b { width:235px; }.identity-panel .tag-list { position:absolute; z-index:3; top:257px; left:23px; right:18px; margin:0; gap:6px; }.tag-list span { padding:6px 9px; font-size:9px; background:rgba(17,13,42,.73); }.dimensions-panel { position:absolute; z-index:5; top:320px; left:22px; right:22px; margin:0; padding:15px 12px 14px; border-radius:17px; background:linear-gradient(135deg,rgba(24,18,56,.96),rgba(12,12,31,.94)); }.dimensions-panel .section-label { margin:0 0 12px 4px; font-size:10px; }.dimension-orbits { display:flex; justify-content:space-around; }.dimension-orbit { display:grid; place-items:center; gap:7px; }.dimension-orbit>span { display:grid; width:58px; height:58px; place-items:center; border-radius:50%; background:radial-gradient(circle,#16152d 59%,transparent 60%),conic-gradient(from 210deg,#5bd3ff var(--percent),#a865f3 var(--percent) 72%,rgba(126,109,173,.25) 72%); box-shadow:0 0 12px rgba(155,90,255,.28); }.dimension-orbit b { color:#f7f0ff; font:700 15px "DM Mono",monospace; }.dimension-orbit strong { color:#c4bdd2; font-size:10px; font-weight:500; }.keyword-card { position:absolute; z-index:5; top:472px; left:22px; right:22px; display:flex; gap:12px; align-items:center; min-height:77px; padding:14px 15px; border:1px solid rgba(203,180,249,.17); border-radius:16px; background:rgba(24,17,53,.86); }.keyword-card>b { color:#c897ff; font-size:20px; }.keyword-card div { display:grid; gap:7px; }.keyword-card strong { color:#eee8fb; font-size:13px; }.keyword-card span { color:#aca4be; font-size:10px; line-height:1.45; }.result-cta { position:absolute; z-index:5; right:22px; bottom:56px; left:22px; display:flex; justify-content:space-between; align-items:center; height:59px; padding:0 21px; border:1px solid rgba(255,255,255,.37); border-radius:14px; color:#fff; background:linear-gradient(100deg,#9855f3,#7960ee 54%,#7c9ef8); box-shadow:0 13px 28px rgba(120,63,234,.32),inset 0 1px rgba(255,255,255,.46); font-weight:700; font-size:16px; }.result-cta b { font-size:23px; font-weight:400; }.family-caption { bottom:21px; left:0; right:0; text-align:center; font-size:8px; color:#766f8d; }.report { padding-top:47px; }.report-intro { margin-bottom:27px; }

.share-card { height:622px; padding:28px 24px; border-color:rgba(211,170,255,.7); background:radial-gradient(ellipse at 68% 36%,rgba(115,53,226,.43),transparent 46%),linear-gradient(160deg,#09081d,#16103a 61%,#080b21); }.share-orbits { position:absolute; z-index:0; top:130px; right:-50px; width:330px; height:350px; border:1px solid rgba(194,111,255,.55); border-radius:50%; transform:rotate(-28deg); box-shadow:0 0 45px rgba(140,72,250,.21); }.share-orbits:after { content:""; position:absolute; inset:46px -25px; border:1px solid rgba(113,163,255,.36); border-radius:50%; }.share-topnote { position:absolute; z-index:2; top:31px; right:23px; margin:0; color:#b7aec8; font-size:11px; }.share-type { margin-top:56px; font-size:75px; }.share-card h3 { font-size:27px; }.share-hook { width:57%; font-size:13px; }.share-card .share-crystal { position:absolute; z-index:2; top:163px; right:19px; width:160px; height:260px; filter:drop-shadow(0 0 20px #9856ff); }.share-dims { z-index:3; right:19px; bottom:136px; left:19px; justify-content:space-between; gap:0; padding:15px 0; border-top:1px solid rgba(208,190,247,.2); border-bottom:1px solid rgba(208,190,247,.2); }.share-dims span { display:grid; gap:6px; }.share-dims small { color:#a49bb5; font-size:10px; }.share-dims b { margin:0; color:#f5efff; font:500 22px "DM Mono",monospace; }.qr-mark { position:absolute; z-index:3; right:21px; bottom:29px; width:79px; height:79px; border:5px solid #f5f2fb; background:repeating-linear-gradient(90deg,#12111e 0 5px,#fff 5px 9px,#12111e 9px 13px),repeating-linear-gradient(#fff 0 7px,#11101e 7px 11px,#fff 11px 15px); box-shadow:0 2px 15px rgba(0,0,0,.35); }.qr-mark i { position:absolute; width:20px; height:20px; border:4px solid #11101e; background:#fff; }.qr-mark i:nth-child(1) { top:4px; left:4px; }.qr-mark i:nth-child(2) { top:4px; right:4px; }.qr-mark i:nth-child(3) { bottom:4px; left:4px; }.qr-mark b { position:absolute; right:92px; bottom:8px; width:83px; color:#ddd5eb; font-size:10px; line-height:1.55; font-weight:500; }.share-footer { left:24px; bottom:24px; color:#8d859f; font-size:8px; }.share-section { padding-top:38px; }.secondary-button { height:57px; }.share-tip { font-size:9px; }

/* Second comparison pass: restore the reference's home CTA and question rhythm. */
.home-cta { position:absolute; right:0; bottom:39px; left:0; margin:0; }
.question-stage { margin-top:-6px; }
.scale-labels { margin-top:205px; }

/* V2 layout pass — content follows an 8px rhythm; absolute layers are decoration only. */
.home-screen { display:grid; grid-template-rows:40px 1fr 16px; gap:0; padding:24px; }
.home-nav { padding:0; align-self:start; }
.home-hero { display:grid; grid-template-rows:110px 56px 280px 40px 64px; align-content:start; gap:16px; padding-top:56px; }
.home-hero h1 { align-self:start; font-size:52px; line-height:1.08; }
.lead { align-self:start; margin:0; font-size:14px; line-height:1.85; }
.home-hero .lab-visual { top:210px; width:342px; height:360px; }
.trust-row { position:static; grid-row:4; width:100%; justify-content:space-between; align-self:center; }
.trust-row span { padding:8px 9px; font-size:10px; white-space:nowrap; }
.home-cta { position:static; grid-row:5; align-self:end; height:64px; }
.home-note { padding:0; align-self:end; font-size:9px; }

.quiz-screen { display:flex; padding:20px 24px 16px; }
.quiz-header { min-height:40px; padding:0; }
.progress-wrap { margin:20px 0 0; }
.progress-wrap p { margin:8px 0 0; font-size:11px; }
.question-stage { display:grid; grid-template-rows:auto auto auto minmax(152px,1fr) auto 94px; flex:1; min-height:0; margin:16px 0 0; padding:0; gap:0; justify-content:normal; }
.question-kicker { align-self:start; margin:0 0 12px; font-size:12px; }
.question-stage h1 { max-width:342px; margin:0; font-size:30px; font-weight:700; line-height:1.47; }
.choose-hint { margin:16px 0 0; align-self:start; font-size:12px; line-height:1.75; }
.question-atmosphere { position:relative; z-index:1; right:auto; bottom:auto; left:auto; height:auto; min-height:152px; margin:0; opacity:.58; background:radial-gradient(ellipse at 68% 76%,rgba(116,61,238,.42),transparent 35%),linear-gradient(180deg,transparent 26%,rgba(36,26,101,.16)); }
.question-atmosphere .scene-arc,.question-atmosphere .scene-portal,.question-atmosphere .scene-people,.question-atmosphere .scene-star { z-index:1; }
.scale-labels { z-index:10; align-self:end; margin:0 0 16px; font-size:12px; }
.answer-scale { z-index:10; align-self:start; height:94px; padding:0 1px; }
.answer-scale:before { top:27px; }
.answer { gap:6px; }
.answer .dot,.answer:nth-child(1) .dot,.answer:nth-child(2) .dot,.answer:nth-child(4) .dot,.answer:nth-child(5) .dot { width:46px; height:46px; }
.answer:nth-child(1) .dot,.answer:nth-child(5) .dot { width:52px; height:52px; }
.answer>b { display:none; }
.answer small { font-size:10px; line-height:1.25; }
.quiz-footer { min-height:40px; margin-top:0; }

.identity-panel { display:grid; grid-template-rows:198px 40px 148px 80px 48px 60px 16px; align-content:start; gap:12px; min-height:754px; padding:28px 24px 20px; }
.identity-copy { position:relative; z-index:10; max-width:194px; }
.identity-panel .lab-visual { z-index:2; top:80px; right:-72px; }
.identity-panel .tag-list { position:relative; z-index:10; top:auto; right:auto; left:auto; grid-row:2; align-self:center; margin:0; }
.dimensions-panel { position:relative; z-index:10; top:auto; right:auto; left:auto; grid-row:3; align-self:stretch; margin:0; }
.keyword-card { position:relative; z-index:10; top:auto; right:auto; left:auto; grid-row:4; min-height:80px; }
.result-cta { position:relative; z-index:10; right:auto; bottom:auto; left:auto; grid-row:6; align-self:stretch; }
.family-caption { position:relative; z-index:10; right:auto; bottom:auto; left:auto; grid-row:7; align-self:center; }
.dimension-orbit>span { width:60px; height:60px; }

.share-card { display:grid; grid-template-rows:28px 132px 210px 72px 96px; height:642px; padding:26px; }
.share-brand { z-index:10; align-self:start; }
.share-topnote { z-index:10; top:28px; right:26px; }
.share-type { z-index:10; align-self:end; margin:0; font-size:72px; }
.share-card h3 { z-index:10; margin:4px 0 12px; }
.share-hook { z-index:10; width:52%; align-self:start; margin:0; }
.share-card .share-crystal { top:170px; right:24px; width:154px; height:252px; }
.share-dims { z-index:10; right:26px; bottom:144px; left:26px; }
.qr-mark { z-index:10; right:26px; bottom:28px; width:90px; height:90px; aspect-ratio:1 / 1; }
.qr-mark b { right:104px; }
.share-footer { z-index:10; left:26px; bottom:25px; font-size:8px; }

/* Final placement corrections from the 390px comparison. */
.home-hero { grid-template-rows:110px 56px 296px 40px 64px; }
.share-card h3 { grid-row:2; align-self:end; margin:0 0 12px; }
.share-hook { grid-row:3; align-self:start; width:52%; margin:0; }

.share-type { position:absolute; z-index:10; top:106px; left:26px; margin:0; }
.share-card h3 { position:absolute; z-index:10; top:196px; left:26px; margin:0; }
.share-hook { position:absolute; z-index:10; top:239px; left:26px; width:148px; margin:0; }
.share-card h3,.share-hook { grid-row:auto; align-self:auto; }

/* A restrained living detail for the crystal, without shifting any layout. */
.lab-visual .crystal-svg { animation:crystal-float 5.6s ease-in-out infinite; transform-origin:50% 54%; transform-style:preserve-3d; will-change:transform,filter; }
.share-card .share-crystal { animation:crystal-float 6.4s ease-in-out infinite; transform-origin:50% 54%; transform-style:preserve-3d; will-change:transform,filter; }
@keyframes crystal-float { 0%,100% { transform:perspective(720px) translateY(0) rotateX(2deg) rotateY(-9deg) scaleX(.98); filter:brightness(.96) saturate(1.06); } 50% { transform:perspective(720px) translateY(-8px) rotateX(-3deg) rotateY(9deg) scaleX(1.02); filter:brightness(1.13) saturate(1.18); } }
@media (prefers-reduced-motion:reduce) { .lab-visual .crystal-svg,.share-card .share-crystal { animation:none; } }

/* Premium interaction pass — concentrated starlight and instrument feedback, kept behind readable content. */
.home-hero:before { display:block; z-index:0; top:76px; right:-24px; bottom:112px; left:-24px; width:auto; height:auto; transform:none; opacity:.88; background-image:radial-gradient(circle at 13% 39%,rgba(160,225,255,.9) 0 1px,transparent 1.8px),radial-gradient(circle at 82% 12%,rgba(225,185,255,.92) 0 1px,transparent 1.8px),radial-gradient(circle at 88% 54%,rgba(120,192,255,.8) 0 .8px,transparent 1.6px),radial-gradient(circle at 24% 72%,rgba(223,191,255,.65) 0 .8px,transparent 1.6px),radial-gradient(circle at 6% 86%,rgba(117,213,255,.65) 0 .7px,transparent 1.5px); box-shadow:none; filter:drop-shadow(0 0 5px rgba(174,123,255,.6)); animation:star-breathe 6s ease-in-out infinite; }
.home-hero:after { content:""; position:absolute; z-index:0; top:290px; left:50%; width:286px; height:286px; border:1px solid rgba(168,119,255,.13); border-radius:50%; transform:translateX(-50%) scaleY(.43); box-shadow:0 0 36px rgba(102,80,255,.14),inset 0 0 44px rgba(108,76,255,.1); pointer-events:none; }
.lab-visual .scene-haze:before,.lab-visual .scene-haze:after { content:""; position:absolute; border-radius:50%; background:#fff; pointer-events:none; }
.lab-visual .scene-haze:before { top:38px; left:37px; width:2px; height:2px; box-shadow:40px 33px 0 rgba(204,172,255,.9),91px -12px 0 rgba(138,209,255,.75),170px 24px 0 rgba(246,205,255,.86),228px 72px 0 rgba(146,192,255,.8),9px 149px 0 rgba(214,180,255,.72),199px 171px 0 rgba(246,226,255,.83),113px 246px 0 rgba(145,220,255,.72); filter:drop-shadow(0 0 4px #c787ff); animation:star-drift 8s ease-in-out infinite; }
.lab-visual .scene-haze:after { right:36px; bottom:42px; width:3px; height:3px; box-shadow:-69px -21px 0 rgba(133,213,255,.75),-164px -84px 0 rgba(238,188,255,.82),-235px -24px 0 rgba(138,194,255,.75),-109px -177px 0 rgba(235,217,255,.72); filter:drop-shadow(0 0 6px #9c70ff); animation:star-drift 9.5s -2.8s ease-in-out infinite reverse; }
.lab-visual .crystal-svg polygon { transition:filter .4s ease,opacity .4s ease; }
.lab-visual .crystal-svg polygon:nth-of-type(1),.lab-visual .crystal-svg polygon:nth-of-type(15) { animation:crystal-glint 3.7s ease-in-out infinite; }
.lab-visual .crystal-svg polygon:nth-of-type(7),.lab-visual .crystal-svg polygon:nth-of-type(16) { animation:crystal-glint 3.7s 1.4s ease-in-out infinite; }
.trust-row span { position:relative; overflow:hidden; backdrop-filter:blur(10px); box-shadow:inset 0 1px rgba(255,255,255,.13),0 8px 22px rgba(5,3,27,.18); }
.trust-row span:after { content:""; position:absolute; top:0; bottom:0; left:-38%; width:22%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent); transform:skewX(-24deg); animation:chip-shimmer 8s ease-in-out infinite; }
.trust-row span:nth-child(2):after { animation-delay:2.3s; }.trust-row span:nth-child(3):after { animation-delay:4.7s; }
.primary-button,.result-cta { overflow:hidden; isolation:isolate; }
.primary-button:after,.result-cta:after { content:""; position:absolute; z-index:-1; top:-85%; bottom:-85%; left:-38%; width:24%; transform:rotate(17deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); animation:cta-sheen 6.8s 1.2s ease-in-out infinite; }
.primary-button:hover,.result-cta:hover { filter:brightness(1.07) saturate(1.08); transform:translateY(-1px); }

.quiz-screen:after { content:""; position:absolute; z-index:-1; top:118px; right:-60px; width:180px; height:180px; border:1px solid rgba(158,120,255,.18); border-radius:50%; box-shadow:0 0 50px rgba(114,73,224,.1); pointer-events:none; }
.progress-track { position:relative; background-color:rgba(255,255,255,.055); background-image:repeating-linear-gradient(90deg,transparent 0 20px,rgba(225,213,255,.13) 20px 21px); }
.progress-track span:after { content:""; position:absolute; top:50%; right:-1px; width:8px; height:8px; border-radius:50%; transform:translateY(-50%); background:#fff; box-shadow:0 0 0 3px rgba(212,170,255,.2),0 0 12px 3px #c486ff; }
.question-kicker { display:flex; align-items:center; gap:8px; }
.question-kicker:before { content:""; width:18px; height:1px; background:linear-gradient(90deg,#74dfff,transparent); box-shadow:0 0 7px #75d8ff; }
.answer-scale:after { content:""; position:absolute; z-index:0; top:27px; left:7%; width:0; height:3px; border-radius:99px; opacity:0; background:linear-gradient(90deg,#5ad7ff,#d777ff); box-shadow:0 0 12px rgba(190,112,255,.88); transition:width .2s cubic-bezier(.2,.8,.2,1),opacity .16s ease; }
.answer-scale:has(.selected):after { opacity:1; }
.answer-scale:has(.answer:nth-child(1).selected):after { width:0; }
.answer-scale:has(.answer:nth-child(2).selected):after { width:21.5%; }
.answer-scale:has(.answer:nth-child(3).selected):after { width:43%; }
.answer-scale:has(.answer:nth-child(4).selected):after { width:64.5%; }
.answer-scale:has(.answer:nth-child(5).selected):after { width:86%; }
.answer { -webkit-tap-highlight-color:transparent; }
.answer:not(.selected):hover .dot { transform:translateY(-2px); filter:brightness(1.1); }
.answer.selected .dot { animation:answer-confirm .24s cubic-bezier(.2,.9,.2,1) both; }

.identity-panel:after { display:block; z-index:1; top:10px; right:-80px; bottom:auto; left:auto; width:250px; height:250px; border:1px solid rgba(199,145,255,.13); border-radius:50%; background:radial-gradient(circle,rgba(173,105,255,.12),transparent 66%); transform:rotate(24deg); }
.dimension-orbit>span { position:relative; }
.dimension-orbit>span:after { content:""; position:absolute; inset:-4px; border:1px solid rgba(198,162,255,.16); border-radius:50%; animation:orbit-pulse 3.7s ease-in-out infinite; }
.dimension-orbit:nth-child(2)>span:after { animation-delay:.8s; }.dimension-orbit:nth-child(3)>span:after { animation-delay:1.6s; }.dimension-orbit:nth-child(4)>span:after { animation-delay:2.4s; }
.keyword-card { backdrop-filter:blur(12px); box-shadow:inset 0 1px rgba(255,255,255,.1),0 14px 26px rgba(0,0,0,.16); }
.share-noise { opacity:.18; animation:noise-pan 14s linear infinite; }
.share-card { box-shadow:0 24px 56px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.34),0 0 0 4px rgba(151,111,255,.06),0 0 44px rgba(135,73,238,.12); }
.share-card:after { animation:share-orbit 18s linear infinite; }
.qr-mark { border-color:#fbf8ff; box-shadow:0 4px 18px rgba(0,0,0,.44),0 0 0 3px rgba(188,136,255,.16); }

@keyframes star-breathe { 0%,100% { opacity:.5; transform:scale(.98); } 50% { opacity:1; transform:scale(1.02); } }
@keyframes star-drift { 0%,100% { transform:translate3d(0,0,0); opacity:.62; } 50% { transform:translate3d(3px,-5px,0); opacity:1; } }
@keyframes crystal-glint { 0%,100% { opacity:.5; filter:brightness(.9); } 48% { opacity:1; filter:brightness(1.35); } }
@keyframes chip-shimmer { 0%,72%,100% { left:-38%; } 82% { left:118%; } }
@keyframes cta-sheen { 0%,72%,100% { left:-38%; } 84% { left:122%; } }
@keyframes answer-confirm { 0% { transform:translateY(-2px) scale(.9); } 62% { transform:translateY(-7px) scale(1.25); } 100% { transform:translateY(-5px) scale(1.2); } }
@keyframes orbit-pulse { 0%,100% { transform:scale(.94); opacity:.25; } 50% { transform:scale(1.08); opacity:.7; } }
@keyframes noise-pan { to { background-position:27px -36px; } }
@keyframes share-orbit { to { transform:rotate(398deg); } }
@media (prefers-reduced-motion:reduce) { .home-hero:before,.lab-visual .scene-haze:before,.lab-visual .scene-haze:after,.lab-visual .crystal-svg polygon,.trust-row span:after,.primary-button:after,.result-cta:after,.answer.selected .dot,.dimension-orbit>span:after,.share-noise,.share-card:after { animation:none; } }

/* Living laboratory — a deliberate low-frequency motion system for all three product states. */
.lab-visual .orbit-a { animation:orbit-drift-a 14s ease-in-out infinite; will-change:transform; }
.lab-visual .orbit-b { animation:orbit-drift-b 17s ease-in-out infinite; will-change:transform; }
.lab-visual .orbit-c { animation:orbit-spin 25s linear infinite; will-change:transform; }
.lab-visual .ground-ring { animation:ring-breathe 4.8s ease-in-out infinite; will-change:transform,opacity; }
.lab-visual .ring-b { animation-delay:-1.1s; }.lab-visual .ring-c { animation-delay:-2.2s; }
.lab-visual .signal { animation:signal-twinkle 2.9s ease-in-out infinite; will-change:transform,opacity; }
.lab-visual .s2 { animation-delay:-.7s; }.lab-visual .s3 { animation-delay:-1.4s; }.lab-visual .s4 { animation-delay:-2.1s; }
.home-screen .lab-visual { animation:hero-field 9s ease-in-out infinite; will-change:transform; }
.home-screen .crystal-svg { animation-duration:5.2s; }
.home-screen .scene-haze { animation:haze-breathe 6.4s ease-in-out infinite; }
.home-cta { animation:cta-breathe 4.2s ease-in-out infinite; }
.home-screen .menu-mark i:nth-child(2) { width:18px; margin-left:8px; animation:menu-signal 3.3s ease-in-out infinite; }

.progress-track:before { content:""; position:absolute; z-index:2; top:-2px; bottom:-2px; left:-20%; width:17%; border-radius:99px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); filter:blur(.4px); animation:progress-scan 3.8s ease-in-out infinite; pointer-events:none; }
.question-atmosphere { transform-origin:63% 75%; animation:atmosphere-float 7.5s ease-in-out infinite; }
.scene-arc { animation:scene-arc-drift 12s ease-in-out infinite; will-change:transform; }
.scene-portal { animation:portal-pulse 3.4s ease-in-out infinite; will-change:transform,filter; }
.scene-people i { animation:people-breathe 3.2s ease-in-out infinite; transform-origin:bottom; }
.scene-people i:nth-child(2) { animation-delay:-.8s; }.scene-people i:nth-child(3) { animation-delay:-1.6s; }.scene-people i:nth-child(4) { animation-delay:-2.4s; }
.scene-star { animation:scene-twinkle 2.7s ease-in-out infinite; }
.st-2 { animation-delay:-.7s; }.st-3 { animation-delay:-1.4s; }.st-4 { animation-delay:-2s; }
.answer .dot { will-change:transform,filter; }
.answer:not(.selected) .dot { animation:node-idle 4.8s ease-in-out infinite; }
.answer:nth-child(2) .dot { animation-delay:-.8s; }.answer:nth-child(3) .dot { animation-delay:-1.6s; }.answer:nth-child(4) .dot { animation-delay:-2.4s; }.answer:nth-child(5) .dot { animation-delay:-3.2s; }
.answer.selected .dot { animation:answer-confirm .24s cubic-bezier(.2,.9,.2,1) both,selected-glow 1.7s .24s ease-in-out infinite; }

.result-screen .identity-copy { animation:result-copy-in .55s cubic-bezier(.2,.8,.2,1) both; }
.result-screen .identity-panel .lab-visual { animation:result-field 8s ease-in-out infinite; will-change:transform; }
.result-screen .lab-visual .crystal-svg { animation-duration:5.7s; }
.result-screen .tag-list span { animation:tag-in .38s calc(var(--tag-index, 0) * 90ms) both; }
.tag-list span:nth-child(2) { animation-delay:.1s; }.tag-list span:nth-child(3) { animation-delay:.2s; }.tag-list span:nth-child(4) { animation-delay:.3s; }
.dimension-orbit>span { animation:metric-breathe 4.5s ease-in-out infinite; }
.dimension-orbit:nth-child(2)>span { animation-delay:-1.1s; }.dimension-orbit:nth-child(3)>span { animation-delay:-2.2s; }.dimension-orbit:nth-child(4)>span { animation-delay:-3.3s; }
.result-cta { animation:cta-breathe 4.6s 1.2s ease-in-out infinite; }
.report-block,.growth-block { animation:report-rise .46s both; }
.report-block:nth-of-type(2) { animation-delay:.04s; }.report-block:nth-of-type(3) { animation-delay:.08s; }.context-grid { animation:report-rise .46s .12s both; }.growth-block { animation-delay:.16s; }

.share-card .share-crystal { animation-duration:5.9s; }
.share-orbits { animation:share-orbit 20s linear infinite; }
.share-card:before { animation:share-orbit-reverse 28s linear infinite; }
.share-dims span { animation:metric-pop .48s both; }.share-dims span:nth-child(2) { animation-delay:.08s; }.share-dims span:nth-child(3) { animation-delay:.16s; }.share-dims span:nth-child(4) { animation-delay:.24s; }
.qr-mark { animation:qr-settle .6s .25s cubic-bezier(.2,.9,.2,1) both; }

@keyframes orbit-drift-a { 0%,100% { transform:translate(-50%,-50%) rotate(-14deg) scale(1); } 50% { transform:translate(-50%,-50%) rotate(-5deg) scale(1.035); } }
@keyframes orbit-drift-b { 0%,100% { transform:translate(-50%,-50%) rotate(18deg) scale(1); } 50% { transform:translate(-50%,-50%) rotate(30deg) scale(.96); } }
@keyframes orbit-spin { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes ring-breathe { 0%,100% { transform:translateX(-50%) perspective(100px) rotateX(61deg) scale(.97); opacity:.5; } 50% { transform:translateX(-50%) perspective(100px) rotateX(61deg) scale(1.05); opacity:1; } }
@keyframes signal-twinkle { 0%,100% { transform:scale(.7); opacity:.36; } 50% { transform:scale(1.35); opacity:1; } }
@keyframes hero-field { 0%,100% { transform:translateX(50%) translateY(0); } 50% { transform:translateX(50%) translateY(-5px); } }
@keyframes haze-breathe { 0%,100% { transform:scale(.92); opacity:.58; } 50% { transform:scale(1.06); opacity:1; } }
@keyframes cta-breathe { 0%,100% { box-shadow:0 15px 30px rgba(119,68,247,.36),inset 0 1px rgba(255,255,255,.68); } 50% { box-shadow:0 18px 38px rgba(118,91,255,.55),0 0 22px rgba(169,97,255,.22),inset 0 1px rgba(255,255,255,.68); } }
@keyframes menu-signal { 0%,100% { opacity:.55; } 50% { opacity:1; box-shadow:0 0 7px rgba(196,145,255,.65); } }
@keyframes progress-scan { 0%,18% { left:-20%; opacity:0; } 25% { opacity:.85; } 75%,100% { left:103%; opacity:0; } }
@keyframes atmosphere-float { 0%,100% { transform:translateY(0) scale(1); opacity:.58; } 50% { transform:translateY(-6px) scale(1.025); opacity:.73; } }
@keyframes scene-arc-drift { 0%,100% { transform:rotate(-19deg) translateX(0); } 50% { transform:rotate(-13deg) translateX(-8px); } }
@keyframes portal-pulse { 0%,100% { transform:scaleY(.96); filter:brightness(.82); opacity:.66; } 50% { transform:scaleY(1.06); filter:brightness(1.25); opacity:1; } }
@keyframes people-breathe { 0%,100% { transform:translateY(1px) scaleY(.98); opacity:.62; } 50% { transform:translateY(-3px) scaleY(1.03); opacity:.9; } }
@keyframes scene-twinkle { 0%,100% { transform:scale(.65); opacity:.3; } 50% { transform:scale(1.45); opacity:1; } }
@keyframes node-idle { 0%,100% { filter:brightness(.94); } 50% { filter:brightness(1.14); } }
@keyframes selected-glow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.25); } }
@keyframes result-copy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes result-field { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(-5px,-4px,0); } }
@keyframes tag-in { from { opacity:0; transform:translateY(7px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes metric-breathe { 0%,100% { filter:brightness(.92); } 50% { filter:brightness(1.16); } }
@keyframes report-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes share-orbit-reverse { from { transform:rotate(-27deg); } to { transform:rotate(-387deg); } }
@keyframes metric-pop { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes qr-settle { from { opacity:0; transform:scale(.86) rotate(-4deg); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .lab-visual .orbit,.lab-visual .ground-ring,.lab-visual .signal,.home-screen .lab-visual,.home-screen .scene-haze,.home-cta,.home-screen .menu-mark i:nth-child(2),.progress-track:before,.question-atmosphere,.scene-arc,.scene-portal,.scene-people i,.scene-star,.answer:not(.selected) .dot,.answer.selected .dot,.result-screen .identity-copy,.result-screen .identity-panel .lab-visual,.result-screen .tag-list span,.dimension-orbit>span,.result-cta,.report-block,.growth-block,.context-grid,.share-orbits,.share-card:before,.share-dims span,.qr-mark { animation:none; } }

/* Controls have a tactile response in under one frame: press depth, local light and release. */
button { position:relative; }
.tap-ripple { position:absolute; z-index:20; width:8px; height:8px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.85) 0 12%,rgba(224,181,255,.45) 33%,transparent 70%); transform:translate(-50%,-50%) scale(0); animation:tap-ripple .54s cubic-bezier(.16,.73,.26,1) forwards; }
.primary-button,.result-cta,.secondary-button { transition:transform .16s cubic-bezier(.2,.85,.25,1),filter .16s ease,box-shadow .2s ease; }
.primary-button:active,.result-cta:active,.secondary-button:active,.primary-button.tap-pop,.result-cta.tap-pop,.secondary-button.tap-pop { transform:translateY(2px) scale(.982); filter:brightness(.96) saturate(1.15); }
.primary-button .tap-ripple,.result-cta .tap-ripple { width:12px; height:12px; mix-blend-mode:screen; }
.secondary-button { transition:transform .16s cubic-bezier(.2,.85,.25,1),background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.secondary-button:hover { border-color:rgba(202,171,255,.58); background:linear-gradient(130deg,rgba(105,74,167,.88),rgba(34,27,69,.92)); box-shadow:0 9px 21px rgba(76,47,161,.24),inset 0 1px rgba(255,255,255,.16); }
.icon-button,.text-button,.back-button { transition:transform .16s cubic-bezier(.2,.85,.25,1),background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease; }
.icon-button:hover,.icon-button.tap-pop { color:#fff; border-color:rgba(210,178,255,.65); background:rgba(140,98,255,.16); box-shadow:0 0 0 4px rgba(156,109,255,.09),0 0 18px rgba(159,109,255,.2); }
.icon-button:active,.icon-button.tap-pop { transform:scale(.9) rotate(-7deg); }
.back-button:hover,.back-button.tap-pop { color:#fff; transform:translateX(-3px); text-shadow:0 0 12px rgba(185,142,255,.8); }
.text-button:hover,.text-button.tap-pop { color:#fff; transform:scale(.92) rotate(8deg); text-shadow:0 0 12px rgba(199,151,255,.72); }
.explore-types button { overflow:hidden; transition:transform .16s cubic-bezier(.2,.85,.25,1),border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.explore-types button:hover { transform:translateY(-2px); border-color:rgba(191,154,255,.6); background:rgba(135,92,222,.2); }
.explore-types button:active,.explore-types button.tap-pop { transform:translateY(1px) scale(.92); }
.answer { overflow:visible; transition:color .16s ease; }
.answer:before { content:""; position:absolute; z-index:0; top:2px; width:54px; height:54px; border-radius:50%; opacity:0; background:radial-gradient(circle,rgba(161,98,255,.35),transparent 67%); transform:scale(.55); transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1); }
.answer:hover:before,.answer.tap-pop:before,.answer.selected:before { opacity:1; transform:scale(1.45); }
.answer.tap-pop .dot { transform:translateY(-6px) scale(1.14); filter:brightness(1.24); }
.answer .tap-ripple { z-index:5; top:25px !important; width:58px; height:58px; background:radial-gradient(circle,rgba(255,255,255,.68),rgba(181,101,255,.35) 36%,transparent 70%); }
.tag-list span,.dimension-orbit,.keyword-card { transition:transform .18s cubic-bezier(.2,.85,.25,1),filter .18s ease,box-shadow .18s ease; }
.tag-list span:hover { transform:translateY(-2px); filter:brightness(1.2); box-shadow:0 7px 16px rgba(87,49,164,.27),inset 0 1px rgba(255,255,255,.15); }
.dimension-orbit:hover { transform:translateY(-3px) scale(1.04); filter:brightness(1.14); }
.keyword-card:hover { transform:translateY(-2px); box-shadow:inset 0 1px rgba(255,255,255,.14),0 18px 31px rgba(0,0,0,.25),0 0 20px rgba(148,91,255,.1); }
@keyframes tap-ripple { 0% { opacity:.8; transform:translate(-50%,-50%) scale(0); } 100% { opacity:0; transform:translate(-50%,-50%) scale(16); } }
@media (prefers-reduced-motion:reduce) { .tap-ripple { display:none; } .primary-button:active,.result-cta:active,.secondary-button:active,.primary-button.tap-pop,.result-cta.tap-pop,.secondary-button.tap-pop,.icon-button:active,.icon-button.tap-pop,.back-button.tap-pop,.text-button.tap-pop,.explore-types button.tap-pop,.answer.tap-pop .dot { transform:none; } }

.home-screen.is-launching .home-hero h1,.home-screen.is-launching .lead,.home-screen.is-launching .trust-row { animation:home-launch-copy .16s ease both; }
.home-screen.is-launching .lab-visual { animation:home-launch-core .16s cubic-bezier(.2,.82,.25,1) both; }
.home-screen.is-launching .home-cta { animation:home-launch-button .15s cubic-bezier(.2,.82,.25,1) both; }
@keyframes home-launch-copy { to { opacity:.7; transform:translateY(-4px); } }
@keyframes home-launch-core { to { filter:brightness(1.3) saturate(1.3); transform:translateX(50%) translateY(-9px) scale(1.035); } }
@keyframes home-launch-button { to { transform:translateY(3px) scale(.972); filter:brightness(1.13) saturate(1.18); } }
@media (prefers-reduced-motion:reduce) { .home-screen.is-launching .home-hero h1,.home-screen.is-launching .lead,.home-screen.is-launching .trust-row,.home-screen.is-launching .lab-visual,.home-screen.is-launching .home-cta { animation:none; } }

/* Visual parity / Home: reference-derived artwork is restricted to the non-interactive central cosmos. */
.home-nav { padding:5px 12px 0 10px; }
.home-screen { background:#040613; }
.home-screen:after,.home-screen:before,.home-hero:before { display:none !important; }
.home-screen.home-screen:before { display:block !important; z-index:2; inset:0 auto auto 0; width:112px; height:330px; opacity:1; background:#040613; clip-path:polygon(0 0,100% 0,0 100%); mask-image:none; pointer-events:none; }
.home-hero { grid-template-rows:125px 56px 296px 40px 64px; }
.home-hero h1 { font-size:59px; line-height:1.18; }
.home-art { position:absolute; z-index:1; top:260px; left:-24px; width:390px; height:328px; pointer-events:none; background:#07071b; filter:saturate(1.08) contrast(1.03); animation:home-art-float 7.2s ease-in-out infinite; will-change:transform,filter; }
.home-hero .home-art ~ .home-cta,.home-hero .home-art ~ .trust-row { z-index:4; }
.trust-row { padding:0 12px; }
.home-screen .trust-row { transform:translateY(-6px); }
@keyframes home-art-float { 0%,100% { transform:translateY(0) scale(1); filter:saturate(1.02) contrast(1.02) brightness(.98); } 50% { transform:translateY(-4px) scale(1.012); filter:saturate(1.14) contrast(1.06) brightness(1.08); } }
@media (prefers-reduced-motion:reduce) { .home-art { animation:none; } }

/* Visual parity / Question: clear mobile reading order matching the final question board. */
.quiz-screen { background:#050614; }
.quiz-screen:before,.quiz-screen:after { display:none; }
.progress-wrap { margin:33px 0 0; }
.progress-wrap p { display:none; }
.progress-track { height:7px; border-color:rgba(199,181,255,.14); background-color:#17152a; background-image:none; }
.progress-track:before { display:none; }
.progress-track span { box-shadow:0 0 11px rgba(188,128,255,.76); }
.progress-track span:after { width:5px; height:5px; box-shadow:0 0 9px 2px #c486ff; }
.question-stage { grid-template-rows:25px 130px 31px 225px 26px 130px 26px; align-content:start; flex:1; margin:45px 0 0; padding:0; }
.question-kicker { align-self:start; margin:0; color:#bd8eff; font-size:14px; letter-spacing:.04em; }
.question-kicker:before { display:none; }
.question-stage h1 { align-self:start; max-width:342px; margin:0; font-size:29px; line-height:1.48; letter-spacing:-.045em; }
.choose-hint { align-self:start; margin:13px 0 0; color:#aaa2bb; font-size:13px; line-height:1.6; }
.question-art { position:relative; z-index:0; width:auto; min-width:0; height:225px; margin-left:-24px; margin-right:-24px; pointer-events:none; background:none; filter:saturate(1.05) contrast(1.04); animation:question-art-float 7s ease-in-out infinite; will-change:transform,filter; }
.scale-labels { z-index:2; align-self:end; margin:0; padding-bottom:4px; color:#beb5cf; font-size:13px; }
.scale-labels span:first-child { color:#c6bdd4; }.scale-labels span:last-child { color:#d0c5dd; }
.answer-scale { z-index:2; align-self:start; height:130px; padding:27px 0 0; }
.answer-scale:before { top:47px; left:6%; right:6%; height:3px; background:linear-gradient(90deg,#4bc9ff,#745be6 48%,#de76ff); box-shadow:0 0 13px rgba(153,84,255,.68); }
.answer-scale:after { top:47px; left:6%; }
.answer-scale:has(.answer:nth-child(2).selected):after { width:22%; }.answer-scale:has(.answer:nth-child(3).selected):after { width:44%; }.answer-scale:has(.answer:nth-child(4).selected):after { width:66%; }.answer-scale:has(.answer:nth-child(5).selected):after { width:88%; }
.answer { z-index:2; gap:5px; }
.answer .dot,.answer:nth-child(1) .dot,.answer:nth-child(2) .dot,.answer:nth-child(4) .dot,.answer:nth-child(5) .dot { width:47px; height:47px; background:radial-gradient(circle at 34% 24%,#8c7bc2,#343061 62%,#17152e); }
.answer:nth-child(1) .dot,.answer:nth-child(5) .dot { width:53px; height:53px; margin-top:-3px; }
.answer>b { display:block; color:#f0eaff; font:600 16px/1 "DM Mono",monospace; }
.answer small { color:#c8c0d3; font-size:10px; line-height:1.25; }
.answer-status { z-index:2; align-self:start; margin:0; color:#bab1c9; text-align:center; font-size:13px; transform:translateY(41px); }
.quiz-footer { min-height:40px; color:#ada5bc; }.quiz-footer>span { display:none; }.back-button { font-size:14px; }.back-button[aria-disabled="true"] { opacity:.86; }
@keyframes question-art-float { 0%,100% { transform:translateY(0); filter:saturate(1) brightness(.93); } 50% { transform:translateY(-4px); filter:saturate(1.12) brightness(1.08); } }
@media (prefers-reduced-motion:reduce) { .question-art { animation:none; } }

/* Visual parity / Result: identity card first, data follows as a second beat. */
.result-header { min-height:71px; padding:27px 25px 0; border:0; background:transparent; }
.result-screen:after { display:none; }
.result-header .text-button { width:30px; height:30px; padding:0; border:0; color:transparent; background:transparent; }
.result-header .text-button:after { content:"⌯"; color:#f0ebfb; font-size:28px; }
.identity-panel { display:block; min-height:773px; padding:27px 24px 20px; background:#050614; }
.identity-panel:before { display:none; }.identity-panel:after { display:none; }
.identity-copy { max-width:196px; }.identity-panel .eyebrow { display:none; }
.result-type { font-size:76px; line-height:.88; }
.identity-panel h1 { margin:16px 0 18px; font-size:27px; line-height:1.24; }
.result-hook { max-width:189px; font-size:14px; line-height:1.78; }
.identity-panel .lab-visual { display:none; }
.result-art { display:block; position:absolute; z-index:1; top:49px; right:12px; width:148px; height:202px; overflow:hidden; pointer-events:none; background:none; mix-blend-mode:screen; mask-image:radial-gradient(ellipse at 54% 51%,#000 38%,rgba(0,0,0,.88) 58%,transparent 84%); filter:saturate(1.1) contrast(1.04); transform-origin:54% 54%; animation:result-crystal-turn 6.8s cubic-bezier(.42,0,.2,1) infinite; will-change:transform,filter; }
.result-art:after { content:""; position:absolute; inset:-22% -48%; background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.03) 43%,rgba(245,220,255,.7) 49%,rgba(130,218,255,.32) 55%,transparent 62%); mix-blend-mode:screen; transform:translateX(-68%) rotate(8deg); animation:crystal-sheen-pass 4.8s 1.1s ease-in-out infinite; }
.identity-panel .tag-list { position:absolute; z-index:4; top:246px; right:24px; left:24px; margin:0; gap:8px; }
.tag-list span { padding:7px 10px; border-color:rgba(183,151,255,.36); background:rgba(17,13,42,.68); font-size:10px; }
.dimensions-panel { position:absolute; z-index:4; top:292px; right:20px; left:20px; height:176px; margin:0; padding:18px 13px; border-color:rgba(170,143,235,.22); border-radius:18px; background:linear-gradient(135deg,rgba(18,15,45,.95),rgba(10,10,28,.95)); }
.dimensions-panel .section-label { margin:0 0 15px 5px; color:#bbb1ca; font-size:13px; letter-spacing:.05em; text-transform:none; }
.dimension-orbits { justify-content:space-around; }.dimension-orbit { gap:9px; }
.dimension-orbit>span { width:65px; height:65px; background:radial-gradient(circle,#131228 59%,transparent 60%),conic-gradient(from 210deg,#62d4ff var(--percent),#ae6af7 var(--percent) 72%,rgba(126,109,173,.25) 72%); }
.dimension-orbit b { font-size:16px; }.dimension-orbit strong { font-size:12px; }
.result-dots { position:absolute; z-index:4; top:486px; right:0; left:0; display:flex; justify-content:center; gap:12px; }
.result-dots i { width:8px; height:8px; border-radius:50%; background:#23203d; }.result-dots i:first-child { width:10px; background:#f2e5ff; box-shadow:0 0 10px #d795ff; }
.keyword-card { position:absolute; z-index:4; top:528px; right:20px; left:20px; min-height:92px; padding:17px 17px; border-radius:17px; background:rgba(18,13,44,.92); }
.keyword-card>b { font-size:22px; }.keyword-card strong { font-size:14px; }.keyword-card span { font-size:11px; line-height:1.55; }
.result-cta { position:absolute; z-index:4; top:640px; right:24px; bottom:auto; left:24px; height:61px; }
.family-caption { position:absolute; z-index:4; right:0; bottom:32px; left:0; font-size:9px; }
@keyframes result-art-float { 0%,100% { transform:translateY(0); filter:saturate(1.02) brightness(.96); } 50% { transform:translateY(-4px) scale(1.015); filter:saturate(1.16) brightness(1.08); } }
@keyframes result-crystal-turn { 0%,100% { transform:perspective(620px) translateY(0) rotateX(1deg) rotateY(-8deg) scale(.98); filter:saturate(1.02) brightness(.96); } 45% { transform:perspective(620px) translateY(-6px) rotateX(-2deg) rotateY(9deg) scale(1.03); filter:saturate(1.2) brightness(1.12); } 70% { transform:perspective(620px) translateY(-3px) rotateX(1deg) rotateY(3deg) scale(1.01); filter:saturate(1.12) brightness(1.04); } }
@keyframes crystal-sheen-pass { 0%,18% { transform:translateX(-68%) rotate(8deg); opacity:0; } 28% { opacity:1; } 62% { transform:translateX(70%) rotate(8deg); opacity:.8; } 75%,100% { transform:translateX(70%) rotate(8deg); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .result-art,.result-art:after { animation:none; } }

/* Visual parity / Share: the share card is a full-bleed portrait poster, not a dashboard widget. */
.share-section { padding:8px 1px 36px; background:#050614; }
.share-card { width:100%; height:834px; padding:28px; border-color:rgba(218,204,255,.66); border-radius:24px; background:radial-gradient(70% 42% at 77% 31%,rgba(93,44,200,.3),transparent 70%),#050614; box-shadow:inset 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(170,136,255,.05); }
.share-noise { opacity:.08; }.share-orbits { top:68px; right:-30px; width:420px; height:478px; opacity:.7; }
.share-art { position:absolute; z-index:1; top:282px; right:0; left:0; height:259px; pointer-events:none; background:none; mix-blend-mode:screen; filter:saturate(1.08); animation:share-art-breathe 8s ease-in-out infinite; }
.share-brand { top:auto; left:auto; font-size:14px; letter-spacing:.04em; }.share-brand span { font-size:8px; letter-spacing:.17em; }
.share-topnote { top:34px; right:29px; font-size:13px; }
.share-type { top:96px; left:28px; font-size:86px; line-height:.9; }
.share-card h3 { top:197px; left:28px; color:#d7a2ff; font-size:29px; }
.share-hook { top:244px; left:28px; width:262px; color:#e7e0ef; font-size:15px; line-height:1.72; }
.share-card .share-crystal { top:191px; right:9px; width:175px; height:270px; filter:drop-shadow(0 0 20px #9856ff); }
.share-card .share-crystal { display:none; }
.share-crystal-art { position:absolute; z-index:3; top:189px; right:12px; width:170px; height:244px; overflow:hidden; pointer-events:none; background:none; mix-blend-mode:screen; mask-image:radial-gradient(ellipse at 54% 51%,#000 39%,rgba(0,0,0,.9) 59%,transparent 84%); filter:saturate(1.14) contrast(1.05); transform-origin:54% 54%; animation:share-crystal-turn 7.4s cubic-bezier(.42,0,.2,1) infinite; will-change:transform,filter; }
.share-crystal-art:after { content:""; position:absolute; inset:-22% -48%; background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.04) 43%,rgba(247,220,255,.74) 49%,rgba(130,218,255,.34) 55%,transparent 62%); mix-blend-mode:screen; transform:translateX(-68%) rotate(8deg); animation:crystal-sheen-pass 5.1s 1.6s ease-in-out infinite; }
@keyframes share-crystal-turn { 0%,100% { transform:perspective(700px) translateY(0) rotateX(1deg) rotateY(-8deg) scale(.98); filter:saturate(1.03) brightness(.96); } 46% { transform:perspective(700px) translateY(-7px) rotateX(-2deg) rotateY(9deg) scale(1.03); filter:saturate(1.22) brightness(1.12); } 72% { transform:perspective(700px) translateY(-3px) rotateX(1deg) rotateY(3deg) scale(1.01); filter:saturate(1.13) brightness(1.05); } }
.share-dims { top:541px; right:28px; bottom:auto; left:28px; height:104px; padding:20px 7px; border-top:1px solid rgba(208,190,247,.33); border-bottom:1px solid rgba(208,190,247,.26); }
.share-dims small { font-size:13px; }.share-dims b { font-size:28px; }
.qr-mark { top:657px; right:28px; bottom:auto; width:116px; height:116px; overflow:hidden; border:5px solid #f8f5ff; border-radius:8px; background-color:#f8f5ff; background-image:repeating-conic-gradient(from 14deg at 47% 53%,#171225 0 12.5%,transparent 0 25%); background-size:13px 13px; box-shadow:0 8px 24px rgba(0,0,0,.42),0 0 0 2px rgba(207,172,255,.26),inset 0 0 0 7px #f8f5ff; }
.qr-mark:after { content:""; position:absolute; z-index:1; inset:7px; border:1px solid rgba(58,39,100,.12); border-radius:3px; pointer-events:none; }
.qr-mark i { z-index:2; width:25px; height:25px; border:0; border-radius:3px; background:#171225; box-shadow:inset 0 0 0 5px #f8f5ff,inset 0 0 0 8px #171225,0 0 0 2px #f8f5ff; }
.qr-mark i:nth-child(1) { top:8px; left:8px; }.qr-mark i:nth-child(2) { top:8px; right:8px; }.qr-mark i:nth-child(3) { bottom:8px; left:8px; }
.qr-mark b { right:133px; bottom:48px; width:124px; color:#ebe4f5; font-size:16px; line-height:1.6; font-weight:500; }
.share-footer { bottom:16px; left:28px; font-size:10px; }
.secondary-button { margin:18px 21px 0; width:calc(100% - 42px); }
.share-tip { margin-top:13px; }
.footer-restart { display:block; margin:16px auto 0; border:1px solid rgba(201,183,240,.25); border-radius:99px; padding:8px 15px; color:#d7d0e6; background:rgba(255,255,255,.04); font-size:11px; }
@keyframes share-art-breathe { 0%,100% { transform:translateY(0); opacity:.8; } 50% { transform:translateY(-3px); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .share-art,.share-crystal-art,.share-crystal-art:after { animation:none; } }

/* Atmospheric integration: visual assets live in the environment, never as framed cards. */
.quiz-screen { position:relative; isolation:isolate; overflow:hidden; background:#050614; }
.quiz-screen::before { content:""; display:block !important; position:absolute; z-index:0; inset:82px 0 38px; pointer-events:none; opacity:.92; background:linear-gradient(180deg,#050614 0%,rgba(5,6,20,.84) 14%,rgba(5,6,20,.18) 39%,rgba(5,6,20,.22) 68%,#050614 98%); filter:saturate(1.12) contrast(1.05); mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%); }
.quiz-screen::after { content:""; display:block !important; position:absolute; z-index:1; inset:100px -30px 70px; pointer-events:none; opacity:.72; background:radial-gradient(ellipse at 59% 49%,rgba(132,64,255,.22),transparent 29%),radial-gradient(ellipse at 37% 64%,rgba(50,159,255,.1),transparent 25%); filter:blur(13px); animation:quiz-environment-breathe 6.4s ease-in-out infinite; }
.quiz-header,.progress-wrap,.question-stage,.quiz-footer { position:relative; z-index:10; }
.question-stage { isolation:isolate; }
.question-art { z-index:0; margin-left:-24px; margin-right:-24px; background:none; filter:none; animation:none; overflow:visible; }
.question-art::before { content:""; position:absolute; z-index:-1; top:8px; right:10%; left:10%; height:190px; pointer-events:none; background:radial-gradient(ellipse at 54% 58%,rgba(172,91,255,.26),transparent 31%),radial-gradient(circle at 65% 34%,rgba(105,206,255,.19),transparent 11%),radial-gradient(circle at 33% 72%,rgba(129,85,255,.17),transparent 12%); filter:blur(4px); mix-blend-mode:screen; animation:question-portal-breathe 4.8s ease-in-out infinite; }
.question-art::after { content:""; position:absolute; z-index:-1; top:33px; left:17%; width:4px; height:4px; border-radius:50%; pointer-events:none; background:#c9a1ff; box-shadow:58px 61px 0 -1px #8ebeff,146px 17px 0 -1px #da9eff,214px 94px 0 -1px #9e75ff,91px 136px 0 -1px #d5b1ff,251px 148px 0 -1px #81d5ff; filter:drop-shadow(0 0 5px #b88dff); animation:question-stars-drift 7.8s ease-in-out infinite; }
.result-art { overflow:visible; background:none; mix-blend-mode:normal; mask-image:none; filter:none; }
.result-art::before { content:""; position:absolute; z-index:-1; inset:-36px -47px; pointer-events:none; background:none; opacity:.58; filter:blur(18px) saturate(1.3); mask-image:radial-gradient(ellipse at 54% 51%,#000 20%,transparent 72%); }
.result-art { background:none; mask-image:radial-gradient(ellipse at 54% 51%,#000 28%,rgba(0,0,0,.92) 47%,rgba(0,0,0,.45) 65%,transparent 88%); filter:saturate(1.12) contrast(1.04) drop-shadow(0 0 15px rgba(133,76,255,.35)); }
@keyframes quiz-environment-breathe { 0%,100% { transform:scale(1); opacity:.54; } 50% { transform:scale(1.06); opacity:.96; } }
@keyframes question-portal-breathe { 0%,100% { transform:translateY(2px) scale(.96); opacity:.48; } 50% { transform:translateY(-5px) scale(1.05); opacity:1; } }
@keyframes question-stars-drift { 0%,100% { transform:translate3d(0,0,0); opacity:.45; } 50% { transform:translate3d(9px,-11px,0); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .quiz-screen::after,.question-art::before,.question-art::after { animation:none; } }

/* Result Hero: the crystal refracts the shared environment instead of sitting on a raster tile. */
.identity-panel { isolation:isolate; background:radial-gradient(118% 82% at 48% 14%,rgba(74,51,167,.48) 0%,rgba(46,31,105,.3) 42%,rgba(10,8,32,.08) 73%,transparent 100%),linear-gradient(156deg,#0d0b25 0%,#09091e 56%,#050614 100%); }
.identity-panel::before { content:""; display:block; position:absolute; z-index:0; top:27px; right:-60px; width:330px; height:292px; opacity:.72; pointer-events:none; background:radial-gradient(circle at 44% 26%,rgba(239,192,255,.84) 0 1px,transparent 2px),radial-gradient(circle at 69% 12%,rgba(157,99,255,.82) 0 1px,transparent 2px),radial-gradient(circle at 72% 61%,rgba(108,202,255,.72) 0 1px,transparent 2px),radial-gradient(circle at 20% 68%,rgba(207,135,255,.75) 0 1px,transparent 2px); filter:drop-shadow(0 0 5px rgba(172,104,255,.38)); animation:result-field-stars 7.5s ease-in-out infinite; }
.identity-panel::after { content:""; display:block; position:absolute; z-index:0; top:48px; right:-33px; width:280px; height:230px; border:0; border-radius:50%; pointer-events:none; background:conic-gradient(from 8deg,transparent 0deg 18deg,rgba(229,202,255,.98) 29deg,rgba(120,217,255,.76) 36deg,transparent 51deg 360deg),radial-gradient(ellipse at center,transparent 62%,rgba(157,117,248,.3) 63%,rgba(102,196,255,.22) 65%,transparent 67%); box-shadow:0 0 18px rgba(124,70,238,.12); mask-image:radial-gradient(ellipse at center,transparent 61%,#000 63%,#000 67%,transparent 69%); transform:rotate(-18deg); animation:result-halo-orbit 6.4s linear infinite; will-change:transform; }
.result-type { filter:drop-shadow(0 0 16px rgba(192,150,255,.42)); }
.result-art { z-index:2; top:47px; right:8px; width:160px; height:214px; overflow:visible; opacity:.98; background:none; mix-blend-mode:screen; mask-image:none; filter:saturate(1.13) contrast(1.02) brightness(1.08); }
.result-art::before { content:""; display:block; position:absolute; z-index:1; inset:16px 27px 13px; pointer-events:none; background:linear-gradient(112deg,transparent 29%,rgba(246,237,255,.26) 46%,rgba(159,226,255,.16) 53%,transparent 65%); clip-path:polygon(50% 0,91% 28%,76% 72%,50% 100%,24% 72%,9% 28%); mix-blend-mode:screen; opacity:.28; transform:translateX(-35%); animation:crystal-inner-glint 5.6s ease-in-out infinite; }
.result-art::after { content:""; display:block; position:absolute; z-index:1; top:22px; left:51px; width:48px; height:116px; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(188,136,255,.03) 45%,transparent); clip-path:polygon(50% 0,100% 28%,65% 100%,9% 44%); mix-blend-mode:screen; opacity:.36; animation:crystal-inner-breathe 4.6s ease-in-out infinite; }
.share-crystal-art { background-image:none; }
@keyframes crystal-inner-glint { 0%,18% { transform:translateX(-42%); opacity:.08; } 45% { opacity:.42; } 76%,100% { transform:translateX(44%); opacity:.1; } }
@keyframes crystal-inner-breathe { 0%,100% { opacity:.2; transform:translateY(2px) scale(.96); } 50% { opacity:.5; transform:translateY(-3px) scale(1.04); } }
@keyframes result-halo-orbit { from { transform:rotate(-18deg); } to { transform:rotate(342deg); } }
.share-crystal-art { background:none; mix-blend-mode:screen; filter:saturate(1.16) contrast(.94) brightness(1.16) drop-shadow(0 0 17px rgba(133,76,255,.38)); }
.share-card .qr-mark { display:none; }
.share-card { background:radial-gradient(104% 72% at 52% 33%,rgba(104,58,226,.34) 0%,rgba(55,34,133,.2) 44%,rgba(14,12,43,.08) 70%,transparent 100%),radial-gradient(76% 36% at 50% 84%,rgba(54,32,130,.18),transparent 74%),linear-gradient(160deg,#0e0d28 0%,#100d2c 52%,#090918 100%); }
.share-art { background-image:none; opacity:.92; }
.share-art { background-image:none; }
.share-crystal-art { background-image:none; }
.share-crystal-art::after { display:none; }
.share-type { display:inline-block; color:transparent; background:linear-gradient(112deg,#faf8ff 0%,#faf8ff 38%,#e6d0ff 45%,#fff 50%,#c9abff 56%,#faf8ff 63%,#faf8ff 100%); background-size:250% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:share-type-sheen 5.2s ease-in-out infinite; }
@keyframes share-type-sheen { 0%,62%,100% { background-position:100% 0; } 79% { background-position:0 0; } }
.result-particles { position:absolute; z-index:1; top:72px; right:10px; left:18px; height:238px; overflow:hidden; pointer-events:none; }
.result-particles i { position:absolute; width:3px; height:3px; border-radius:50%; background:#d8b9ff; box-shadow:0 0 8px 2px rgba(188,131,255,.66); opacity:.38; animation:result-particle-drift 5.6s ease-in-out infinite; }
.result-particles i:nth-child(1) { top:42px; left:56%; width:4px; height:4px; background:#bfecff; animation-delay:-.6s; }
.result-particles i:nth-child(2) { top:103px; left:15%; width:2px; height:2px; animation-delay:-2.7s; }
.result-particles i:nth-child(3) { top:157px; left:70%; background:#9ccfff; animation-delay:-1.4s; }
.result-particles i:nth-child(4) { top:189px; left:27%; width:4px; height:4px; animation-delay:-4.1s; }
.result-particles i:nth-child(5) { top:84px; left:83%; width:2px; height:2px; background:#e5c6ff; animation-delay:-3.5s; }
.result-particles i:nth-child(6) { top:23px; left:42%; width:5px; height:5px; background:#f4dcff; box-shadow:0 0 11px 3px rgba(222,158,255,.72); animation:result-particle-star 4.4s ease-in-out infinite; }
@keyframes result-particle-drift { 0%,100% { transform:translate3d(0,2px,0) scale(.75); opacity:.22; } 48% { transform:translate3d(6px,-8px,0) scale(1.15); opacity:.94; } }
@keyframes result-particle-star { 0%,100% { transform:rotate(0deg) scale(.65); opacity:.18; } 48% { transform:rotate(45deg) scale(1.22); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .result-particles i { animation:none; } }

/* The result Hero stays unchanged. Only the share-card crystal uses one continuous vertical-prism silhouette. */
.result-art { background-image:none; background-repeat:no-repeat; background-size:100% 100%; background-position:center; }
.share-crystal-art { background-image:none; background-repeat:no-repeat; background-size:100% 100%; background-position:center; clip-path:none; }

/* Vector-only visual pass: procedural starfields, orbits and the inline SVG crystal. */
.home-art { overflow:visible; background:radial-gradient(circle at 49% 69%,rgba(197,103,255,.62) 0 2px,transparent 4px),radial-gradient(circle at 18% 34%,#bc73ff 0 1px,transparent 3px),radial-gradient(circle at 82% 38%,#83dfff 0 1px,transparent 3px),radial-gradient(circle at 72% 67%,#f0c3ff 0 1px,transparent 3px),radial-gradient(ellipse at 50% 65%,rgba(91,41,218,.36),transparent 39%),#07071b; filter:none; }
.home-art::before { content:""; position:absolute; inset:73px 20px 18px; border:1px solid rgba(157,100,255,.42); border-radius:50%; box-shadow:0 0 0 18px rgba(105,62,224,.035),0 0 0 39px rgba(114,75,225,.03),0 0 26px rgba(118,59,237,.3); transform:rotate(-13deg); animation:home-vector-orbit 16s linear infinite; }
.home-art::after { content:""; position:absolute; right:-26px; bottom:10px; left:-26px; height:95px; opacity:.6; background:repeating-radial-gradient(ellipse at 50% 72%,transparent 0 15px,rgba(162,91,255,.55) 16px 17px,transparent 18px 27px); mask-image:linear-gradient(to top,#000,transparent 84%); }
.home-art .crystal-svg { position:absolute; z-index:2; top:23px; left:50%; width:122px; height:188px; transform:translateX(-50%); filter:drop-shadow(0 0 9px rgba(154,89,255,.42)); animation:vector-crystal-float 5.8s ease-in-out infinite; }
.quiz-screen::before { background:radial-gradient(circle at 16% 52%,rgba(153,86,255,.76) 0 1px,transparent 3px),radial-gradient(circle at 86% 43%,rgba(140,214,255,.7) 0 1px,transparent 3px),radial-gradient(circle at 72% 58%,rgba(152,68,255,.19),transparent 32%),radial-gradient(ellipse at 48% 66%,rgba(62,39,170,.35),transparent 58%),linear-gradient(180deg,#050614 0%,#0b0924 44%,#070716 100%) !important; filter:none; mask-image:none; }
.question-art { background:none !important; }
.question-art::before { background:radial-gradient(ellipse at 54% 58%,rgba(172,91,255,.26),transparent 31%),radial-gradient(circle at 65% 34%,rgba(105,206,255,.19),transparent 11%),radial-gradient(circle at 33% 72%,rgba(129,85,255,.17),transparent 12%); }
.result-art { background:none !important; mix-blend-mode:normal; filter:none; mask-image:none; }
.result-art::before,.result-art::after { display:none; }
.result-art .crystal-svg { display:block; width:100%; height:100%; filter:drop-shadow(0 0 8px rgba(147,82,255,.32)); }
.share-art { background:radial-gradient(circle at 18% 42%,rgba(198,125,255,.82) 0 1px,transparent 3px),radial-gradient(circle at 78% 29%,rgba(111,205,255,.72) 0 1px,transparent 3px),radial-gradient(circle at 67% 74%,rgba(222,151,255,.86) 0 1px,transparent 3px),radial-gradient(ellipse at 54% 74%,rgba(116,61,228,.34),transparent 53%),linear-gradient(180deg,transparent,rgba(31,20,84,.62)); mix-blend-mode:screen; filter:none; }
.share-art::before { content:""; position:absolute; inset:12px -28px -5px; border:1px solid rgba(169,112,255,.43); border-radius:50%; box-shadow:0 0 0 40px rgba(129,73,234,.035),0 0 0 86px rgba(117,70,222,.024); transform:rotate(-21deg); animation:share-vector-orbit 17s linear infinite; }
.share-art::after { content:""; position:absolute; right:-26px; bottom:0; left:-26px; height:80px; background:repeating-radial-gradient(ellipse at 50% 98%,transparent 0 17px,rgba(168,97,255,.45) 18px 19px,transparent 20px 29px); mask-image:linear-gradient(to top,#000,transparent 90%); }
.share-crystal-art { background:none !important; mix-blend-mode:normal; filter:none; mask-image:none; overflow:visible; }
.share-crystal-art .crystal-svg { display:block; width:100%; height:100%; filter:drop-shadow(0 0 9px rgba(151,84,255,.33)); }
@keyframes vector-crystal-float { 0%,100% { transform:translateX(-50%) translateY(0) scale(.99); } 50% { transform:translateX(-50%) translateY(-5px) scale(1.015); } }
@keyframes home-vector-orbit { from { transform:rotate(-13deg); } to { transform:rotate(347deg); } }
@keyframes share-vector-orbit { from { transform:rotate(-21deg); } to { transform:rotate(339deg); } }
.share-crystal-art .crystal-svg { position:static !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; margin:0 !important; transform:none !important; }

/* Restore the pre-material-overhaul visual assets and their original page-specific crystal treatments. */
.home-art { background:url('./assets/visual/home-orbital-scene.png') center / 100% 100% no-repeat !important; filter:saturate(1.08) contrast(1.03); }
.home-art::before,.home-art::after,.home-art .crystal-svg { display:none !important; }
.quiz-screen::before { background:linear-gradient(180deg,#050614 0%,rgba(5,6,20,.84) 14%,rgba(5,6,20,.18) 39%,rgba(5,6,20,.22) 68%,#050614 98%),url('./assets/visual/question-scene.png') center 49% / 100% auto no-repeat !important; }
.result-art { background:url('./assets/visual/result-crystal-lucid.png') center / 100% 100% no-repeat !important; mix-blend-mode:screen; mask-image:radial-gradient(ellipse at 54% 51%,#000 28%,rgba(0,0,0,.92) 47%,rgba(0,0,0,.45) 65%,transparent 88%); filter:saturate(1.13) contrast(1.02) brightness(1.08); }
.result-art::before,.result-art::after,.result-art .crystal-svg { display:none !important; }
.share-art { background:url('./assets/visual/share-landscape-no-crystal-feathered.png') center / 100% 100% no-repeat !important; mix-blend-mode:screen; filter:saturate(1.08); }
.share-art::before,.share-art::after { display:none !important; }
.share-crystal-art { background:url('./assets/visual/result-crystal.png') center / 100% 100% no-repeat !important; mix-blend-mode:screen; mask-image:radial-gradient(ellipse at 54% 51%,#000 39%,rgba(0,0,0,.9) 59%,transparent 84%); filter:saturate(1.14) contrast(1.05); }
.share-crystal-art .crystal-svg { display:none !important; }

/* Result flow pages: each destination owns one clear reading task. */
.report-page { min-height:100dvh; padding-top:42px; }
.report-share-button { display:flex; align-items:center; justify-content:space-between; width:100%; height:60px; margin:25px 0 12px; padding:0 20px; border:1px solid rgba(219,199,255,.62); border-radius:16px; color:#fff; background:linear-gradient(105deg,#a34df5,#759eff); box-shadow:0 14px 30px rgba(114,64,238,.28),inset 0 1px rgba(255,255,255,.38); font-size:16px; font-weight:700; }
.report-share-button:active { transform:translateY(1px) scale(.99); }

/* Global visual quality pass: existing layout is intentionally preserved. */
:root { --polish-canvas:#060611; --polish-panel:rgba(15,13,37,.78); --polish-line:rgba(225,214,255,.2); --violet:#b368ff; --cyan:#6ce7ff; }
.screen { background-color:var(--polish-canvas); }
.home-screen { background:radial-gradient(90% 52% at 78% 44%,rgba(69,39,146,.33),transparent 63%),radial-gradient(62% 45% at 1% 83%,rgba(17,93,150,.23),transparent 70%),linear-gradient(145deg,#060714 0%,#0d0d26 48%,#0b112a 100%); }
.home-screen:after { opacity:.45; background-image:radial-gradient(circle at 22% 33%,rgba(203,156,255,.85) 0 1px,transparent 1.8px),radial-gradient(circle at 77% 20%,rgba(111,222,255,.76) 0 .8px,transparent 1.6px),radial-gradient(circle at 82% 66%,rgba(224,174,255,.72) 0 .8px,transparent 1.6px),radial-gradient(circle at 14% 74%,rgba(109,196,255,.65) 0 .7px,transparent 1.5px); background-size:auto; mask-image:none; animation:polish-starfield 9s ease-in-out infinite; }
.home-art { border-radius:50%; box-shadow:0 0 0 1px rgba(177,136,255,.05),0 0 44px rgba(107,58,230,.18); }
.home-art::after { display:none !important; }
.home-hero h1 { text-shadow:0 2px 0 rgba(255,255,255,.06),0 12px 34px rgba(50,23,110,.34); }
.home-hero h1 em { background-image:linear-gradient(108deg,#f0e4ff 0%,#c99dff 36%,#9565f4 67%,#79d5ff 100%); filter:drop-shadow(0 0 12px rgba(179,112,255,.24)); }
.lead { color:#ccc7dd; text-shadow:0 1px 10px rgba(0,0,0,.32); }
.trust-row span { border-color:rgba(205,189,255,.2); background:linear-gradient(135deg,rgba(39,29,75,.6),rgba(10,12,31,.66)); }
.primary-button,.result-cta,.report-share-button { border-color:rgba(236,222,255,.58); background:linear-gradient(108deg,#9f4cf0 0%,#9166f4 51%,#6c9eff 100%); box-shadow:0 12px 27px rgba(115,58,232,.32),inset 0 1px rgba(255,255,255,.58),inset 0 -10px 19px rgba(74,47,180,.12); }
.primary-button:before,.result-cta:before,.report-share-button:before { content:""; position:absolute; z-index:-1; inset:1px; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 40%); pointer-events:none; }
.primary-button:active,.result-cta:active,.report-share-button:active,.secondary-button:active { transform:translateY(2px) scale(.985); filter:brightness(.95); box-shadow:0 5px 14px rgba(74,40,180,.25),inset 0 2px 7px rgba(28,13,81,.2); }

.quiz-screen { background:radial-gradient(100% 48% at 47% 45%,rgba(80,40,178,.2),transparent 67%),linear-gradient(155deg,#050611,#0b0a20 55%,#060b1d); }
.question-stage { border-color:rgba(210,196,255,.2); background:linear-gradient(150deg,rgba(21,18,49,.82),rgba(8,10,27,.8)); box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -34px 65px rgba(2,3,18,.2),0 21px 48px rgba(0,0,0,.28); }
.question-stage::before { width:1px; height:92px; opacity:.85; box-shadow:0 0 14px rgba(157,111,255,.84); }
.question-stage--forward { animation:question-in-forward .34s cubic-bezier(.2,.85,.2,1) both; }
.question-stage--back { animation:question-in-back .34s cubic-bezier(.2,.85,.2,1) both; }
.question-stage h1 { color:#f4f0ff; text-shadow:0 5px 21px rgba(0,0,0,.34); }
.choose-hint { color:#ada6c1; }
.answer-scale:before { height:2px; background:linear-gradient(90deg,rgba(92,220,255,.78),rgba(151,113,248,.52) 48%,rgba(235,111,235,.82)); box-shadow:0 0 11px rgba(150,103,245,.26); }
.answer-scale:after { top:27px; height:2px; background:linear-gradient(90deg,#68ddff,#957af8 52%,#e66be6); box-shadow:0 0 15px rgba(192,106,255,.75); }
.dot { border-color:rgba(206,195,246,.58); background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.18),transparent 31%),linear-gradient(145deg,rgba(75,58,128,.94),rgba(14,15,36,.96)); box-shadow:inset 0 1px rgba(255,255,255,.2),inset 0 -9px 16px rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.27); }
.answer:nth-child(1) .dot { border-color:rgba(104,226,255,.8); }.answer:nth-child(5) .dot { border-color:rgba(236,129,236,.82); }
.answer:nth-child(1).selected .dot { background:linear-gradient(145deg,#55d8ee,#416fc7); box-shadow:0 0 0 4px rgba(104,226,255,.14),0 0 25px rgba(92,214,255,.72),inset 0 1px rgba(255,255,255,.6); }
.answer:nth-child(5).selected .dot { background:linear-gradient(145deg,#d36ce7,#7a52da); box-shadow:0 0 0 4px rgba(235,111,235,.14),0 0 25px rgba(226,100,240,.72),inset 0 1px rgba(255,255,255,.6); }
.answer b { display:none; }.answer small { color:#bdb5ce; font-size:9px; }.answer.selected small { color:#fff; text-shadow:0 0 10px rgba(215,171,255,.44); }

.result-screen { background:radial-gradient(110% 38% at 50% 0,rgba(100,57,202,.16),transparent 64%),#060611; }
.identity-panel { background:radial-gradient(96% 69% at 68% 19%,rgba(89,52,191,.48),transparent 65%),radial-gradient(70% 37% at 15% 92%,rgba(24,110,177,.12),transparent 72%),linear-gradient(156deg,#0d0b27 0%,#080819 62%,#060612 100%); }
.identity-panel::before { opacity:.56; background-image:radial-gradient(circle at 44% 26%,rgba(239,192,255,.9) 0 1px,transparent 1.8px),radial-gradient(circle at 69% 12%,rgba(157,99,255,.8) 0 1px,transparent 1.8px),radial-gradient(circle at 72% 61%,rgba(108,202,255,.68) 0 1px,transparent 1.8px),radial-gradient(circle at 20% 68%,rgba(207,135,255,.65) 0 1px,transparent 1.8px); }
.result-type { background-image:linear-gradient(105deg,#fff 0%,#e9ddff 26%,#bd8dff 68%,#8acff4 100%); filter:drop-shadow(0 0 13px rgba(194,135,255,.36)); }
.identity-panel h1 { text-shadow:0 4px 20px rgba(0,0,0,.3); }.result-hook { color:#d9d4e7; }
.result-art { filter:saturate(1.2) contrast(1.1) brightness(1.04) drop-shadow(0 0 17px rgba(137,77,255,.36)) !important; }
.result-art::before { display:block !important; z-index:-1; inset:-38px; background:radial-gradient(ellipse,rgba(147,83,255,.27),transparent 66%); filter:blur(10px); mask-image:none; opacity:.9; animation:crystal-aura-polish 5.8s ease-in-out infinite; }
.tag-list span { border-color:rgba(212,193,255,.3); background:linear-gradient(135deg,rgba(106,72,176,.16),rgba(18,16,42,.62)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 5px 13px rgba(0,0,0,.13); }
.dimensions-panel,.keyword-card { border-color:rgba(211,193,255,.22); background:linear-gradient(145deg,rgba(29,25,61,.92),rgba(10,11,29,.94)); box-shadow:0 20px 39px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.13),inset 0 -21px 31px rgba(0,0,0,.12); }
.dimension-orbit>span { box-shadow:0 0 0 1px rgba(201,176,255,.13),0 5px 18px rgba(0,0,0,.2); }
.keyword-card strong { color:#f4f0ff; }.keyword-card span { color:#bdb5cf; }

.share-card { background:radial-gradient(90% 50% at 72% 28%,rgba(108,56,221,.39),transparent 62%),radial-gradient(74% 38% at 50% 86%,rgba(53,35,136,.2),transparent 68%),linear-gradient(160deg,#100d2c 0%,#110d29 57%,#070713 100%); box-shadow:0 28px 62px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.26),inset 0 -35px 60px rgba(0,0,0,.22),0 0 0 1px rgba(188,151,255,.07); }
.share-card { animation:poster-enter .52s cubic-bezier(.2,.82,.2,1) both; }
.share-card::after { opacity:.42; }.share-type { text-shadow:0 6px 21px rgba(47,14,104,.38); }.share-card h3 { text-shadow:0 3px 13px rgba(0,0,0,.26); }
.share-tags { position:absolute; z-index:10; top:353px; left:28px; display:flex; gap:6px; flex-wrap:wrap; max-width:170px; }
.share-tags span { padding:5px 8px; border:1px solid rgba(225,207,255,.3); border-radius:99px; color:#f0eaff; background:rgba(30,19,71,.47); box-shadow:inset 0 1px rgba(255,255,255,.1); font-size:9px; }
.share-dims { border-color:rgba(216,199,252,.28); background:linear-gradient(90deg,rgba(20,15,51,.2),transparent); }
.qr-mark { position:absolute; z-index:12; top:670px; left:28px; display:grid !important; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr); width:82px; height:82px; padding:7px; border:1px solid rgba(238,229,255,.86); border-radius:10px; background:#f9f6ff; box-shadow:0 7px 18px rgba(0,0,0,.32),0 0 0 3px rgba(183,136,255,.13); aspect-ratio:1; overflow:hidden; }
.qr-mark::after { content:"测试入口"; position:absolute; left:97px; top:31px; width:95px; color:#e9e3f8; font-size:11px; letter-spacing:.09em; white-space:nowrap; }
.qr-mark i { display:block; background:#161127; }.qr-mark i:nth-of-type(1){grid-area:2/5/3/6}.qr-mark i:nth-of-type(2){grid-area:3/6/4/8}.qr-mark i:nth-of-type(3){grid-area:4/5/6/6}.qr-mark i:nth-of-type(4){grid-area:5/7/7/8}.qr-mark i:nth-of-type(5){grid-area:6/4/7/6}.qr-mark i:nth-of-type(6){grid-area:7/6/8/8}.qr-mark i:nth-of-type(7){grid-area:8/4/9/5}.qr-mark i:nth-of-type(8){grid-area:8/6/10/7}.qr-mark i:nth-of-type(9){grid-area:3/4/4/5}.qr-mark i:nth-of-type(10){grid-area:6/9/8/10}.qr-mark i:nth-of-type(11){grid-area:9/8/10/10}
.qr-finder { position:absolute; width:24px; height:24px; border:5px solid #161127; background:#f9f6ff; }.qr-finder::after { content:""; position:absolute; inset:4px; background:#161127; }.qr-finder--a{top:7px;left:7px}.qr-finder--b{top:7px;right:7px}.qr-finder--c{bottom:7px;left:7px}
.qr-mark { display:block !important; padding:5px; overflow:visible; background:#faf8ff; background-image:none; box-shadow:0 7px 18px rgba(0,0,0,.32),0 0 0 3px rgba(183,136,255,.15),inset 0 0 0 1px rgba(49,30,92,.16); }
.qr-mark .qr-svg { display:block; width:100%; height:100%; overflow:visible; }
.qr-mark i,.qr-mark .qr-finder { display:none; }
.secondary-button { border-color:rgba(219,201,255,.31); background:linear-gradient(130deg,rgba(87,61,151,.78),rgba(18,17,41,.9)); box-shadow:inset 0 1px rgba(255,255,255,.15),0 10px 23px rgba(0,0,0,.18); }

@keyframes polish-starfield { 0%,100% { opacity:.32; transform:translate3d(0,0,0); } 50% { opacity:.72; transform:translate3d(2px,-4px,0); } }
@keyframes polish-orbit { from { transform:rotate(0deg) scale(.98); } 50% { transform:rotate(180deg) scale(1.02); } to { transform:rotate(360deg) scale(.98); } }
@keyframes question-in-forward { from { opacity:0; transform:translateX(12px) scale(.988); filter:blur(2px); } to { opacity:1; transform:translateX(0) scale(1); filter:blur(0); } }
@keyframes question-in-back { from { opacity:0; transform:translateX(-12px) scale(.988); filter:blur(2px); } to { opacity:1; transform:translateX(0) scale(1); filter:blur(0); } }
@keyframes crystal-aura-polish { 0%,100% { opacity:.56; transform:scale(.94); } 50% { opacity:.94; transform:scale(1.07); } }
@keyframes poster-enter { from { opacity:0; transform:translateY(12px) scale(.985); filter:blur(3px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@media (prefers-reduced-motion:reduce) { .home-screen:after,.home-art::after,.question-stage--forward,.question-stage--back,.result-art::before,.share-card { animation:none !important; } }

/* Share-poster rebuild. Scoped to the card: no other product screen is affected. */
.share-section { padding:16px 16px 30px; background:radial-gradient(88% 24% at 50% 0,rgba(93,59,195,.18),transparent 82%),#070713; }
.poster-card.share-card { position:relative; width:100%; height:570px; padding:24px; overflow:hidden; border:1px solid rgba(213,195,255,.5); border-radius:26px; color:#f8f4ff; background:radial-gradient(93% 54% at 77% 29%,rgba(93,56,216,.42),transparent 66%),radial-gradient(72% 31% at 26% 76%,rgba(28,102,169,.15),transparent 75%),linear-gradient(158deg,#0a0920 0%,#120d35 53%,#070713 100%); box-shadow:0 26px 64px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.23),inset 0 -42px 58px rgba(0,0,0,.22),0 0 0 4px rgba(157,109,255,.045); animation:poster-enter .54s cubic-bezier(.2,.82,.2,1) both; }
.poster-card:before,.poster-card:after,.poster-card .share-noise,.poster-card .share-orbits,.poster-card .share-art,.poster-card .share-crystal-art,.poster-card .share-crystal { display:none !important; }
.poster-stars { position:absolute; inset:0; pointer-events:none; opacity:.76; background-image:radial-gradient(circle at 15% 21%,#d9b0ff 0 1px,transparent 1.7px),radial-gradient(circle at 68% 12%,#9bdbff 0 .8px,transparent 1.6px),radial-gradient(circle at 88% 42%,#d2a7ff 0 1px,transparent 1.7px),radial-gradient(circle at 20% 63%,#b993ff 0 .8px,transparent 1.5px),radial-gradient(circle at 69% 60%,#c6eaff 0 .8px,transparent 1.5px),radial-gradient(circle at 43% 47%,#ddc1ff 0 .8px,transparent 1.5px); filter:drop-shadow(0 0 4px rgba(188,128,255,.75)); animation:poster-stars 8s ease-in-out infinite; }
.poster-orbit { position:absolute; z-index:0; left:50%; border:1px solid rgba(143,129,255,.29); border-radius:50%; pointer-events:none; transform-origin:center; }.poster-orbit:after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:#f4e6ff; box-shadow:0 0 10px 4px rgba(172,109,255,.76); }
.orbit-one { top:205px; width:390px; height:158px; transform:translateX(-50%) rotate(-17deg); animation:poster-orbit-one 18s linear infinite; }.orbit-one:after { top:17px; left:88px; }.orbit-two { top:195px; width:205px; height:270px; border-color:rgba(96,207,255,.29); transform:translateX(-50%) rotate(28deg); animation:poster-orbit-two 23s linear infinite; }.orbit-two:after { right:12px; bottom:54px; }
.poster-brand { position:relative; z-index:2; display:grid; gap:5px; color:#f3edff; }.poster-brand b { font:700 15px/1 "Noto Serif SC",serif; letter-spacing:.06em; }.poster-brand span { color:#afa5c7; font:8px "DM Mono",monospace; letter-spacing:.18em; }.poster-card .share-topnote { z-index:2; top:28px; right:24px; color:#c6bbdc; font:8px "DM Mono",monospace; letter-spacing:.1em; }
.poster-card .share-type { position:absolute; z-index:2; top:83px; left:24px; margin:0; color:#f7f2ff; font:700 68px/.83 "Space Grotesk",sans-serif; letter-spacing:-.09em; text-shadow:0 0 24px rgba(160,104,255,.32); }
.poster-card h3 { position:absolute; z-index:2; top:151px; left:24px; margin:0; color:#d3a4ff; font:700 25px/1.25 "Noto Serif SC",serif; letter-spacing:-.035em; text-shadow:0 5px 20px rgba(0,0,0,.26); }
.poster-card .share-hook { position:absolute; z-index:2; top:194px; left:24px; width:177px; margin:0; color:#e4ddee; font-size:12px; line-height:1.75; }
.poster-card .share-tags { position:absolute; z-index:3; top:279px; left:24px; display:flex; width:175px; gap:6px; margin:0; }.poster-card .share-tags span { padding:5px 7px; border:1px solid rgba(218,199,255,.28); border-radius:99px; color:#efe8fb; background:linear-gradient(135deg,rgba(104,68,177,.3),rgba(16,14,38,.48)); box-shadow:inset 0 1px rgba(255,255,255,.1); font-size:8px; letter-spacing:.025em; }
.poster-crystal { position:absolute; z-index:2; top:132px; right:19px; width:166px; height:236px; pointer-events:none; filter:drop-shadow(0 0 13px rgba(151,75,255,.42)); animation:poster-crystal-float 6.8s ease-in-out infinite; transform-origin:50% 54%; }.poster-crystal::before { content:""; position:absolute; z-index:-1; inset:26px 18px 20px; border-radius:50%; background:radial-gradient(ellipse,rgba(150,84,255,.44),transparent 68%); filter:blur(17px); animation:poster-crystal-aura 5s ease-in-out infinite; }.poster-crystal-svg { display:block; width:100%; height:100%; }
.poster-card .share-dims { position:absolute; z-index:3; right:24px; bottom:76px; left:24px; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; height:75px; padding:12px 0 8px; border-top:1px solid rgba(221,206,255,.25); border-bottom:1px solid rgba(221,206,255,.18); background:none; }.poster-card .share-dims span { position:relative; display:grid; gap:4px; min-width:0; padding:0 7px; border-left:1px solid rgba(212,198,255,.16); animation:metric-pop .45s both; }.poster-card .share-dims span:first-child { border-left:0; padding-left:0; }.poster-card .share-dims small { overflow:hidden; color:#afa6be; font:8px "DM Mono",monospace; white-space:nowrap; text-overflow:ellipsis; }.poster-card .share-dims b { color:#fbf8ff; font:600 18px/1 "DM Mono",monospace; }.poster-card .share-dims i { display:block; width:100%; height:2px; overflow:hidden; border-radius:9px; background:rgba(211,196,255,.18); }.poster-card .share-dims i:after { content:""; display:block; width:var(--value); height:100%; background:linear-gradient(90deg,#7adfff,#b05df7); box-shadow:0 0 8px rgba(166,92,255,.84); }
.poster-card .qr-mark { z-index:4; top:auto; right:auto; bottom:22px; left:24px; width:43px; height:43px; padding:3px; border-radius:7px; box-shadow:0 4px 12px rgba(0,0,0,.38),0 0 0 2px rgba(192,151,255,.14); }.poster-card .qr-mark:after { content:none; }.poster-card .qr-svg { width:100%; height:100%; }.qr-caption { position:absolute; z-index:3; bottom:28px; left:78px; margin:0; color:#bdb4cd; font-size:9px; letter-spacing:.04em; }.poster-card .share-footer { position:absolute; z-index:3; right:24px; bottom:28px; left:auto; margin:0; color:#857d9a; font-size:7px; white-space:nowrap; }
.poster-card + .secondary-button { position:relative; height:58px; margin:15px 0 0; padding:0 20px; border:1px solid rgba(211,192,255,.42); border-radius:17px; color:#f8f5ff; background:linear-gradient(110deg,rgba(147,75,226,.82),rgba(82,74,194,.8)); box-shadow:0 12px 25px rgba(53,30,132,.28),inset 0 1px rgba(255,255,255,.35),inset 0 -14px 24px rgba(34,23,111,.17); font-size:15px; }.poster-card + .secondary-button:before { content:""; position:absolute; inset:1px; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 42%); pointer-events:none; }.poster-card + .secondary-button span { font-size:21px; }.poster-card + .secondary-button:active { transform:translateY(2px) scale(.985); filter:brightness(.94); }.share-section .share-tip { margin:10px 0 0; color:#8e85a2; font-size:9px; }
@keyframes poster-stars { 0%,100% { opacity:.45; transform:translate3d(0,0,0); } 50% { opacity:1; transform:translate3d(3px,-4px,0); } } @keyframes poster-orbit-one { from { transform:translateX(-50%) rotate(-17deg); } to { transform:translateX(-50%) rotate(343deg); } } @keyframes poster-orbit-two { from { transform:translateX(-50%) rotate(28deg); } to { transform:translateX(-50%) rotate(-332deg); } } @keyframes poster-crystal-float { 0%,100% { transform:translateY(0) rotateY(-4deg); filter:drop-shadow(0 0 13px rgba(151,75,255,.42)); } 50% { transform:translateY(-6px) rotateY(5deg); filter:drop-shadow(0 0 17px rgba(169,93,255,.6)) saturate(1.08); } } @keyframes poster-crystal-aura { 0%,100% { transform:scale(.92); opacity:.56; } 50% { transform:scale(1.12); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .poster-card,.poster-stars,.poster-orbit,.poster-crystal,.poster-crystal:before { animation:none !important; } }

/* Restore the existing in-app preview exactly; the new poster work is export-only. */
.share-section { padding:8px 1px 36px; background:#050614; }
.share-section .share-tip { margin-top:13px; }

/* Keep the per-dimension ratio indicators in the original share-card data row. */
.share-card:not(.poster-card) .share-dims span { display:grid; grid-template-rows:auto auto 4px; gap:6px; }
.share-card:not(.poster-card) .share-dims span i { display:block; width:100%; height:4px; overflow:hidden; border-radius:99px; background:rgba(216,202,255,.18); box-shadow:inset 0 1px rgba(0,0,0,.28); }
.share-card:not(.poster-card) .share-dims span i:after { content:""; display:block; width:var(--value); height:100%; border-radius:inherit; background:linear-gradient(90deg,#74dfff,#b65cf7); box-shadow:0 0 8px rgba(160,88,255,.78); }
/* A live measurement point: the white terminal light is fixed to the actual ratio,
   while a restrained particle travels only across its completed segment. */
.share-card:not(.poster-card) .share-dims span { position:relative; overflow:visible; }
.share-card:not(.poster-card) .share-dims span::before { content:""; position:absolute; z-index:3; bottom:1px; left:0; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 5px 1px rgba(235,249,255,.9),0 0 11px 3px rgba(167,104,255,.72); animation:share-ratio-particle 3.8s cubic-bezier(.36,.02,.22,1) infinite; pointer-events:none; }
.share-card:not(.poster-card) .share-dims span::after { content:""; position:absolute; z-index:4; bottom:-1px; left:var(--value); width:5px; height:5px; border:1px solid rgba(255,255,255,.96); border-radius:50%; background:#fff; box-shadow:0 0 5px 1px rgba(255,255,255,.95),0 0 12px 4px rgba(189,113,255,.68); transform:translateX(-50%); animation:share-ratio-terminal 2.7s ease-in-out infinite; pointer-events:none; }
.share-card:not(.poster-card) .share-dims span i { position:relative; overflow:visible; }
.share-card:not(.poster-card) .share-dims span i::before { content:""; position:absolute; z-index:5; top:50%; left:var(--value); width:6px; height:6px; border:1px solid rgba(255,255,255,.98); border-radius:50%; background:#fff; box-shadow:0 0 5px 2px rgba(255,255,255,.96),0 0 15px 5px rgba(191,117,255,.74); transform:translate(-50%,-50%); animation:share-ratio-terminal 2.7s ease-in-out infinite; pointer-events:none; }
.share-card:not(.poster-card) .share-dims span::after { display:none; }
@keyframes share-ratio-particle { 0%,12% { left:0; opacity:0; transform:scale(.35); } 18% { opacity:.9; transform:scale(1); } 74% { left:var(--value); opacity:1; transform:scale(.72); } 83%,100% { left:var(--value); opacity:0; transform:scale(.25); } }
@keyframes share-ratio-terminal { 0%,100% { filter:brightness(.92); opacity:.78; transform:translateX(-50%) scale(.78); } 50% { filter:brightness(1.45); opacity:1; transform:translateX(-50%) scale(1.16); } }
@media (prefers-reduced-motion:reduce) { .share-card:not(.poster-card) .share-dims span::before,.share-card:not(.poster-card) .share-dims span::after,.share-card:not(.poster-card) .share-dims span i::before { animation:none; } }
@keyframes result-field-stars { 0%,100% { transform:translate3d(0,0,0) scale(.99); opacity:.57; } 50% { transform:translate3d(-7px,-5px,0) scale(1.04); opacity:1; } }
@keyframes result-orbit-drift { from { transform:rotate(-23deg) scale(1); } 50% { transform:rotate(4deg) scale(1.035); } to { transform:rotate(337deg) scale(1); } }
@keyframes crystal-aura-breathe { 0%,100% { transform:scale(.9); opacity:.43; } 50% { transform:scale(1.12); opacity:.84; } }
@media (prefers-reduced-motion:reduce) { .identity-panel::before,.identity-panel::after,.result-art::before { animation:none; } }