@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Gloria+Hallelujah&display=swap');

:root { --paper:#f7f2e6; --paper-white:#fffdf5; --paper-edge:#dfd4bc; --tiffany:#84c4a9; --eggplant:#4a173f; --yellow:#fff28c; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; min-width:320px; color:var(--eggplant); font-family:'Gloria Hallelujah', cursive; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.page-shell { min-height:100svh; overflow:hidden; padding:clamp(18px,2.5vw,40px) clamp(18px,4vw,74px) 22px; background:radial-gradient(circle at 30% 10%,rgb(250 245 233 / 78%),transparent 29%),radial-gradient(circle at 80% 90%,rgb(229 220 199 / 42%),transparent 32%),var(--paper); }
.topbar { display:grid; grid-template-columns:350px 1fr minmax(245px,340px); align-items:start; gap:30px; position:relative; z-index:3; }
.brand { width:clamp(118px,12vw,166px); display:block; margin:5px 0 0 10px; }
.brand img { display:block; width:100%; height:auto; }
h1,.node span,.auth-link,.search input,dialog h2,dialog h3,.pilot-strip strong { font-family:'Chewy','Arial Rounded MT Bold',sans-serif; font-weight:400; }
h1 { margin:5px 0 0; justify-self:center; color:var(--tiffany); font-size:clamp(47px,6vw,90px); line-height:.94; -webkit-text-stroke:2px var(--eggplant); paint-order:stroke fill; transform:rotate(-1.2deg) skewX(-2deg); white-space:nowrap; }
.utility { position:relative; display:grid; gap:11px; padding-top:6px; }.utility-actions { display:flex; flex-wrap:wrap; gap:12px; }
.search { display:flex; align-items:center; gap:9px; min-width:0; padding:4px 6px 14px; transform:rotate(-.8deg); position:relative; }.search::after,.auth-link::after { content:''; position:absolute; left:4px; right:1px; bottom:4px; height:7px; background:var(--eggplant); transform:rotate(.4deg); }.magnifier { width:23px; height:23px; border:5px solid var(--eggplant); border-radius:50%; flex:0 0 auto; position:relative; }.magnifier::after { content:''; position:absolute; width:13px; height:5px; background:var(--eggplant); border-radius:20px; right:-11px; bottom:-6px; transform:rotate(45deg); }.search input { border:0; outline:0; color:var(--tiffany); background:transparent; width:100%; font-size:clamp(20px,2vw,27px); line-height:1; -webkit-text-stroke:.65px var(--eggplant); paint-order:stroke fill; }.search input::placeholder { color:var(--tiffany); opacity:1; }.auth-link { position:relative; background:transparent; color:var(--tiffany); border:0; padding:4px 8px 15px; font-size:clamp(17px,1.7vw,23px); -webkit-text-stroke:.65px var(--eggplant); paint-order:stroke fill; transform:rotate(.5deg) skewX(-3deg); }
.search-results { list-style:none; margin:0; padding:6px; background:var(--paper); border:2px solid var(--eggplant); box-shadow:4px 4px 0 var(--tiffany); font-size:17px; line-height:1.25; }.search-results button { width:100%; text-align:left; border:0; background:transparent; color:var(--eggplant); padding:7px 10px; }.search-results button:hover,.search-results button:focus-visible { background:var(--yellow); outline:0; }
.map { max-width:1240px; min-height:620px; margin:20px auto 0; position:relative; }.map-intro { margin:0; position:absolute; top:0; left:50%; transform:translateX(-50%) rotate(-.55deg); color:var(--eggplant); font-size:clamp(17px,1.7vw,24px); line-height:1.2; white-space:nowrap; }.node { position:absolute; display:grid; place-items:center; min-height:100px; padding:14px 22px; border:0; background:transparent; color:var(--tiffany); transition:transform .18s ease,filter .18s ease; }.node span { text-align:center; font-size:clamp(30px,3.5vw,51px); line-height:.88; -webkit-text-stroke:2px var(--eggplant); paint-order:stroke fill; transform:rotate(-.7deg) skewX(-2deg); }.node:hover,.node:focus-visible { transform:scale(1.05) rotate(1deg); filter:drop-shadow(0 6px 0 rgb(42 6 31 / 15%)); outline:0; }.node.selected::before { content:''; position:absolute; inset:-13px -20px; border:8px solid var(--tiffany); border-radius:50%; filter:drop-shadow(2px 0 0 var(--eggplant)) drop-shadow(-2px 0 0 var(--eggplant)); animation:draw .55s ease-out both; }.pronunciation { left:5%; top:20%; transform:rotate(-3deg); }.grammar { right:7%; top:19%; transform:rotate(2deg); }.route { left:9%; bottom:18%; transform:rotate(-2deg); }.news { right:7%; bottom:18%; transform:rotate(2deg); }
.private-note { position:absolute; width:184px; min-height:142px; left:50%; top:43%; transform:translate(-50%,-50%) rotate(-1.1deg); padding:32px 14px 13px; background:#fffdf5; border:1px solid #dfd4bc; box-shadow:5px 7px 9px rgb(74 23 63 / 17%); color:var(--eggplant); line-height:1.12; font-size:21px; text-align:center; }.private-note::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 93%,#eee5d2 94%); pointer-events:none; }.private-note .tape { position:absolute; width:61px; height:17px; top:-9px; left:58px; background:rgb(225 213 191 / 85%); transform:rotate(3deg); }.private-note small { display:block; margin-top:8px; font-size:12px; color:#8f777f; }.lock { position:absolute; top:9px; right:12px; font-size:19px; }
.mark-tools { position:absolute; left:50%; bottom:0; transform:translateX(-50%) rotate(.35deg); display:flex; align-items:center; gap:10px; color:var(--eggplant); font-size:16px; white-space:nowrap; }.mark-tools button { background:var(--yellow); border:2px solid var(--eggplant); color:var(--eggplant); padding:3px 8px; box-shadow:2px 2px 0 rgb(74 23 63 / 18%); font-size:14px; }.mark-tools button:hover,.mark-tools button:focus-visible { background:var(--tiffany); outline:0; }.map-status { margin:0 auto; text-align:center; font-size:18px; line-height:1.25; color:var(--eggplant); transform:rotate(-.35deg); }
.pilot-strip { max-width:760px; margin:22px auto 0; padding:12px 16px; display:flex; align-items:center; gap:12px; justify-content:center; border:2px solid var(--eggplant); background:#fffdf5; box-shadow:4px 4px 0 var(--tiffany); font-size:16px; }.pilot-strip strong { color:var(--tiffany); -webkit-text-stroke:.5px var(--eggplant); paint-order:stroke fill; }.pilot-strip span { flex:1; }.pilot-strip button,.primary-action { border:2px solid var(--eggplant); background:var(--yellow); box-shadow:3px 3px 0 rgb(74 23 63 / 22%); padding:8px 12px; color:var(--eggplant); font-size:16px; }.pilot-strip button:hover,.primary-action:hover,.primary-action:focus-visible { background:var(--tiffany); outline:0; }
dialog { max-width:min(650px,calc(100vw - 28px)); padding:30px; color:var(--eggplant); } dialog::backdrop { background:rgb(42 6 31 / 42%); } .paper-dialog { position:relative; isolation:isolate; overflow:visible; border:0; background:linear-gradient(118deg,rgb(255 255 255 / 70%),transparent 38%),repeating-linear-gradient(0deg,rgb(74 23 63 / 2%) 0 1px,transparent 1px 5px),var(--paper-white); box-shadow:0 16px 35px rgb(74 23 63 / 24%),5px 7px 0 rgb(223 212 188 / 80%); clip-path:polygon(1.2% .7%,98.6% 0,100% 2.2%,99.2% 96.8%,97.5% 100%,2.1% 99.2%,0 96.7%,.5% 3%); } .paper-dialog::before { content:''; position:absolute; z-index:-1; width:116px; height:24px; left:50%; top:-12px; transform:translateX(-50%) rotate(-1.7deg); background:rgb(225 213 191 / 84%); box-shadow:0 1px 2px rgb(74 23 63 / 13%); } dialog h2,dialog h3 { margin:3px 0 10px; line-height:.96; font-size:clamp(32px,5vw,48px); color:var(--tiffany); -webkit-text-stroke:1px var(--eggplant); paint-order:stroke fill; }.dialog-close { float:right; border:0; background:transparent; color:var(--eggplant); font-size:15px; text-decoration:underline; }.eyebrow { margin:0 0 5px; font-size:15px; text-transform:uppercase; letter-spacing:.06em; }.dialog-lead { margin:0 0 20px; font-size:19px; line-height:1.15; }.stack-form { display:grid; gap:13px; }.stack-form label { display:grid; gap:5px; font-size:16px; }.stack-form input,.stack-form textarea,.stack-form select { border:0; border-bottom:2px solid var(--eggplant); background:rgb(255 255 255 / 56%); color:var(--eggplant); padding:10px 8px 8px; font:600 16px system-ui,sans-serif; box-shadow:inset 0 -1px 0 rgb(74 23 63 / 8%); }.stack-form textarea { min-height:82px; resize:vertical; }.stack-form .consent { display:flex; align-items:flex-start; gap:8px; line-height:1.1; }.stack-form .consent input { margin-top:3px; }.optional-field { opacity:.84; }.form-note { margin:0; font-size:15px; line-height:1.1; }.invitation-result { margin-top:18px; padding:14px; border:2px dashed var(--eggplant); background:rgb(255 255 255 / 58%); font-size:16px; }.invitation-result p { margin:0 0 8px; line-height:1.2; }.invitation-result button { margin:4px 8px 0 0; }.demo-steps { padding-left:26px; font-size:19px; line-height:1.17; }.demo-steps li { padding-left:5px; margin-bottom:14px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } @keyframes draw { from { opacity:0; transform:rotate(-7deg) scale(.85); } to { opacity:1; transform:rotate(0) scale(1); } }
.lesson-category { margin:0 0 4px; color:var(--tiffany); font:400 18px/1.1 system-ui,sans-serif; letter-spacing:.02em; }
.lesson-description { margin:0 0 16px; font-size:18px; line-height:1.28; }
#route-lessons { padding-left:28px; }
#route-lessons li { margin:0 0 7px; }
#route-lessons button { width:100%; display:grid; gap:2px; text-align:left; border:0; background:transparent; color:var(--eggplant); padding:7px 8px; line-height:1.15; }
#route-lessons button strong { font:inherit; font-weight:700; }
#route-lessons button small { color:#6c6170; font:600 12px/1.15 system-ui,sans-serif; }
#route-lessons button:hover,#route-lessons button:focus-visible { background:var(--yellow); outline:0; }
@media(max-width:760px) { .page-shell { padding:17px 14px 22px; overflow:visible; }.topbar { grid-template-columns:112px minmax(0,1fr); gap:8px; align-items:center; }.brand { width:108px; margin:0; } h1 { justify-self:start; min-width:0; font-size:clamp(31px,9vw,42px); white-space:normal; }.utility { grid-column:1 / -1; grid-row:2; margin-top:14px; }.map { min-height:580px; margin-top:12px; }.map-intro { font-size:16px; }.node { min-height:86px; padding:12px; }.node span { font-size:clamp(26px,7vw,34px); -webkit-text-stroke-width:1.4px; }.pronunciation { left:0; top:13%; }.grammar { right:0; top:13%; }.route { left:0; bottom:23%; }.news { right:0; bottom:23%; }.private-note { width:150px; min-height:120px; top:49%; font-size:18px; }.private-note .tape { left:44px; }.mark-tools { bottom:1%; gap:4px; font-size:0; }.mark-tools button { font-size:14px; padding:3px 5px; }.map-status { font-size:16px; }.pilot-strip { align-items:flex-start; flex-wrap:wrap; font-size:15px; }.pilot-strip button { width:100%; }.paper-dialog { width:calc(100vw - 24px); padding:28px 20px 24px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }