/* brand-guideline shared layout — colours/fonts only via tokens.css variables */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-fg);font:var(--fs-base,16px)/1.6 var(--f-sans);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--c-link)}a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-999px;top:8px;background:var(--c-primary);color:var(--c-onPrimary);padding:8px 12px;z-index:9;border-radius:var(--r-md)}.skip:focus{left:8px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--c-bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--c-border)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.05rem/1 var(--f-display);color:var(--c-fg);text-decoration:none;white-space:nowrap}
.brand img{width:30px;height:30px}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;padding-block:8px}
.nav a{padding:8px 10px;border-radius:var(--r-md);color:var(--c-muted);text-decoration:none;font-size:.9rem;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--c-fg);background:var(--c-surface)}
.nav a[aria-current=page]{color:var(--c-fg);background:var(--c-surface);box-shadow:inset 0 -2px 0 var(--c-primary)}
.mode{margin-left:auto}
main{flex:1}
.hero{position:relative;overflow:hidden;padding:72px 0 64px;background:radial-gradient(1200px 400px at 85% 0%,color-mix(in srgb,var(--c-secondary) 22%,transparent),transparent 60%),var(--c-surface);border-bottom:1px solid var(--c-border)}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.eyebrow{font:500 .8rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);display:flex;gap:10px;align-items:center}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--c-secondary)}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.01em}
h3{font-size:1.15rem}
.lead{font-size:1.15rem;color:var(--c-muted);max-width:60ch}
section.block{padding:56px 0;border-bottom:1px solid var(--c-border)}
section.block>.wrap>header{margin-bottom:28px;max-width:70ch}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(var(--min,240px),100%),1fr))}
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:20px;position:relative}
a.card{text-decoration:none;color:inherit;transition:transform var(--m-base) var(--ease),box-shadow var(--m-base) var(--ease)}
a.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
a.card h3{color:var(--c-fg)}a.card p{color:var(--c-muted);margin:0}
.card .num{font:600 .75rem var(--f-mono);color:var(--c-muted)}
.tag{display:inline-block;font:500 .75rem/1 var(--f-mono);padding:5px 8px;border-radius:var(--r-md);background:var(--c-bg);border:1px solid var(--c-border);color:var(--c-muted)}
.mono{font-family:var(--f-mono)}
.muted{color:var(--c-muted)}
.empty{border:2px dashed var(--c-border);border-radius:var(--r-lg);padding:24px;color:var(--c-muted);background:var(--c-bg)}
.empty strong{color:var(--c-fg);display:block;margin-bottom:4px}
.empty code{font-family:var(--f-mono);font-size:.85em}
.do,.dont{padding:12px 14px;border-radius:var(--r-md);margin:8px 0 0;border-left:4px solid}
.do{border-color:var(--c-success);background:color-mix(in srgb,var(--c-success) 10%,var(--c-bg))}
.dont{border-color:var(--c-danger);background:color-mix(in srgb,var(--c-danger) 10%,var(--c-bg))}
.do b,.dont b{font:600 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;display:block}
ul.clean{list-style:none;padding:0;margin:0}ul.clean li{padding:10px 0;border-bottom:1px solid var(--c-border)}
table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--c-border);vertical-align:middle}th{font-weight:600;color:var(--c-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.tablewrap{overflow-x:auto}
.foot{padding:32px 0;color:var(--c-muted);font-size:.85rem}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pager{display:flex;justify-content:space-between;gap:12px;padding:32px 0}
.pager a{font-weight:600}
/* swatches */
.sw{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border);background:var(--c-bg)}
.sw .chip{height:120px;display:flex;align-items:flex-end;padding:12px;font:600 .8rem var(--f-mono)}
.sw .body{padding:14px}
.sw .body h3{margin:0}
.sharebar{display:flex;height:56px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border)}
.sharebar span{display:flex;align-items:center;justify-content:center;font:600 .75rem var(--f-mono);min-width:0;overflow:hidden;white-space:nowrap}
.pass{color:var(--c-success);font-weight:700}.fail{color:var(--c-danger);font-weight:700}
.pair{display:inline-flex;align-items:center;justify-content:center;width:72px;height:36px;border-radius:var(--r-md);font-weight:700;border:1px solid var(--c-border)}
/* logo */
.logobox{border-radius:var(--r-lg);border:1px solid var(--c-border);display:grid;place-items:center;min-height:200px;padding:28px}
.logobox img{max-height:120px;width:auto}
.logobox.dark{background:var(--c-ink,#000)}
.misuse .logobox{position:relative;min-height:160px;overflow:hidden}
.misuse .logobox::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 2px),var(--c-danger) calc(50% - 1px),var(--c-danger) calc(50% + 1px),transparent calc(50% + 2px))}
.x-stretch img{transform:scaleX(1.35) scaleY(.75)}.x-recolor img{filter:hue-rotate(140deg) saturate(2)}.x-shadow img{filter:drop-shadow(6px 6px 4px rgb(0 0 0/.6)) drop-shadow(0 0 12px currentColor)}
.x-rotate img{transform:rotate(-18deg)}.x-busy{background:repeating-conic-gradient(var(--c-secondary) 0 25%,var(--c-primary) 0 50%) 0 0/28px 28px}.x-border img{outline:6px double var(--c-fg);outline-offset:8px}
.x-crowd{position:relative}.x-crowd::before{content:"MỚI! GIẢM 50%";position:absolute;top:44%;left:30%;font:900 1.1rem var(--f-display);color:var(--c-danger);z-index:1}.x-small img{max-height:14px}
/* type */
.spec{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--c-border);align-items:baseline}
.spec .meta{font:500 .8rem/1.6 var(--f-mono);color:var(--c-muted)}
.spec .meta strong{display:block;color:var(--c-fg);font-size:.95rem;font-family:var(--f-sans)}
.card .mono,.card pre{overflow-wrap:anywhere}
.spec .sample{margin:0;overflow-wrap:anywhere}
.scale-row{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid var(--c-border);padding:8px 0}
.scale-row .mono{width:70px;flex:none;color:var(--c-muted);font-size:.8rem}
.fx{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-height:180px;justify-content:space-between}
.fx .stage{font:800 clamp(1.6rem,3.4vw,2.4rem)/1.15 var(--f-display);min-height:2.6em;display:flex;align-items:center}
.fx-wave-in .ch{display:inline-block}.play.fx-wave-in .ch{display:inline-block;animation:fx-wave var(--d) var(--ease) both;animation-delay:calc(var(--i)*40ms)}
@keyframes fx-wave{0%{transform:translateY(.6em);opacity:0}60%{transform:translateY(-.08em);opacity:1}100%{transform:none}}
.fx-stamp{display:inline-block;transform:rotate(-6deg);border:4px solid var(--c-danger);color:var(--c-danger);padding:.1em .4em;border-radius:var(--r-md);text-transform:uppercase}.play.fx-stamp{animation:fx-stamp var(--d) cubic-bezier(.3,1.6,.5,1) both}
@keyframes fx-stamp{0%{transform:scale(2.2) rotate(-14deg);opacity:0}100%{transform:rotate(-6deg) scale(1);opacity:1}}
.fx-typewriter{display:inline-block;overflow:hidden;white-space:nowrap}.play.fx-typewriter{border-right:3px solid currentColor;width:0;animation:fx-type var(--d) steps(var(--n)) forwards,fx-caret .7s step-end infinite}
@keyframes fx-type{to{width:calc(var(--n)*1ch)}}@keyframes fx-caret{50%{border-color:transparent}}
.fx-neon-on{color:var(--c-secondary)}.play.fx-neon-on{animation:fx-neon var(--d) linear both}
@keyframes fx-neon{0%,18%,22%,40%{opacity:.15;text-shadow:none}20%,42%,100%{opacity:1;text-shadow:0 0 12px var(--c-secondary)}}
.play.fx-ink-boil{animation:fx-boil var(--d) steps(6) both}
@keyframes fx-boil{0%{filter:blur(4px);opacity:0;letter-spacing:.2em}100%{filter:none;opacity:1;letter-spacing:0}}
.play.fx-generic{animation:fx-gen var(--d) var(--ease) both}@keyframes fx-gen{from{opacity:0;transform:translateY(8px)}}
/* icons */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px;padding:12px;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface)}
.icons{--icon-fill:var(--c-primary);--icon-glow:var(--c-secondary);display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.icons figure{margin:0;padding:12px;border:1px solid var(--c-border);border-radius:var(--r-md);display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--c-bg)}
.icons figure svg{width:var(--sz,24px);height:var(--sz,24px)}.icons svg.is-active{color:var(--c-primary)}.icons svg.is-animated{color:var(--c-secondary)}
.icons figcaption{width:100%;font:500 .75rem var(--f-mono);color:var(--c-muted)}
.icons.auto figure svg:not(:first-of-type){display:none}
.states3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* mascots */
.cast{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.cast button[aria-pressed=true]{background:var(--c-primary);color:var(--c-onPrimary);border-color:var(--c-primary)}
.mascot{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:32px;align-items:start}
.mstage{aspect-ratio:1;border-radius:var(--r-xl);background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--mc,var(--c-secondary)) 28%,var(--c-surface)),var(--c-surface));border:1px solid var(--c-border);display:grid;place-items:center;padding:24px;cursor:pointer}
.mstage svg,.mstage img{width:100%;height:100%;overflow:visible}
.mstage .pupil{transition:transform .12s ease-out}
.mstage[data-action=jump]>*{animation:ws-jump .6s var(--ease)}.mstage[data-action=bounce]>*{animation:ws-bounce .9s ease-in-out}.mstage[data-action=celebrate]>*{animation:ws-celebrate .8s ease-in-out}.mstage[data-action=wave] .arm{transform-box:fill-box;transform-origin:10% 90%;animation:ws-wave .9s ease-in-out}.mstage[data-action=wave]>*{animation:ws-celebrate .9s ease-in-out}
@keyframes ws-jump{40%{transform:translateY(-14%)}70%{transform:translateY(2%)}}@keyframes ws-bounce{25%,75%{transform:scaleY(.94) translateY(3%)}50%{transform:scaleY(1.04)}}@keyframes ws-celebrate{25%{transform:rotate(-6deg) scale(1.05)}75%{transform:rotate(6deg) scale(1.05)}}@keyframes ws-wave{25%,75%{transform:rotate(-24deg)}50%{transform:rotate(12deg)}}
dl.profile{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;margin:16px 0}dl.profile dt{color:var(--c-muted);font-size:.85rem}dl.profile dd{margin:0}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;border:1px solid var(--c-border)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.renders{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.renders figure{margin:0;text-align:center;font-size:.75rem;color:var(--c-muted)}.renders img{background:var(--c-surface);border-radius:var(--r-md);border:1px solid var(--c-border)}
/* components (tokens only) */
.btn{text-decoration:none;--bb:var(--c-primary);font:600 1rem/1 var(--f-sans);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-md);border:2px solid var(--bb);background:var(--bb);color:var(--c-onPrimary);cursor:pointer;position:relative;overflow:hidden;box-shadow:0 3px 0 color-mix(in srgb,var(--bb) 60%,var(--c-fg));transition:transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease),filter var(--m-fast)}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(3px);box-shadow:0 0 0 transparent}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255/.28) 50%,transparent 70%);transform:translateX(-120%)}.btn:hover::after{transform:translateX(120%);transition:transform .6s var(--ease)}
.btn.secondary{--bb:var(--c-secondary);color:var(--c-onSecondary)}
.btn.ghost{background:transparent;color:var(--c-fg);--bb:var(--c-border);box-shadow:none}.btn.ghost::after{display:none}
.btn.danger{--bb:var(--c-danger);color:var(--c-onDanger,var(--c-onPrimary))}
.btn.sm{min-height:44px;padding:0 14px;font-size:.875rem}.btn.lg{min-height:56px;padding:0 28px;font-size:1.1rem}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.btn[data-state=loading]::before{content:"";width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.btn[data-state=done]{--bb:var(--c-success);color:var(--c-onPrimary)}
@keyframes spin{to{transform:rotate(360deg)}}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chipb{min-height:44px;padding:0 16px;border-radius:var(--r-full);border:1.5px solid var(--c-border);background:var(--c-bg);color:var(--c-fg);font:500 .95rem var(--f-sans);cursor:pointer}
.chipb:hover{border-color:var(--c-primary)}.chipb[aria-checked=true]{background:var(--c-primary);color:var(--c-onPrimary);border-color:var(--c-primary)}.chipb:disabled{opacity:.45;cursor:not-allowed}
.callout{border:1px solid var(--c-border);border-left:6px solid var(--cl,var(--c-info));border-radius:var(--r-md);padding:14px 16px;background:color-mix(in srgb,var(--cl,var(--c-info)) 8%,var(--c-bg))}
.callout strong{display:block;margin-bottom:2px}
.callout.clue{--cl:var(--c-secondary)}.callout.caution{--cl:var(--c-warning)}.callout.recorded{--cl:var(--c-success)}.callout.note{--cl:var(--c-primary)}.callout.system{--cl:var(--c-muted)}
.say{display:flex;gap:12px;align-items:flex-start}.say .av{width:56px;height:56px;flex:none;border-radius:50%;background:var(--c-surface);border:1px solid var(--c-border);overflow:hidden;display:grid;place-items:center;font-weight:700}.say .av img,.say .av svg{width:100%;height:100%}
.say blockquote{margin:0;padding:12px 16px;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-border);font-family:var(--f-serif)}
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:20;max-width:min(360px,calc(100% - 32px))}
.toast{background:var(--c-fg);color:var(--c-bg);border-radius:var(--r-md);padding:14px 16px 18px;box-shadow:var(--sh-lg);position:relative;overflow:hidden;animation:fx-gen var(--m-slow) var(--ease)}
.toast i{position:absolute;left:0;bottom:0;height:4px;background:var(--tc,var(--c-success));animation:toastbar 5s linear forwards}.toast:hover i{animation-play-state:paused}
@keyframes toastbar{from{width:100%}to{width:0}}
dialog{border:1px solid var(--c-border);border-radius:var(--r-xl);padding:24px;max-width:min(480px,calc(100% - 32px));background:var(--c-bg);color:var(--c-fg);box-shadow:var(--sh-lg)}
dialog::backdrop{background:rgb(0 0 0/.5);backdrop-filter:blur(4px)}
.verdict{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--c-onPrimary);background:var(--vc,var(--c-success));animation:vup var(--m-slow) var(--ease)}
.verdict.wrong{--vc:var(--c-danger)}.verdict .stampv{border:3px solid currentColor;padding:4px 10px;border-radius:var(--r-sm);font:800 .9rem var(--f-display);text-transform:uppercase;animation:fx-stamp .4s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes vup{from{transform:translateY(100%);opacity:0}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.field label{font-weight:600}.field .help{font-size:.85rem;color:var(--c-muted)}
.field input,.field textarea,.field select{font:inherit;min-height:44px;padding:10px 12px;border-radius:var(--r-md);border:1.5px solid var(--c-border);background:var(--c-bg);color:var(--c-fg)}
.field input:hover{border-color:var(--c-muted)}.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-focus) 35%,transparent)}
.field [aria-invalid=true]{border-color:var(--c-danger)}.field .err{color:var(--c-danger);font-size:.85rem}
.field input:disabled{opacity:.5}
.bar{height:12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-full);overflow:hidden}.bar span{display:block;height:100%;background:var(--c-primary);border-radius:inherit}
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:0}.steps li{flex:1;height:10px;border-radius:var(--r-full);background:var(--c-border)}.steps li.on{background:var(--c-primary)}
.ring{width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--c-primary) calc(var(--p)*1%),var(--c-surface) 0);display:grid;place-items:center}.ring span{width:72px;height:72px;border-radius:50%;background:var(--c-bg);display:grid;place-items:center;font:700 1rem var(--f-mono)}
.streak{display:flex;gap:8px;list-style:none;padding:0;margin:0}.streak li{width:44px;text-align:center;font:500 .75rem var(--f-mono);color:var(--c-muted)}.streak li b{display:block;height:36px;border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-border);margin-bottom:4px}.streak li.on b{background:var(--c-secondary);border-color:var(--c-secondary)}
.road{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}.road button{min-height:44px;min-width:120px;border-radius:var(--r-md);border:1.5px solid var(--c-border);background:var(--c-bg);color:var(--c-fg);font:inherit;cursor:pointer;padding:6px 12px}
.road button[data-s=done]{background:color-mix(in srgb,var(--c-success) 14%,var(--c-bg));border-color:var(--c-success)}.road button[data-s=active]{border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 25%,transparent)}.road button:disabled{opacity:.5;cursor:not-allowed}
.demo{display:flex;flex-direction:column;gap:14px}
/* misc buttons in chrome */
.tbtn{min-height:44px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-fg);font:500 .9rem var(--f-sans);cursor:pointer}
.tbtn:hover{border-color:var(--c-primary)}
select.tbtn{padding-right:28px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.thumbs figure{margin:0}.thumbs img{border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-surface)}.thumbs figcaption{font-size:.85rem;margin-top:6px}
.dl a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--c-border);text-decoration:none}.dl a span{color:var(--c-muted);font:500 .8rem var(--f-mono)}
@media (max-width:820px){.hero .wrap,.mascot{grid-template-columns:1fr}.spec{grid-template-columns:1fr;gap:8px}.top .wrap{flex-wrap:wrap;gap:4px}.nav{order:3;width:100%;flex:none}}
@media print{.top,.foot,.pager,.toolbar,.mode{display:none}section.block{break-inside:avoid}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.fx-typewriter{width:auto;border:0}}