:root{color-scheme:light;--bg:#f3f7ff;--ink:#18274c;--muted:#6b7b9b;--line:#e4eafb;--blue:#455bfa;--blue2:#7777fe;--bright:#e8f0ff;--cyan:#54d2fa;--shadow:0 14px 42px rgba(47,76,143,.07);--radius:24px}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;min-width:320px;background:radial-gradient(ellipse at 87% -5%,#d5e7ff 0%,transparent 39%),radial-gradient(ellipse at -10% 32%,#e3eeff 0%,transparent 32%),var(--bg);color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
  button,input,textarea,select{font:inherit}
  button{cursor:pointer;-webkit-tap-highlight-color:transparent}
  button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #9eabff;outline-offset:3px}
  button:disabled{cursor:not-allowed;opacity:.48}
  .sprite{position:absolute;width:0;height:0;overflow:hidden}
  .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
  .logo{width:47px;height:47px;flex-shrink:0}
  .shell{max-width:1530px;margin:auto;padding:0 26px 136px}
  .topbar{display:flex;gap:16px;justify-content:space-between;align-items:center;min-height:99px}
  .brand{display:flex;align-items:center;gap:13px;min-width:0}
  .brand b{font-weight:880;font-size:23px;line-height:1.1;letter-spacing:-.6px;white-space:nowrap}
  .brand b span{color:var(--blue)}
  .brand small{display:block;color:#7284ae;letter-spacing:1.5px;font-size:10px;font-weight:760;margin-top:4px;text-transform:uppercase}
  .topstats{display:flex;align-items:center;gap:9px}
  .pill{display:flex;align-items:center;gap:8px;padding:10px 15px;background:#fff;border:1px solid #e8edfb;border-radius:17px;color:var(--ink);font-weight:800;white-space:nowrap;box-shadow:0 8px 20px #506ab012;font-size:13px}
  .pill .ico{width:18px;height:18px;color:#f58743}
  .pilot{background:#fff7e6;border-color:#fcebd0;color:#a26b1c}
  .pilottag{font-size:10px;font-weight:750;letter-spacing:.11em;color:#7387be;text-transform:uppercase;margin-bottom:4px}
  .statusbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
  .statusbar h1{font-size:clamp(22px,3.5vw,32px);margin:0;font-weight:850;letter-spacing:-1px;line-height:1.18}
  .statusbar p{margin:5px 0 0;color:#6b7b9b;font-size:13px}
  .statusflag{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #e3e9fb;padding:9px 13px;border-radius:12px;color:#51638c;font-size:11px;font-weight:750;white-space:nowrap}
  .statusdot{width:7px;height:7px;border-radius:50%;background:#40c594;box-shadow:0 0 0 4px #40c59420}
  .card{background:#fff;border:1px solid #e8edfa;border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
  .pad{padding:24px}
  .eyebrow{font-size:11px;font-weight:850;color:#5975d9;letter-spacing:1.1px;text-transform:uppercase}
  h2{font-size:21px;letter-spacing:-.5px;line-height:1.23;margin:0;font-weight:850}
  h3{font-size:17px;letter-spacing:-.35px;line-height:1.25;margin:0;font-weight:825}
  p{margin:0}
  .desc{color:#617194;font-size:13px;line-height:1.62}
  .topline{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}
  .link{appearance:none;background:none;border:0;color:#4560f7;font-weight:780;font-size:12px;padding:5px 0}
  .btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 17px;border-radius:13px;font-size:13px;font-weight:790;min-height:45px;transition:transform .18s,background-color .18s,box-shadow .18s;text-align:center}
  .btn:hover:not(:disabled){transform:translateY(-2px)}
  .btn:active:not(:disabled){transform:scale(.985)}
  .primary{background:linear-gradient(118deg,#4764fc 0%,#4653fa 72%,#655dff 100%);box-shadow:0 10px 20px #5261ff25;color:white}
  .ghost{border:1px solid #dbe5ff;background:#f6f8ff;color:#506393}
  .btn .ico{width:16px;height:16px}
  .grid-home{display:grid;grid-template-columns:minmax(235px,.86fr) minmax(300px,1.22fr) minmax(245px,.98fr);gap:16px;align-items:stretch}
  .mascot{position:relative;isolation:isolate;min-height:550px;overflow:hidden;background:radial-gradient(ellipse at 55% 10%,#eefaff 0%,#bddcff 52%,#a8d0ff 100%);border-color:#d2e5ff}
  .mascot:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 5% 15%,#fff9 0 2px,transparent 5px),radial-gradient(circle at 80% 26%,#fff8 0 6px,transparent 11px),radial-gradient(circle at 9% 49%,#fff9 0 7px,transparent 15px);pointer-events:none;z-index:1}
  .mascot:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(0deg,#a9d3ff 0%,transparent 63%);pointer-events:none}
  .mascot .mascot-photo{position:absolute;width:117%;max-width:none;left:-10%;bottom:43px;aspect-ratio:1;object-fit:cover;object-position:center;filter:drop-shadow(0 14px 16px #3761a81f);animation:mokky-float 4.5s ease-in-out infinite;z-index:1}
  .mascot .hero-title{position:absolute;top:20px;left:20px;z-index:3;background:#ffffffc9;border:1px solid #ffffffdf;border-radius:12px;padding:7px 11px;color:#4864b6;font-size:10px;font-weight:850;letter-spacing:.06em}
  .bubble{position:absolute;top:71px;right:15px;max-width:173px;background:#fffefa;border:1px solid #fff;border-radius:20px 20px 20px 6px;box-shadow:0 8px 30px #557bad22;padding:14px;z-index:3;font-size:13px;font-weight:650;color:#2c3b63;line-height:1.46;animation:fadeUp .25s ease-out}
  .bubble b{color:#435ef1}
  .mascot .hero-action{position:absolute;bottom:17px;left:15px;right:15px;display:flex;align-items:center;gap:11px;justify-content:space-between;z-index:4;border-radius:17px;background:#fffefa;box-shadow:0 12px 30px #4c80c940;padding:12px 12px 12px 15px;font-weight:800;font-size:13px;color:#1b2c56}
  .round-btn{border:0;background:#465cfa;color:white;border-radius:12px;width:39px;height:39px;display:grid;place-items:center;flex-shrink:0}
  .round-btn .ico{width:18px;height:18px}
  .middle{display:grid;grid-template-rows:minmax(0,.74fr) minmax(0,1.26fr);gap:16px}
  .progress-header{display:flex;justify-content:space-between;align-items:center;gap:7px}
  .progressbar{height:13px;background:#e8ebf6;border-radius:100px;overflow:hidden;margin:21px 0 9px}
  .progressbar>span{display:block;width:5%;height:100%;border-radius:100px;background:linear-gradient(90deg,#4462fa,#6980ff)}
  .prog-stat{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:12px;color:#536587}
  .timeline{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:25px}
  .node{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid #e7ebf5;background:#f4f6fc;color:#667895;font-size:13px;font-weight:850;flex-shrink:0}
  .node.complete{background:#21bb82;color:white;border-color:#21bb82}
  .node.current{background:#5265ff;border:4px solid white;color:white;box-shadow:0 0 0 2px #6981ff}
  .connector{height:2px;flex:1;background:#d4e0fe;min-width:3px}
  .lesson-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .lesson-card:after{content:"";position:absolute;width:280px;height:280px;border-radius:90px;right:-170px;top:38px;background:linear-gradient(130deg,#e0eaff,#e5f6ff);transform:rotate(29deg);z-index:0}
  .lesson-card>*{position:relative;z-index:1}
  .lesson-card h2{font-size:27px;max-width:380px;margin:13px 0 12px}
  .lesson-card .desc{max-width:340px;margin-bottom:24px}
  .lesson-badge{display:inline-flex;align-self:flex-start;background:#eff1ff;color:#485df4;padding:5px 11px;border-radius:9px;font-size:11px;font-weight:850}
  .lessonbottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .time{font-size:12px;color:#7182a0;display:inline-flex;align-items:center;gap:6px}
  .time .ico{width:17px;height:17px}
  .project-card{display:flex;flex-direction:column}
  .project-art{background:linear-gradient(125deg,#d5e8ff,#f0f6ff 70%);border-radius:17px;border:1px solid #dce7fd;display:flex;align-items:center;justify-content:center;gap:20px;min-height:137px;position:relative;overflow:hidden;margin-bottom:15px}
  .project-art:after{content:"";position:absolute;width:100px;height:100px;right:-29px;top:-40px;border-radius:30px;transform:rotate(25deg);background:#f6faff91}
  .project-art .big-ico{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;background:#ffffffb5;color:#4765ef;box-shadow:0 10px 27px #617cba18}
  .project-art .big-ico .ico{width:47px;height:47px;stroke-width:1.4}
  .project-art strong{color:#334a79;font-size:13px;max-width:145px;line-height:1.35}
  .business-select{border:1px solid #d8e3fb;background:#fff;border-radius:10px;padding:8px 10px;width:100%;color:#354775;font-size:12px;font-weight:700;margin-bottom:12px}
  .skill{display:flex;align-items:center;gap:12px;border-bottom:1px solid #eef1f9;padding:12px 0;font-size:12px}
  .skill:last-child{border:0}
  .skill .skill-icon{width:32px;height:32px;display:grid;place-items:center;color:#4b66e8;background:#edf3ff;border-radius:11px;flex-shrink:0}
  .skill .skill-icon .ico{width:18px;height:18px}
  .skill b{font-size:12px;flex:1}
  .skill .right{color:#8090ac;text-align:right;white-space:nowrap;font-size:11px}
  .skill .right.good{color:#14ad81;font-weight:850}
  .quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
  .quickcard{border:1px solid #e7ebfa;border-radius:23px;background:#fff;box-shadow:var(--shadow);text-align:left;display:flex;align-items:center;gap:13px;padding:21px 17px;min-width:0;transition:transform .18s,box-shadow .18s}
  .quickcard:hover{transform:translateY(-3px);box-shadow:0 16px 36px #506aba16}
  .quickicon{width:51px;height:51px;border-radius:17px;display:grid;place-items:center;flex-shrink:0}
  .quickicon .ico{width:27px;height:27px}
  .quickcard:nth-child(1) .quickicon{background:#e9faf3;color:#17b282}
  .quickcard:nth-child(2) .quickicon{background:#f1eaff;color:#935ce8}
  .quickcard:nth-child(3) .quickicon{background:#fff1e7;color:#f37b39}
  .quickcard:nth-child(4) .quickicon{background:#e9f3ff;color:#4285ef}
  .quickcard b{font-size:14px;display:block;margin-bottom:3px}
  .quickcard small{display:block;color:#7c8cad;font-size:11px;line-height:1.4}
  .quickarrow{color:#6981ec;margin-left:auto;font-size:18px;flex-shrink:0}
  .bottomnav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(1010px,calc(100% - 48px));z-index:90;background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid #e5ebfb;border-radius:25px;box-shadow:0 12px 42px rgba(69,92,145,.18);padding:8px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
  .navbtn{min-width:0;background:transparent;border:0;border-radius:17px;color:#637498;padding:10px 4px 9px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:11px;font-weight:750;transition:background-color .15s,color .15s}
  .navbtn .ico{width:23px;height:23px}
  .navbtn.sel{background:#edf1ff;color:#465dfa}
  .navbtn:hover{background:#f3f5ff}
  .navbtn.mokky-nav .nav-avatar{width:35px;height:35px;border-radius:50%;background:#dbe9ff;overflow:hidden;border:2px solid #aabfff;margin-top:-9px;box-shadow:0 6px 14px #6076a929}
  .navbtn.mokky-nav .nav-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 21%}
  .page-heading{margin-bottom:17px}
  .page-heading h1{font-size:clamp(25px,3.4vw,34px);letter-spacing:-.8px;line-height:1.2;margin:2px 0 8px}
  .page-heading p{color:#647494;font-size:13px;max-width:640px}
  .screen-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(270px,.82fr);gap:17px;align-items:start}
  .screen-grid .card{padding:25px}
  .lesson-parts{display:flex;align-items:center;gap:7px;margin-bottom:20px;flex-wrap:wrap}
  .stepchip{font-size:11px;font-weight:850;border:1px solid #e2e9fb;background:#f7f9ff;color:#6e80a3;border-radius:10px;min-width:37px;padding:7px 9px}
  .stepchip.current{background:#4b60fb;color:white;border-color:#4b60fb}
  .stepchip.done{background:#e5f9ee;color:#179c6a;border-color:#bcebd0}
  .quote{background:#f1f5ff;border:1px solid #dfe9ff;border-radius:15px;padding:15px 17px;font-size:14px;font-weight:680;margin:13px 0;color:#304672}
  .option{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:1px solid #e0e8f8;background:#fff;border-radius:13px;padding:13px 15px;margin-top:9px;color:#354a75;font-size:13px;font-weight:650;transition:background .15s,border-color .15s}
  .option:hover{background:#f7f9ff;border-color:#b7c5fa}
  .option.selected{background:#eef1ff;border-color:#798bff;color:#354df6}
  .option-indicator{width:19px;height:19px;border:2px solid #adbbda;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:12px}
  .option.selected .option-indicator{border-color:#6178ff;background:#536bff;color:#fff}
  .actionrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:20px}
  .feedback{padding:12px 14px;border-radius:13px;margin-top:14px;font-size:12px;line-height:1.65;border:1px solid #d5e7fd;color:#355275;background:#f1f7ff}
  .feedback.ok{background:#e8faf2;border-color:#bbead3;color:#1d7151}
  .feedback.warn{background:#fff6e9;border-color:#f5ddbd;color:#8a5e26}
  .concept{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #edf0fa}
  .concept:last-child{border-bottom:0}
  .concept .ico{width:20px;height:20px;color:#5670f8;margin-top:1px}
  .concept strong{display:block;font-size:12px;margin-bottom:3px}
  .concept span{font-size:12px;color:#7181a0}
  .example{padding:13px 14px;background:#f4f7fe;border:1px solid #e6edfd;border-radius:12px;margin-top:10px;font-size:12px;color:#516587;line-height:1.6}
  .example strong{display:block;color:#293b69;margin-bottom:5px}
  .example.after{background:#ecfaf4;border-color:#c7e9d8}
  .project-overview{background:linear-gradient(120deg,#eaf2ff,#f5fbff);border:1px solid #dfeafb;border-radius:18px;padding:19px;display:flex;gap:14px;align-items:center;margin-bottom:18px}
  .project-overview .big-ico{width:65px;height:65px;border-radius:18px;background:white;color:#5870f0;display:grid;place-items:center;flex-shrink:0}
  .project-overview .ico{width:31px;height:31px}
  .project-overview strong{display:block;font-size:17px;line-height:1.25;margin-bottom:4px}
  .project-overview small{color:#697fa2;font-size:12px}
  label.fieldlabel{font-size:12px;font-weight:780;display:block;margin-bottom:8px}
  .field{display:block;width:100%;border-radius:12px;background:#fbfcff;border:1px solid #dbe5f8;padding:12px 14px;min-height:44px;color:#273d66;font-size:13px;line-height:1.5}
  textarea.field{min-height:124px;resize:vertical}
  .field:focus{border-color:#697efe}
  .bizchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:17px}
  .bizchip{border:1px solid #dce5f9;border-radius:11px;background:white;padding:9px 12px;font-size:12px;font-weight:760;color:#5b6c91}
  .bizchip.sel{background:#eaf0ff;color:#425bfa;border-color:#96aafc}
  .notice{border:1px dashed #bdd2f7;padding:15px;border-radius:14px;background:#f7faff;font-size:12px;color:#627799;line-height:1.6}
  .chat{display:flex;align-items:flex-start;gap:10px;margin:16px 0}
  .chat .userface{width:38px;height:38px;border-radius:12px;background:#e0e8ff;display:grid;place-items:center;color:#4864db;font-size:18px;flex-shrink:0;overflow:hidden}
  .chat .userface img{height:100%;width:100%;object-fit:cover}
  .chat .chatbubble{padding:14px 16px;border-radius:16px 16px 16px 4px;background:#f0f5ff;color:#364c72;font-size:13px;line-height:1.6;max-width:90%;overflow-wrap:anywhere}
  .chat.me{flex-direction:row-reverse}
  .chat.me .chatbubble{background:#485ff4;color:white;border-radius:16px 16px 4px 16px}
  .chat.me .userface{background:#6577bc;color:#fff}
  .chat-scroll{min-height:280px;max-height:465px;overflow:auto;scrollbar-color:#cedafa transparent;padding:3px}
  .chat-input{display:flex;gap:8px;margin-top:15px}
  .chat-input .field{flex:1;min-width:0}
  .promptchips{display:flex;flex-direction:column;gap:8px;margin-top:16px}
  .promptchips button{background:#f5f8ff;border:1px solid #e1e9fc;border-radius:13px;color:#495d83;font-size:12px;font-weight:670;text-align:left;padding:12px 14px}
  .statline{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #edf1fb;font-size:13px}
  .statline:last-child{border-bottom:0}
  .statline span{color:#667896}
  .statline b{color:#273963}
  .toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #e7ecfb;border-radius:14px;padding:15px;margin-top:13px}
  .toggle b{font-size:13px;display:block}
  .toggle small{font-size:11px;color:#7082a2;display:block;margin-top:3px}
  .switch{width:47px;height:27px;border-radius:100px;background:#c1cce2;border:0;padding:3px;flex-shrink:0;display:flex;align-items:center;transition:background-color .2s}
  .switch.on{background:#5267f7}
  .switch:before{content:"";background:white;border-radius:50%;width:21px;height:21px;display:block;transition:transform .2s;box-shadow:0 1px 4px #1a2c5d44}
  .switch.on:before{transform:translateX(20px)}
  .finish{background:linear-gradient(135deg,#e7f8fc,#eef0ff);border:1px solid #d1e5fe;border-radius:20px;text-align:center;padding:35px 25px}
  .finish .bigcheck{font-size:45px;display:block;margin-bottom:8px}
  .disclaimer{font-size:11px;color:#8c9cbb;margin-top:14px}
  .animate-mokky .mascot-photo{animation:mokky-hi .75s cubic-bezier(.18,.72,.3,1.35) 1}
  .brand b,.eyebrow,.pill,.navbtn,.btn{font-variant-numeric:tabular-nums}
  @keyframes mokky-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes mokky-hi{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.05) rotate(-3deg)}70%{transform:scale(1.02) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes fadeUp{from{opacity:.15;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
  @media(max-width:1110px){.shell{padding-left:16px;padding-right:16px}.grid-home{grid-template-columns:minmax(200px,.82fr) minmax(280px,1.18fr)}.project-card{grid-column:1/-1}.project-card .project-art{min-height:105px}.project-card .skill{padding:9px 0}.mascot{min-height:530px}.quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:700px){.shell{padding:0 13px 112px}.topbar{min-height:77px}.logo{width:35px;height:35px}.brand{gap:8px}.brand b{font-size:15px;letter-spacing:-.4px}.brand small{font-size:8px;letter-spacing:.6px}.topstats{gap:5px}.pill{padding:8px 9px;border-radius:11px;font-size:11px;gap:3px}.pill .ico{width:15px;height:15px}.pilot{display:none}.statusbar{align-items:flex-start}.statusbar h1{font-size:22px}.statusbar p{font-size:12px}.statusflag{font-size:9px;padding:7px 8px;flex-shrink:0}.grid-home{grid-template-columns:1fr;gap:13px}.mascot{min-height:400px}.mascot .mascot-photo{width:96%;left:0;bottom:9px}.mascot .hero-title{font-size:9px}.bubble{max-width:155px;right:11px;top:56px;padding:11px;font-size:12px}.mascot .hero-action{padding:9px 10px;font-size:12px}.middle{grid-template-rows:auto;gap:13px}.pad{padding:18px}.progressbar{margin:15px 0 8px}.timeline{margin-top:17px}.node{height:32px;width:32px;font-size:11px}.lesson-card{min-height:267px}.lesson-card h2{font-size:24px}.lesson-card .desc{margin-bottom:20px}.project-card{grid-column:auto}.quick{gap:10px;margin-top:13px}.quickcard{padding:13px 12px;gap:10px;min-height:95px;border-radius:17px}.quickicon{height:38px;width:38px;border-radius:12px}.quickicon .ico{height:23px;width:23px}.quickcard b{font-size:12px}.quickcard small{font-size:10px}.quickarrow{display:none}.bottomnav{bottom:0;width:100%;border-radius:19px 19px 0 0;padding:7px 4px calc(8px + env(safe-area-inset-bottom));gap:0}.navbtn{font-size:9px;padding:7px 1px 5px;gap:5px;letter-spacing:-.2px}.navbtn .ico{height:21px;width:21px}.navbtn.mokky-nav .nav-avatar{width:30px;height:30px;margin-top:-9px}.screen-grid{grid-template-columns:1fr;gap:13px}.screen-grid .card{padding:18px}.page-heading{margin-bottom:14px}.page-heading h1{font-size:26px}.chat .chatbubble{max-width:calc(100% - 48px)}}
  @media(max-width:370px){.brand small{max-width:150px}.statusflag{display:none}.mascot{min-height:365px}.mascot .mascot-photo{width:109%;left:-5%;bottom:12px}.quick{grid-template-columns:1fr 1fr}.quickcard{display:block;min-height:115px}.quickicon{margin-bottom:6px}.bubble{max-width:139px;font-size:11px}}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
  body.motion-off *,body.motion-off *:before,body.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* V3 isolated V2 QA course: mobile-first, same premium design system. */
.course-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px;padding:15px 19px}
.course-switch b,.course-switch small{display:block}
.course-switch b{font-size:14px;color:#26385e}
.course-switch small{font-size:12px;color:#697d9f;margin-top:5px}
.course-selector{margin:16px 0}
.course-selector .stepchip{width:auto;padding:0 15px;white-space:nowrap}
.course-theory{max-height:670px;overflow:auto;padding:5px 7px 7px 0;margin-top:13px;scrollbar-color:#b6c7e7 transparent}
.course-theory h3{font-size:16px;line-height:1.4;color:#283c69;margin:19px 0 9px}
.course-theory .lesson-line{line-height:1.65;color:#435679;font-size:13px;margin:9px 0}
.course-question{font-size:15px;line-height:1.5;margin:13px 0 16px;overflow-wrap:anywhere}
.course-challenge{margin-top:18px;padding-top:16px;border-top:1px solid #e4ebf7}
.course-field{margin-top:17px}
.course-field .field{min-height:100px;width:100%}
.course-challenge p{margin:7px 0}
.course-switch .btn{flex-shrink:0}
@media(max-width:660px){.course-switch{flex-direction:column;align-items:stretch}.course-switch .btn{width:100%}.course-theory{max-height:none}.course-selector{flex-wrap:wrap}}

.course-preview-challenge{margin-top:20px;background:#f9fbff;border:1px solid #dbe5f8;border-radius:14px;padding:15px}
.course-preview-challenge summary{font-size:13px;font-weight:740;cursor:pointer;color:#415dd0}
.course-preview-challenge .course-challenge{margin-top:14px}

/* QA Fix 1: dedicate a real viewport region to the dock rather than drawing it
   over lesson/project/chat controls. Works with changing Telegram WebView height. */
html,body{height:100%;overflow:hidden}
.shell{height:calc(100vh - var(--aa3-dock-clearance,120px));height:calc(100dvh - var(--aa3-dock-clearance,120px));overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-padding-bottom:24px;padding-bottom:24px}
@media(max-width:700px){.shell{padding-bottom:20px}}
.copy-fallback{margin-top:14px;padding:14px;border:1px solid #d6e1ff;border-radius:13px;background:#f8faff}
.copy-fallback .field{width:100%;min-height:145px;resize:vertical}
/* AI ARCHITECT 3.0 | Studio Visual v0.5 | visual-only, no entitlement changes.
   Approved concept language: airy pastel clouds, deep indigo headings,
   electric-blue CTA, illustrated icons, friendly MOKKY. */
:root{--bg:#edf5ff;--ink:#14295a;--muted:#5e739b;--blue:#3a5eff;--blue2:#6688ff;--line:#dde8ff;--shadow:0 15px 38px rgba(42,77,151,.09);--radius:23px}
body{background:radial-gradient(ellipse 720px 470px at 95% -14%,#c7dffe 4%,transparent 85%),radial-gradient(ellipse 500px 620px at -16% 93%,#dbe8ff 10%,transparent 86%),linear-gradient(180deg,#eaf3ff 0%,#f3f7ff 70%,#edf3ff 100%);color:var(--ink)}
.shell{max-width:1690px;padding-left:24px;padding-right:24px}
.topbar{min-height:85px;padding:7px 4px 11px}
.brand b{font-size:23px;letter-spacing:-.7px;color:#12265a}
.brand b span{color:#3f62f8}
.brand small{color:#617caa}
.logo{filter:drop-shadow(0 3px 5px rgba(65,105,205,.13))}
.pill{border:1px solid #e6eefd;box-shadow:0 8px 24px #4c72c510;border-radius:17px}
.pilot{background:#fff8e9;color:#916121;border-color:#fff2da}
.studio-frame{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:start;gap:19px;min-width:0}
.studio-screen{min-width:0}
.studio-sidepanel{position:sticky;top:0;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:min(680px,calc(100dvh - 155px));padding:12px 13px 19px;border:1px solid rgba(255,255,255,.72);border-radius:27px;background:linear-gradient(175deg,rgba(255,255,255,.70),rgba(255,255,255,.38));box-shadow:0 12px 45px #6592d412}
.studio-sidenav{display:flex;flex-direction:column;gap:8px}
.studio-sidebtn{border:1px solid transparent;background:transparent;border-radius:16px;padding:12px 15px;display:flex;align-items:center;gap:13px;color:#263c79;font-weight:780;text-align:left;min-height:52px;font-size:14px;transition:background .2s,border-color .2s,transform .2s}
.studio-sidebtn .ico{width:22px;height:22px;color:#2e4dab}
.studio-sidebtn.sel,.studio-sidebtn:hover{background:linear-gradient(106deg,#dde8ff,#cfdefe);color:#2850e9;border-color:#d1defc}
.studio-sidebtn.sel .ico{color:#365dfc;filter:drop-shadow(0 2px 4px #5d7cfc30)}
.studio-sidebtn:hover{transform:translateX(2px)}
.studio-side-tip{padding:18px 15px;background:linear-gradient(140deg,#fffefb,#f0f5ff);border:1px solid #eef1fa;border-radius:22px;box-shadow:0 10px 30px #739bce0b}
.studio-side-tip .tip-emoji{font-size:27px;display:block;margin-bottom:9px}
.studio-side-tip strong{display:block;font-size:14px;line-height:1.3;color:#13295c}
.studio-side-tip p{font-size:12px;color:#6276a1;margin-top:7px;line-height:1.65}
.studio-home{animation:studio-reveal .38s ease-out both}
.studio-hero{position:relative;min-height:326px;overflow:hidden;border-radius:28px;border:1px solid #e5efff;background:linear-gradient(113deg,#e9f4ff 0%,#e6f2ff 39%,#d5eaff 70%,#bcdafb 100%);box-shadow:0 18px 46px #588fdb17;isolation:isolate;padding:34px 35px;display:flex;align-items:center}
.studio-hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 72% 13%,#ffffffb7 0 4%,transparent 16%),radial-gradient(circle at 99% 85%,#fff8 0 12%,transparent 35%),radial-gradient(ellipse at 45% 124%,#ffffffde 0 24%,transparent 42%),radial-gradient(ellipse at 7% 99%,#ffffff70 0 19%,transparent 34%)}
.hero-cloud{position:absolute;right:-40px;bottom:-66px;width:62%;height:145px;background:#ffffffb4;border-radius:70% 85% 0 0;filter:blur(20px);z-index:1}
.studio-hero-copy{position:relative;z-index:4;max-width:56%}
.studio-eyebrow{display:inline-flex;align-items:center;padding:6px 15px;border-radius:100px;color:#4163d4;background:#ffffffad;border:1px solid #fffaff;font-size:12px;font-weight:800}
.studio-hero h1{font-size:clamp(32px,3.25vw,57px);letter-spacing:-1.8px;line-height:1.07;font-weight:900;margin:15px 0 12px;color:#0d2354;text-wrap:balance}
.studio-hero h1 span{color:#3e78ff}
.studio-hero-copy>p{font-size:clamp(13px,1.2vw,17px);line-height:1.6;color:#416096;font-weight:550}
.studio-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:25px}
.studio-hero .hero-cta{padding:14px 19px;min-height:53px;border-radius:15px;box-shadow:0 11px 24px #4169f64a;white-space:nowrap;font-size:14px}
.studio-hero .hero-cta .ico:first-child{background:#fff;color:#4267f7;fill:#4267f7;width:27px;height:27px;padding:7px;border-radius:50%;stroke-width:2.3}
.studio-hero .hero-cta .ico:last-child{width:19px;height:19px}
.hero-learn-more{border:0;background:#ffffffa6;border-radius:13px;padding:13px 14px;color:#3456ce;font-weight:780;display:inline-flex;align-items:center;gap:7px;font-size:12px;min-height:48px}
.hero-learn-more .ico{width:18px;height:18px}
.studio-hero-flag{font-weight:750;font-size:12px;color:#3457d6;display:block;margin-top:17px}
.studio-hero-visual{position:absolute;right:8%;top:0;width:38%;height:100%;pointer-events:none;z-index:2}
.hero-halo{width:87%;aspect-ratio:1;position:absolute;top:12%;right:0;background:radial-gradient(circle,#ffffffbd 0 12%,#a4cdfd9a 55%,transparent 75%);border-radius:50%;filter:blur(7px)}
.hero-mokky{position:absolute;right:0;bottom:-21%;width:min(100%,395px);height:auto;aspect-ratio:1;object-fit:cover;object-position:center 12%;border-radius:42% 42% 45% 45%;mask-image:radial-gradient(ellipse 53% 60% at 50% 49%,#000 40%,#000b 72%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 53% 60% at 50% 49%,#000 40%,#000b 72%,transparent 100%);filter:drop-shadow(0 15px 20px #3d68b13e);animation:mokky-float 5s ease-in-out infinite}
.studio-hero-note{position:absolute;right:18px;top:19px;max-width:180px;padding:11px 15px;background:#fffffff1;border:1px solid #fff;border-radius:18px 18px 5px 18px;box-shadow:0 9px 25px #6a85c82d;z-index:5;font-size:12px;line-height:1.4;transform:rotate(-3deg)}
.studio-hero-note b{display:block;font-size:12px;color:#1a2d5b;margin-bottom:4px}.studio-hero-note span{font-size:11px;color:#51689b}
.sparkle{position:absolute;font-size:26px;z-index:2;color:#fff9d7;text-shadow:0 0 9px white}.spark-a{top:26%;left:53%}.spark-b{bottom:20%;right:5%;font-size:34px}
.studio-highlights{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:13px;margin-top:16px;align-items:stretch}
.studio-box{min-width:0;background:#fff;border-radius:23px;border:1px solid #e6edff;box-shadow:0 14px 35px #5678ba12;padding:16px 18px}
.studio-card-title{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:13px}
.studio-card-title h2{font-size:16px;letter-spacing:-.4px;flex:1;min-width:0}
.studio-card-title .link{font-size:11px;white-space:nowrap}
.studio-icon{flex:0 0 39px;width:39px;height:39px;border-radius:13px;background:#eff3ff;display:grid;place-items:center}
.studio-icon .ico{width:22px;height:22px;stroke-width:2.1}
.studio-icon.tone-blue{color:#4865fb;background:#e8edff}.studio-icon.tone-sky{color:#258cfd;background:#e7f6ff}.studio-icon.tone-violet{color:#635afb;background:#f0edff}.studio-icon.tone-orange{color:#f29b24;background:#fff3df}
.studio-small-tag{background:#f4f7ff;border:1px solid #edf1ff;color:#6a7fac;font-size:10px;border-radius:13px;padding:5px 8px;white-space:nowrap}
.studio-mentor{display:flex;flex-direction:column;min-height:245px}
.studio-mentor-body{display:flex;gap:11px;align-items:center;min-height:112px}
.studio-mentor-body img{width:88px;height:98px;object-fit:cover;object-position:center 17%;border-radius:21px;background:#e5f2ff;flex:0 0 auto}
.studio-mentor-body p{font-size:12px;line-height:1.6;background:#eef4ff;border-radius:18px 18px 18px 5px;padding:11px;color:#47619a}
.studio-soft-button{border:0;border-radius:13px;min-height:41px;padding:10px 12px;color:#3e5cf0;background:linear-gradient(145deg,#eaf0ff,#e2ebff);display:flex;align-items:center;justify-content:center;gap:7px;font-weight:820;font-size:12px;margin-top:auto}
.studio-soft-button .ico{width:16px;height:16px}
.studio-progress-body{display:flex;align-items:center;gap:13px;justify-content:space-evenly;padding:4px 0 12px;min-height:142px}
.studio-progress-ring{width:138px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#4189fe 0 18deg,#e8effe 18deg 360deg);padding:13px;display:grid;place-items:center;flex:0 0 auto;box-shadow:inset 0 0 0 1px #dfeaff}
.studio-progress-ring>div{width:100%;height:100%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;box-shadow:inset 0 0 12px #dceafb}
.studio-progress-ring strong{font-size:27px;line-height:1.2;letter-spacing:-1px}.studio-progress-ring strong span{font-size:15px;color:#7287ac}.studio-progress-ring small{font-size:10px;color:#667ba3}
.studio-progress-metrics{font-size:11px;min-width:0}.studio-progress-metrics p{display:flex;align-items:center;gap:6px;line-height:1.45;margin-bottom:13px;color:#4b5f8f}.studio-progress-metrics p:last-child{margin-bottom:0}.studio-progress-metrics b{color:#243c7f}.studio-progress-metrics em{font-size:10px;color:#7889b3;font-style:normal}
.metric-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;flex:0 0 auto}.metric-icon .ico{width:15px;height:15px}.metric-icon.green{color:#0fa984;background:#e6faf0}.metric-icon.blue{color:#546aff;background:#eef2ff}.metric-icon.orange{color:#f17822;background:#fff2e9}
.studio-current-lesson{display:flex;flex-direction:column;min-height:245px}
.studio-lesson-inside{display:flex;gap:12px;align-items:center}
.studio-lesson-illustration{position:relative;display:grid;place-items:center;flex:0 0 98px;width:98px;height:102px;background:linear-gradient(135deg,#718dff,#bbdfff 67%,#e0edff);border-radius:16px;overflow:hidden;color:white;box-shadow:inset 0 0 0 1px #ffffffc7}
.studio-lesson-illustration .big-lesson-svg{width:55px;height:55px;stroke:currentColor;fill:none;stroke-width:1.4;filter:drop-shadow(0 6px 7px #4362c77b)}
.studio-lesson-illustration span{position:absolute;right:12px;top:8px;color:#fff6af;font-size:23px}
.studio-lesson-info{min-width:0}.studio-kicker{display:inline-block;font-size:10px;color:#5669fa;background:#eff3ff;border-radius:9px;padding:3px 7px;margin-bottom:7px}.studio-lesson-info h3{font-size:16px;margin-bottom:5px}.studio-lesson-info p{font-size:11px;line-height:1.55;color:#6a7da5}
.studio-lesson-footer{margin-top:auto;display:flex;align-items:center;gap:10px;justify-content:space-between;padding-top:13px}
.studio-lesson-footer>span{white-space:nowrap;display:flex;align-items:center;gap:5px;color:#7588b0;font-size:10px}.studio-lesson-footer>span .ico{width:16px;height:16px}
.studio-lesson-footer .btn{min-height:38px;padding:9px 13px;font-size:11px}
.studio-actions{display:grid;grid-template-columns:1.55fr .8fr .8fr;gap:13px;margin-top:14px}
.studio-project-row{display:flex;align-items:center;gap:10px;min-width:0;background:linear-gradient(120deg,#f7faff,#edf5ff);border:1px solid #e9efff;border-radius:15px;padding:11px}
.studio-project-emblem{width:54px;height:54px;display:grid;place-items:center;flex:0 0 auto;color:#6b4afa;background:linear-gradient(145deg,#d6d0ff,#f0eaff);border-radius:14px}
.studio-project-emblem .ico{width:32px;height:32px}
.studio-project-row>div{min-width:0;flex:1}.studio-project-row strong{font-size:12px;display:block}.studio-project-row small{font-size:10px;line-height:1.45;display:block;color:#6b7fab;margin-top:4px}.studio-project-pill{background:#e6faf2;color:#128e67;border-radius:9px;padding:5px 8px;font-size:10px;font-weight:800;white-space:nowrap}
.studio-project-steps{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px}.studio-project-steps span{display:inline-flex;align-items:center;gap:4px;background:#f8faff;border:1px solid #e6edff;border-radius:12px;padding:5px 7px;color:#7d8eaf;font-size:10px;font-weight:680}.studio-project-steps span .ico{width:13px;height:13px}.studio-project-steps span.is-ready{color:#269579;background:#e9fbf3}.studio-project-steps span.is-next{color:#5871e8;background:#edf3ff}
.studio-quick-action{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:190px;transition:transform .2s,box-shadow .2s;gap:6px}.studio-quick-action:hover{transform:translateY(-3px);box-shadow:0 18px 44px #4866b728}.studio-quick-action strong{font-size:15px}.studio-quick-action small{color:#7487a9;font-size:11px;line-height:1.55}.studio-quick-action .studio-soft-button{width:100%;margin-top:auto;font-size:11px}
.studio-demo-footnote{font-size:10px;line-height:1.6;color:#7689aa;margin:15px 5px 0}
.card{border-color:#e4ebfc;box-shadow:0 12px 32px #5577ba10}
.page-heading h1,h2,h3{color:#142759}
.btn.primary{background:linear-gradient(125deg,#3383ff,#4d5fff 60%,#6a55ff);box-shadow:0 10px 22px #4b69f730}
.link:hover,.hero-learn-more:hover{color:#2448d0;text-decoration:underline}
.navbtn.sel{background:#e7edff;color:#365aff}
.bottomnav{box-shadow:0 11px 32px #4d6eaf25}
/* User preference: keep the bottom dock on desktop and mobile. */
@media(max-width:1410px){.studio-frame{grid-template-columns:210px minmax(0,1fr);gap:12px}.studio-sidebtn{font-size:13px;padding:10px 12px}.studio-highlights{grid-template-columns:1fr 1fr}.studio-current-lesson{grid-column:1/-1;min-height:0}.studio-lesson-inside{margin-bottom:10px}.studio-actions{grid-template-columns:1.4fr 1fr 1fr}}
@media(max-width:1100px){.studio-frame{display:block}.studio-sidepanel{display:none}.studio-highlights{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-current-lesson{grid-column:auto}.studio-progress-ring{width:105px;padding:10px}.studio-hero{min-height:300px}.studio-actions{grid-template-columns:1.3fr 1fr}.studio-actions>.studio-quick-action:last-child{grid-column:2}.studio-personal-project{grid-row:span 2}.studio-mentor-body img{width:65px;height:80px}.studio-mentor-body p{font-size:11px}}
@media(max-width:790px){.studio-highlights{grid-template-columns:1fr 1fr}.studio-current-lesson{grid-column:1/-1}.studio-actions{grid-template-columns:1fr 1fr}.studio-personal-project{grid-column:1/-1;grid-row:auto}.studio-hero-copy{max-width:63%}.studio-hero-visual{right:5%;width:39%}.studio-hero-note{display:none}}
@media(max-width:590px){.shell{padding-left:11px;padding-right:11px}.topbar{min-height:72px}.brand b{font-size:16px}.brand small{font-size:8px}.studio-hero{min-height:395px;align-items:flex-start;padding:22px 19px;border-radius:24px}.studio-hero-copy{max-width:100%}.studio-hero h1{font-size:clamp(29px,8vw,39px);line-height:1.08;margin:12px 0 7px;max-width:90%}.studio-hero-copy>p{font-size:12px;max-width:80%;line-height:1.55}.studio-hero-actions{margin-top:16px;gap:7px}.studio-hero .hero-cta{font-size:12px;padding:10px 13px;min-height:46px}.hero-learn-more{font-size:11px;min-height:40px;padding:8px}.studio-hero-flag{font-size:10px;margin-top:10px;max-width:60%}.studio-hero-visual{right:-17px;bottom:-10px;top:auto;height:58%;width:62%}.hero-mokky{right:0;bottom:-28px;width:100%}.spark-a{top:12%;left:85%}.spark-b{display:none}.studio-highlights{grid-template-columns:1fr;gap:11px;margin-top:11px}.studio-box{padding:14px;border-radius:20px}.studio-mentor{min-height:0}.studio-mentor-body{min-height:78px}.studio-mentor-body img{height:76px;width:74px}.studio-progress-body{justify-content:flex-start;gap:22px;min-height:115px}.studio-progress-ring{width:118px}.studio-progress-metrics{font-size:12px}.studio-current-lesson{min-height:0}.studio-lesson-illustration{flex-basis:90px;width:90px;height:93px}.studio-actions{grid-template-columns:1fr 1fr;gap:10px}.studio-personal-project{grid-column:1/-1}.studio-quick-action{min-height:190px}.studio-quick-action strong{font-size:14px}.studio-demo-footnote{padding-bottom:10px}.navbtn{font-size:10px}.bottomnav{width:calc(100% - 8px);bottom:4px;border-radius:20px}}
@media(max-width:375px){.studio-hero-copy>p{max-width:90%}.studio-hero h1{font-size:29px}.studio-hero .hero-cta{font-size:11px}.hero-learn-more{padding:7px;font-size:10px}.studio-hero-visual{width:65%;height:54%}.studio-actions{grid-template-columns:1fr}.studio-personal-project{grid-column:auto}.studio-quick-action{min-height:130px}}
@media(prefers-reduced-motion:reduce){.studio-home,.hero-mokky{animation:none!important}.studio-sidebtn,.studio-quick-action{transition:none!important}}
@keyframes studio-reveal{from{opacity:.4;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
/* Extra-small Telegram window: six labels must not collide. */
@media(max-width:355px){.bottomnav{gap:0;padding:5px 3px}.navbtn{padding:7px 1px 6px;gap:3px}.navbtn span:last-child{font-size:8px;letter-spacing:-.26px}.navbtn .ico{width:21px;height:21px}}

/* Studio Visual v0.5.1 — mobile quick cards.
   Keep the mobile grid to ONE explicit column; otherwise the older
   .studio-actions > .studio-quick-action:last-child { grid-column:2 }
   creates an implicit second track below 375px, squashing the project
   card and making the practice card stretch into a huge empty panel. */
@media (max-width: 590px) {
  .studio-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    align-items: start;
    gap: 12px;
  }
  .studio-actions > .studio-personal-project,
  .studio-actions > .studio-quick-action,
  .studio-actions > .studio-quick-action:last-child {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
  }
  .studio-actions > .studio-quick-action {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    padding: 16px;
    text-align: left;
  }
  .studio-quick-action > .studio-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
  }
  .studio-quick-action > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-width: 0;
  }
  .studio-quick-action > small {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .studio-quick-action > .studio-soft-button {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: 10px;
  }
}