:root{--bg:#0b1220;--panel:#111827;--line:#263244;--text:#e5e7eb;--muted:#9ca3af;--yellow:#facc15;--blue:#60a5fa;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,"Segoe UI",system-ui,Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
header{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;text-decoration:none;color:var(--text)}
.logo span{color:var(--yellow)}
a{color:var(--blue)}
.btn{display:inline-block;background:var(--yellow);color:#111827;border:0;border-radius:12px;padding:14px 22px;font-weight:800;text-decoration:none;cursor:pointer;font-size:16px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.hero{padding:56px 0 40px;text-align:center}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.08;margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p{color:var(--muted);font-size:19px;max-width:620px;margin:0 auto 26px}
.demo{margin:36px auto 0;max-width:720px;background:#000;border-radius:16px;padding:60px 20px 26px;border:1px solid var(--line);text-align:center}
.demo .a{font-size:24px;font-weight:700}.demo .a u{text-decoration:none;background:#2563eb;border-radius:4px;padding:0 3px}
.demo .b{font-size:19px;color:var(--yellow);margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:30px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.card h3{margin:0 0 6px;font-size:17px}.card p{margin:0;color:var(--muted);font-size:15px}
.price{text-align:center;padding:40px 0}
.price .box{display:inline-block;background:var(--panel);border:2px solid var(--yellow);border-radius:20px;padding:30px 40px}
.price .n{font-size:48px;font-weight:800}.price small{display:block;color:var(--muted);margin:4px 0 18px}
.faq{padding:20px 0 40px}.faq details{border-bottom:1px solid var(--line);padding:14px 0}.faq summary{cursor:pointer;font-weight:700}.faq p{color:var(--muted);margin:8px 0 0}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--muted);font-size:14px;display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted)}
.doc{max-width:760px;padding:20px 0 60px}.doc h1{font-size:32px}.doc h2{font-size:20px;margin-top:28px}.doc p,.doc li{color:#cbd5e1}
.keybox{font-family:ui-monospace,Menlo,monospace;font-size:15px;word-break:break-all;background:#000;border:1px solid var(--yellow);border-radius:12px;padding:16px;margin:14px 0}
.muted{color:var(--muted)}.err{color:#f87171}
.ok{color:#86efac;font-weight:700}
[hidden]{display:none!important}

/* ---------- liquid glass ---------- */
html{background:#070b16}
body{background:transparent;position:relative}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 15% 10%,rgba(99,102,241,.5),transparent 70%),radial-gradient(35% 30% at 90% 20%,rgba(250,204,21,.3),transparent 70%),
  radial-gradient(45% 40% at 70% 85%,rgba(20,184,166,.38),transparent 70%),radial-gradient(40% 35% at 10% 90%,rgba(236,72,153,.28),transparent 70%),#070b16;
  filter:blur(30px);animation:zsDrift 26s ease-in-out infinite alternate}
@keyframes zsDrift{to{transform:translate3d(3%,-2%,0) rotate(6deg) scale(1.05)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
.card,.price .box,.demo,.faq details,.keybox,input,header{
  background:linear-gradient(140deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 45%,rgba(255,255,255,.08))!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.06),0 12px 34px rgba(0,0,0,.35)}
.card,.price .box,.demo{border-radius:24px!important}
.faq details{border-radius:18px;padding:14px 18px!important;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.2)!important}
header{position:sticky;top:0;z-index:5;border-radius:0 0 22px 22px;padding:16px 20px!important;border-top:0!important}
.price .box{border-color:rgba(250,204,21,.55)!important}
.btn{position:relative;overflow:hidden;border-radius:999px!important;
  background:linear-gradient(140deg,rgba(253,224,71,.96),rgba(234,179,8,.84))!important;border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 6px rgba(161,98,7,.25),0 10px 26px rgba(234,179,8,.3);transition:transform .15s}
.btn::after{content:"";position:absolute;left:8%;right:8%;top:2px;height:45%;border-radius:999px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:linear-gradient(140deg,rgba(255,255,255,.2),rgba(255,255,255,.06))!important;color:var(--text)!important;border:1px solid rgba(255,255,255,.24)!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px rgba(0,0,0,.3)}
.btn.ghost::after{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0))}
footer{border-top:1px solid rgba(255,255,255,.14)}

.hdr{display:flex;align-items:center;gap:10px}
#lang{appearance:none;-webkit-appearance:none;background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,.06));color:var(--text);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:10px 34px 10px 16px;font:inherit;font-size:15px;cursor:pointer;
  background-image:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,.06)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e5e7eb' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 0,right 14px center;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
#lang option{background:#0f172a;color:#e5e7eb}
@media (max-width:560px){.hdr .btn{display:none}}

/* ---------- first visit: tear up the German worksheet ---------- */
.ws-lock,.ws-lock body{overflow:hidden}
.ws{position:fixed;inset:0;z-index:100;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
.ws-piece{position:absolute;inset:0;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.45)) drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.ws-flying{transition:transform 1s cubic-bezier(.45,0,.9,.5),opacity .45s .5s}
.ws-paper{position:absolute;inset:0;color:#1f2937;font-family:Georgia,"Times New Roman",serif;
  background:
    linear-gradient(90deg,transparent 0 calc(8vw - 1px),rgba(239,68,68,.55) calc(8vw - 1px) calc(8vw + 1px),transparent calc(8vw + 1px)),
    repeating-linear-gradient(180deg,transparent 0 35px,rgba(59,130,246,.22) 35px 36px),
    radial-gradient(120% 90% at 30% 20%,#fffdf6,#f6efdc)}
.ws-in{max-width:760px;margin:0 auto;padding:clamp(92px,13vh,120px) max(10vw,28px) 40px max(12vw,40px);height:100%;display:flex;flex-direction:column}
.ws-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:600 13px/1.4 -apple-system,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}
.ws-line{display:inline-block;width:110px;border-bottom:1.5px solid #9ca3af;vertical-align:bottom}
.ws-title{font-family:"Bradley Hand","Segoe Print","Comic Sans MS","Marker Felt",cursive;font-size:clamp(40px,8vw,78px);line-height:1.05;margin:clamp(18px,5vh,44px) 0 6px;color:#111827;transform:rotate(-2deg)}
.ws-sub{display:inline-block;align-self:flex-start;font:700 clamp(18px,2.6vw,26px)/1.3 -apple-system,system-ui,sans-serif;color:#facc15;background:#111827;border-radius:8px;padding:4px 12px;transform:rotate(-2deg)}
.ws-ex{margin:clamp(18px,4vh,36px) 0 0;padding-left:22px;font-size:clamp(16px,2.1vw,21px);line-height:36px}
.ws-ex em{color:#6b7280;font-size:.85em}
.ws-gap{display:inline-block;min-width:54px;color:transparent;border-bottom:2px dotted #6b7280}
.ws-red{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;color:#dc2626;font-weight:700;margin-left:12px;display:inline-block;transform:rotate(-6deg)}
.ws-cta{margin-top:auto;font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:clamp(20px,2.8vw,28px);color:#111827;text-align:center}
.ws-drag @keyframes wsNudge{0%,100%{margin-top:0}50%{margin-top:10px}}
.ws-skip{position:absolute;right:16px;bottom:16px;z-index:2;background:rgba(17,24,39,.75);color:#e5e7eb;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 16px;font:600 14px -apple-system,system-ui,sans-serif;cursor:pointer}
.ws-confetti{position:fixed;inset:0;pointer-events:none;z-index:101;overflow:hidden}
.ws-confetti span{position:absolute;top:-40px;font:800 20px -apple-system,system-ui,sans-serif;animation:wsFall linear forwards}
@keyframes wsFall{to{transform:translateY(110vh) rotate(var(--r))}}
.ws-done{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:800 clamp(34px,6vw,60px) -apple-system,system-ui,sans-serif;color:#facc15;text-shadow:0 6px 30px rgba(0,0,0,.6);animation:wsPop 2.6s ease forwards}
@keyframes wsPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.ws-hint{animation:none}.ws-flying{transition:opacity .3s}}
.ws-pre .wrap{visibility:hidden}
@media (max-width:560px){.ws-in{padding:96px 22px 30px 40px}.ws-paper{background:
    linear-gradient(90deg,transparent 0 27px,rgba(239,68,68,.55) 27px 29px,transparent 29px),
    repeating-linear-gradient(180deg,transparent 0 31px,rgba(59,130,246,.22) 31px 32px),
    radial-gradient(120% 90% at 30% 20%,#fffdf6,#f6efdc)}
  .ws-ex{font-size:15px;line-height:32px;padding-left:18px}.ws-ex li{margin-bottom:6px;line-height:24px}.ws-gap{min-width:30px}.ws-red{margin-left:6px}.ws-ex em{display:block;font-size:13px;line-height:18px}}
.ws-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:8px;background:#facc15;color:#111827;border:0;border-radius:999px;padding:11px 20px;font:800 15px -apple-system,system-ui,sans-serif;box-shadow:0 10px 26px rgba(0,0,0,.35);cursor:pointer;white-space:nowrap;animation:wsBob 1.8s ease-in-out infinite}
.ws-hint span{font-size:20px}
@keyframes wsBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
.ws-drag .ws-hint{opacity:.35}
@media (max-width:560px){.ws-hint{bottom:70px;font-size:14px;padding:10px 16px}}
.ws-fiber{position:absolute;inset:0;background:repeating-linear-gradient(115deg,#fffefa 0 2px,#efe7d2 2px 3px,#fffdf6 3px 6px)}
.ws-canvas{position:absolute;inset:0;width:100%;height:100%;filter:url(#zsgoo) drop-shadow(0 0 2px rgba(0,0,0,.35)) drop-shadow(0 12px 26px rgba(0,0,0,.45))}
.ws{cursor:crosshair}
.ws-gone{transition:opacity .6s ease;opacity:0}
.ws-hint{gap:10px}
.ws-hint b{font-weight:800}
.ws-meter{display:inline-block;width:70px;height:7px;border-radius:9px;background:rgba(17,24,39,.2);overflow:hidden}
.ws-meter i{display:block;height:100%;width:0;background:#111827;border-radius:9px;transition:width .15s}
.ws-pct{font-style:normal;font-size:13px;min-width:34px;text-align:right}
.ws-scrap{position:absolute;z-index:1;pointer-events:none;background:linear-gradient(135deg,#fffdf6,#efe5cc);box-shadow:0 1px 2px rgba(0,0,0,.25);animation:wsScrap 1.1s cubic-bezier(.3,.6,.6,1) forwards}
@keyframes wsScrap{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* ---------- background lights (as on rashmitachauhan.dev) ---------- */
.wrap{position:relative;z-index:1}
.zs-fluid{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.65;mix-blend-mode:screen}
.zs-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.zs-orb{position:absolute;border-radius:50%;transform:translate(-50%,-50%);filter:blur(88px);will-change:transform,opacity;animation:zsOrb 2.4s ease-in-out infinite}
@keyframes zsOrb{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.32}83.3%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.32);opacity:.68}87.5%{transform:translate(calc(-50% + var(--dx)*.6),calc(-50% + var(--dy)*.6)) scale(1.35);opacity:.7}}
.zs-spark{position:absolute;bottom:-8px;border-radius:999px;animation:zsSpark var(--p-dur,7s) var(--p-delay,0s) infinite linear;will-change:transform,opacity}
@keyframes zsSpark{0%{transform:translate(0,0);opacity:0}8%{opacity:1}88%{opacity:.7}100%{transform:translate(var(--p-drift,0),-110vh);opacity:0}}
.zs-streak{position:absolute;left:0;width:100%;height:1.5px;filter:blur(3px);animation:zsStreak var(--s-dur,4s) var(--s-delay,0s) infinite ease-in-out;will-change:transform,opacity}
@keyframes zsStreak{0%{opacity:0;transform:translateX(-60%) rotate(var(--s-angle,-12deg))}15%{opacity:1}80%{opacity:.6}100%{opacity:0;transform:translateX(60%) rotate(var(--s-angle,-12deg))}}
.ws-drips{filter:url(#zsgoo) drop-shadow(0 6px 10px rgba(0,0,0,.35));pointer-events:none}
.ws-canvas{transform-origin:50% 0}
.ws-melt .ws-canvas{transition:transform .8s cubic-bezier(.55,0,.9,.4);transform:translateY(105vh) scaleY(1.35)}
.ws-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.ws-cloth{cursor:grab}.ws-cloth.ws-drag{cursor:grabbing}

/* ---------- guide video + "where is it" steps ---------- */
.how,.find{padding:34px 0 8px;text-align:center}
.how h2,.find h2{font-size:clamp(24px,4vw,34px);line-height:1.15;margin:0 0 8px}
.how>p,.find>p{max-width:620px;margin:0 auto 22px;font-size:17px}
#guide{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:24px;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;text-align:left}
.steps li{position:relative;border-radius:24px;padding:16px 18px 18px;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(140deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 45%,rgba(255,255,255,.08));-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 12px 34px rgba(0,0,0,.35)}
.steps li>b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:#111827;font-size:16px;margin:14px 0 6px}
.steps li>p{margin:0;font-size:16px;color:#d1d5db}.steps strong{color:#fff}
.pic{height:104px;border-radius:14px;background:#17181b;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;padding:0 12px;overflow:hidden}
.tb{display:flex;align-items:center;gap:8px;width:100%;height:46px;border-radius:12px;background:#35363a;padding:0 10px}
.tb-url{flex:1;min-width:20px;height:28px;border-radius:14px;background:#202124}
.tb-i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tb-i svg{width:22px;height:22px;fill:#c4c7c5}.tb-i img{border-radius:5px;display:block}
.tb-i.hl{box-shadow:0 0 0 3px var(--yellow),0 0 0 9px rgba(250,204,21,.22);animation:zsPulse 1.8s ease-in-out infinite}
.tb-i.hl svg{fill:#fff}
@keyframes zsPulse{50%{box-shadow:0 0 0 3px var(--yellow),0 0 0 15px rgba(250,204,21,0)}}
@media (prefers-reduced-motion:reduce){.tb-i.hl{animation:none}}
.tb-av{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(140deg,#8ab4f8,#c58af9)}
.tb-dots{flex:none;width:4px;height:4px;border-radius:50%;background:#c4c7c5;box-shadow:0 -7px 0 #c4c7c5,0 7px 0 #c4c7c5;margin:0 6px 0 4px}
.mn{width:100%;max-width:260px;border-radius:12px;background:#2b2c30;border:1px solid rgba(255,255,255,.14);padding:8px 10px;color:#e8eaed;font-size:14px}
.mn-h{font-weight:700;font-size:13px;color:#9aa0a6;margin-bottom:4px}
.mn-r{display:flex;align-items:center;gap:8px}.mn-r img{border-radius:5px}.mn-r span:nth-child(2){flex:1;font-weight:600}
.tip{font-size:14px!important;max-width:680px!important;margin-top:18px!important}
.how .credit{font-size:12px!important;margin:10px auto 0!important;opacity:.8}.credit a{color:inherit}