:root { --oa-ink:#ecfff8; --oa-muted:rgba(220,242,238,.68); --oa-line:rgba(183,255,230,.17); --oa-mint:#98ffd6; --oa-cyan:#62d8ff; }
body.oa-open { overflow:hidden; }
.oa-launch { width:100%; min-height:52px; margin-top:10px; padding:9px 12px; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:8px; border:1px solid rgba(159,255,220,.25); border-radius:16px; color:#eafff8; text-align:left; cursor:pointer; background:linear-gradient(115deg,rgba(38,114,91,.36),rgba(8,25,29,.62)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 12px 35px rgba(0,0,0,.18); transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.oa-launch:hover { transform:translateY(-2px); border-color:rgba(159,255,220,.55); background:linear-gradient(115deg,rgba(44,145,108,.46),rgba(8,31,35,.72)); }
.oa-launch>span { display:grid; place-items:center; width:30px; height:30px; border-radius:11px; color:#04231b; background:var(--oa-mint); box-shadow:0 0 24px rgba(152,255,214,.3); }
.oa-launch b { font-size:13px; letter-spacing:.04em; } .oa-launch small { color:rgba(222,255,245,.62); font-size:10px; }
.oa-overlay { position:fixed; inset:0; z-index:19000; padding:22px; display:grid; place-items:center; color:var(--oa-ink); background:radial-gradient(circle at 18% 8%,rgba(67,216,176,.18),transparent 35%),radial-gradient(circle at 86% 84%,rgba(55,145,255,.2),transparent 34%),rgba(0,7,10,.78); -webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%); }
.oa-overlay[hidden] { display:none; }
.oa-shell { position:relative; width:min(1080px,96vw); height:min(820px,calc(100vh - 44px)); height:min(820px,calc(100dvh - 44px)); overflow:hidden; border:1px solid rgba(205,255,239,.2); border-radius:34px; background:linear-gradient(145deg,rgba(12,37,34,.9),rgba(3,13,17,.96) 58%,rgba(8,28,34,.94)); box-shadow:inset 0 1px rgba(255,255,255,.14),inset 0 -1px rgba(104,220,255,.06),0 45px 120px rgba(0,0,0,.58); isolation:isolate; }
.oa-shell::before,.oa-shell::after { content:""; position:absolute; pointer-events:none; border-radius:50%; filter:blur(2px); z-index:-1; }
.oa-shell::before { width:430px; height:430px; left:-230px; top:-220px; background:radial-gradient(circle,rgba(116,255,210,.17),transparent 66%); }
.oa-shell::after { width:460px; height:460px; right:-280px; bottom:-230px; background:radial-gradient(circle,rgba(60,144,255,.18),transparent 68%); }
.oa-head { height:82px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--oa-line); background:rgba(4,18,19,.56); }
.oa-head h2 { margin:4px 0 0; font-size:22px; font-weight:590; letter-spacing:.02em; }
.oa-kicker { color:var(--oa-mint); font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; text-transform:uppercase; }
.oa-close,.oa-back,.oa-report-actions button { border:1px solid var(--oa-line); border-radius:999px; padding:9px 14px; color:var(--oa-ink); background:rgba(255,255,255,.055); cursor:pointer; }
.oa-close:hover,.oa-back:hover,.oa-report-actions button:hover { background:rgba(255,255,255,.11); }
.oa-stage { height:calc(100% - 82px); overflow:auto; padding:clamp(22px,4vw,52px); scrollbar-color:rgba(152,255,214,.35) transparent; }
.oa-intro { display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:28px; margin-bottom:26px; }
.oa-intro h3,.oa-consent h3,.oa-question h3,.oa-report h3 { margin:8px 0 0; max-width:760px; font-size:clamp(28px,4vw,48px); font-weight:540; line-height:1.08; letter-spacing:-.035em; }
.oa-intro p,.oa-purpose,.oa-question>p,.oa-report-hero p { margin:0; color:var(--oa-muted); font-size:15px; line-height:1.75; }
.oa-library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.oa-category-filter { display:flex; gap:7px; margin:0 0 18px; padding-bottom:4px; overflow-x:auto; scrollbar-width:none; }.oa-category-filter::-webkit-scrollbar{display:none}.oa-category-filter button{flex:none;border:0;border-radius:999px;padding:8px 12px;color:rgba(222,245,239,.48);background:rgba(255,255,255,.045);cursor:pointer;font-size:11px}.oa-category-filter button.is-active{color:#06241b;background:var(--oa-mint);box-shadow:0 8px 26px rgba(112,239,194,.16)}.oa-empty-category{grid-column:1/-1;padding:30px;color:var(--oa-muted);text-align:center}
.oa-card { position:relative; min-height:164px; padding:22px; display:grid; grid-template-columns:54px 1fr auto; gap:17px; align-items:start; color:var(--oa-ink); text-align:left; border:1px solid var(--oa-line); border-radius:24px; cursor:pointer; background:linear-gradient(140deg,rgba(255,255,255,.085),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.09); transition:transform .28s ease,border-color .28s ease,background .28s ease; }
.oa-card:hover { transform:translateY(-4px); border-color:rgba(152,255,214,.42); background:linear-gradient(140deg,rgba(83,176,143,.16),rgba(27,67,76,.06)); }
.oa-card-icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(152,255,214,.3); border-radius:18px; color:var(--oa-mint); font-size:25px; background:rgba(34,104,83,.18); box-shadow:inset 0 1px rgba(255,255,255,.11),0 12px 32px rgba(0,0,0,.17); }
.oa-card-icon.is-large { width:74px; height:74px; margin-bottom:22px; font-size:34px; border-radius:25px; }
.oa-card-copy { display:grid; gap:7px; } .oa-card-copy small { color:var(--oa-mint); font-size:10px; letter-spacing:.1em; } .oa-card-copy b { font-size:18px; font-weight:570; } .oa-card-copy em { color:var(--oa-muted); font-size:13px; font-style:normal; line-height:1.55; } .oa-card-copy span { color:rgba(185,219,214,.48); font-size:11px; } .oa-card>i { color:rgba(216,255,244,.58); font-size:11px; font-style:normal; }
.oa-boundary { margin-top:18px; padding:17px 20px; display:grid; grid-template-columns:auto 1fr; gap:14px; border:1px solid rgba(246,201,92,.18); border-radius:17px; background:rgba(246,201,92,.055); }
.oa-boundary b { color:#ffe49a; font-size:12px; } .oa-boundary p { margin:0; color:rgba(244,240,216,.66); font-size:12px; line-height:1.65; } .oa-boundary div { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; } .oa-boundary div span { padding:5px 9px; border-radius:99px; background:rgba(255,255,255,.055); color:rgba(239,251,246,.67); font-size:10px; }
.oa-consent { max-width:760px; margin:0 auto; padding:10px 0 44px; } .oa-consent .oa-back { float:right; } .oa-consent .oa-purpose { max-width:660px; margin-top:18px; }
.oa-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:28px 0 14px; } .oa-facts span { padding:16px; border:1px solid var(--oa-line); border-radius:17px; color:var(--oa-muted); background:rgba(255,255,255,.04); font-size:12px; } .oa-facts b { display:block; margin-bottom:4px; color:var(--oa-ink); font-size:17px; }
.oa-validity { padding:20px; border-radius:19px; background:rgba(80,142,255,.09); border:1px solid rgba(104,177,255,.17); } .oa-validity b { color:#a9d9ff; font-size:12px; } .oa-validity p { margin:7px 0 0; color:rgba(222,239,255,.7); line-height:1.65; font-size:13px; }
.oa-check { margin:18px 0; padding:16px; display:flex; gap:12px; border-radius:17px; background:rgba(255,255,255,.045); color:rgba(232,249,243,.78); font-size:13px; line-height:1.6; cursor:pointer; } .oa-check input { width:18px; height:18px; margin-top:2px; accent-color:#78eabc; }
.oa-guide-check{margin:-9px 0 18px;padding:14px 16px;display:flex;gap:12px;border-radius:17px;color:rgba(220,242,238,.68);background:rgba(98,216,255,.055);cursor:pointer;font-size:12px;line-height:1.55}.oa-guide-check input{width:18px;height:18px;accent-color:var(--oa-cyan)}.oa-guide-check b{display:block;color:#dff8ff;margin-bottom:2px}.oa-prohibited{margin-top:14px;padding:15px 18px;border-radius:17px;background:rgba(255,150,117,.055);border:1px solid rgba(255,174,145,.13)}.oa-prohibited>b{color:#ffc2ae;font-size:11px}.oa-prohibited>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.oa-prohibited span{padding:4px 7px;border-radius:999px;color:rgba(255,225,216,.66);background:rgba(255,255,255,.045);font-size:9px}.oa-guardian-warning{margin-top:14px;padding:15px 18px;border-radius:17px;border:1px solid rgba(255,203,103,.2);background:rgba(255,203,103,.07)}.oa-guardian-warning b{color:#ffe09a}.oa-guardian-warning p{margin:6px 0 0;color:rgba(255,239,204,.68);font-size:12px;line-height:1.6}
.oa-primary { min-height:44px; padding:0 19px; border:0; border-radius:999px; color:#052119!important; font-weight:750; cursor:pointer; background:linear-gradient(135deg,#a6ffdc,#67e7bb); box-shadow:0 12px 30px rgba(77,226,175,.2); } .oa-primary:disabled { opacity:.36; cursor:not-allowed; box-shadow:none; }
.oa-progress { max-width:820px; margin:0 auto 30px; } .oa-progress>div { display:flex; justify-content:space-between; color:var(--oa-muted); font-size:12px; } .oa-progress b { color:var(--oa-ink); } .oa-progress>i { display:block; height:3px; margin-top:11px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); } .oa-progress em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--oa-mint),var(--oa-cyan)); transition:width .5s ease; }
.oa-question { max-width:820px; margin:0 auto; } .oa-question header { display:flex; justify-content:space-between; gap:15px; } .oa-question header small { color:rgba(220,242,238,.44); } .oa-question h3 { margin-top:24px; font-size:clamp(28px,4vw,44px); } .oa-question>p { margin-top:14px; }
.oa-stimulus { margin:28px 0; padding:26px; border:1px solid rgba(122,228,255,.2); border-radius:24px; color:var(--stimulus-accent,#eefdfa); text-align:center; font:650 clamp(28px,5vw,52px)/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.11em; background:radial-gradient(circle at 50% 20%,rgba(91,211,255,.11),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.oa-options { margin-top:28px; } .oa-options.is-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.oa-option,.oa-scale { border:1px solid var(--oa-line); color:var(--oa-ink); cursor:pointer; background:rgba(255,255,255,.045); transition:transform .2s ease,border-color .2s ease,background .2s ease; } .oa-option:hover,.oa-scale:hover { transform:translateY(-2px); border-color:rgba(152,255,214,.48); background:rgba(91,182,153,.12); } .oa-option:disabled,.oa-scale:disabled { cursor:wait; } .oa-option.is-selected,.oa-scale.is-selected { border-color:var(--oa-mint); background:rgba(94,224,178,.2); }
.oa-option { min-height:72px; padding:13px; display:flex; align-items:center; gap:12px; border-radius:18px; text-align:left; } .oa-option>span { flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:11px; color:var(--oa-mint); background:rgba(152,255,214,.1); font-size:11px; } .oa-option b { font-size:14px; font-weight:540; }
.oa-options.is-scale { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; } .oa-scale { min-height:90px; padding:12px 7px; display:grid; place-items:center; gap:4px; border-radius:17px; } .oa-scale b { font-size:20px; color:var(--oa-mint); } .oa-scale span { color:var(--oa-muted); font-size:11px; } .oa-item-error { min-height:22px; color:#ffb9a8!important; font-size:12px!important; }
.oa-report { padding-bottom:30px; } .oa-report-hero { display:grid; grid-template-columns:1fr auto; align-items:start; gap:24px; } .oa-report-hero h3 { font-size:clamp(28px,4vw,46px); } .oa-report-hero p { max-width:700px; margin-top:14px; }
.oa-report-seal { width:82px; height:82px; display:grid; place-items:center; border:1px solid rgba(152,255,214,.32); border-radius:50%; color:var(--oa-mint); text-align:center; font-size:11px; line-height:1.45; box-shadow:inset 0 0 25px rgba(152,255,214,.09),0 0 35px rgba(76,219,168,.1); }
.oa-report-grid { display:grid; grid-template-columns:minmax(280px,.82fr) minmax(390px,1.18fr); gap:16px; margin-top:28px; } .oa-radar-wrap,.oa-results,.oa-next { border:1px solid var(--oa-line); border-radius:24px; background:rgba(255,255,255,.035); } .oa-radar-wrap { padding:16px; }
.oa-radar { display:block; width:min(100%,310px); margin:0 auto; overflow:visible; } .oa-radar-grid polygon,.oa-radar-grid line { fill:none; stroke:rgba(177,244,226,.13); stroke-width:1; } .oa-radar-value { fill:rgba(112,239,194,.2); stroke:#8bffd3; stroke-width:2; filter:drop-shadow(0 0 8px rgba(112,239,194,.28)); } .oa-radar text { fill:rgba(224,249,242,.68); font-size:8px; text-anchor:middle; dominant-baseline:middle; }
.oa-signal { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .oa-signal p { margin:0; padding:12px; border-radius:15px; background:rgba(255,255,255,.04); } .oa-signal small { display:block; margin-bottom:7px; color:var(--oa-muted); } .oa-signal span { display:inline-block; margin:2px; padding:4px 7px; border-radius:99px; color:#dffff3; background:rgba(98,213,177,.12); font-size:10px; }
.oa-results { padding:22px; } .oa-results h4,.oa-next h4 { margin:0 0 19px; font-size:16px; font-weight:570; } .oa-result-row { margin-bottom:18px; } .oa-result-row>div:first-child { display:flex; justify-content:space-between; gap:12px; font-size:12px; } .oa-result-row>div:first-child span { color:var(--oa-mint); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.oa-result-track { position:relative; height:7px; margin:9px 0 7px; border-radius:99px; background:rgba(255,255,255,.07); } .oa-result-track i { position:absolute; top:1px; height:5px; border-radius:99px; background:rgba(98,216,255,.25); } .oa-result-track em { position:absolute; top:-3px; width:2px; height:13px; border-radius:2px; background:var(--oa-mint); box-shadow:0 0 10px rgba(152,255,214,.6); } .oa-result-row small { color:rgba(214,239,232,.48); font-size:9px; }
.oa-next { margin-top:16px; padding:22px; } .oa-next h4 { margin-top:7px; } .oa-next ol { margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; list-style:none; } .oa-next li { min-height:94px; padding:13px; display:grid; grid-template-columns:auto 1fr; gap:10px; border-radius:16px; background:rgba(255,255,255,.04); color:var(--oa-muted); font-size:11px; line-height:1.6; } .oa-next li b { color:var(--oa-mint); font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.oa-narratives,.oa-course-match,.oa-career-map,.oa-audiences{margin-top:16px;padding:22px;border:1px solid var(--oa-line);border-radius:24px;background:rgba(255,255,255,.032)}.oa-narratives h4,.oa-course-match h4,.oa-career-map h4{margin:7px 0 17px}.oa-narratives>div,.oa-course-match>div,.oa-audiences{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.oa-narratives article,.oa-course-match article,.oa-audiences article{padding:14px;border-radius:17px;background:rgba(255,255,255,.04)}.oa-narratives small,.oa-course-match small,.oa-audiences small{color:var(--oa-mint);font:650 9px ui-monospace,SFMono-Regular,Menlo,monospace}.oa-narratives b,.oa-course-match b{display:block;margin:6px 0;font-size:13px}.oa-narratives p,.oa-course-match p,.oa-audiences p{margin:0;color:var(--oa-muted);font-size:10px;line-height:1.6}.oa-narratives article>span{display:block;margin-top:9px;color:rgba(162,220,255,.64);font-size:9px;line-height:1.5}.oa-career-map{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:20px;background:radial-gradient(circle at 90% 0,rgba(98,216,255,.12),rgba(255,255,255,.025))}.oa-career-map p{color:var(--oa-muted);font-size:11px;line-height:1.6}.oa-career-map>div:last-child{display:flex;flex-wrap:wrap;gap:7px}.oa-career-map>div:last-child span{padding:8px 11px;border-radius:999px;color:#ddf9ff;background:rgba(98,216,255,.09);border:1px solid rgba(98,216,255,.12);font-size:10px}
.oa-report-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.oa-loading,.oa-error { min-height:440px; display:grid; place-content:center; justify-items:center; text-align:center; } .oa-loading i { width:66px; height:66px; border:1px solid rgba(152,255,214,.14); border-top-color:var(--oa-mint); border-radius:50%; animation:oa-spin 1.2s linear infinite; box-shadow:inset 0 0 20px rgba(152,255,214,.06); } .oa-loading p,.oa-error h3 { margin:20px 0 3px; font-size:17px; } .oa-loading small,.oa-error p { color:var(--oa-muted); } .oa-error>span { width:56px; height:56px; display:grid; place-items:center; border:1px solid rgba(255,157,132,.3); border-radius:50%; color:#ffb19e; font-size:24px; }
@keyframes oa-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .oa-overlay { padding:0; place-items:stretch; } .oa-shell { width:100%; height:100vh; height:100dvh; border:0; border-radius:0; } .oa-head { height:68px; padding:0 17px; } .oa-head h2 { font-size:18px; } .oa-stage { height:calc(100% - 68px); padding:22px 16px 40px; } .oa-intro,.oa-report-grid,.oa-career-map { grid-template-columns:1fr; } .oa-intro { align-items:start; gap:12px; } .oa-intro h3,.oa-consent h3,.oa-question h3,.oa-report h3 { font-size:30px; } .oa-library { grid-template-columns:1fr; } .oa-card { min-height:145px; padding:17px; grid-template-columns:44px 1fr; } .oa-card-icon { width:42px; height:42px; border-radius:15px; font-size:20px; } .oa-card>i { display:none; } .oa-boundary { grid-template-columns:1fr; } .oa-facts { grid-template-columns:1fr; } .oa-facts span { display:flex; align-items:baseline; gap:7px; padding:12px; } .oa-facts b { display:inline; } .oa-question header { display:grid; } .oa-options.is-grid { grid-template-columns:1fr; } .oa-options.is-scale { display:flex; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; } .oa-scale { flex:0 0 104px; scroll-snap-align:start; } .oa-report-hero { grid-template-columns:1fr; } .oa-report-seal { width:67px; height:67px; } .oa-report-grid { grid-template-columns:1fr; } .oa-next ol,.oa-narratives>div,.oa-course-match>div,.oa-audiences { grid-template-columns:1fr; } .oa-report-actions { display:grid; grid-template-columns:1fr 1fr; } .oa-report-actions .oa-primary { grid-column:1/-1; } }
@media print{body>*:not(.oa-overlay){display:none!important}.oa-overlay{position:static!important;padding:0!important;background:#fff!important;color:#111!important}.oa-shell{width:100%!important;height:auto!important;border:0!important;box-shadow:none!important;background:#fff!important}.oa-head,.oa-report-actions{display:none!important}.oa-stage{height:auto!important;overflow:visible!important;padding:20px!important}.oa-report,.oa-report *{color:#111!important;text-shadow:none!important;box-shadow:none!important}.oa-radar-value{fill:rgba(0,140,110,.16)!important;stroke:#087f68!important}}
@media (prefers-reduced-motion:reduce) { .oa-loading i { animation-duration:2.5s; } .oa-card,.oa-launch,.oa-option,.oa-scale { transition:none; } }