/* Layout concept: one airy composed sheet of glass tiles, with four course colours carrying through. Single light look by design. */
:root{--bg:#f1f3fc;--bg2:#e7ebfa;--ink:#101d36;--soft:#3f4b66;--mute:#667089;--glass:#ffffffd9;--glass2:#ffffffa6;--line:#d9dff0;--white:#fff;
--cyan:#0fc3d6;--cyan-d:#0a8c9c;--orange:#ff7a1c;--yellow:#ffc21f;--purple:#8a2fc4;--blue:#2f6df0;--green:#17a673;
--shadow:0 18px 44px -24px #3a4a8a55;--r:26px;--display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
@font-face{font-family:uicons-bold-rounded;src:url(uicons-bold-rounded.woff2) format("woff2");font-display:swap}
i[class*="fi-br-"]{display:inline-flex;line-height:1}
i[class*="fi-br-"]:before{font-family:uicons-bold-rounded!important;font-style:normal;font-weight:400!important;line-height:1;-webkit-font-smoothing:antialiased}
.fi-br-book-alt:before{content:"\f274"}.fi-br-pencil:before{content:"\fa2f"}.fi-br-layers:before{content:"\f884"}.fi-br-users-alt:before{content:"\fea3"}.fi-br-arrow-right:before{content:"\f19b"}.fi-br-envelope:before{content:"\f5e1"}.fi-br-document:before{content:"\f57d"}.fi-br-briefcase:before{content:"\f2e9"}.fi-br-leaf:before{content:"\f894"}.fi-br-users-class:before{content:"\fea4"}.fi-br-users:before{content:"\fea8"}.fi-br-globe:before{content:"\f70b"}.fi-br-comments:before{content:"\f4be"}.fi-br-school:before{content:"\fba7"}.fi-br-menu-burger:before{content:"\f92b"}.fi-br-link-alt:before{content:"\f8bd"}.fi-br-cross:before{content:"\f4fa"}.fi-br-arrow-left:before{content:"\f197"}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1100px 620px at 88% -6%,#dfe8ff 0,transparent 70%),radial-gradient(900px 600px at 2% 104%,#e6e2fb 0,transparent 70%),var(--bg);color:var(--ink);font:500 16px/1.5 var(--display);min-height:100%;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0;padding:0}ul{list-style:none}
h1,h2{text-wrap:balance;letter-spacing:-.035em}
:focus-visible{outline:3px solid var(--cyan-d);outline-offset:3px;border-radius:10px}
.wrap{max-width:1640px;margin:auto;padding-left:max(16px,clamp(16px,3.4vw,56px),env(safe-area-inset-left,0px));padding-right:max(16px,clamp(16px,3.4vw,56px),env(safe-area-inset-right,0px));padding-block:18px 36px;display:grid;gap:28px}
/* header */
.top{display:flex;align-items:center;gap:24px;min-height:48px}
.logo{font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:1}
.logo b{color:var(--orange);font-weight:800}
.nav{display:flex;gap:6px;margin-inline:auto}
.nav a{padding:9px 21px;border-radius:99px;color:var(--soft);font-size:15.5px;font-weight:600}
.nav a:hover{color:var(--ink);background:var(--glass2)}
.nav a[aria-current]{background:var(--white);color:var(--ink);font-weight:700;box-shadow:0 8px 20px -12px #3a4a8a80}
.place{display:flex;align-items:center;gap:14px;color:var(--soft);font-size:15px;white-space:nowrap}
.place:before{content:"";width:40px;height:1.5px;background:#b9c1d6}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink);font-size:18px;align-items:center;justify-content:center;cursor:pointer}
/* shared */
.tag{font-size:15.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--soft);display:flex;gap:6px;align-items:baseline}
.tag b{font-size:20px;font-weight:800;letter-spacing:0}
.c-cyan{--c:var(--cyan)}.c-orange{--c:var(--orange)}.c-yellow{--c:var(--yellow)}.c-purple{--c:var(--purple)}.c-blue{--c:var(--blue)}.c-green{--c:var(--green)}
.tag b{color:var(--c)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:12px 24px;border:1.5px solid #c7cee2;border-radius:99px;background:var(--glass2);font-weight:700;font-size:16px;width:max-content;transition:.2s}
.btn:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.glass{background:var(--glass);border:1.5px solid var(--white);border-radius:var(--r);box-shadow:var(--shadow)}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1.3fr);gap:32px;align-items:center}
.photo{border-radius:34px;overflow:hidden;border:4px solid var(--white);box-shadow:0 26px 60px -28px #33406f88;aspect-ratio:1.86}
.photo img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.intro{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:18px;align-items:center}
.intro>div:first-child{display:grid;gap:14px;min-width:0}
h1.name{font-size:clamp(40px,3.9vw,60px);line-height:1;font-weight:800}
h1.name b{color:var(--cyan)}
.lead{font-size:clamp(18px,1.3vw,20px);line-height:1.3;font-weight:600;color:var(--soft);letter-spacing:-.01em}
.lead+.lead{font-weight:500}
.intro .btn{margin-top:8px}
/* stack */
.stack{--w:226px;--dx:64px;position:relative;height:330px;width:100%;max-width:430px}
.fc{position:absolute;top:26px;left:0;width:var(--w);height:300px;border-radius:24px;transition:transform .55s cubic-bezier(.2,.8,.2,1),background .4s;border:1.5px solid #ffffffcc;cursor:pointer;overflow:hidden;box-shadow:0 18px 34px -20px #2a386f99;background:linear-gradient(165deg,color-mix(in srgb,var(--c) 72%,#fff),var(--c));padding:0;font:inherit;text-align:left;color:var(--ink)}
.fc[data-p="0"]{z-index:4;background:var(--white);cursor:default;transform:none}
.fc[data-p="1"]{z-index:3;transform:translate(var(--dx),-12px) scale(.96);transform-origin:left top}
.fc[data-p="2"]{z-index:2;transform:translate(calc(var(--dx)*1.92),-6px) scale(.95);transform-origin:left top}
.fc[data-p="3"]{z-index:1;transform:translate(calc(var(--dx)*2.7),0) scale(.94);transform-origin:left top}
.fc .ic{position:absolute;top:22px;right:20px;font-size:25px;color:var(--white)}
.fc[data-p="0"] .ic{color:var(--ink)}
.fc .body{position:absolute;inset:0;padding:24px 24px 0;display:flex;flex-direction:column;opacity:0;transition:opacity .25s;visibility:hidden}
.fc[data-p="0"] .body{opacity:1;visibility:visible}
.count{font-size:15px;color:var(--soft);font-variant-numeric:tabular-nums}
.rule{width:44px;height:4px;background:var(--c);border-radius:4px;margin:26px 0 22px}
.q{font-size:25px;line-height:1.14;font-weight:700;letter-spacing:-.03em}
.src{margin-top:12px;font-size:13.5px;color:var(--mute);display:inline-flex;align-items:center;gap:8px}
.wave{position:absolute;left:0;right:0;bottom:0;height:78px;width:100%;color:var(--c);opacity:.85}
.orbit{position:absolute;inset:-10px -24px -6px -44px;width:calc(100% + 68px);height:calc(100% + 16px);z-index:5;pointer-events:none;overflow:visible}
.orbit.back{z-index:0}
.dots{position:absolute;right:-2px;top:50%;translate:0 -30%;display:grid;gap:11px;z-index:6}
.dots button{width:19px;height:19px;border-radius:50%;background:var(--c);border:0;padding:0;cursor:pointer;opacity:.55;transition:.2s}
.dots button[aria-pressed=true]{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
/* rows */
.row{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:28px;align-items:center}
.row+.row,.rule-t{border-top:1px solid var(--line);padding-top:22px}
.say{display:grid;gap:12px;justify-items:start}
.say h2{font-size:clamp(23px,1.65vw,26px);line-height:1.12;font-weight:800}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.card{position:relative;display:flex;flex-direction:column;padding:8px;background:var(--glass);border:1.5px solid var(--white);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .22s;min-width:0}
a.card:hover{transform:translateY(-4px)}
.card .pic{position:relative;aspect-ratio:1.55;border-radius:19px;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:11px;top:9px;width:44px;height:44px;border-radius:13px;background:var(--c);color:var(--white);display:grid;place-items:center;font-size:20px}
.c-yellow .badge{color:var(--ink)}
.card .txt{padding:11px 42px 9px 9px;display:grid;gap:3px}
.card h3{font-size:16.5px;line-height:1.14;font-weight:700;letter-spacing:-.02em;display:flex;gap:9px}
.card h3:before{content:"";flex:none;width:13px;height:13px;border-radius:50%;background:var(--c);margin-top:3px}
.card p{font-size:13.5px;line-height:1.3;color:var(--mute);padding-left:22px}
.go{position:absolute;right:13px;bottom:13px;width:36px;height:36px;border-radius:50%;background:var(--white);display:grid;place-items:center;font-size:14px;box-shadow:0 6px 14px -8px #3a4a8a99}
.split{display:grid;grid-template-columns:minmax(0,2.03fr) minmax(0,1fr);gap:18px;align-items:stretch}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.panel{padding:16px 20px;display:grid;gap:6px;align-content:start}
.mat{display:grid;grid-template-columns:22px minmax(0,1fr) auto 16px;gap:10px;align-items:center;padding:8px 0;font-size:14.5px;font-weight:700;letter-spacing:-.015em;border-bottom:1px solid var(--line);line-height:1.2}
.mat:last-child{border:0}
.mat small{font-size:13px;font-weight:500;color:var(--soft);letter-spacing:0;white-space:nowrap}
.mat:hover{color:var(--cyan-d)}
[hidden]{display:none!important}
.uni{display:inline-flex;gap:3px;padding:4px;border-radius:99px;background:var(--bg2);width:max-content}
.uni button{border:0;background:transparent;font:700 14.5px/1 var(--display);color:var(--soft);padding:10px 20px;border-radius:99px;cursor:pointer}
.uni button:hover{color:var(--ink)}
.uni button[aria-pressed=true]{background:var(--ink);color:var(--white)}
/* inner pages */
.pagehead{display:grid;gap:12px;max-width:760px;padding-block:18px 6px}
.pagehead h1{font-size:clamp(38px,4.4vw,62px);line-height:1.02;font-weight:800}
.pagehead p{font-size:19px;color:var(--soft);line-height:1.4}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.soon{font-size:13px;font-weight:700;color:var(--mute)}
.group{padding:24px 28px;display:grid;gap:6px}
.group h2{font-size:23px;font-weight:800;display:flex;gap:10px;align-items:center}
.group h2 i{color:var(--c);font-size:20px}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.empty{padding:44px 36px;display:grid;gap:10px;max-width:760px}
.empty h2{font-size:26px;font-weight:800}.empty p{color:var(--soft)}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center}
.story .text{display:grid;gap:16px;font-size:19px;line-height:1.5;color:var(--soft);max-width:62ch}
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px}
.way{padding:26px;display:grid;gap:8px;min-width:0}
.way i{font-size:26px;color:var(--c)}
.way span{color:var(--mute);font-size:14px}
.way strong{font-size:20px;letter-spacing:-.02em;overflow-wrap:anywhere}
.foot{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;color:var(--mute);font-size:14px;padding-top:6px}
.foot a:hover{color:var(--ink)}
.backl{display:inline-flex;gap:10px;align-items:center;font-weight:700;color:var(--soft);width:max-content}.backl:hover{color:var(--ink)}
.weeks{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:18px}
.wk{position:relative;aspect-ratio:1.586;border-radius:var(--r);border:1.5px solid var(--white);padding:18px 22px;font:inherit;text-align:left;color:var(--ink);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;box-shadow:var(--shadow);transition:transform .2s;cursor:pointer;overflow:hidden;min-width:0}
button.wk:hover,a.wk:hover{transform:translateY(-4px)}
.wk.on{background:linear-gradient(140deg,#7fe9f3,#17c6da 58%,#3f9bf0)}
.wk.off{background:var(--glass);color:var(--soft)}
.wk.study{background:linear-gradient(140deg,#ffe493,#ffc21f);cursor:default}
.wk.guide{background:linear-gradient(140deg,#ffb06f,#ff7a1c)}
.wl{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.wn{font-size:clamp(34px,3.1vw,50px);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;grid-row:1/3;grid-column:2}
.wn.sm{font-size:32px}
.wt{grid-column:1/3;align-self:end;font-size:17px;line-height:1.15;font-weight:700;letter-spacing:-.02em;padding-bottom:9px}
.wk.off .wt{font-weight:600;color:var(--mute)}
.wf{grid-column:1/3;display:flex;gap:7px;font-size:13px;font-weight:700;align-items:center;height:14px}
.pip{width:12px;height:12px;border-radius:50%;background:#10203a2b}.pip.open{background:var(--ink)}.pip.cancel{background:transparent;border:2px solid #10203a55}
.wk.off .pip.open{background:var(--cyan)}
dialog.sheet{border:0;border-radius:30px;padding:clamp(20px,3vw,34px);width:min(680px,calc(100vw - 32px));max-height:min(86vh,760px);overflow:auto;background:var(--white);color:var(--ink);box-shadow:0 40px 90px -30px #1b2a5aaa}
dialog.sheet::backdrop{background:#16224466;backdrop-filter:blur(7px)}
.sh{display:flex;justify-content:space-between;gap:16px;align-items:start}
.sh h2{font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.05;margin-top:4px}
.x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:14px}
.sess{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-top:20px}
.sb{border:1.5px solid var(--line);background:var(--bg);border-radius:20px;padding:16px;font:inherit;text-align:left;color:var(--ink);cursor:pointer;display:grid;gap:2px;min-width:0}
.sb b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.sb span{font-size:13px;color:var(--mute);line-height:1.2}
.sb:hover:not(:disabled){border-color:var(--cyan-d)}
.sb[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}.sb[aria-pressed=true] span{color:#c9d3e8}
.sb:disabled{cursor:default;opacity:.55}
#wkc:not(:empty){margin-top:20px;display:grid;gap:10px}
#wkc h3{font-size:19px;font-weight:800;letter-spacing:-.02em}
.it{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;gap:14px;align-items:center;padding:12px 16px 12px 12px;border-radius:18px;background:var(--bg);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.it:hover{background:var(--bg2)}
.it>i:first-child{width:44px;height:44px;border-radius:13px;background:var(--cyan);color:var(--ink);display:grid;place-items:center;font-size:18px}
.demo{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:14px 18px}
.demo .lab{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.demo .sem{font-weight:700}
.demo .act{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dbtn{border:1.5px solid var(--ink);background:var(--ink);color:var(--white);font:700 14.5px/1 var(--display);padding:11px 18px;border-radius:99px;cursor:pointer}
.dbtn.ghost{background:transparent;color:var(--ink)}
.demo .msg{font-weight:700;color:var(--soft)}
.switch{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;background:var(--bg2);font-weight:700}
.switch small{display:block;font-weight:500;color:var(--mute);font-size:13px}
.tgl{flex:none;position:relative;width:58px;height:32px;border-radius:99px;border:0;background:#b9c1d6;cursor:pointer;transition:.2s}
.tgl:after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--white);transition:.2s}
.tgl[aria-checked=true]{background:var(--green)}.tgl[aria-checked=true]:after{left:30px}
.pip.closed{background:transparent;border:2px solid var(--ink)}
.only{font-style:normal;font-size:12px;font-weight:700;color:var(--orange);margin-left:8px}
.sched{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;font-weight:600;color:var(--soft)}
.sched input,.demo input,.login input{font:600 15px var(--display);padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);max-width:100%}
.login{max-width:420px;padding:28px;display:grid;gap:8px}.login h2{font-size:26px;font-weight:800;margin-bottom:6px}.login label{font-weight:700;font-size:14px;margin-top:6px}.login .dbtn{margin-top:12px}
.linkb{border:0;background:none;font:600 14px var(--display);color:var(--soft);cursor:pointer;text-decoration:underline;justify-self:start;padding:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.frame{width:100%;height:82vh;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.msg{color:var(--soft)}
.mrow{display:grid;gap:6px}.mrow .switch{padding:8px 14px;background:transparent}.mrow small{font-size:13px;color:var(--mute);font-weight:600}
.wd{grid-column:1;font-size:13.5px;font-weight:600;align-self:start;margin-top:2px}
.wk.off .wd{color:var(--mute)}
.sb .when{grid-column:1/-1;font-size:12.5px;font-weight:600;color:var(--soft);margin-top:4px}.sb[aria-pressed=true] .when{color:#c9d3e8}
.eh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.eform{display:grid;gap:10px;padding:16px;border-radius:18px;background:var(--bg2)}
.ef{display:grid;gap:4px;font-size:13px;font-weight:700;color:var(--soft)}
.ef input,.ef select{font:600 15px var(--display);padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);width:100%;min-width:0}
.ec{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600}
.eb,.etools{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.etools{padding:0 14px 4px}
.linkb.danger{color:#c62828}
.pagehead .desc{display:grid;gap:12px}.pagehead .desc p{font-size:17px;line-height:1.55}
/* responsive */
@media(max-width:1500px){.intro{grid-template-columns:minmax(0,1fr) 400px}.stack{--w:208px;--dx:58px}.q{font-size:23px}}
@media(max-width:1320px){.weeks{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hero{grid-template-columns:1fr}.photo{max-width:820px;width:100%}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.row{grid-template-columns:1fr}.split{grid-template-columns:1fr}.nav a{padding:9px 14px}}
@media(max-width:1020px){.place{display:none}.burger{display:inline-flex}.top{flex-wrap:wrap}.nav{display:none;order:9;width:100%;flex-direction:column;background:var(--white);border-radius:20px;padding:8px}.nav.open{display:flex}.grid3,.groups,.story{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.weeks{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}.wk{padding:13px 15px;aspect-ratio:1.25}.wt{font-size:15px}.sess{grid-auto-flow:row}.sb{grid-template-columns:auto 1fr;gap:12px;align-items:baseline}.intro{grid-template-columns:1fr}.cards.three,.cards,.grid3,.ways{grid-template-columns:1fr}.stack{max-width:100%;--w:190px;--dx:40px}.fc{left:26px}.q{font-size:20px}.dots{right:0}.orbit{left:0;top:34px;right:0;bottom:auto;width:100%;height:calc(100% + 16px)}.fc:not([data-p="0"]) .ic{right:9px;font-size:17px}.src{white-space:nowrap}.photo{border-radius:24px;aspect-ratio:1.5}.card .pic{aspect-ratio:1.9}.mat{grid-template-columns:22px minmax(0,1fr) 16px}.mat small{display:none}.group{padding:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}