:root{--bg: #F6F3F1;--surface: #FFFFFF;--surface-2: #F1ECE9;--line: #E4DCD8;--line-strong: #CFC4BF;--ink: #2A2326;--ink-2: #5E555A;--ink-3: #8B8186;--brand: #A3213A;--brand-ink: #7C1F34;--brand-soft: #F9E8EB;--navy: #1F3A5F;--navy-soft: #E7EDF5;--gold: #B8861F;--gold-soft: #FBF1DC;--ok: #2F7A4F;--ok-soft: #E4F2E9;--warn: #A86A12;--warn-soft: #FBEFD9;--bad: #B4233C;--bad-soft: #FBE6E9;--shadow: 0 1px 2px rgba(42,35,38,.06), 0 4px 16px -8px rgba(42,35,38,.12);--radius: 14px;--radius-sm: 10px;--f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;--f-body: "Inter", "Segoe UI", system-ui, sans-serif;--hero: linear-gradient(125deg, #7C1F34 0%, #5E1727 42%, #16293F 78%, #1F3A5F 100%)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #17141A;--surface: #211D24;--surface-2: #2A252E;--line: #3A333F;--line-strong: #4E4655;--ink: #F1ECEE;--ink-2: #C3B9BF;--ink-3: #91878E;--brand: #E0566E;--brand-ink: #F08A9C;--brand-soft: #3A1E26;--navy: #8FB0DA;--navy-soft: #1E2A3A;--gold: #E1B254;--gold-soft: #3A2F18;--ok: #6CC795;--ok-soft: #173126;--warn: #E8B05A;--warn-soft: #3A2C15;--bad: #F07A8E;--bad-soft: #3A1A21;--shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.6);color-scheme:dark}}:root[data-theme=dark]{--bg: #17141A;--surface: #211D24;--surface-2: #2A252E;--line: #3A333F;--line-strong: #4E4655;--ink: #F1ECEE;--ink-2: #C3B9BF;--ink-3: #91878E;--brand: #E0566E;--brand-ink: #F08A9C;--brand-soft: #3A1E26;--navy: #8FB0DA;--navy-soft: #1E2A3A;--gold: #E1B254;--gold-soft: #3A2F18;--ok: #6CC795;--ok-soft: #173126;--warn: #E8B05A;--warn-soft: #3A2C15;--bad: #F07A8E;--bad-soft: #3A1A21;--shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.6);color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--f-display);margin:0;letter-spacing:-.01em;text-wrap:balance}h1{font-size:26px;font-weight:800}h2{font-size:18px;font-weight:800}h3{font-size:15px;font-weight:700}p{margin:0}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--brand-ink)}:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}.num{font-variant-numeric:tabular-nums}.muted{color:var(--ink-3)}.small{font-size:12px}.tiny{font-size:11px}.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}.checker{background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%) 0 0/8px 8px}.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100%}.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;padding:20px 14px}.side .logo img{width:150px;display:block;margin:2px 6px 0}.who{display:flex;gap:10px;align-items:center;padding:10px;border-radius:var(--radius-sm);background:var(--surface-2)}.who b{display:block;font-size:13px;line-height:1.25}.who span{font-size:11px;color:var(--ink-3)}.nav{display:flex;flex-direction:column;gap:2px}.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:10px 10px 4px}.nav button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:9px;cursor:pointer;text-align:left;font-weight:600;color:var(--ink-2)}.nav button:hover{background:var(--surface-2);color:var(--ink)}.nav button.on{background:var(--brand-soft);color:var(--brand-ink)}.nav button .count{margin-left:auto;font-size:11px;font-weight:800;background:var(--brand);color:#fff;border-radius:99px;padding:1px 7px}.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}.main{min-width:0;padding:28px max(20px,env(safe-area-inset-right,0px)) 48px max(20px,env(safe-area-inset-left,0px))}.page{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:22px}.page.narrow{max-width:760px}.topbar,.tabbar,.scrim{display:none}@media (max-width: 900px){.app{grid-template-columns:1fr}.side{position:fixed;z-index:60;left:0;top:0;width:272px;transform:translate(-102%);transition:transform .2s;box-shadow:var(--shadow);padding-top:calc(20px + env(safe-area-inset-top,0px))}.side.open{transform:none}.scrim.open{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;background:#00000059}.topbar{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;align-items:center;gap:10px;background:var(--surface);border-bottom:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}.topbar img{height:44px;margin:-6px 0;width:auto;flex-shrink:0;max-width:none}.topbar .sp{flex:1}.main{padding:18px max(16px,env(safe-area-inset-right,0px)) 28px max(16px,env(safe-area-inset-left,0px))}.is-emp .main{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}.is-emp .menu-btn{display:none}.tabbar{display:flex;position:fixed;z-index:50;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}.tabbar button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;font-size:11px;font-weight:600;color:var(--ink-3);cursor:pointer}.tabbar button.on{color:var(--brand-ink);font-weight:800}h1{font-size:22px}}body:before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--surface)}.head{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}.head .t{display:flex;flex-direction:column;gap:4px;min-width:0}.head p.sub{color:var(--ink-2);max-width:64ch}.crumbs{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}.crumbs button{border:0;background:none;padding:0;color:var(--ink-3);font-weight:600;cursor:pointer}.crumbs button:hover{color:var(--brand-ink);text-decoration:underline}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}.card.flat{box-shadow:none}.card.tight{padding:14px}.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.between{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:10px;min-width:0}.hero{background:var(--hero);color:#fff;border-radius:18px;padding:22px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-6px;top:-6px;width:120px;height:72px;color:#ffffff17;background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%) 0 0/16px 16px;transform:skew(-12deg)}.hero h1,.hero h2{color:#fff}.hero p{color:#ffffffd9}.hero .eyebrow{color:#ffffffb3}.stat{display:flex;flex-direction:column;gap:4px}.stat .lbl{font-size:12px;color:var(--ink-3);font-weight:600}.stat .val{font-family:var(--f-display);font-size:24px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}.stat .sub{font-size:12px;color:var(--ink-2)}.stat.click{cursor:pointer}.stat.click:hover .val{color:var(--brand-ink)}.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.navy{background:var(--navy-soft);color:var(--navy)}.pill.brand{background:var(--brand);color:#fff}.pill.gold{background:var(--gold-soft);color:var(--gold)}.bar{position:relative;height:8px;border-radius:99px;background:var(--surface-2);overflow:visible}.bar>i{display:block;height:100%;border-radius:99px;background:var(--brand)}.bar.ok>i{background:var(--ok)}.bar.warn>i{background:var(--warn)}.bar.navy>i{background:var(--navy)}.bar .mark{position:absolute;top:-4px;width:2px;height:16px;background:var(--ink);opacity:.55;border-radius:2px}.bar.thin{height:5px}.av{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;flex-shrink:0;background:var(--navy)}.av.Sales{background:#6b4c9a}.av.Koordinator{background:var(--brand)}.av.Mekanik{background:#1f3a5f}.av.lg{width:56px;height:56px;font-size:18px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:10px;padding:9px 15px;font-weight:700;font-size:13px;cursor:pointer;background:var(--brand);color:#fff;white-space:nowrap}.btn:hover{filter:brightness(1.06)}.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}.btn.ghost:hover{border-color:var(--brand);color:var(--brand-ink)}.btn.quiet{background:none;color:var(--ink-2);padding:7px 10px}.btn.danger{background:var(--bad)}.btn.sm{padding:6px 11px;font-size:12px;border-radius:8px}.btn.block{width:100%}.field{display:flex;flex-direction:column;gap:5px;min-width:0}.field label{font-size:12px;font-weight:700;color:var(--ink-2)}.input{width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:10px 12px}.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.hint{font-size:11.5px;color:var(--ink-3)}.err{background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600}.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;font-weight:700;font-size:12.5px;color:var(--ink-2);cursor:pointer}.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}.check{display:flex;gap:8px;align-items:center;font-size:13px;padding:6px 0;cursor:pointer}.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}.li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);min-width:0}.li:last-child{border-bottom:0}.li.click{cursor:pointer}.li.click:hover{background:var(--surface-2)}.li .grow{flex:1;min-width:0}.li .name{font-weight:700;line-height:1.3}.li .meta{font-size:12px;color:var(--ink-3)}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;background:var(--surface-2);white-space:nowrap}td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:middle}tr.click{cursor:pointer}tr.click:hover td{background:var(--surface-2)}td.r,th.r{text-align:right}.task{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.task .n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;background:var(--brand-soft);color:var(--brand-ink)}.task.done .n{background:var(--ok-soft);color:var(--ok)}.task .grow{flex:1;min-width:0}.task h3{font-size:14.5px}.task p{font-size:12.5px;color:var(--ink-2);margin-top:2px}@media (max-width: 560px){.task{flex-wrap:wrap}.task .btn{width:100%}}.track{overflow-x:auto;padding:6px 2px 2px}.track-in{position:relative;display:flex;justify-content:space-between;min-width:max-content;gap:6px}.track-in:before{content:"";position:absolute;left:30px;right:30px;top:13px;height:3px;background:var(--line)}.cp{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;width:108px;flex-shrink:0}.cp .dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff}.cp.done .dot{background:var(--ok);border-color:var(--ok)}.cp.next .dot{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}.cp.finish .dot{color:var(--ink);border-color:var(--ink);background:var(--surface)}.cp.finish .dot:after{content:"";width:14px;height:14px;border-radius:3px;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/7px 7px}.cp b{font-size:12px}.cp span{font-size:11px;color:var(--ink-3);line-height:1.3}.cp.done span{color:var(--ok);font-weight:600}.cp.next span{color:var(--warn);font-weight:600}.lesson h3{margin-top:6px}.lesson p{color:var(--ink-2);line-height:1.65;max-width:68ch;white-space:pre-line}.opt{border:1px solid var(--line-strong);border-radius:10px;padding:11px 13px;cursor:pointer;background:var(--surface);text-align:left;width:100%}.opt:hover{border-color:var(--brand)}.opt.sel{border-color:var(--brand);background:var(--brand-soft)}.opt.right{border-color:var(--ok);background:var(--ok-soft)}.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}.steps{display:flex;gap:6px;flex-wrap:wrap}.steps span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 11px;border-radius:99px;background:var(--surface-2);color:var(--ink-3)}.steps span.done{background:var(--ok-soft);color:var(--ok)}.steps span.on{background:var(--brand);color:#fff}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;background:#140f1280;display:flex;align-items:center;justify-content:center;padding:16px}.modal{background:var(--surface);border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:22px;box-shadow:0 30px 70px -30px #00000080;display:flex;flex-direction:column;gap:14px}.toast{position:fixed;z-index:95;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:13px;box-shadow:var(--shadow);max-width:calc(100% - 32px)}@media (min-width: 901px){.toast{bottom:28px}}.empty{text-align:center;padding:26px;color:var(--ink-3);border:1px dashed var(--line-strong);border-radius:var(--radius)}.note{font-size:12px;color:var(--ink-3);background:var(--surface-2);border-radius:10px;padding:10px 12px;line-height:1.5}.callout{border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5}.callout.warn{background:var(--warn-soft);color:var(--warn)}.callout.ok{background:var(--ok-soft);color:var(--ok)}.callout.brand{background:var(--brand-soft);color:var(--brand-ink)}.skeleton{height:120px;border-radius:var(--radius);background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));background-size:200% 100%;animation:sh 1.2s infinite}@keyframes sh{to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.skeleton{animation:none}.side{transition:none}}.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.15fr 1fr}.login-art{background:var(--hero);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden}.login-art:after{content:"";position:absolute;right:-40px;bottom:60px;width:260px;height:150px;color:#ffffff12;background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%) 0 0/30px 30px;transform:skew(-14deg)}.login-art img{width:200px}.login-art h1{color:#fff;font-size:34px;line-height:1.15;max-width:16ch}.login-art ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}.login-art li{display:flex;gap:10px;align-items:flex-start;color:#ffffffe0}.login-form{display:flex;align-items:center;justify-content:center;padding:32px max(20px,env(safe-area-inset-right,0px)) 32px max(20px,env(safe-area-inset-left,0px))}.login-form .box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:16px}.demo{display:grid;grid-template-columns:1fr 1fr;gap:8px}.demo button{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 11px;cursor:pointer}.demo button:hover{border-color:var(--brand)}.demo b{display:block;font-size:12.5px}.demo span{font-size:11px;color:var(--ink-3)}@media (max-width: 860px){.login{grid-template-columns:1fr}.login-art{padding:28px max(20px,env(safe-area-inset-right,0px)) 28px max(20px,env(safe-area-inset-left,0px))}.login-art h1{font-size:24px}.login-art ul,.login-art:after{display:none}.login-art img{width:150px}}.nowrap{white-space:nowrap}.lbl{font-weight:600}.callout.bad{background:var(--bad-soft, #fdecec);color:var(--bad)}:root{--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-io: cubic-bezier(.65, 0, .35, 1)}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}@keyframes grow{0%{transform:scaleX(0)}}@keyframes drift{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(-4%,3%,0) scale(1.08)}to{transform:translateZ(0) scale(1)}}@keyframes speed{0%{transform:translate(-120%) skew(-24deg);opacity:0}12%{opacity:.9}70%{opacity:.9}to{transform:translate(260%) skew(-24deg);opacity:0}}@keyframes flagSlide{0%{background-position:0 0}to{background-position:60px 0}}@keyframes lap{0%{left:0%}to{left:100%}}@keyframes underline{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.login-art>*{position:relative;z-index:1}.login-art .orb{position:absolute;z-index:0;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:drift 16s var(--ease-io) infinite}.login-art .orb.a{width:420px;height:420px;right:-120px;top:-140px;background:radial-gradient(circle,#ff5a74 0%,transparent 70%)}.login-art .orb.b{width:360px;height:360px;left:-140px;bottom:-120px;background:radial-gradient(circle,#3a6aa8 0%,transparent 70%);animation-duration:21s;animation-direction:reverse}.login-art .speed{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.login-art .speed i{position:absolute;left:0;height:2px;width:34%;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:speed 5.5s var(--ease-io) infinite}.login-art .speed i:nth-child(1){top:13%;animation-delay:.2s}.login-art .speed i:nth-child(2){top:29%;width:22%;animation-delay:2.1s;animation-duration:6.5s}.login-art .speed i:nth-child(3){top:76%;animation-delay:3.6s}.login-art .speed i:nth-child(4){top:89%;width:18%;animation-delay:1.2s;animation-duration:7s}.login-art:after{animation:flagSlide 6s linear infinite;z-index:0}.login-art img{animation:fadeUp .8s var(--ease-out) both}.login-art h1{animation:fadeUp .9s var(--ease-out) .15s both}.login-art h1 em{font-style:normal;position:relative;white-space:nowrap}.login-art h1 em:after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.14em;border-radius:4px;background:#ffd166;transform-origin:left;animation:underline 1s var(--ease-out) .9s both;z-index:-1;opacity:.9}.login-art li{animation:fadeUp .7s var(--ease-out) both}.login-art li:nth-child(1){animation-delay:.45s}.login-art li:nth-child(2){animation-delay:.6s}.login-art li:nth-child(3){animation-delay:.75s}.login-art li svg{flex-shrink:0;padding:6px;width:32px;height:32px;border-radius:10px;background:#ffffff1f;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);margin-top:-4px}.login-art .track{display:none;position:relative;height:3px;border-radius:3px;background:#ffffff2e;margin-top:6px;max-width:320px}.login-art .track:before{content:"";position:absolute;top:-4px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #ffffff2e,0 0 18px #fffc;animation:lap 4.5s var(--ease-io) infinite alternate;transform:translate(-50%)}.login-art .foot{animation:fadeIn 1s ease .9s both}.login-form .box{animation:fadeUp .8s var(--ease-out) .1s both}.login-form .box>*{animation:fadeUp .6s var(--ease-out) both}.login-form .box>*:nth-child(2){animation-delay:.2s}.login-form .box>*:nth-child(3){animation-delay:.27s}.login-form .box>*:nth-child(4){animation-delay:.34s}.login-form .box>*:nth-child(5){animation-delay:.41s}.login-form .box>*:nth-child(6){animation-delay:.48s}.login-form .box>*:nth-child(7){animation-delay:.55s}.login-form .box>*:nth-child(n+8){animation-delay:.6s}.demo button{transition:transform .2s var(--ease-out),border-color .2s,box-shadow .2s}.demo button:hover{transform:translateY(-2px);box-shadow:0 10px 22px -16px #7c1f3499}.input{transition:border-color .2s,box-shadow .2s,background-color .2s}.input:focus{box-shadow:0 0 0 4px var(--brand-soft)}.route-anim{animation:fadeIn .35s ease both}.page>*{animation:fadeUp .55s var(--ease-out) both}.page>*:nth-child(1){animation-delay:0s}.page>*:nth-child(2){animation-delay:.05s}.page>*:nth-child(3){animation-delay:.1s}.page>*:nth-child(4){animation-delay:.15s}.page>*:nth-child(5){animation-delay:.2s}.page>*:nth-child(6){animation-delay:.25s}.page>*:nth-child(n+7){animation-delay:.3s}.grid>.card,.grid>.stat{animation:fadeUp .5s var(--ease-out) both}.grid>*:nth-child(2){animation-delay:.06s}.grid>*:nth-child(3){animation-delay:.12s}.grid>*:nth-child(4){animation-delay:.18s}.grid>*:nth-child(n+5){animation-delay:.22s}.card{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s}.card.click:hover,.stat.click:hover,button.card:hover,.grid>.card[role=button]:hover{transform:translateY(-3px);box-shadow:0 16px 32px -22px #1f181c73;border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}.bar>i{transform-origin:left center;animation:grow 1s var(--ease-out) .15s both}.li{transition:background-color .2s,transform .2s var(--ease-out)}.li.click:hover{transform:translate(3px)}.btn{transition:transform .15s var(--ease-out),background-color .2s,box-shadow .2s,filter .2s}.btn:active:not(:disabled){transform:scale(.97)}.nav button{position:relative;transition:background-color .2s,color .2s,padding-left .25s var(--ease-out)}.nav button:hover{padding-left:14px}.nav button.on:before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--brand);animation:grow .35s var(--ease-out) both;transform-origin:top}.side .who{animation:fadeIn .6s ease both}.hero{animation:scaleIn .6s var(--ease-out) both}.hero:after{animation:flagSlide 8s linear infinite}.hero:before{content:"";position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.14),transparent 45%);animation:drift 14s var(--ease-io) infinite;pointer-events:none}.hero>*{position:relative}.modal-bg{animation:fadeIn .2s ease both}.modal{animation:scaleIn .3s var(--ease-out) both}.toast{animation:toastIn .35s var(--ease-out) both}.pill{transition:transform .2s var(--ease-out)}.tabbar button{transition:color .2s,transform .2s var(--ease-out)}.tabbar button.on svg{transform:translateY(-2px);transition:transform .25s var(--ease-out)}.task{transition:transform .25s var(--ease-out),box-shadow .25s}.task:hover{transform:translateY(-2px)}.opt{transition:background-color .2s,border-color .2s,transform .15s var(--ease-out)}.opt:active{transform:scale(.99)}.cp{animation:fadeUp .5s var(--ease-out) both}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important}}.login-art .hero-copy{max-width:56%}.login-art img.person{position:absolute;z-index:1;right:2%;bottom:0;height:min(86%,640px);width:auto;max-width:48%;object-fit:contain;object-position:bottom;pointer-events:none;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35));animation:personIn 1.1s var(--ease-out) .25s both}.login-art .person-glow{position:absolute;z-index:0;right:4%;bottom:-10%;width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);pointer-events:none}@keyframes personIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@media (max-width: 1100px){.login-art .hero-copy{max-width:60%}.login-art img.person{max-width:44%;height:min(70%,520px)}}@media (max-width: 860px){.login-art{min-height:300px}.login-art .hero-copy{max-width:58%}.login-art img.person{width:auto;display:block;height:92%;max-width:46%;right:0}.login-art .person-glow{width:60%;right:-10%}}@media (min-width: 861px){.login{align-items:start}.login-art{position:sticky;top:0;height:100vh;height:100dvh;min-height:520px}.login-form{min-height:100vh;min-height:100dvh}}@media (min-width: 861px) and (max-height: 720px){.login-art{padding:28px 40px;gap:16px}.login-art h1{font-size:28px}.login-art ul{gap:8px}.login-art li{font-size:13px}.login-art>img:not(.person){width:160px}}.login-art .hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:0}.login-art .hero-copy h1{margin:0 0 18px}.login-art .hero-copy .lead{margin:0 0 26px;color:#ffffffc7;font-size:15px;line-height:1.6;max-width:46ch;animation:fadeUp .8s var(--ease-out) .3s both}.login-art .hero-copy ul{gap:14px}.login-art li{line-height:1.5}.login-art li:nth-child(4){animation-delay:.9s}.login-art li:nth-child(5){animation-delay:1.05s}@media (min-width: 861px) and (max-height: 720px){.login-art .hero-copy h1{margin-bottom:12px}.login-art .hero-copy .lead{font-size:13px;margin-bottom:16px}.login-art .hero-copy ul{gap:8px}}@media (min-width: 861px) and (max-height: 600px){.login-art li:nth-child(n+4){display:none}}@media (max-width: 860px){.login-art .hero-copy .lead{font-size:13px;margin-bottom:0}}@media (min-width: 861px){.login-art .hero-copy{max-width:min(52%,360px)}}.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.icon-btn:hover{border-color:var(--brand);color:var(--brand)}.chip-btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:99px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer}.chip-btn:hover{border-color:var(--brand)}.chip-btn.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}.q-text{font-size:19px;font-weight:700;font-family:var(--f-display);line-height:1.45}.fb{display:flex;gap:8px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;animation:fadeUp .35s var(--ease-out) both}.fb.ok{background:var(--ok-soft);color:var(--ok)}.fb.bad{background:var(--warn-soft);color:var(--warn)}.fb svg{flex-shrink:0;margin-top:1px}.warn-b{border-color:var(--warn)}.il{display:block;width:100%;height:auto;border-radius:14px;background:var(--navy-soft)}.il-float{animation:ilFloat 3.4s ease-in-out infinite}@keyframes ilFloat{50%{transform:translateY(-6px)}}.il-wave{animation:ilWave 2.2s ease-in-out infinite}@keyframes ilWave{0%,to{transform:rotate(0)}50%{transform:rotate(-14deg)}}.il-wheel{animation:ilSpin 2.6s linear infinite}@keyframes ilSpin{to{transform:rotate(360deg)}}.il-ride{animation:ilRide 1.6s ease-in-out infinite}@keyframes ilRide{50%{transform:translateY(-3px)}}.il-draw{stroke-dasharray:260;stroke-dashoffset:260;animation:ilDraw 1.6s var(--ease-out) .3s forwards}@keyframes ilDraw{to{stroke-dashoffset:0}}.il-road{animation:ilRoad 1.2s linear infinite}@keyframes ilRoad{to{stroke-dashoffset:-18}}.face{flex-shrink:0;border-radius:50%}.face.mood-kesal{animation:shake .4s ease}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.learn-hero{background:var(--hero);color:#fff;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}.learn-hero h1{color:#fff;font-size:26px}.learn-hero p{color:#ffffffd9;margin-top:4px;max-width:46ch}.lh-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.streak{background:#ffffff24;border-radius:14px;padding:10px 16px;display:flex;flex-direction:column;align-items:center;line-height:1.1;flex-shrink:0}.streak svg{color:var(--gold)}.streak b{font-size:22px;font-family:var(--f-display)}.streak span{font-size:10.5px;opacity:.8}.week{display:flex;gap:6px;flex-wrap:wrap}.week span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;opacity:.75;min-width:34px}.week span i{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-style:normal}.week span.on{opacity:1}.week span.on i{background:var(--gold);border-color:var(--gold);color:#3a2a05}.week span.today i{border-color:#fff;border-style:dashed}.week span.today.on i{border-style:solid}.lh-stats{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:600}.lh-stats span{display:inline-flex;gap:6px;align-items:center}.lh-stats svg{color:var(--gold)}.cont-card{display:flex;gap:14px;align-items:center;text-align:left;cursor:pointer;border:1px solid var(--line);animation:fadeUp .5s var(--ease-out) both}.cont-card:hover{border-color:var(--brand);transform:translateY(-2px)}.cont-art{width:132px;flex-shrink:0}.cont-card h3{font-size:16px}.review-card{display:flex;gap:12px;align-items:center;text-align:left;cursor:pointer}.review-card:hover{border-color:var(--navy)}.rv-ic{width:42px;height:42px;border-radius:12px;background:var(--navy-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}.path-card{display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer;padding:0 0 14px;overflow:hidden}.path-card:hover{transform:translateY(-3px);border-color:var(--brand)}.path-card .il{border-radius:0}.path-card>div{padding:0 14px}.path-card h3{font-size:15.5px}.ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.ring svg{display:block}.ring-in{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.ring-fg{transition:stroke-dashoffset .9s var(--ease-out)}.stars{display:inline-flex;gap:2px}.stars svg{color:var(--line-strong);fill:var(--line-strong)}.stars svg.on{color:var(--gold);fill:var(--gold);animation:starPop .45s var(--ease-out) both}@keyframes starPop{0%{transform:scale(.3) rotate(-30deg)}70%{transform:scale(1.25)}to{transform:scale(1)}}.mastery-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.mst{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.path-head{display:flex;gap:14px;align-items:center}.ph-art{width:150px;flex-shrink:0}.journey{list-style:none;margin:0;padding:0 0 0 6px;display:flex;flex-direction:column}.j-level{padding:16px 0 8px 40px}.j-node{display:flex;gap:12px;position:relative;padding:5px 0;animation:fadeUp .4s var(--ease-out) both}.j-node:before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--line)}.j-node:first-child:before{top:14px}.j-node:last-child:before{bottom:auto;height:14px}.j-dot{width:32px;height:32px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);color:var(--ink-3);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;position:relative;z-index:1;margin-top:6px}.j-node.done .j-dot{background:var(--ok);border-color:var(--ok);color:#fff}.j-node.current .j-dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 5px var(--brand-soft);animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 9px transparent}}.j-node.locked .j-dot,.j-node.soon .j-dot{background:var(--surface-2)}.j-card{flex:1;display:flex;gap:10px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;min-width:0}.j-card:hover:not(:disabled){border-color:var(--brand);transform:translate(2px)}.j-card:disabled{cursor:default;opacity:.62}.j-node.current .j-card{border-color:var(--brand);box-shadow:var(--shadow)}.j-card .name{font-weight:700;font-size:14.5px}.j-card .meta{font-size:12px;color:var(--ink-3);margin-top:2px}.player{max-width:680px;margin:0 auto;padding:18px 16px 90px;display:flex;flex-direction:column;gap:16px;min-height:calc(100dvh - 70px)}.pl-top{display:flex;align-items:center;gap:12px}.pl-bar{flex:1;display:flex;gap:4px}.pl-bar i{flex:1;height:6px;border-radius:3px;background:var(--surface-2);transition:background .3s}.pl-bar i.done,.pl-bar i.ok{background:var(--ok)}.pl-bar i.on{background:var(--brand)}.pl-bar i.bad{background:var(--bad)}.pl-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;flex:1}.in-r{animation:slideR .35s var(--ease-out) both}.in-l{animation:slideL .35s var(--ease-out) both}@keyframes slideR{0%{opacity:0;transform:translate(26px)}}@keyframes slideL{0%{opacity:0;transform:translate(-26px)}}.pl-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:14px 0 6px}.intro-art{max-height:190px}.st-title{font-size:25px}.st-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}.st-emoji,.st-h{font-size:20px}.obj{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;animation:fadeUp .4s var(--ease-out) both}.obj svg{color:var(--ok);flex-shrink:0;margin-top:1px}.lesson-lead{color:var(--ink-2);line-height:1.65}.pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.pts li{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.55;animation:fadeUp .4s var(--ease-out) both}.pts li span{width:24px;height:24px;border-radius:50%;background:var(--navy-soft);color:var(--navy);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.must{background:var(--gold-soft);color:var(--gold);border-radius:12px;padding:11px 14px;font-size:13.5px;font-weight:700}.dd>div{border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5}.dd b{display:flex;gap:6px;align-items:center}.dd>div>div{display:flex;gap:7px;align-items:flex-start;animation:fadeUp .4s var(--ease-out) both}.dd svg{flex-shrink:0;margin-top:2px}.dd-do{background:var(--ok-soft)}.dd-do b,.dd-do svg{color:var(--ok)}.dd-dont{background:var(--bad-soft)}.dd-dont b,.dd-dont svg{color:var(--bad)}.flips{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.flip{perspective:700px;background:none;border:0;padding:0;cursor:pointer;min-height:110px}.fl-in{position:relative;display:block;width:100%;height:100%;min-height:110px;transform-style:preserve-3d;transition:transform .5s var(--ease-out)}.flip.on .fl-in{transform:rotateY(180deg)}.fl-f,.fl-b{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;line-height:1.4}.fl-f{background:var(--navy);color:#fff;font-weight:800;font-size:16px;font-family:var(--f-display)}.fl-b{background:var(--surface);border:1.5px solid var(--navy);transform:rotateY(180deg);font-size:12.5px}.order-slots{display:flex;flex-direction:column;gap:6px}.slot{display:flex;gap:9px;align-items:center;border:1.5px dashed var(--line-strong);border-radius:10px;padding:9px 12px;font-size:13.5px;min-height:40px;color:var(--ink-2)}.slot span{width:22px;height:22px;border-radius:50%;background:var(--surface-2);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.slot.fill{border-style:solid;background:var(--surface)}.slot.ok{border-color:var(--ok);background:var(--ok-soft)}.slot.bad{border-color:var(--bad);background:var(--bad-soft);animation:shake .35s ease}.rp-brief{position:relative}.rp-art{max-height:150px}.rp-who{position:absolute;left:12px;bottom:-8px;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 14px 8px 8px;box-shadow:var(--shadow)}.chat{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow-y:auto;padding:4px 2px}.bub{max-width:85%;border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.5;animation:fadeUp .3s var(--ease-out) both}.bub.cust{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:6px}.bub.you{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:6px}.bub .ctx{font-size:11.5px;color:var(--ink-3);font-style:italic;margin-bottom:4px}.bub.typing{display:flex;gap:4px;padding:14px 16px}.bub.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:blink 1s infinite}.bub.typing i:nth-child(2){animation-delay:.18s}.bub.typing i:nth-child(3){animation-delay:.36s}@keyframes blink{40%{opacity:.25;transform:translateY(-3px)}}.coach{margin-top:8px;border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.45}.coach.ok{background:var(--ok-soft);color:var(--ok)}.coach.warn{background:var(--gold-soft);color:var(--gold)}.coach.bad{background:var(--bad-soft);color:var(--bad)}.bub.you .coach{background:#fffffff2}.rp-end{align-self:center;text-align:center;border-radius:14px;padding:12px 18px;display:flex;flex-direction:column;gap:3px;font-size:13.5px;animation:fadeUp .4s var(--ease-out) both}.rp-end.baik{background:var(--ok-soft);color:var(--ok)}.rp-end.cukup{background:var(--gold-soft);color:var(--gold)}.rp-end.gagal{background:var(--bad-soft);color:var(--bad)}.result{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.result.pass{border-color:var(--ok)}.result h1{font-size:26px}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.confetti i{position:absolute;top:-12px;width:8px;height:13px;border-radius:2px;animation:confFall 2.6s ease-in forwards}@keyframes confFall{to{transform:translateY(420px) rotate(560deg);opacity:0}}.rate{background:none;border:0;padding:4px;cursor:pointer;color:var(--line-strong)}.rate svg{fill:currentColor}.rate.on{color:var(--gold)}@media (max-width: 700px){.cont-art{width:96px}.path-head{flex-direction:column;align-items:stretch}.ph-art{width:100%}.intro-art{max-height:150px}.pl-card{padding:16px}.st-title{font-size:21px}}@media (prefers-reduced-motion: reduce){.il-float,.il-wave,.il-wheel,.il-ride,.il-road,.j-node.current .j-dot{animation:none}.fl-in{transition:none}.in-r,.in-l,.obj,.pts li,.bub,.j-node{animation-duration:.01s}.confetti{display:none}}.qr{background:#fff;border-radius:16px;padding:10px;border:1px solid var(--line);max-width:100%}.qr svg{display:block;width:100%;height:100%}.qr-code{font-family:var(--f-display);font-size:30px;font-weight:800;letter-spacing:.28em;padding-left:.28em;color:var(--ink)}.or{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12px}.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}.hint.bad{color:var(--bad)}.guest{min-height:100dvh;background:var(--bg)}.guest-top{display:flex!important;position:sticky;top:0;z-index:5;gap:10px}.guest .page{padding-top:18px}@media print{body:has(.qr-sheet) *{visibility:hidden!important}body:has(.qr-sheet) .qr-sheet,body:has(.qr-sheet) .qr-sheet *{visibility:visible!important}body:has(.qr-sheet) .qr-sheet{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;background:#fff}body:has(.qr-sheet) .qr-sheet .qr{width:110mm!important;height:110mm!important}.no-print{display:none!important}}.guest-top{align-items:center;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}.guest-top img{height:30px;width:auto}.guest-top .sp{flex:1}.guest .page{padding:18px 14px 40px}