:root{
  --bg:#070b16; --card:rgba(255,255,255,.08); --card2:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.14); --text:#f8fafc; --muted:#aab4cc;
  --gold:#f7d774; --gold2:#f4cf6a; --amber:#eba64d; --pink:#f4a5c0; --blue:#93c5fd; --green:#86efac;
  --shadow:0 28px 90px rgba(0,0,0,.4); --radius:26px;
  --grad:linear-gradient(135deg,#f7d774,#eba64d);
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:var(--sans);color:var(--text);line-height:1.6;overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 8%,rgba(247,215,116,.18),transparent 32%),
    radial-gradient(circle at 88% 4%,rgba(235,166,77,.14),transparent 34%),
    radial-gradient(circle at 45% 92%,rgba(147,197,253,.12),transparent 34%),
    linear-gradient(135deg,#050712 0%,#0c1428 48%,#050610 100%);
  background-attachment:fixed}
a{color:inherit}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E")}
.wrap{width:min(1180px,calc(100% - 30px));margin:0 auto;padding:26px 0 54px;position:relative;z-index:1}

header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:0 18px 52px rgba(247,215,116,.16)}
.logo img{width:100%;height:100%;object-fit:cover}
.brand h1{margin:0;font-family:var(--disp);font-size:clamp(24px,4vw,38px);letter-spacing:-1px;line-height:.95}
.brand p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.brand p b{color:var(--gold);font-weight:800}
.hbtns{display:flex;align-items:center;gap:8px}
.pill{padding:11px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--muted);backdrop-filter:blur(18px);font-size:13px;white-space:nowrap}
.installbtn{cursor:pointer;color:var(--gold);border-color:rgba(247,215,116,.4);font-weight:800}
.installbtn:hover{background:rgba(247,215,116,.12)}

.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:stretch}
.panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055));
  border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(22px);overflow:hidden}
.intro{padding:34px;position:relative}
.intro:after{content:"";position:absolute;width:320px;height:320px;right:-150px;top:-150px;
  background:radial-gradient(circle,rgba(247,215,116,.22),transparent 66%);pointer-events:none}
.kicker{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;margin-bottom:14px}
.intro h2{margin:0 0 15px;font-family:var(--disp);font-size:clamp(34px,6.4vw,66px);line-height:.9;letter-spacing:-2px}
.intro h2 span{color:var(--gold)}
.intro p{max-width:680px;margin:0 0 22px;color:var(--muted);font-size:16.5px;line-height:1.7}
.intro p b{color:#e9edf6;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.stat{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:18px;padding:16px}
.stat b{display:block;font-size:26px;letter-spacing:-1px}
.stat span{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.visual{padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:380px}
.palace-card{border:1px solid rgba(247,215,116,.22);border-radius:24px;padding:22px;
  background:radial-gradient(circle at 50% 0%,rgba(247,215,116,.15),transparent 56%),rgba(255,255,255,.055)}
.palace-icon{width:132px;height:132px;border-radius:30px;overflow:hidden;margin:0 auto 16px;
  border:1px solid rgba(247,215,116,.25);box-shadow:0 20px 60px rgba(247,215,116,.18)}
.palace-icon img{width:100%;height:100%;object-fit:cover}
.palace-card h3{text-align:center;margin:0 0 10px;font-family:var(--disp);font-size:27px;letter-spacing:-.6px}
.palace-card p{text-align:center;color:var(--muted);line-height:1.55;margin:0}
.route-preview{margin-top:18px;display:grid;gap:10px}
.route-mini{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.dot{width:10px;height:10px;flex:none;border-radius:999px;background:var(--gold);box-shadow:0 0 0 5px rgba(247,215,116,.1)}

.app{margin-top:22px;display:grid;grid-template-columns:.96fr 1.04fr;gap:22px}
.form,.result{padding:24px}
label{display:block;font-size:13px;font-weight:800;color:#e5e7eb;margin:18px 0 8px}
label:first-child{margin-top:0}
.hintlbl{font-weight:600;color:var(--muted);font-size:12px}
textarea,input,select{width:100%;border:1px solid var(--line);outline:0;border-radius:16px;padding:14px 15px;color:var(--text);background:rgba(3,7,18,.48);font:inherit;transition:border .2s,box-shadow .2s,background .2s}
textarea{min-height:156px;resize:vertical;line-height:1.5}
textarea:focus,input:focus,select:focus{border-color:rgba(247,215,116,.58);box-shadow:0 0 0 4px rgba(247,215,116,.08);background:rgba(3,7,18,.68)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{cursor:pointer;user-select:none;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--muted);padding:10px 12px;border-radius:999px;font-size:13px;transition:.2s}
.chip input{display:none}
.chip:has(input:checked){color:#121212;border-color:rgba(247,215,116,.78);background:var(--gold);font-weight:800}
.slider-box{padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.045)}
.slider-top{display:flex;align-items:center;justify-content:space-between;gap:9px;color:var(--muted);font-size:13px;margin-bottom:8px}
.slider-top strong{color:var(--gold)}
input[type="range"]{padding:0;border:0;background:transparent;accent-color:var(--gold)}
.btns{display:grid;grid-template-columns:1fr .72fr;gap:10px;margin-top:20px}
button{border:0;border-radius:16px;cursor:pointer;padding:14px 16px;color:#151208;font-weight:900;font-size:15px;background:var(--grad);box-shadow:0 18px 46px rgba(247,215,116,.16);transition:transform .16s,filter .16s;font-family:inherit}
button:hover{transform:translateY(-1px);filter:brightness(1.05)}
button:active{transform:translateY(1px)}
.secondary{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line);box-shadow:none}
.formnote{margin:14px 0 0;color:var(--muted);font-size:12px;text-align:center}

.result{min-height:720px}
.empty{min-height:650px;height:100%;display:grid;place-items:center;text-align:center;border:1px dashed rgba(255,255,255,.18);border-radius:24px;padding:32px;color:var(--muted);line-height:1.6}
.empty strong{display:block;font-family:var(--disp);color:var(--text);font-size:26px;letter-spacing:-.6px;margin-bottom:8px}

.summary{border:1px solid rgba(247,215,116,.24);border-radius:24px;padding:22px;margin-bottom:16px;
  background:radial-gradient(circle at 16% 0%,rgba(247,215,116,.17),transparent 56%),rgba(255,255,255,.055)}
.summary small{display:block;color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:7px}
.summary h2{margin:0 0 8px;font-family:var(--disp);font-size:clamp(26px,4vw,40px);letter-spacing:-1.2px;line-height:1}
.summary p{color:var(--muted);margin:0;line-height:1.6}
.summary p b{color:#e9edf6}

.cards{display:grid;gap:13px}
.card{border:1px solid var(--line);border-radius:20px;padding:18px;background:rgba(255,255,255,.052)}
.card h3{margin:0 0 11px;font-size:16px;letter-spacing:-.3px;display:flex;align-items:center;gap:9px}
.card p,.card li{color:var(--muted);font-size:14px;line-height:1.62}
.card p{margin:0}
.card ul{margin:0;padding-left:19px}
.route{display:grid;gap:11px}
.station{display:grid;grid-template-columns:auto 1fr;gap:12px;border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:13px;background:rgba(0,0,0,.16)}
.badge{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--grad);color:#101010;font-size:22px;font-weight:900}
.station b{display:block;margin-bottom:4px;letter-spacing:-.2px;color:var(--text)}
.station span{display:block;color:var(--muted);font-size:13px;line-height:1.55}
.flashcards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.flash{min-height:112px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.17);border-radius:18px;padding:14px;cursor:pointer;overflow:hidden}
.flash:before{content:"Tap to reveal";color:var(--gold);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.flash b{display:block;margin:8px 0 0;line-height:1.35;color:var(--text)}
.flash span{display:none;color:var(--muted);font-size:13px;line-height:1.5;margin-top:8px}
.flash.revealed{background:rgba(247,215,116,.1);border-color:rgba(247,215,116,.25)}
.flash.revealed:before{content:"Answer"}
.flash.revealed span{display:block}
.testbtn{margin-top:2px}
.sharebar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sharebar button{padding:11px 13px;border-radius:999px;font-size:13px}

.history{margin-top:22px;padding:20px}
.history h3{margin:0 0 12px;font-family:var(--disp);letter-spacing:-.3px}
.history-list{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.history-item{min-width:235px;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:18px;padding:14px;color:var(--muted);font-size:13px;cursor:pointer;transition:.2s}
.history-item:hover{border-color:rgba(247,215,116,.4)}
.history-item b{display:block;color:var(--text);margin-bottom:5px}

.about{margin-top:22px;padding:30px}
.about h2{margin:0 0 12px;font-family:var(--disp);font-size:clamp(22px,3.4vw,30px);letter-spacing:-.8px}
.about h3{margin:24px 0 8px;font-size:18px;letter-spacing:-.3px}
.about h4{margin:0 0 6px;font-size:15px}
.about p{color:var(--muted);line-height:1.75;margin:0 0 8px}
.ablist{color:var(--muted);line-height:1.9;padding-left:20px;margin:0}
.ablist b{color:#e9edf6}
.faq{border-top:1px solid var(--line);padding:14px 0}
.faq p{margin:0}

footer{text-align:center;color:var(--muted);font-size:13px;line-height:1.7;margin-top:26px}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{text-decoration:underline}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;z-index:30;
  border:1px solid var(--line);background:rgba(15,23,42,.94);color:var(--text);padding:12px 16px;border-radius:999px;backdrop-filter:blur(18px);transition:.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* recall test modal */
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:18px;
  background:rgba(4,6,14,.72);backdrop-filter:blur(8px)}
.modal[hidden]{display:none}
.test-sheet{width:min(520px,100%);border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#111a30,#0b1122);box-shadow:var(--shadow);overflow:hidden}
.test-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.test-head b{font-family:var(--disp);font-size:18px}
.test-head .x{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line);font-weight:700;padding:0}
.test-body{padding:22px 20px 24px}
.test-place{font-family:var(--disp);font-size:clamp(24px,5vw,34px);letter-spacing:-1px;margin:6px 0 14px;line-height:1.05}
.test-q{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:1.4px;font-weight:800;color:var(--gold)}
.test-ans{border:1px solid rgba(247,215,116,.25);background:rgba(247,215,116,.08);border-radius:16px;padding:16px;margin:6px 0 16px;line-height:1.5;color:var(--text)}
.test-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.test-actions .full{grid-column:1/-1}
.miss{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line);box-shadow:none}
.test-score{text-align:center;padding:8px 0}
.test-score .big{font-family:var(--disp);font-size:54px;letter-spacing:-2px;color:var(--gold)}
.test-score p{color:var(--muted);margin:6px 0 16px}
.test-prog{height:7px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-bottom:18px}
.test-prog span{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .3s}

@media print{
  body{background:#fff;color:#000}
  .grain,header,.form,.history,footer,.sharebar,.hero,.testbtn,.modal{display:none!important}
  .app{display:block;margin:0}
  .panel,.card,.summary,.station{box-shadow:none;background:#fff;color:#000;border-color:#ddd}
  .card p,.card li,.station span,.summary p,.badge{color:#333}
}
@media(max-width:860px){
  header,.hero,.app,.row,.stats,.btns,.flashcards{grid-template-columns:1fr}
  header{align-items:flex-start;flex-direction:column;gap:14px}
  .intro,.form,.result,.about{padding:20px}
  .visual{min-height:auto}
  .result{min-height:auto}
  .test-actions{grid-template-columns:1fr}
}