:root{
  --bg:#FFFFFF; --ink:#1A1A2E; --muted:#5A6070; --line:#E2E3E9; --soft:#F3F4F6;
  --brand:#5C2D91; --brand-2:#7B3FA0; --brand-3:#9B59B6; --link:#5C2D91; --logo:#5C2D91;
  --on-brand:#FFFFFF; --on-brand-muted:#E4D8F0; --field:#FFFFFF;
  --display:'Outfit','Avenir Next','Segoe UI',system-ui,sans-serif;
  --body:'Inter','Helvetica Neue','Segoe UI',system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1A1A2E; --ink:#F3F4F6; --muted:#ABB0BD; --line:#34344C; --soft:#232339;
    --link:#CDB0E3; --logo:#FFFFFF; --field:#232339;
  }
}
:root[data-theme="dark"]{
  --bg:#1A1A2E; --ink:#F3F4F6; --muted:#ABB0BD; --line:#34344C; --soft:#232339;
  --link:#CDB0E3; --logo:#FFFFFF; --field:#232339;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 88px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brand-3); outline-offset:3px; border-radius:2px}
h1,h2,h3{font-family:var(--display); line-height:1.12; margin:0; letter-spacing:-0.01em}
h1{font-weight:700; font-size:clamp(2.5rem,5.6vw,4.4rem); letter-spacing:-0.025em}
h2{font-weight:600; font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-weight:600; font-size:1.2rem; line-height:1.3}
p{margin:0}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px}
.lead{font-size:1.2rem; line-height:1.55; color:var(--muted); max-width:36em}
.measure{max-width:38em}
.muted{color:var(--muted)}
.skip{position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:10px 16px; z-index:20}
.skip:focus{left:12px; top:12px}

/* header */
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--bg); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px}
.logo{display:block; width:132px; height:23px; background:var(--logo);
  -webkit-mask:url("img/logo.png") center/contain no-repeat; mask:url("img/logo.png") center/contain no-repeat}
.logo-link{display:inline-flex; padding:8px 0}
.nav{display:flex; align-items:center; gap:30px}
.nav a{color:var(--ink); font-size:0.95rem; font-weight:500}
.nav a[aria-current="page"]{color:var(--link)}
.nav a.btn,.nav a.btn:hover{color:var(--on-brand)}
.btn{display:inline-block; font-family:var(--display); font-weight:600; font-size:1rem; line-height:1; padding:15px 22px; border-radius:6px; border:1px solid var(--brand); background:var(--brand); color:var(--on-brand); cursor:pointer}
.btn:hover{background:var(--brand-2); border-color:var(--brand-2); text-decoration:none}
.btn.small{padding:12px 16px; font-size:0.92rem}
.btn.quiet{background:transparent; color:var(--link); border-color:var(--line)}
.btn.quiet:hover{border-color:var(--link); background:transparent}
.menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:6px; color:var(--ink); font:500 0.95rem var(--body); padding:10px 14px; cursor:pointer}
@media (max-width:820px){
  .menu-btn{display:block}
  .bar{flex-wrap:wrap; height:auto; min-height:72px; gap:0 24px}
  .nav{display:none; flex-basis:100%; flex-direction:column; align-items:flex-start; gap:0; padding:0 0 20px; border-top:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:12px 0; width:100%}
  .nav a.btn{width:auto; margin-top:10px; padding:14px 18px}
}

/* pages */
section{padding:88px 0}
section.tight{padding:56px 0}
.rule{border-top:1px solid var(--line)}
.page-head{padding-top:72px; padding-bottom:40px}
.page-head h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.page-head .lead{margin-top:20px}

/* hero */
.hero{padding:84px 0 92px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:72px; align-items:end}
.hero .lead{margin-top:26px}
.actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.layers{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.layers a{display:grid; grid-template-columns:1fr auto; gap:4px 20px; padding:18px 0; border-bottom:1px solid var(--line); color:var(--ink)}
.layers a:hover{text-decoration:none}
.layers a:hover .l-name{color:var(--link)}
.l-name{font-family:var(--display); font-weight:600; font-size:1.2rem}
.l-count{font-family:var(--display); font-weight:500; font-size:1rem; color:var(--muted); white-space:nowrap; align-self:baseline}
.l-desc{grid-column:1 / -1; font-size:0.93rem; color:var(--muted); line-height:1.45}
.layers-cap{font-size:0.93rem; color:var(--muted); margin-bottom:12px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; gap:48px}}

/* band */
.band{background:var(--brand); color:var(--on-brand); padding:76px 0 80px; clip-path:polygon(0 0,calc(100% - 88px) 0,100% 88px,100% 100%,0 100%)}
.band h2{font-size:clamp(1.9rem,4vw,3rem); max-width:17em; letter-spacing:-0.02em}
.band p{color:var(--on-brand-muted); margin-top:24px; max-width:38em; font-size:1.1rem}
@media (max-width:600px){.band{clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}}

/* definition grid */
.parts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 48px; margin:44px 0 0}
.parts div{border-top:1px solid var(--line); padding-top:18px}
.parts dt{font-family:var(--display); font-weight:600; font-size:1.15rem}
.parts dd{margin:8px 0 0; color:var(--muted); font-size:0.97rem; line-height:1.55}
@media (max-width:820px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.parts{grid-template-columns:1fr}}

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:64px}
.split.even{grid-template-columns:1fr 1fr}
@media (max-width:820px){.split,.split.even{grid-template-columns:1fr; gap:32px}}
.stack > * + *{margin-top:18px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:40px}
.two > div{border-top:1px solid var(--ink); padding-top:20px}
.two p{color:var(--muted); margin-top:10px}
@media (max-width:720px){.two{grid-template-columns:1fr; gap:32px}}
.plain-list{list-style:none; margin:20px 0 0; padding:0; columns:2; column-gap:48px}
.plain-list li{padding:9px 0; border-bottom:1px solid var(--line); break-inside:avoid}
@media (max-width:560px){.plain-list{columns:1}}
.soft{background:var(--soft)}
.closing h2{max-width:16em}
.closing .actions{margin-top:28px}

/* tables */
.scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:0.95rem}
th{font-family:var(--display); font-weight:600; text-align:left; font-size:0.9rem; color:var(--muted); padding:10px 16px 10px 0; border-bottom:1px solid var(--ink); white-space:nowrap}
td{padding:12px 16px 12px 0; border-bottom:1px solid var(--line); vertical-align:top}
td.code{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--muted); width:1%}
td.lvl,td.num{white-space:nowrap; color:var(--muted)}
td.num,th.num{text-align:right; padding-right:0}
td strong{font-weight:600}

/* catalog */
.controls{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,0.8fr); gap:16px; align-items:end; padding:22px 0; position:sticky; top:calc(env(safe-area-inset-top,0px) + 73px); background:var(--bg); z-index:5; border-bottom:1px solid var(--line)}
@media (max-width:760px){.controls{grid-template-columns:1fr; position:static}}
label{display:block; font-size:0.88rem; font-weight:500; margin-bottom:6px}
input,select,textarea{width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--field); border:1px solid #8A8FA0; border-radius:6px; padding:12px 14px}
textarea{min-height:130px; resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand-3); outline-offset:1px}
.count{padding:18px 0 0; color:var(--muted); font-size:0.95rem}
.layer-block{padding-top:44px}
.layer-block h2{font-size:1.7rem}
.layer-block > p{color:var(--muted); margin-top:8px; max-width:44em}
.groups{margin-top:22px; border-top:1px solid var(--ink)}
details{border-bottom:1px solid var(--line); scroll-margin-top:200px}
summary{display:grid; grid-template-columns:3.2rem 1fr auto; gap:12px; align-items:baseline; padding:16px 0; cursor:pointer; list-style:none}
summary::-webkit-details-marker{display:none}
summary .g-id{color:var(--muted); font-variant-numeric:tabular-nums; font-size:0.95rem}
summary .g-name{font-family:var(--display); font-weight:600; font-size:1.08rem; line-height:1.35}
summary .g-n{color:var(--muted); font-size:0.93rem; white-space:nowrap}
summary:hover .g-name{color:var(--link)}
details[open] summary .g-name{color:var(--link)}
.g-body{padding:0 0 28px 3.95rem}
.g-body > p{color:var(--muted); max-width:44em; margin-bottom:14px; font-size:0.97rem}
@media (max-width:600px){.g-body{padding-left:0} summary{grid-template-columns:2.6rem 1fr auto}}
.empty{padding:56px 0; max-width:30em}
.empty p{color:var(--muted); margin:10px 0 22px}

/* form */
.form{display:grid; gap:18px; max-width:34em}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.status{margin-top:4px; font-size:0.97rem}
.status.err{color:#C0392B}
:root[data-theme="dark"] .status.err{color:#FF9B8F}

/* footer */
footer{background:#1A1A2E; color:#F3F4F6; padding:64px 0 48px; margin-top:40px; border-top:1px solid #34344C}
footer .logo{background:#FFFFFF}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px}
.foot p{color:#ABB0BD; margin-top:16px; max-width:22em; font-size:0.97rem}
.foot h3{font-size:0.95rem; color:#ABB0BD; font-weight:500; font-family:var(--body)}
.foot ul{list-style:none; margin:12px 0 0; padding:0}
.foot li{padding:5px 0}
.foot a{color:#F3F4F6}
.legal{margin-top:48px; padding-top:22px; border-top:1px solid #34344C; color:#ABB0BD; font-size:0.9rem}
@media (max-width:720px){.foot{grid-template-columns:1fr; gap:32px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* screenshots */
.shot{margin:0}
.shot img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:6px; background:#fff}
.shot figcaption{font-size:0.9rem; color:var(--muted); margin-top:10px; line-height:1.45}
.shots.two-up{display:grid; grid-template-columns:1fr 1fr; gap:40px 32px}
@media (max-width:760px){.shots.two-up{grid-template-columns:1fr}}
.parts.one{grid-template-columns:1fr; margin:0; gap:24px}
/* sample portal views */
.mock{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#FFFFFF; color:#1A1A2E; font-size:13px; line-height:1.4}
.m-bar{background:#5C2D91; color:#FFFFFF; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px}
.m-logo{width:78px; height:14px; background:#FFFFFF; flex:none}
.m-nav{display:flex; gap:16px; font-size:12px; color:#E4D8F0; white-space:nowrap; overflow:hidden}
.m-nav .on{color:#FFFFFF; font-weight:600}
.m-body{padding:20px 18px 22px}
.m-h{font-family:var(--display); font-weight:600; font-size:18px; margin-bottom:10px}
.m-h2{font-family:var(--display); font-weight:600; font-size:14px; margin:20px 0 6px}
.m-row{display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:16px; align-items:center; padding:12px 0; border-top:1px solid #E2E3E9}
.m-title{font-weight:600}
.m-sub{color:#5A6070; font-size:12px; margin-top:2px}
.m-track{height:6px; background:#E9E4F0; border-radius:3px; overflow:hidden}
.m-fill{height:100%; background:#5C2D91}
.m-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.m-tile{border:1px solid #E2E3E9; border-radius:4px; padding:10px}
.m-num{font-family:var(--display); font-weight:700; font-size:20px; color:#5C2D91}
.m-brow{display:grid; grid-template-columns:150px 1fr 36px; gap:12px; align-items:center; padding:7px 0}
.m-pct{text-align:right; color:#5A6070; font-variant-numeric:tabular-nums}
@media (max-width:480px){.m-tiles{grid-template-columns:1fr 1fr} .m-nav span:not(.on){display:none} .m-brow{grid-template-columns:110px 1fr 36px}}
/* catalog index */
.cat-grid{display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; align-items:start}
.cat-index{position:sticky; top:calc(env(safe-area-inset-top,0px) + 196px); max-height:calc(100vh - 220px); overflow:auto; font-size:0.86rem; line-height:1.35; padding:24px 0}
.cat-index .ci-layer{font-family:var(--display); font-weight:600; font-size:0.92rem; margin:18px 0 6px}
.cat-index .ci-layer:first-child{margin-top:0}
.cat-index a{display:block; color:var(--muted); padding:4px 0}
.cat-index a:hover{color:var(--link); text-decoration:none}
@media (max-width:900px){.cat-grid{grid-template-columns:minmax(0,1fr)} .cat-index{display:none}}
.count-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px}
.count-row .count{padding:0} .count-row .btn{white-space:nowrap; flex:none}

.sub-h{margin:44px 0 18px; font-size:1.1rem}
.parts.four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.parts.four{grid-template-columns:1fr}}
.m-layer{margin:0 0 2px; color:#5C2D91}
.m-lesson{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px}
.m-tutor{border:1px solid #E2E3E9; border-radius:4px; padding:12px}
.m-chip{border:1px solid #CFC3E0; color:#5C2D91; border-radius:4px; padding:7px 9px; margin-top:8px; font-size:12px}
.m-ask{margin-top:10px; padding:8px 9px; background:#F3F4F6; color:#5A6070; border-radius:4px; font-size:12px}
.m-crow{display:grid; grid-template-columns:86px minmax(0,1fr) 40px 84px; gap:10px; align-items:center; padding:10px 0; border-top:1px solid #E2E3E9}
.m-crow.m-chead{border-top:0; padding:0 0 8px; color:#5A6070; font-size:12px}
.m-crow .m-sub{margin:0}
@media (max-width:480px){.m-lesson{grid-template-columns:1fr} .m-crow{grid-template-columns:minmax(0,1fr) 40px} .m-crow span:nth-child(1),.m-crow span:nth-child(4){display:none}}
/* carousel */
.c-view{overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#FFFFFF}
.c-track{display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1)}
.c-slide{flex:0 0 100%; margin:0; min-width:0}
.c-slide img{display:block; width:100%; aspect-ratio:1280 / 827; height:auto; object-fit:contain; object-position:center top; background:#FFFFFF}
.c-slide figcaption{padding:14px 18px; border-top:1px solid #E2E3E9; color:#1A1A2E; font-size:0.95rem; line-height:1.4}
.c-layer{display:block; color:#5A6070; font-size:0.85rem; margin-bottom:2px}
.c-ctrl{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap}
.c-count{color:var(--muted); font-size:0.92rem; font-variant-numeric:tabular-nums; min-width:4.5em; text-align:center}
.c-ctrl [data-c="pause"]{margin-left:auto}
@media (prefers-reduced-motion:reduce){.c-track{transition:none}}

.parts.five{grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px 28px}
.parts.five dt{font-size:1.05rem}
@media (max-width:1000px){.parts.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.parts.five{grid-template-columns:1fr}}
@media (max-width:600px){summary .g-n{white-space:normal; text-align:right; max-width:96px; line-height:1.3}}
.l-count{text-align:right}

/* honeypot field for spam bots */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* compact list of transformation uses */
.plain-list.tags{display:flex; flex-wrap:wrap; gap:10px; columns:auto; margin-top:28px}
.plain-list.tags li{border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:0.95rem}
/* catalog filtering */
#catalog tr[hidden],#catalog details[hidden],#catalog .layer-block[hidden]{display:none}
.cat-index a.on{color:var(--link)}