:root{
  --bg:#f4f3ef;--surface:#fff;--surface-2:#ebe9e3;--text:#111;--muted:#686761;--line:#d7d4cc;--accent:#265dff;--accent-2:#dfe7ff;--danger:#c0392b;--success:#237a4b;--warning:#a56500;--shadow:0 20px 60px rgba(17,17,17,.08);--radius:18px;--radius-sm:11px;--sidebar:280px;--header:72px;--max:1440px;
  color-scheme:light;
}
html[data-theme="dark"]{--bg:#111210;--surface:#181a17;--surface-2:#22241f;--text:#f5f4ef;--muted:#aba9a1;--line:#33362f;--accent:#7ea0ff;--accent-2:#1d294d;--danger:#ff8277;--success:#6fd39a;--warning:#ffc064;--shadow:0 22px 70px rgba(0,0,0,.34);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans Arabic",sans-serif;line-height:1.55}button,input,select,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:1000;top:8px;inset-inline-start:8px;transform:translateY(-160%);background:var(--text);color:var(--bg);padding:10px 14px;border-radius:9px}.skip-link:focus{transform:none}
.shell{min-height:100vh}.topbar{height:var(--header);position:fixed;z-index:40;top:0;inset-inline:0;display:flex;align-items:center;gap:18px;padding:0 22px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;min-width:calc(var(--sidebar) - 22px);font-weight:750;letter-spacing:-.02em}.brand-mark{width:34px;height:34px;border:1px solid var(--text);border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:900}.brand small{display:block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.02em}.top-search{position:relative;flex:1;max-width:650px}.top-search input{width:100%;height:44px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:0 44px 0 42px;outline:none}.rtl .top-search input{padding:0 42px 0 44px}.top-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.search-icon{position:absolute;inset-inline-start:15px;top:12px;color:var(--muted)}.kbd{position:absolute;inset-inline-end:10px;top:9px;border:1px solid var(--line);background:var(--surface-2);border-radius:7px;padding:2px 7px;color:var(--muted);font-size:11px}.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}.icon-btn,.seg-btn{height:40px;min-width:40px;border:1px solid var(--line);background:var(--surface);border-radius:11px;display:inline-grid;place-items:center;padding:0 11px}.icon-btn:hover,.seg-btn:hover{background:var(--surface-2)}.lang-btn{font-weight:800;font-size:12px}.theme-menu{position:relative}.theme-pop{position:absolute;top:48px;inset-inline-end:0;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:6px;min-width:150px;box-shadow:var(--shadow);display:none}.theme-pop.open{display:block}.theme-pop button{width:100%;border:0;background:transparent;text-align:start;padding:9px 10px;border-radius:9px}.theme-pop button:hover,.theme-pop button.active{background:var(--surface-2)}
.sidebar{position:fixed;z-index:30;top:var(--header);bottom:0;inset-inline-start:0;width:var(--sidebar);overflow:auto;padding:20px 16px 32px;border-inline-end:1px solid var(--line);background:var(--bg)}.side-nav{display:grid;gap:5px}.side-link{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;color:var(--muted);font-size:14px}.side-link:hover{background:var(--surface-2);color:var(--text)}.side-link.active{background:var(--text);color:var(--bg)}.side-link .count{margin-inline-start:auto;font-size:11px;opacity:.65}.side-section{margin:20px 11px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font-weight:800}.side-progress{margin-top:22px;border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--surface)}.side-progress .bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-top:9px}.side-progress .bar span{display:block;height:100%;background:var(--accent);border-radius:99px}.main{padding-top:var(--header);padding-inline-start:var(--sidebar);min-height:100vh}.content{max-width:var(--max);padding:44px 52px 80px;margin:auto}.mobile-nav-btn{display:none}.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--accent);margin-bottom:10px}.display{font-size:clamp(42px,7vw,92px);line-height:.94;letter-spacing:-.065em;margin:0;max-width:960px}.lede{font-size:clamp(18px,2vw,24px);color:var(--muted);max-width:760px;margin:24px 0 0}.hero-home{padding:42px 0 64px;border-bottom:1px solid var(--line)}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.primary,.secondary,.ghost{border-radius:12px;padding:12px 17px;font-weight:750;border:1px solid var(--text)}.primary{background:var(--text);color:var(--bg)}.primary:hover{opacity:.87}.secondary{background:var(--surface);color:var(--text)}.secondary:hover{background:var(--surface-2)}.ghost{border-color:var(--line);background:transparent}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:40px 0}.stat-block{background:var(--surface);padding:22px}.stat-block strong{font-size:28px;letter-spacing:-.04em}.stat-block span{display:block;color:var(--muted);font-size:13px;margin-top:3px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:58px 0 20px}.section-head h2{margin:0;font-size:31px;letter-spacing:-.04em}.section-head p{margin:0;color:var(--muted)}.category-grid,.pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.category-card,.pattern-card,.component-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px;transition:.2s ease}.category-card:hover,.pattern-card:hover,.component-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--text) 40%,var(--line));box-shadow:0 12px 32px rgba(0,0,0,.05)}.category-icon{width:46px;height:46px;border-radius:13px;background:var(--surface-2);display:grid;place-items:center;margin-bottom:30px}.category-card h3,.pattern-card h3,.component-card h3{font-size:18px;margin:0 0 6px;letter-spacing:-.02em}.category-card p,.pattern-card p,.component-card p{margin:0;color:var(--muted);font-size:14px}.category-meta{display:flex;margin-top:18px;font-size:12px;color:var(--muted);justify-content:space-between}.cards-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.component-card{min-height:154px;display:flex;flex-direction:column}.component-card .num{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.component-card h3{margin-top:auto}.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}.tag{font-size:11px;border:1px solid var(--line);border-radius:99px;padding:4px 8px;color:var(--muted)}
.page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:28px;padding-bottom:32px;border-bottom:1px solid var(--line)}.page-head h1{font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-.055em;margin:0}.page-head p{max-width:720px;color:var(--muted);font-size:18px}.fav-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:20px}.fav-btn.active{color:var(--accent);border-color:var(--accent)}.page-columns{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;margin-top:34px}.toc{position:sticky;top:calc(var(--header) + 24px);align-self:start;border-inline-start:1px solid var(--line);padding-inline-start:16px}.toc a{display:block;color:var(--muted);font-size:13px;padding:5px 0}.toc a:hover{color:var(--text)}.doc-section{padding:32px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px}.doc-section:last-child{border-bottom:0}.doc-section h2{font-size:28px;letter-spacing:-.035em;margin:0 0 14px}.doc-section h3{font-size:17px;margin:22px 0 10px}.doc-section p{color:var(--muted);max-width:780px}.callout{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:16px;margin-top:15px}.callout.good{border-inline-start:4px solid var(--success)}.callout.bad{border-inline-start:4px solid var(--danger)}.callout strong{display:block;margin-bottom:4px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.bullet-list{padding-inline-start:20px;color:var(--muted)}.bullet-list li{margin:8px 0}.demo-shell{border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.03)}.demo-toolbar{min-height:54px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}.demo-toolbar .label{font-size:12px;color:var(--muted);margin-inline-end:4px}.demo-toolbar button{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:7px 10px;font-size:12px}.demo-toolbar button.active{background:var(--text);color:var(--bg);border-color:var(--text)}.demo-stage-wrap{padding:28px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--line) 22%,transparent) 0,color-mix(in srgb,var(--line) 22%,transparent) 1px,transparent 1px,transparent 14px)}.demo-stage{margin:auto;background:var(--bg);border:1px solid var(--line);border-radius:14px;min-height:300px;padding:30px;display:grid;place-items:center;transition:width .25s ease;width:100%;overflow:auto}.demo-stage.tablet{width:min(720px,100%)}.demo-stage.mobile{width:min(390px,100%)}.demo-canvas{width:100%;max-width:820px}.demo-canvas[dir="rtl"]{font-family:Tahoma,"Noto Sans Arabic",Arial,sans-serif}.demo-note{font-size:12px;color:var(--muted);margin-top:10px}.state-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.state-chip{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);font-size:13px}.anatomy{position:relative;margin-top:18px}.anatomy-label{display:inline-flex;font-size:11px;padding:4px 7px;border-radius:99px;background:var(--accent);color:white;margin:4px}.exercise{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:20px}.exercise-options{display:grid;gap:8px;margin-top:14px}.exercise-option{text-align:start;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:11px 13px}.exercise-option.correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 10%,var(--surface))}.exercise-option.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--surface))}.exercise-feedback{margin-top:10px;font-size:13px}.teaching-note{border:1px dashed var(--line);border-radius:14px;padding:16px;background:var(--surface-2)}.teaching-note summary{cursor:pointer;font-weight:800}
/* demos */
.demo-btn{border:1px solid transparent;background:var(--text);color:var(--bg);border-radius:10px;padding:11px 16px;font-weight:760}.demo-btn.outline{background:transparent;color:var(--text);border-color:var(--line)}.demo-btn.danger{background:var(--danger);color:#fff}.demo-btn:disabled{opacity:.45;cursor:not-allowed}.demo-stack{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}.demo-card{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:18px;max-width:310px}.demo-card .thumb{height:120px;border-radius:10px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--accent) 18%,var(--surface-2)));margin-bottom:14px}.demo-form{max-width:420px;margin:auto;display:grid;gap:13px}.field{display:grid;gap:6px}.field label{font-size:13px;font-weight:700}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;outline:none}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.demo-nav{display:flex;align-items:center;gap:18px;border:1px solid var(--line);background:var(--surface);padding:12px 14px;border-radius:12px}.demo-nav strong{margin-inline-end:auto}.demo-nav a{font-size:13px;color:var(--muted)}.demo-hero{padding:36px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.demo-hero h2{font-size:38px;line-height:1;margin:0 0 12px;letter-spacing:-.05em}.tabs{display:flex;border-bottom:1px solid var(--line);gap:18px}.tab{border:0;background:transparent;padding:10px 0;color:var(--muted);border-bottom:2px solid transparent}.tab.active{color:var(--text);border-color:var(--accent)}.tab-panel{padding:20px 0}.accordion-item{border-bottom:1px solid var(--line)}.accordion-trigger{width:100%;display:flex;justify-content:space-between;border:0;background:transparent;padding:14px 0;font-weight:700}.accordion-content{display:none;color:var(--muted);padding:0 0 14px}.accordion-item.open .accordion-content{display:block}.modal-backdrop,.drawer-backdrop,.lightbox-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:20px}.demo-modal{width:min(460px,100%);border-radius:18px;background:var(--surface);border:1px solid var(--line);padding:22px;box-shadow:var(--shadow)}.drawer-backdrop{place-items:stretch start;padding:0}.drawer-panel{width:min(390px,92vw);height:100%;background:var(--surface);padding:24px;box-shadow:var(--shadow)}html[dir="rtl"] .drawer-backdrop{place-items:stretch end}.bottom-sheet{align-self:end;width:min(620px,100%);border-radius:22px 22px 0 0;background:var(--surface);padding:22px}.toast{position:fixed;z-index:100;bottom:24px;inset-inline-end:24px;background:var(--text);color:var(--bg);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow)}.badge{display:inline-flex;border-radius:99px;padding:5px 9px;background:var(--accent-2);color:var(--accent);font-size:12px;font-weight:800}.switch{position:relative;width:48px;height:28px;border:0;background:var(--line);border-radius:99px;padding:0}.switch::after{content:"";position:absolute;width:22px;height:22px;top:3px;inset-inline-start:3px;border-radius:50%;background:white;transition:.2s}.switch.on{background:var(--accent)}.switch.on::after{inset-inline-start:23px}.progress{height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;width:68%;background:var(--accent);border-radius:99px}.alert{border:1px solid var(--line);border-inline-start:4px solid var(--accent);padding:13px;border-radius:10px;background:var(--surface)}.demo-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:12px;overflow:hidden}.demo-table th,.demo-table td{text-align:start;border-bottom:1px solid var(--line);padding:11px;font-size:13px}.filter-row{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);border-radius:99px;background:var(--surface);padding:7px 10px}.chip.active{background:var(--text);color:var(--bg)}.calendar{max-width:320px;margin:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid span{display:grid;place-items:center;aspect-ratio:1;border-radius:8px;font-size:12px}.calendar-grid .active{background:var(--accent);color:#fff}.dropzone{border:1px dashed var(--muted);border-radius:14px;padding:35px;text-align:center;background:var(--surface)}.rating{font-size:28px;letter-spacing:4px}.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);font-weight:800;border:2px solid var(--surface)}.avatar-group{display:flex}.avatar-group .avatar{margin-inline-start:-10px}.avatar-group .avatar:first-child{margin-inline-start:0}.spinner{width:42px;height:42px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{display:grid;gap:10px;width:100%;max-width:420px}.skeleton span{height:15px;border-radius:7px;background:linear-gradient(90deg,var(--surface-2),color-mix(in srgb,var(--text) 7%,var(--surface-2)),var(--surface-2));background-size:200% 100%;animation:shimmer 1.5s infinite}.skeleton span:first-child{height:160px}.skeleton span:last-child{width:60%}@keyframes shimmer{to{background-position:-200% 0}}.timeline{border-inline-start:2px solid var(--line);padding-inline-start:20px;display:grid;gap:20px}.timeline-item{position:relative}.timeline-item::before{content:"";position:absolute;inset-inline-start:-27px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}.kpi{font-size:46px;letter-spacing:-.06em;font-weight:800}.fab{width:58px;height:58px;border:0;border-radius:50%;background:var(--accent);color:white;font-size:26px;box-shadow:var(--shadow)}.popover{position:relative;display:inline-block}.popover-panel{position:absolute;top:42px;inset-inline-start:0;width:230px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px;box-shadow:var(--shadow);display:none}.popover.open .popover-panel{display:block}.command{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:12px;max-width:460px;margin:auto}.command input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px;outline:0}.command-result{padding:10px;border-radius:8px}.command-result.active{background:var(--surface-2)}.empty{text-align:center;padding:32px}.empty-icon{font-size:44px}.context-menu{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:6px;box-shadow:var(--shadow);width:180px}.context-menu button{width:100%;border:0;background:transparent;text-align:start;padding:9px;border-radius:7px}.context-menu button:hover{background:var(--surface-2)}.cookie{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:18px}.chat-widget{max-width:340px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}.chat-head{padding:12px 14px;background:var(--text);color:var(--bg)}.chat-body{padding:14px;min-height:140px}.bubble{background:var(--surface-2);padding:9px 11px;border-radius:12px;max-width:80%;font-size:13px}.fake-map{height:260px;border-radius:15px;position:relative;overflow:hidden;background:linear-gradient(135deg,#d8ddd2,#ece8df)}html[data-theme="dark"] .fake-map{background:linear-gradient(135deg,#253025,#1d211d)}.fake-map::before,.fake-map::after{content:"";position:absolute;background:color-mix(in srgb,var(--text) 10%,transparent);transform:rotate(-20deg)}.fake-map::before{width:130%;height:12px;left:-10%;top:44%}.fake-map::after{width:12px;height:130%;left:52%;top:-10%}.map-pin{position:absolute;left:53%;top:38%;width:24px;height:24px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);z-index:2}.media-player{border-radius:16px;background:#090909;color:#fff;padding:18px;min-height:260px;display:flex;flex-direction:column;justify-content:end}.media-controls{display:flex;align-items:center;gap:11px}.media-track{height:4px;background:#555;flex:1;border-radius:99px}.media-track span{display:block;width:42%;height:100%;background:white}.codeblock{background:#0c0d0f;color:#eef1f5;border-radius:14px;padding:18px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.notification-list{display:grid;gap:8px}.notification{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:11px}.mega{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mega strong{display:block;margin-bottom:7px}.mega a{display:block;font-size:13px;color:var(--muted);padding:3px 0}.steps{display:flex;gap:0;align-items:center}.step{display:flex;align-items:center;gap:7px;flex:1}.step span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);font-size:12px}.step.done span,.step.current span{background:var(--accent);color:#fff;border-color:var(--accent)}.step::after{content:"";height:1px;background:var(--line);flex:1}.step:last-child::after{display:none}.range{width:100%;accent-color:var(--accent)}.lightbox-backdrop img{max-width:80vw;max-height:78vh;border-radius:16px;background:var(--surface);padding:10px}.image-placeholder{height:220px;border-radius:15px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--accent) 20%,var(--surface-2)));display:grid;place-items:center;font-size:54px}.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.price-card{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:17px}.price-card.featured{outline:2px solid var(--accent)}.footer-demo{background:var(--text);color:var(--bg);border-radius:15px;padding:24px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}.footer-demo a{opacity:.66;display:block;font-size:13px;padding:3px 0}.scrollbox{height:250px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px}.scrollbox p{height:410px}.back-demo{display:flex;align-items:center;gap:10px}.back-demo button{border:1px solid var(--line);background:var(--surface);border-radius:50%;width:42px;height:42px}
.search-results{position:fixed;z-index:70;top:62px;left:50%;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);padding:7px;max-height:65vh;overflow:auto}.search-results:empty{display:none}.search-result{display:flex;justify-content:space-between;gap:12px;padding:10px;border-radius:9px}.search-result:hover,.search-result.active{background:var(--surface-2)}.search-result small{color:var(--muted)}.quiz-wrap{max-width:780px}.quiz-progress{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:10px}.quiz-q{font-size:30px;letter-spacing:-.03em;margin:16px 0}.quiz-options{display:grid;gap:9px}.quiz-opt{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px;text-align:start}.quiz-opt:hover{border-color:var(--text)}.quiz-opt.correct{border-color:var(--success)}.quiz-opt.wrong{border-color:var(--danger)}.glossary-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.glossary-item{border:1px solid var(--line);border-radius:14px;padding:17px;background:var(--surface)}.glossary-item strong{font-size:17px}.glossary-item .ar{display:block;direction:rtl;text-align:start;color:var(--accent);font-weight:800;margin-top:5px}.about-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:30px;max-width:820px}.footer{border-top:1px solid var(--line);padding:30px 0;margin-top:60px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:1100px){:root{--sidebar:240px}.content{padding-inline:30px}.page-columns{grid-template-columns:1fr}.toc{display:none}.category-grid,.cards-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){:root{--header:64px}.topbar{padding:0 12px;gap:8px}.brand{min-width:auto}.brand .brand-name{display:none}.top-search{display:none}.mobile-nav-btn{display:inline-grid}.sidebar{transform:translateX(-110%);transition:.22s;width:min(330px,90vw);box-shadow:var(--shadow)}html[dir="rtl"] .sidebar{transform:translateX(110%)}.sidebar.open{transform:translateX(0)!important}.main{padding-inline-start:0}.content{padding:28px 18px 60px}.display{font-size:52px}.stats-row{grid-template-columns:1fr 1fr}.category-grid,.cards-list,.pattern-grid,.glossary-list{grid-template-columns:1fr}.page-head{grid-template-columns:1fr auto}.page-head h1{font-size:48px}.two-col,.state-grid{grid-template-columns:1fr}.demo-stage-wrap{padding:12px}.demo-stage{padding:18px}.pricing{grid-template-columns:1fr}.mega{grid-template-columns:1fr}.footer-demo{grid-template-columns:1fr}.top-actions{gap:5px}.icon-btn,.seg-btn{height:38px;min-width:38px;padding:0 9px}.section-head{align-items:start;flex-direction:column}.steps{align-items:flex-start;flex-direction:column}.step{width:100%}.step::after{width:1px;height:20px;margin-inline-start:14px;flex:none}.page-columns{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Keyboard accessibility */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* =========================================================
   Interface Guide — Premium documentation theme v2
   Direction: shadcn-inspired restraint + editorial polish
   ========================================================= */
:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --surface-2:#f4f4f5;
  --surface-3:#f8fafc;
  --text:#09090b;
  --muted:#71717a;
  --muted-2:#a1a1aa;
  --line:#e4e4e7;
  --line-strong:#d4d4d8;
  --accent:#2563eb;
  --accent-2:#eff6ff;
  --danger:#dc2626;
  --success:#15803d;
  --warning:#b45309;
  --shadow:0 1px 2px rgba(9,9,11,.04),0 14px 36px rgba(9,9,11,.06);
  --shadow-lg:0 28px 80px rgba(9,9,11,.10);
  --radius:12px;
  --radius-sm:8px;
  --sidebar:272px;
  --header:64px;
  --max:1320px;
}
html[data-theme="dark"]{
  --bg:#09090b;
  --surface:#111113;
  --surface-2:#18181b;
  --surface-3:#0f0f12;
  --text:#fafafa;
  --muted:#a1a1aa;
  --muted-2:#71717a;
  --line:#27272a;
  --line-strong:#3f3f46;
  --accent:#60a5fa;
  --accent-2:#172554;
  --danger:#f87171;
  --success:#4ade80;
  --warning:#fbbf24;
  --shadow:0 1px 2px rgba(0,0,0,.30),0 18px 48px rgba(0,0,0,.24);
  --shadow-lg:0 30px 90px rgba(0,0,0,.48);
}
html{background:var(--bg)}
body{
  background:var(--bg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  font-size:15px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{font-family:"Noto Sans Arabic",Tahoma,Arial,Inter,ui-sans-serif,sans-serif}
html[dir="rtl"] .component-term{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;direction:ltr;unicode-bidi:isolate;display:inline-block;letter-spacing:-.025em}

.topbar{
  height:var(--header);
  padding:0 20px;
  gap:16px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  backdrop-filter:blur(18px) saturate(150%);
}
.brand{min-width:calc(var(--sidebar) - 20px);gap:10px;font-weight:680;letter-spacing:-.025em}
.brand-mark{
  width:32px;height:32px;border:0;border-radius:8px;
  background:var(--text);color:var(--bg);font-size:11px;font-weight:850;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bg) 12%,transparent)
}
.brand small{font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.015em;margin-top:-1px}
.top-search{max-width:560px}
.top-search input{
  height:38px;border-radius:9px;border-color:var(--line);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  padding-inline-start:38px;padding-inline-end:46px;
  font-size:13px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}
.top-search input:hover{border-color:var(--line-strong)}
.top-search input:focus{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 62%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent)}
.search-icon{inset-inline-start:13px;top:8px;font-size:16px;color:var(--muted)}
.kbd{top:7px;inset-inline-end:8px;border-radius:6px;background:var(--bg);padding:1px 6px;font-size:10px;box-shadow:0 1px 0 var(--line-strong)}
.top-actions{gap:6px}
.icon-btn,.seg-btn{
  height:36px;min-width:36px;border-radius:8px;border-color:var(--line);
  background:transparent;padding:0 10px;transition:background .15s ease,border-color .15s ease
}
.icon-btn:hover,.seg-btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.lang-btn{font-size:11px;letter-spacing:.04em}
.theme-pop{top:42px;border-radius:10px;padding:5px;min-width:145px;box-shadow:var(--shadow-lg)}
.theme-pop button{font-size:13px;border-radius:7px;padding:8px 9px}

.sidebar{
  top:var(--header);width:var(--sidebar);padding:18px 12px 28px;
  background:var(--bg);border-inline-end:1px solid var(--line)
}
.side-nav{gap:2px}
.side-link{
  min-height:38px;padding:8px 10px;border-radius:8px;color:var(--muted);
  font-size:13px;font-weight:520;transition:background .14s ease,color .14s ease
}
.side-link:hover{background:var(--surface-2);color:var(--text)}
.side-link.active{background:var(--surface-2);color:var(--text);font-weight:650}
.side-link.active::before{content:"";width:3px;height:16px;border-radius:99px;background:var(--accent);margin-inline-end:2px}
.side-link .count{font-size:10px;color:var(--muted-2);opacity:1}
.side-section{margin:22px 10px 8px;font-size:10px;letter-spacing:.12em;font-weight:750;color:var(--muted-2)}
.side-progress{margin:24px 4px 0;border-radius:10px;padding:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.side-progress strong{font-size:12px;font-weight:650}.side-progress small{display:block;margin-top:7px;color:var(--muted);font-size:10px}
.side-progress .bar{height:4px;margin-top:9px;background:var(--surface-2)}

.main{padding-inline-start:var(--sidebar)}
.content{max-width:var(--max);padding:52px 56px 88px}
.eyebrow{font-size:10px;font-weight:750;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
.display{font-size:clamp(48px,6.1vw,86px);line-height:.95;letter-spacing:-.064em;font-weight:690;max-width:1000px;text-wrap:balance}
html[dir="rtl"] .display,html[dir="rtl"] .page-head h1,html[dir="rtl"] .section-head h2{letter-spacing:0}
.lede{font-size:clamp(17px,1.7vw,22px);line-height:1.55;max-width:720px;margin-top:24px;color:var(--muted)}
.hero-home{padding:72px 0 70px;border-bottom:0;position:relative}
.hero-home::after{content:"";display:block;width:64px;height:1px;background:var(--accent);margin-top:46px}
.hero-actions{margin-top:30px;gap:8px}
.primary,.secondary,.ghost{
  min-height:40px;border-radius:8px;padding:9px 15px;font-size:13px;font-weight:650;
  transition:transform .14s ease,background .14s ease,border-color .14s ease,opacity .14s ease
}
.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.primary:hover{opacity:1;transform:translateY(-1px);background:color-mix(in srgb,var(--text) 90%,var(--accent))}
.secondary{background:var(--surface);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.02)}
.secondary:hover{background:var(--surface-2);border-color:var(--line-strong)}

.stats-row{
  grid-template-columns:repeat(4,1fr);gap:12px;background:transparent;border:0;border-radius:0;
  overflow:visible;margin:0 0 74px
}
.stat-block{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:18px 20px}
.stat-block strong{font-size:24px;font-weight:680;letter-spacing:-.035em}
.stat-block span{font-size:11px;margin-top:4px;color:var(--muted)}
.section-head{margin:64px 0 18px;align-items:flex-end}
.section-head h2{font-size:27px;font-weight:650;letter-spacing:-.035em}
.section-head p,.section-head a{font-size:13px;color:var(--muted)}
.section-head a:hover{color:var(--text)}

.category-grid,.pattern-grid{grid-template-columns:repeat(3,1fr);gap:12px}
.cards-list{grid-template-columns:repeat(3,1fr);gap:12px}
.category-card,.pattern-card,.component-card{
  border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:18px;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease
}
.category-card:hover,.pattern-card:hover,.component-card:hover{
  transform:translateY(-1px);background:color-mix(in srgb,var(--surface) 94%,var(--accent-2));
  border-color:var(--line-strong);box-shadow:var(--shadow)
}
.category-icon{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--bg);
  margin-bottom:26px;font-size:14px;color:var(--text)
}
.category-card h3,.pattern-card h3,.component-card h3{font-size:16px;font-weight:650;letter-spacing:-.025em;margin-bottom:6px}
.category-card p,.pattern-card p,.component-card p{font-size:12.5px;line-height:1.55;color:var(--muted)}
.category-meta{margin-top:20px;padding-top:13px;border-top:1px solid var(--line);font-size:10.5px}
.component-card{min-height:162px}.component-card .num{font-size:10px;color:var(--muted-2);letter-spacing:.08em}
.tag-row{gap:5px;margin-top:12px}.tag{font-size:10px;border-radius:6px;padding:3px 6px;color:var(--muted);background:var(--bg)}

.page-head{grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:48px 0 38px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(46px,5.3vw,70px);line-height:.98;font-weight:680;letter-spacing:-.055em;margin:0;max-width:940px}
.page-head p{font-size:16px;line-height:1.65;max-width:720px;margin:18px 0 0;color:var(--muted)}
.fav-btn{width:40px;height:40px;border-radius:8px;font-size:17px;background:transparent}
.fav-btn:hover{background:var(--surface-2)}
.page-columns{grid-template-columns:minmax(0,1fr) 220px;gap:52px;margin-top:38px}
.toc{top:calc(var(--header) + 28px);border-inline-start:1px solid var(--line);padding-inline-start:14px}
.toc a{font-size:11px;line-height:1.4;padding:5px 0}.toc a:hover{color:var(--accent)}
.doc-section{padding:36px 0;border-color:var(--line)}
.doc-section h2{font-size:24px;font-weight:650;letter-spacing:-.03em;margin-bottom:14px}
.doc-section h3{font-size:15px;font-weight:650}
.doc-section p{font-size:14px;line-height:1.7}
.two-col{gap:10px}
.callout{border-radius:9px;padding:14px 15px;background:var(--surface);font-size:13px;line-height:1.65}
.callout.good,.callout.bad{border-inline-start-width:3px}
.bullet-list{font-size:13.5px;line-height:1.7}.bullet-list li{margin:7px 0}

.demo-shell{border-radius:12px;border-color:var(--line);box-shadow:none;background:var(--surface)}
.demo-toolbar{min-height:50px;padding:7px 9px;border-color:var(--line);background:var(--surface)}
.demo-toolbar .label{font-size:10px;color:var(--muted-2);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.demo-toolbar button{border-radius:7px;padding:6px 9px;font-size:10px;background:transparent}
.demo-toolbar button:hover{background:var(--surface-2)}
.demo-toolbar button.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.demo-stage-wrap{
  padding:32px;
  background-color:var(--surface-3);
  background-image:radial-gradient(color-mix(in srgb,var(--muted) 20%,transparent) .75px,transparent .75px);
  background-size:16px 16px
}
.demo-stage{min-height:340px;padding:32px;border-radius:10px;background:var(--bg);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.02)}
.state-grid{gap:9px}.state-chip{border-radius:9px;background:var(--surface);padding:13px;border-color:var(--line);font-size:12px}
.anatomy{border-radius:10px;border-color:var(--line);background:var(--surface)}
.exercise{border-radius:10px;border-color:var(--line);background:var(--surface)}
.exercise-option,.quiz-opt{border-radius:8px;background:var(--surface);padding:12px 13px}
.exercise-option:hover,.quiz-opt:hover{background:var(--surface-2);border-color:var(--line-strong)}
.teaching-note{border-radius:9px;background:var(--surface)}

.search-results{top:56px;border-radius:10px;padding:5px;box-shadow:var(--shadow-lg);background:var(--surface)}
.search-result{border-radius:7px;padding:9px 10px;font-size:12px}.search-result strong{font-size:13px}

.glossary-list{gap:10px}.glossary-item{border-radius:10px;padding:16px}.glossary-item strong{font-size:15px}.glossary-item .ar{font-size:13px;color:var(--muted);margin-top:3px}.glossary-item p{font-size:12.5px;color:var(--muted)}
.about-card{border-radius:12px;padding:26px}
.quiz-wrap{padding-top:30px}.quiz-q{font-size:28px;line-height:1.35;font-weight:650}.quiz-progress{font-size:11px}
.footer{margin-top:72px;padding:26px 0 0;font-size:11px;border-color:var(--line)}

/* Demo controls inherit the same restraint without changing lesson behavior. */
.demo-btn{border-radius:8px!important;font-weight:600!important}
.demo-input,.demo-textarea,.demo-select{border-radius:8px!important;border-color:var(--line)!important;background:var(--surface)!important}
.demo-modal,.drawer-panel,.bottom-sheet,.toast,.chat-widget,.cookie,.command,.calendar,.dropzone,.notification,.context-menu,.popover-panel,.price-card{border-radius:10px!important}
.fake-map,.media-player,.image-placeholder,.footer-demo,.scrollbox{border-radius:10px!important}
.progress{border-radius:999px!important;background:var(--surface-2)!important}

@media(max-width:1100px){
  :root{--sidebar:236px}
  .content{padding-inline:30px}
  .page-columns{grid-template-columns:1fr;gap:0}
  .category-grid,.cards-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  :root{--header:60px}
  .topbar{padding:0 10px}
  .content{padding:24px 16px 56px}
  .hero-home{padding:44px 0 48px}
  .display{font-size:clamp(43px,13vw,58px);line-height:.98}
  .lede{font-size:16px}
  .stats-row{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:48px}
  .stat-block{padding:15px}
  .section-head{margin-top:48px}
  .page-head{padding:32px 0 28px}
  .page-head h1{font-size:clamp(40px,12vw,52px)}
  .page-head p{font-size:14px}
  .category-grid,.cards-list,.pattern-grid,.glossary-list{grid-template-columns:1fr}
  .category-card,.pattern-card,.component-card{padding:16px}
  .demo-stage-wrap{padding:10px}
  .demo-stage{min-height:300px;padding:16px}
  .doc-section{padding:30px 0}
  .two-col{grid-template-columns:1fr}
}

/* Mobile off-canvas containment: hidden drawers must not expand RTL page width. */
@media(max-width:780px){
  html,body{overflow-x:clip}
  .sidebar{visibility:hidden;pointer-events:none}
  .sidebar.open{visibility:visible;pointer-events:auto}
}
@media(max-width:780px){
  .main{padding-inline-start:0}
}

/* Home hero — interactive UI laboratory */
.hero-home.hero-lab-shell{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(470px,1.08fr);gap:clamp(44px,6vw,96px);
  align-items:center;padding:68px 0 78px;min-height:610px
}
.hero-home.hero-lab-shell::after{display:none}
.hero-copy{min-width:0}
.hero-copy .display{font-size:clamp(48px,5.6vw,82px);max-width:760px}
.hero-copy .lede{max-width:650px;font-size:clamp(16px,1.45vw,20px)}
.hero-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font-size:11px}
.hero-meta strong{color:var(--text);font-weight:700}.hero-meta i{width:3px;height:3px;border-radius:50%;background:var(--muted-2);display:block}
.hero-lab{position:relative;min-width:0;padding:18px 4px 22px;isolation:isolate}
.hero-lab-grid{position:absolute;inset:-26px -24px -22px;z-index:-2;opacity:.8;background-image:linear-gradient(to right,color-mix(in srgb,var(--line) 72%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--line) 72%,transparent) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 86%,transparent 100%)}
.hero-lab::before{content:"";position:absolute;z-index:-1;width:60%;height:58%;inset-inline-end:8%;top:20%;border-radius:50%;background:color-mix(in srgb,var(--accent) 11%,transparent);filter:blur(65px);opacity:.65}
.hero-lab-window{border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--surface) 97%,transparent);box-shadow:0 28px 80px rgba(0,0,0,.08);overflow:hidden;backdrop-filter:blur(12px)}
html[data-theme="dark"] .hero-lab-window{box-shadow:0 32px 85px rgba(0,0,0,.28)}
.hero-lab-bar{height:42px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;color:var(--muted);font-size:10px;letter-spacing:.02em;background:color-mix(in srgb,var(--surface) 92%,var(--bg))}
.hero-lab-bar strong{font-weight:650;color:var(--text);font-size:10px;letter-spacing:.04em}.lab-mode{justify-self:end;border:1px solid var(--line);border-radius:5px;padding:2px 6px;font-size:9px;font-weight:700}.lab-dots{display:flex;gap:5px}.lab-dots span{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.hero-lab-canvas{position:relative;min-height:430px;overflow:hidden;background-color:var(--surface-3);background-image:radial-gradient(color-mix(in srgb,var(--muted) 26%,transparent) .72px,transparent .72px);background-size:17px 17px}
.lab-card{position:absolute;border:1px solid var(--line);background:var(--surface);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.055);padding:13px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.lab-card:hover{transform:translateY(-3px)!important;border-color:var(--line-strong);box-shadow:0 18px 40px rgba(0,0,0,.09)}
.lab-kicker{display:block;color:var(--muted-2);font-size:8px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.lab-input{width:47%;inset-inline-start:6%;top:8%;animation:lab-enter-1 .65s both cubic-bezier(.2,.75,.2,1)}
.lab-input label{display:block;font-size:9px;color:var(--muted);margin-bottom:5px}.lab-field{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:7px;padding:8px 9px;font-size:10px;background:var(--bg)}.lab-field b{color:var(--success)}
.lab-tabs{width:52%;inset-inline-end:5%;top:30%;animation:lab-enter-2 .72s .08s both cubic-bezier(.2,.75,.2,1)}
.lab-tab-row{display:flex;gap:14px;border-bottom:1px solid var(--line);font-size:9px;white-space:nowrap}.lab-tab-row span,.lab-tab-row b{padding:4px 0 7px;font-weight:550;color:var(--muted)}.lab-tab-row b{color:var(--text);border-bottom:2px solid var(--accent);margin-bottom:-1px}
.lab-switch-card{width:36%;inset-inline-start:12%;top:46%;animation:lab-enter-3 .7s .14s both cubic-bezier(.2,.75,.2,1)}
.lab-switch-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9px}.lab-switch{width:34px;height:20px;border:0;border-radius:99px;background:var(--line);padding:0;position:relative;transition:background .2s}.lab-switch i{position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:inset .2s}.lab-switch.on{background:var(--accent)}.lab-switch.on i{inset-inline-start:17px}
.lab-button-card{width:32%;inset-inline-end:10%;top:57%;animation:lab-enter-4 .68s .2s both cubic-bezier(.2,.75,.2,1)}
.lab-primary{width:100%;border:0;background:var(--text);color:var(--bg);border-radius:7px;padding:8px 10px;font-size:9px;font-weight:650}.lab-primary:active{transform:translateY(1px)}
.lab-mobile-card{width:25%;inset-inline-start:52%;bottom:4%;padding:7px;transform:rotate(2deg);animation:lab-enter-5 .78s .25s both cubic-bezier(.2,.75,.2,1)}
.lab-phone{border:1px solid var(--line);border-radius:9px;padding:8px;background:var(--bg);min-height:135px}.lab-phone-top{width:24px;height:3px;border-radius:99px;background:var(--line-strong);margin:0 auto 9px}.lab-phone strong{display:block;font-size:10px;margin:2px 0 9px}.lab-mobile-lines{display:grid;gap:4px}.lab-mobile-lines i{display:block;height:4px;border-radius:99px;background:var(--surface-2)}.lab-mobile-lines i:nth-child(2){width:76%}.lab-mobile-lines i:nth-child(3){width:55%}.lab-phone button{margin-top:10px;width:100%;border:0;border-radius:5px;background:var(--accent);color:#fff;padding:5px;font-size:8px}
.lab-tooltip{position:absolute;inset-inline-end:8%;top:10%;background:var(--text);color:var(--bg);border-radius:7px;padding:7px 9px;font-size:8px;box-shadow:var(--shadow);animation:lab-tooltip 6s 1.1s infinite both}.lab-tooltip span{display:block;opacity:.6;font-size:7px;text-transform:uppercase;letter-spacing:.1em}.lab-tooltip b{font-weight:550}
.lab-toast{position:absolute;inset-inline-start:8%;bottom:7%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 11px;box-shadow:0 16px 36px rgba(0,0,0,.12);font-size:9px;opacity:0;transform:translateY(10px);animation:lab-toast-loop 6s 2.1s infinite}.lab-toast.show{animation:none;opacity:1;transform:none}.lab-toast>span{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success);font-weight:800}.lab-toast strong,.lab-toast small{display:block}.lab-toast small{color:var(--muted);font-size:7.5px;margin-top:1px}
.lab-cursor{position:absolute;inset-inline-end:38%;top:52%;font-size:20px;line-height:1;color:var(--text);filter:drop-shadow(0 2px 4px rgba(0,0,0,.16));animation:lab-cursor-move 6s .8s infinite both;pointer-events:none}
.hero-lab-caption{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:9.5px;margin-top:10px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 10%,transparent)}
@keyframes lab-enter-1{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lab-enter-2{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lab-enter-3{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lab-enter-4{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lab-enter-5{from{opacity:0;transform:translateY(14px) rotate(2deg) scale(.98)}to{opacity:1;transform:rotate(2deg)}}
@keyframes lab-tooltip{0%,13%,86%,100%{opacity:0;transform:translateY(4px)}20%,78%{opacity:1;transform:none}}
@keyframes lab-toast-loop{0%,14%,74%,100%{opacity:0;transform:translateY(10px)}20%,62%{opacity:1;transform:none}}
@keyframes lab-cursor-move{0%,8%{opacity:0;transform:translate(18px,-16px)}15%{opacity:1}35%{transform:translate(-38px,24px)}55%{transform:translate(-12px,58px)}72%{transform:translate(38px,18px)}86%,100%{opacity:0;transform:translate(48px,8px)}}

@media(max-width:1180px){
  .hero-home.hero-lab-shell{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:38px}
  .hero-copy .display{font-size:clamp(46px,5vw,68px)}
  .hero-lab-canvas{min-height:390px}
}
@media(max-width:960px){
  .hero-home.hero-lab-shell{grid-template-columns:1fr;gap:42px;padding-top:54px}
  .hero-copy{max-width:760px}.hero-copy .display{max-width:800px}
  .hero-lab{width:min(760px,100%);margin:auto}.hero-lab-canvas{min-height:410px}
}
@media(max-width:600px){
  .hero-home.hero-lab-shell{padding:34px 0 46px;gap:30px}
  .hero-copy .display{font-size:clamp(42px,12.8vw,56px)}
  .hero-meta{gap:8px;margin-top:24px;font-size:9.5px}.hero-meta i{display:none}.hero-meta span{border:1px solid var(--line);border-radius:6px;padding:4px 7px;background:var(--surface)}
  .hero-lab{padding:0}.hero-lab-grid{inset:-10px}
  .hero-lab-bar{height:38px}.hero-lab-canvas{min-height:350px}
  .lab-input{width:56%;inset-inline-start:5%;top:7%}.lab-tabs{width:61%;inset-inline-end:4%;top:30%}.lab-switch-card{width:45%;inset-inline-start:7%;top:49%}.lab-button-card{width:39%;inset-inline-end:6%;top:61%}.lab-mobile-card{width:31%;inset-inline-start:49%;bottom:3%}.lab-tooltip{inset-inline-end:5%;top:9%}.lab-toast{inset-inline-start:5%;bottom:5%}.lab-cursor{display:none}
}
@media(prefers-reduced-motion:reduce){.lab-card,.lab-tooltip,.lab-toast,.lab-cursor{animation:none!important}.lab-tooltip{opacity:1}.lab-toast{opacity:1;transform:none}}
/* Hero QA fix: keep the interactive Button demo above the decorative mobile preview. */
.lab-button-card{z-index:5}
.lab-mobile-card{z-index:3;inset-inline-start:55%;bottom:3%}
.lab-toast{z-index:7}.lab-tooltip{z-index:7}.lab-cursor{z-index:8}
@media(max-width:600px){.lab-mobile-card{inset-inline-start:51%;bottom:2%}.lab-button-card{inset-inline-end:5%;top:62%}}

/* Home hero V4 — editorial interface specimen */
.hero-home.hero-specimen-shell{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);gap:clamp(52px,7vw,108px);
  align-items:center;padding:72px 0 82px;min-height:620px;border-bottom:0
}
.hero-home.hero-specimen-shell::after{display:none}
.hero-specimen{min-width:0;position:relative}
.hero-specimen::before{content:"";position:absolute;inset:9% -7% -5% 12%;z-index:-1;border-radius:40px;background:color-mix(in srgb,var(--accent) 8%,transparent);filter:blur(56px);opacity:.75}
.specimen-frame{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:0 28px 72px rgba(0,0,0,.075)}
html[data-theme="dark"] .specimen-frame{box-shadow:0 32px 80px rgba(0,0,0,.3)}
.specimen-topbar{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,var(--bg));font-size:10px}
.specimen-topbar>strong{font-size:10px;letter-spacing:.04em;font-weight:700}.specimen-dots{display:flex;gap:5px}.specimen-dots span{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.specimen-badge{justify-self:end;border:1px solid var(--line);border-radius:6px;padding:3px 7px;color:var(--muted);font-size:8px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.specimen-toolbar{display:flex;align-items:center;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.specimen-tab{border:0;border-radius:8px;background:transparent;color:var(--muted);padding:7px 10px;font-size:9.5px;font-weight:650}
.specimen-tab:hover{background:var(--surface-2);color:var(--text)}.specimen-tab.active{background:var(--text);color:var(--bg)}
.specimen-stage{position:relative;min-height:426px;padding:30px;background:var(--surface-3);background-image:linear-gradient(to right,color-mix(in srgb,var(--line) 42%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--line) 42%,transparent) 1px,transparent 1px);background-size:40px 40px}
.specimen-view{min-height:366px}.specimen-view.active{animation:specimen-in .28s ease both}@keyframes specimen-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.specimen-view[data-specimen-panel="preview"]{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:18px;align-items:stretch}
.specimen-ui-card{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:22px;box-shadow:0 16px 40px rgba(0,0,0,.055);align-self:center}
.specimen-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.specimen-overline{display:block;font-size:7.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);font-weight:800}.specimen-card-head h3,.states-head h3{font-size:19px;line-height:1.1;letter-spacing:-.035em;margin:6px 0 0}.specimen-status{font-size:7.5px;border:1px solid color-mix(in srgb,var(--success) 32%,var(--line));background:color-mix(in srgb,var(--success) 8%,var(--surface));color:var(--success);border-radius:99px;padding:4px 7px;white-space:nowrap}
.specimen-inner-tabs{display:flex;gap:14px;border-bottom:1px solid var(--line);margin-bottom:18px}.specimen-inner-tabs button{border:0;background:transparent;color:var(--muted);padding:0 0 8px;font-size:9px}.specimen-inner-tabs button.active{color:var(--text);border-bottom:2px solid var(--accent);margin-bottom:-1px;font-weight:700}
.specimen-field{display:grid;gap:6px;margin-bottom:17px}.specimen-field>span{font-size:8.5px;font-weight:700}.specimen-field>div{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:9px 10px;font-size:9.5px}.specimen-field b{color:var(--success)}
.specimen-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.specimen-setting strong,.specimen-setting small{display:block}.specimen-setting strong{font-size:9.5px}.specimen-setting small{font-size:8px;color:var(--muted);margin-top:3px;line-height:1.35;max-width:230px}
.specimen-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:18px}.specimen-link{border:0;background:transparent;color:var(--muted);font-size:9px;padding:8px}.specimen-ui-card .lab-primary{width:auto;min-width:110px;padding:9px 12px;font-size:9px}
.specimen-legend{border-inline-start:1px solid var(--line);padding-inline-start:17px;display:flex;flex-direction:column;justify-content:center;gap:11px}.specimen-legend-title{font-size:7.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted-2);font-weight:800;margin-bottom:4px}.specimen-legend>div{display:grid;grid-template-columns:22px 1fr;gap:7px;align-items:center;font-size:8px;color:var(--muted)}.specimen-legend b{width:21px;height:21px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:7px;color:var(--text);background:var(--surface)}
.specimen-toast{position:absolute;z-index:5;inset-inline-end:28px;bottom:22px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;box-shadow:0 18px 42px rgba(0,0,0,.14);font-size:9px;opacity:0;transform:translateY(9px);pointer-events:none}.specimen-toast.show{opacity:1;transform:none;transition:.22s ease}.specimen-toast>span{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--success) 13%,transparent);color:var(--success);font-weight:850}.specimen-toast strong,.specimen-toast small{display:block}.specimen-toast small{font-size:7.5px;color:var(--muted);margin-top:1px}
.specimen-footer{height:39px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;color:var(--muted);font-size:8px;background:var(--surface)}.specimen-footer span{display:flex;align-items:center;gap:7px}.specimen-footer i{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 11%,transparent)}

.anatomy-board{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:22px;align-items:center;min-height:366px}.anatomy-demo{position:relative;border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:36px 28px 26px;box-shadow:0 16px 40px rgba(0,0,0,.045)}.anatomy-tabs{display:flex;gap:14px;border-bottom:1px solid var(--line);font-size:9px;margin-bottom:21px}.anatomy-tabs>*{padding-bottom:8px}.anatomy-tabs b{border-bottom:2px solid var(--accent);margin-bottom:-1px}.anatomy-tabs span{color:var(--muted)}.anatomy-input{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:9px 10px;margin-bottom:15px}.anatomy-input small,.anatomy-input strong{display:block}.anatomy-input small{font-size:7.5px;color:var(--muted);margin-bottom:4px}.anatomy-input strong{font-size:9.5px;font-weight:550}.anatomy-toggle{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;font-size:9px;margin-bottom:17px}.anatomy-toggle i{width:32px;height:18px;border-radius:99px;background:var(--accent);position:relative}.anatomy-toggle i::after{content:"";position:absolute;top:3px;inset-inline-end:3px;width:12px;height:12px;border-radius:50%;background:#fff}.anatomy-demo>button{display:block;margin-inline-start:auto;border:0;border-radius:7px;background:var(--text);color:var(--bg);padding:8px 13px;font-size:9px}.anatomy-pin{position:absolute;z-index:2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:7px;font-weight:800;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}.anatomy-pin.p1{top:25px;inset-inline-start:13px}.anatomy-pin.p2{top:109px;inset-inline-end:11px}.anatomy-pin.p3{bottom:79px;inset-inline-start:13px}.anatomy-pin.p4{bottom:18px;inset-inline-end:89px}.anatomy-notes{display:grid;gap:12px}.anatomy-notes>div{display:grid;grid-template-columns:25px 1fr;gap:8px;align-items:start}.anatomy-notes>div>b{width:24px;height:24px;border:1px solid var(--line);background:var(--surface);border-radius:7px;display:grid;place-items:center;font-size:7px}.anatomy-notes strong,.anatomy-notes small{display:block}.anatomy-notes strong{font-size:8px}.anatomy-notes small{font-size:7.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.states-board{min-height:366px;border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:26px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 16px 40px rgba(0,0,0,.045)}.states-head{margin-bottom:20px}.states-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.states-grid>div{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:12px}.states-grid small{display:block;color:var(--muted);font-size:7.5px;margin-bottom:8px}.states-grid button{width:100%;border:0;border-radius:7px;background:var(--text);color:var(--bg);padding:9px;font-size:9px}.states-grid .is-hover{opacity:.84}.states-grid .is-focus{outline:3px solid color-mix(in srgb,var(--accent) 22%,transparent);outline-offset:2px}.states-grid button:disabled{opacity:.35}.state-note{display:flex;align-items:flex-start;gap:8px;margin-top:18px;color:var(--muted);font-size:8.5px}.state-note span{color:var(--accent);font-size:15px}.state-note p{margin:1px 0 0}

@media(max-width:1180px){.hero-home.hero-specimen-shell{grid-template-columns:minmax(0,.88fr) minmax(450px,1.12fr);gap:42px}.specimen-stage{padding:24px}.specimen-view[data-specimen-panel="preview"]{grid-template-columns:minmax(0,1fr) 115px}}
@media(max-width:960px){.hero-home.hero-specimen-shell{grid-template-columns:1fr;gap:42px;padding-top:54px}.hero-specimen{width:min(780px,100%);margin:auto}.hero-copy{max-width:760px}.specimen-stage{min-height:410px}}
@media(max-width:600px){.hero-home.hero-specimen-shell{padding:34px 0 46px;gap:30px}.hero-copy .display{font-size:clamp(42px,12.8vw,56px)}.specimen-frame{border-radius:14px}.specimen-topbar{height:39px;padding:0 10px}.specimen-badge{font-size:7px}.specimen-toolbar{padding:8px}.specimen-tab{font-size:8.5px;padding:6px 8px}.specimen-stage{padding:14px;min-height:430px;background-size:32px 32px}.specimen-view{min-height:400px}.specimen-view[data-specimen-panel="preview"]{grid-template-columns:1fr;gap:12px}.specimen-ui-card{padding:17px;align-self:start}.specimen-card-head h3,.states-head h3{font-size:17px}.specimen-legend{border-inline-start:0;border-top:1px solid var(--line);padding:12px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.specimen-legend-title{grid-column:1/-1;margin:0}.specimen-legend>div{display:flex;gap:5px;font-size:7.2px}.specimen-legend b{width:18px;height:18px;font-size:6px;flex:0 0 auto}.specimen-footer{font-size:7px;height:auto;min-height:38px;padding:8px 10px;align-items:flex-start}.specimen-footer span:last-child{display:none}.anatomy-board{grid-template-columns:1fr;gap:13px;align-items:start}.anatomy-demo{padding:33px 22px 22px}.anatomy-notes{grid-template-columns:repeat(2,1fr);gap:9px}.anatomy-notes small{font-size:7px}.anatomy-pin.p2{top:105px}.states-board{padding:18px;justify-content:flex-start}.states-grid{grid-template-columns:1fr 1fr;gap:8px}.states-grid>div{padding:9px}.specimen-toast{inset-inline-end:14px;bottom:16px}.hero-meta{gap:8px;margin-top:24px;font-size:9.5px}.hero-meta i{display:none}.hero-meta span{border:1px solid var(--line);border-radius:6px;padding:4px 7px;background:var(--surface)}}
@media(prefers-reduced-motion:reduce){.specimen-view.active{animation:none!important}.specimen-toast{transition:none!important}}
@media(max-width:600px){.hero-specimen::before{inset:9% 0 -5% 12%}}

/* V5 — learning architecture: Patterns → Page Patterns → Utility Pages */
.learning-path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 54px}.learning-path-card{min-height:178px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:18px;display:flex;flex-direction:column;transition:.2s ease}.learning-path-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--text) 34%,var(--line));box-shadow:0 12px 28px rgba(0,0,0,.04)}.learning-path-card>span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.learning-path-card strong{font-size:17px;margin-top:auto}.learning-path-card p{font-size:13px;line-height:1.55;color:var(--muted);margin:6px 0 0}.lesson-grid{align-items:stretch}.page-pattern-card,.utility-card{min-height:244px;display:flex;flex-direction:column}.lesson-card-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:38px}.lesson-type{font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:800}.lesson-ar-label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:-2px 0 9px;direction:rtl;text-align:start}.lesson-ar-title{font-size:18px;font-weight:750;color:var(--muted);margin-top:10px;direction:rtl;width:max-content;max-width:100%}.lesson-filter-row{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 18px}.lesson-head .eyebrow{margin-bottom:12px}.hierarchy-track{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}.hierarchy-track>div{background:var(--surface);padding:22px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between}.hierarchy-track span{font-size:11px;color:var(--muted)}.hierarchy-track strong{font-size:16px}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.principle-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:18px;min-height:150px}.principle-card span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-2);font-size:11px;font-weight:800;color:var(--accent)}.principle-card p{color:var(--text);font-size:14px;line-height:1.55;margin:28px 0 0}.mistake-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}.mistake-list>div{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line)}.mistake-list>div:last-child{border-bottom:0}.mistake-list span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--danger) 10%,var(--surface));color:var(--danger);font-weight:900}.mistake-list p{margin:2px 0 0;color:var(--text);font-size:14px}.page-preview-shell{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.025)}.page-preview-toolbar{min-height:52px;padding:9px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.page-preview-toolbar .segmented{display:flex;gap:4px;border:1px solid var(--line);border-radius:9px;padding:3px;background:var(--bg)}.page-preview-toolbar button{border:0;background:transparent;color:var(--muted);border-radius:6px;padding:6px 9px;font-size:11px}.page-preview-toolbar button.active{background:var(--text);color:var(--bg)}.page-preview-stage{padding:26px;overflow:auto;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text) 9%,transparent) 1px,transparent 0);background-size:18px 18px}.page-mini{margin:auto;width:100%;max-width:920px;min-height:520px;border:1px solid var(--line);border-radius:13px;background:var(--bg);box-shadow:0 12px 38px rgba(0,0,0,.08);padding:0 18px 24px;transition:max-width .2s ease;font-size:11px;overflow:hidden}.page-mini.tablet{max-width:700px}.page-mini.mobile{max-width:360px}.page-mini h4{font-size:22px;letter-spacing:-.035em;margin:0}.page-mini button{border:0;background:var(--text);color:var(--bg);border-radius:7px;padding:8px 11px;font-size:10px;font-weight:800}.mini-header{height:48px;margin:0 -18px 24px;padding:0 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;background:var(--surface)}.mini-logo{width:26px;height:26px;border-radius:7px;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:9px;font-weight:900}.mini-nav{display:flex;gap:8px;margin-inline-end:auto}.mini-nav i{width:35px;height:5px;border-radius:5px;background:var(--surface-2)}.mini-pill{border:1px solid var(--line);border-radius:99px;padding:5px 8px;color:var(--muted);font-size:9px}.mini-lines{display:grid;gap:6px}.mini-lines i{display:block;height:6px;border-radius:6px;background:var(--surface-2)}.mini-page-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:12px 0 24px}.mini-page-title.center{display:grid;text-align:center;justify-items:center}.mini-page-title.center .mini-lines{width:220px;max-width:100%}.mini-split{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(210px,.75fr);gap:20px;align-items:start}.mini-list{display:grid;gap:9px}.mini-product{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:10px}.mini-thumb{width:56px;height:52px;border-radius:8px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--accent) 16%,var(--surface-2)))}.mini-product b{white-space:nowrap;font-size:10px}.mini-summary{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:14px;display:grid;gap:13px}.mini-summary>strong{font-size:13px}.mini-total{display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line)}.mini-summary button{width:100%}.mini-stepper{display:flex;align-items:center;max-width:360px;margin:0 auto 28px}.mini-stepper b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);font-size:9px}.mini-stepper i{height:1px;background:var(--line);flex:1}.mini-form{display:grid;gap:9px}.mini-form label{display:grid;gap:5px}.mini-form label small{color:var(--muted)}.mini-form label span{height:30px;border:1px solid var(--line);background:var(--surface);border-radius:7px}.mini-form button{justify-self:start}.mini-center-card{max-width:330px;margin:58px auto 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:24px;display:grid;gap:14px}.mini-center-card small{color:var(--muted)}.mini-product-page{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}.mini-gallery>span{display:block;height:340px;border-radius:10px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--accent) 20%,var(--surface-2)))}.mini-gallery>div{display:flex;gap:7px;margin-top:8px}.mini-gallery i{width:52px;height:44px;border-radius:7px;background:var(--surface-2)}.mini-product-info{padding:18px 0;display:grid;align-content:start;gap:15px}.mini-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--accent)}.mini-choice{display:flex;gap:6px}.mini-choice i{width:25px;height:25px;border-radius:50%;border:1px solid var(--line);background:var(--surface)}.mini-search{height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:flex;align-items:center;padding:0 11px;color:var(--muted);margin-bottom:18px}.mini-results{display:grid;grid-template-columns:155px 1fr;gap:20px}.mini-results>aside{border-inline-end:1px solid var(--line);padding-inline-end:14px}.mini-result-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.mini-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.mini-results .mini-card-row{grid-template-columns:repeat(2,1fr)}.mini-card{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:9px}.mini-card>span{display:block;height:72px;border-radius:7px;background:var(--surface-2);margin-bottom:9px}.mini-account{display:grid;grid-template-columns:180px 1fr;gap:24px}.mini-account>aside{border-inline-end:1px solid var(--line);padding-inline-end:16px}.mini-account main{max-width:430px}.mini-avatar{display:block;width:64px;height:64px;border-radius:50%;background:var(--surface-2);margin-bottom:18px}.mini-setting{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.mini-setting i{width:30px;height:17px;border-radius:20px;background:var(--surface-2);position:relative}.mini-setting i::after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;top:2px;inset-inline-start:2px;background:var(--muted)}.mini-setting i.on{background:color-mix(in srgb,var(--accent) 28%,var(--surface-2))}.mini-setting i.on::after{inset-inline-start:15px;background:var(--accent)}html[dir="rtl"] .mini-setting i.on::after{inset-inline-start:2px}.mini-dashboard{display:grid;gap:14px}.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.mini-kpis>div{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:13px}.mini-kpis small{display:block;color:var(--muted)}.mini-kpis b{display:block;font-size:20px;margin-top:6px}.mini-chart{height:180px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:18px;display:flex;align-items:end}.mini-chart span{width:100%;height:72%;background:linear-gradient(170deg,transparent 0 40%,color-mix(in srgb,var(--accent) 16%,transparent) 41% 100%);border-bottom:2px solid var(--accent)}.mini-table{border:1px solid var(--line);border-radius:9px;overflow:hidden}.mini-table>div{display:grid;grid-template-columns:1.5fr 1fr .7fr;gap:10px;padding:10px;border-bottom:1px solid var(--line)}.mini-table>div:last-child{border-bottom:0}.mini-table i{height:6px;border-radius:5px;background:var(--surface-2)}.mini-map{min-height:310px;border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface-2)),var(--surface-2));display:grid;place-items:center;font-size:26px;color:var(--accent)}.mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface)}.mini-calendar i{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;font-style:normal;color:var(--muted)}.mini-calendar i.sel{background:var(--text);color:var(--bg)}.mini-landing-hero{text-align:center;padding:54px 12% 42px}.mini-landing-hero h4{font-size:32px;margin:9px 0 12px}.mini-landing-hero .mini-lines{max-width:420px;margin:0 auto 16px}.mini-proof{margin-top:16px;text-align:center;padding:14px;border-top:1px solid var(--line);color:var(--muted)}.mini-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.mini-pricing>div{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:16px;display:grid;gap:13px}.mini-pricing>div.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.mini-pricing b{font-size:24px}.mini-faq{max-width:650px;margin:auto;border-top:1px solid var(--line)}.mini-faq>div{display:flex;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--line)}.mini-onboarding{max-width:440px;text-align:center;margin:44px auto;display:grid;justify-items:center;gap:13px}.mini-onboarding .mini-lines{width:300px;max-width:100%}.mini-about{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:18px 0 28px}.mini-about h4{font-size:29px;margin:8px 0 15px}.mini-about-visual,.mini-case-hero{height:270px;border-radius:11px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--accent) 17%,var(--surface-2)))}.mini-case>h4{font-size:30px;margin:8px 0 10px}.mini-case>.mini-lines{max-width:520px;margin-bottom:20px}.mini-case .mini-kpis{margin-top:12px}.mini-empty{max-width:520px;margin:80px auto 20px;text-align:center;display:grid;justify-items:center;gap:13px}.mini-empty>b{font-size:64px;letter-spacing:-.06em}.mini-empty>.mini-lines{width:300px;max-width:100%}.mini-empty>div{display:flex;gap:9px;align-items:center}.mini-empty>div span{border:1px solid var(--line);border-radius:7px;padding:8px 11px}.mini-legal{display:grid;grid-template-columns:175px 1fr;gap:24px}.mini-legal>aside{border-inline-end:1px solid var(--line);padding-inline-end:14px}.mini-legal main{max-width:600px}.mini-legal main h4{margin:8px 0}.mini-legal main>small{color:var(--muted);display:block;margin-bottom:20px}.mini-legal main>.mini-lines{gap:10px}.mini-progress{width:270px;max-width:100%;height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden}.mini-progress i{display:block;width:65%;height:100%;background:var(--accent)}.mini-inline-signup{border:1px solid var(--line);background:var(--surface);padding:4px;border-radius:9px;width:360px;max-width:100%;display:flex!important;justify-content:space-between}.mini-inline-signup>span{border:0!important;padding:8px!important;color:var(--muted)}
.page-mini.mobile .mini-nav{display:none}.page-mini.mobile .mini-split,.page-mini.mobile .mini-product-page,.page-mini.mobile .mini-results,.page-mini.mobile .mini-account,.page-mini.mobile .mini-about,.page-mini.mobile .mini-legal{grid-template-columns:1fr}.page-mini.mobile .mini-results>aside,.page-mini.mobile .mini-account>aside,.page-mini.mobile .mini-legal>aside{border-inline-end:0;border-bottom:1px solid var(--line);padding:0 0 12px}.page-mini.mobile .mini-card-row,.page-mini.mobile .mini-results .mini-card-row,.page-mini.mobile .mini-pricing,.page-mini.mobile .mini-kpis{grid-template-columns:1fr}.page-mini.mobile .mini-gallery>span{height:220px}.page-mini.mobile .mini-landing-hero{padding-inline:4%}.page-mini.mobile .mini-landing-hero h4,.page-mini.mobile .mini-case>h4{font-size:25px}.page-mini.mobile .mini-about-visual,.page-mini.mobile .mini-case-hero{height:190px}.page-mini.mobile .mini-summary{order:2}.page-mini.mobile .mini-header{margin-bottom:18px}
@media(max-width:1100px){.learning-path-grid{grid-template-columns:repeat(2,1fr)}.principle-grid{grid-template-columns:1fr 1fr}.page-preview-stage{padding:18px}}
@media(max-width:780px){.learning-path-grid,.principle-grid,.hierarchy-track{grid-template-columns:1fr}.learning-path-card{min-height:140px}.lesson-filter-row{margin-top:20px}.page-preview-toolbar{align-items:flex-start;flex-direction:column}.page-preview-stage{padding:10px}.page-mini{min-height:500px;padding-inline:14px}.mini-header{margin-inline:-14px}.hierarchy-track>div{min-height:90px}.page-pattern-card,.utility-card{min-height:210px}.lesson-ar-title{font-size:16px}.mini-split,.mini-product-page,.mini-results,.mini-account,.mini-about,.mini-legal{grid-template-columns:1fr}.mini-results>aside,.mini-account>aside,.mini-legal>aside{border-inline-end:0;border-bottom:1px solid var(--line);padding:0 0 12px}.mini-card-row,.mini-results .mini-card-row,.mini-pricing,.mini-kpis{grid-template-columns:1fr}.mini-gallery>span{height:220px}}

/* =========================================================
   Interface Guide v6 — visual learning layer
   Interactive component-specific anatomy + live states
   ========================================================= */

.visual-page-head,.component-page-head{grid-template-columns:minmax(0,1fr) minmax(250px,330px);align-items:center}
.page-head-aside{display:flex;flex-direction:column;align-items:flex-end;gap:14px;min-width:0}

/* Anatomy becomes a specific visual + numbered explanation, not generic chips. */
.anatomy{border:0;background:transparent;padding:0}

/* States: every card shows the state, trigger and visual meaning. */
.states-intro{margin-bottom:18px!important}
.state-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.state-card{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:15px;min-height:205px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.state-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.state-card-head strong{font-size:13px}.state-card-head span{font-size:9.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:4px 7px;text-align:end}
.state-card>p{font-size:12px!important;line-height:1.55!important;margin:0!important;color:var(--muted)!important}
.state-sample{min-height:82px;border-radius:11px;background:var(--surface-2);padding:15px;display:grid;place-items:center;position:relative;overflow:hidden}
.state-button,.state-trigger{border:1px solid transparent;background:var(--text);color:var(--bg);border-radius:9px;padding:9px 14px;font-weight:700;transition:.15s ease}
.state-sample.is-hover .state-button,.state-sample.is-hover .state-trigger{transform:translateY(-1px);box-shadow:0 7px 18px rgba(9,9,11,.14);opacity:.9}
.state-sample.is-focus .state-button,.state-sample.is-focus .state-trigger,.state-sample.is-focus .state-input,.state-sample.is-focus .state-choice,.state-sample.is-focus .state-card-mini,.state-sample.is-focus .state-nav{outline:3px solid var(--accent);outline-offset:3px}
.state-sample.is-active .state-button{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 5px rgba(0,0,0,.18)}
.state-button:disabled,.state-trigger:disabled{opacity:.38;cursor:not-allowed}
.state-input{width:min(100%,280px);display:grid;gap:5px}.state-sample>label,.state-sample label{font-size:9px;font-weight:700;justify-self:start}.state-input{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:10px 11px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}
.state-input.has-value{color:var(--text)}.state-input.has-error{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 10%,transparent)}
.state-sample.is-hover .state-input{border-color:color-mix(in srgb,var(--text) 45%,var(--line))}.state-sample.is-disabled{opacity:.5}
.state-sample small{font-size:9px;color:var(--danger);justify-self:start}.state-sample small.ok{color:var(--success)}
.mini-spinner{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .85s linear infinite;vertical-align:-2px}@keyframes spin{to{transform:rotate(360deg)}}
.state-choice{display:flex;align-items:center;gap:9px;border:0;background:transparent;padding:9px;border-radius:9px}.state-choice i{width:34px;height:20px;border-radius:99px;background:var(--line-strong);position:relative}.state-choice i::after{content:"";position:absolute;width:14px;height:14px;top:3px;inset-inline-start:3px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:.2s}.state-choice.on i{background:#7562e8}.state-choice.on i::after{inset-inline-start:17px}.state-choice span{font-size:11px;font-weight:650}.state-choice:disabled{opacity:.4}
.state-pop{position:absolute;width:92px;height:54px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px;display:none;inset-block-end:8px;inset-inline-end:12px;box-shadow:var(--shadow)}.state-pop.show{display:grid;gap:7px}.state-pop span{height:6px;background:var(--surface-2);border-radius:5px}.state-banner{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px;display:flex;gap:9px;align-items:center;font-size:11px}.state-banner b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}.is-success .state-banner b{background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success)}.is-warning .state-banner b{background:color-mix(in srgb,var(--warning) 14%,var(--surface));color:var(--warning)}.is-error .state-banner b{background:color-mix(in srgb,var(--danger) 13%,var(--surface));color:var(--danger)}
.state-progress{width:100%;height:8px;border-radius:99px;background:var(--line);overflow:hidden}.state-progress i{display:block;height:100%;border-radius:inherit;background:var(--accent)}.is-success .state-progress i{background:var(--success)}.is-error .state-progress i{background:var(--danger)}
.state-nav{width:100%;display:flex;gap:5px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:6px}.state-nav a{padding:6px 8px;border-radius:7px;font-size:10px;color:var(--muted)}.state-nav a.current{background:var(--text);color:var(--bg)}.is-hover .state-nav a:nth-child(2){background:var(--surface-2);color:var(--text)}
.state-card-mini{width:min(100%,240px);border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:10px;display:grid;gap:6px}.state-card-mini>span{display:block;height:34px;border-radius:7px;background:linear-gradient(135deg,color-mix(in srgb,#7562e8 18%,var(--surface-2)),var(--surface-2))}.state-card-mini strong{font-size:10px}.state-card-mini small{color:var(--muted)}.is-hover .state-card-mini{transform:translateY(-2px);box-shadow:0 7px 20px rgba(9,9,11,.09)}.is-selected .state-card-mini{border-color:#7562e8;box-shadow:0 0 0 2px color-mix(in srgb,#7562e8 10%,transparent)}.is-loading .state-card-mini>span{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite}

.practice-card{border:1px solid color-mix(in srgb,#7562e8 28%,var(--line));border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,#7562e8 5%,var(--surface)),var(--surface));padding:18px}.practice-card strong{display:block;margin-bottom:6px}.practice-card p{margin:0!important}

/* Authorship / copyright */
.brand-footer{align-items:center;padding-top:30px}
.footer-owner{display:flex;align-items:center;gap:10px;color:var(--text);min-width:190px}.footer-owner img{width:52px;height:auto;object-fit:contain}.footer-owner span{display:grid;line-height:1.2}.footer-owner strong{font-size:12px}.footer-owner small{font-size:10px;color:var(--muted);margin-top:3px}.footer-copy{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:end}
.about-owner{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}.about-owner a{display:inline-flex;align-items:center;gap:13px}.about-owner img{width:72px;height:auto}.about-owner span{display:grid}.about-owner strong{font-size:16px}.about-owner small,.owner-link{color:var(--muted);font-size:12px}.owner-link{text-decoration:underline;text-underline-offset:3px}

@media(max-width:980px){
}
@media(max-width:780px){
}
.state-gallery.is-static{grid-template-columns:minmax(0,520px)}
.state-gallery.is-static .state-card{min-height:190px}
.state-hero-mini{width:min(100%,270px);border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:13px;display:grid;gap:7px}.state-hero-mini i{width:48px;height:6px;border-radius:4px;background:#7562e8}.state-hero-mini strong{font-size:12px}.state-hero-mini span{height:6px;width:75%;border-radius:4px;background:var(--surface-2)}.state-hero-mini button{justify-self:start;border:0;border-radius:7px;background:var(--text);color:var(--bg);padding:6px 9px;font-size:9px}.state-quote-mini{width:min(100%,250px);border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px;display:grid;grid-template-columns:auto 1fr;gap:6px 9px;align-items:start}.state-quote-mini b{font-size:26px;line-height:.8;color:#df3cb5}.state-quote-mini span{font-size:10px}.state-quote-mini i{grid-column:2;width:42px;height:7px;border-radius:4px;background:var(--surface-2)}.state-divider-mini{width:min(100%,260px);display:flex;align-items:center;gap:8px}.state-divider-mini span{height:1px;background:var(--line-strong);flex:1}.state-divider-mini i{width:8px;height:8px;border-radius:50%;background:#7562e8}.state-empty-mini{display:grid;justify-items:center;gap:7px}.state-empty-mini i{font-size:30px;color:#7562e8}.state-empty-mini span{display:block;width:92px;height:6px;border-radius:4px;background:var(--surface-2)}.state-empty-mini span:last-child{width:62px}.state-avatar-mini{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#7562e8,#df3cb5);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}.state-avatar-mini.loading{color:transparent;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite}.state-avatar-mini.fallback{background:var(--surface);color:var(--text);border:1px solid var(--line)}.state-avatar-group{display:flex;align-items:center}.state-avatar-group i,.state-avatar-group b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--surface);background:#7562e8;color:#fff;font-style:normal;font-size:8px;margin-inline-start:-8px}.state-avatar-group i:first-child{margin-inline-start:0}.state-avatar-group i:nth-child(2){background:#df3cb5}.state-avatar-group i:nth-child(3){background:#45caa1}.state-avatar-group b{background:var(--surface-2);color:var(--text)}.state-code-mini{width:min(100%,250px);border-radius:9px;background:#0c0d0f;color:#eef1f5;padding:11px;font-family:ui-monospace,monospace;font-size:9px;display:grid;gap:4px;position:relative}.state-code-mini b{position:absolute;top:7px;inset-inline-end:7px;color:#45caa1}

/* V7 interactive anatomy — direct manipulation, no decorative illustrations */
.visual-page-head{grid-template-columns:minmax(0,1fr)!important;max-width:900px}
.component-page-head{grid-template-columns:minmax(0,1fr) auto!important;align-items:start}
.page-head-aside{display:flex;justify-content:flex-end;align-items:flex-start}
.button-icon{display:inline-block;margin-inline-end:7px}.pagination-pages{display:flex;gap:8px}.demo-nav a.active{font-weight:800;color:var(--text)}.footer-meta{display:block;margin-top:14px;color:var(--muted)}
.checkbox-demo label,.radio-demo label{display:flex;align-items:center;gap:9px}.checkbox-demo .check-mark{display:inline-grid;width:16px;height:16px;place-items:center;font-size:11px;color:var(--accent)}
.anatomy-lab{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.anatomy-lab-head{min-height:66px;border-bottom:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.anatomy-lab-head>div{display:grid;gap:2px}.anatomy-lab-head strong{font-size:14px}.anatomy-lab-head span{font-size:12px;color:var(--muted)}.anatomy-count{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:5px 9px;background:var(--bg)}
.anatomy-lab-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.7fr);min-height:390px}.anatomy-canvas{position:relative;display:grid;place-items:center;min-width:0;padding:34px;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text) 8%,transparent) 1px,transparent 0);background-size:18px 18px;border-inline-end:1px solid var(--line);overflow:auto}.anatomy-specimen{width:100%;max-width:650px;margin:auto}.anatomy-specimen>*{max-width:100%}
.anatomy-detail{padding:24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;background:var(--bg)}.anatomy-detail-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:850;color:var(--muted)}.anatomy-detail h3{font-size:20px;letter-spacing:-.025em;margin:8px 0 7px}.anatomy-detail p{font-size:13px!important;line-height:1.6!important;color:var(--muted)!important;margin:0 0 22px!important}.anatomy-part-buttons{display:flex;flex-wrap:wrap;gap:7px}.anatomy-part-buttons button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;padding:8px 10px;font-size:11px;text-align:start}.anatomy-part-buttons button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--text)}
.anatomy-target{cursor:pointer;transition:outline-color .15s ease,box-shadow .15s ease,background-color .15s ease,opacity .15s ease;outline:2px solid transparent;outline-offset:4px}.anatomy-target:hover,.anatomy-target:focus-visible{outline-color:color-mix(in srgb,var(--accent) 50%,transparent)}.anatomy-target.is-anatomy-selected{outline:3px solid var(--accent)!important;outline-offset:4px;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 10%,transparent)}
.anatomy-modal-backdrop,.anatomy-lightbox-backdrop{position:relative;min-height:310px;border-radius:14px;background:color-mix(in srgb,var(--text) 42%,transparent);display:grid;place-items:center;padding:24px}.anatomy-modal-panel{width:min(420px,92%);border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:22px;position:relative}.anatomy-modal-panel h3{margin:0 30px 7px 0}.anatomy-modal-panel p{margin:0 0 18px}.anatomy-modal-close{position:absolute;top:12px;inset-inline-end:12px;border:0;background:transparent;font-size:20px}.anatomy-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.anatomy-open-select{width:min(360px,100%);display:grid;gap:8px}.anatomy-select-label{font-size:12px;font-weight:700}.anatomy-select-trigger{min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:0 12px}.anatomy-select-options{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:5px;display:grid;gap:3px}.anatomy-select-option{border:0;background:transparent;text-align:start;border-radius:7px;padding:9px}.anatomy-select-option.selected{background:color-mix(in srgb,var(--accent) 10%,var(--surface));font-weight:750}
.anatomy-tooltip-demo{display:grid;justify-items:center;gap:10px}.anatomy-tooltip-surface{position:relative;background:var(--text);color:var(--bg);border-radius:8px;padding:8px 10px;font-size:12px}.anatomy-tooltip-pointer{position:absolute;width:9px;height:9px;background:var(--text);transform:rotate(45deg);top:-4px;inset-inline-start:calc(50% - 4px)}
.anatomy-switch-demo{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;max-width:420px;margin:auto}.anatomy-switch-control{border:0;background:transparent;padding:0}.anatomy-switch-track{width:48px;height:28px;border-radius:999px;background:var(--accent);display:flex;align-items:center;padding:3px;justify-content:flex-end}.anatomy-switch-thumb{width:22px;height:22px;border-radius:50%;background:#fff;display:block}.anatomy-switch-label{font-weight:700}.anatomy-switch-state{font-size:12px;color:var(--muted)}
.anatomy-slider-demo{max-width:460px;margin:auto}.anatomy-slider-head{display:flex;justify-content:space-between;margin-bottom:13px}.anatomy-slider-track{height:8px;border-radius:99px;background:var(--surface-2);position:relative}.anatomy-slider-fill{position:absolute;inset-block:0;inset-inline-start:0;width:60%;border-radius:99px;background:var(--accent)}.anatomy-slider-thumb{position:absolute;top:50%;inset-inline-start:60%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:3px solid var(--accent);background:var(--bg)}html[dir="rtl"] .anatomy-slider-thumb{transform:translate(50%,-50%)}
.anatomy-toast-demo{display:grid;place-items:center}.anatomy-toast{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:12px 13px;min-width:min(420px,100%)}.anatomy-toast-status{width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--success) 14%,var(--surface));color:var(--success);display:grid;place-items:center}.anatomy-toast-action,.anatomy-toast-close{border:0;background:transparent;color:var(--text)}
.anatomy-filter-panel{width:min(430px,100%);border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:18px}.anatomy-filter-head{display:flex;justify-content:space-between;align-items:center}.anatomy-filter-head h3{margin:0}.anatomy-filter-head button{border:0;background:transparent;color:var(--muted)}.anatomy-filter-group{display:grid;gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}.anatomy-filter-control{display:flex;gap:8px;align-items:center}.anatomy-filter-actions{padding-top:16px;display:flex;justify-content:flex-end}
.anatomy-rating-demo{text-align:center}.anatomy-rating-items{font-size:32px;letter-spacing:5px}.anatomy-rating-selected{color:var(--accent)}.anatomy-rating-preview{color:var(--muted)}.anatomy-rating-label{margin-top:8px;color:var(--muted)}
.anatomy-avatar-demo{display:grid;place-items:center}.anatomy-avatar-shell{width:88px;height:88px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;position:relative;font-weight:850;font-size:24px}.anatomy-avatar-content{display:inline-block}.anatomy-avatar-status{position:absolute;inset-inline-end:3px;bottom:6px;width:20px;height:20px;border-radius:50%;background:var(--success);border:3px solid var(--bg)}
.anatomy-drawer-demo{min-height:300px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:1fr minmax(240px,.7fr);overflow:hidden}.anatomy-drawer-context{padding:28px;display:grid;gap:10px;align-content:start;background:var(--surface)}.anatomy-drawer-context span{height:10px;border-radius:99px;background:var(--surface-2)}.anatomy-drawer-panel{border-inline-start:1px solid var(--line);background:var(--bg);padding:18px}.anatomy-drawer-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}.anatomy-drawer-header button{border:0;background:transparent;font-size:20px}.anatomy-drawer-content{padding-top:15px}.anatomy-drawer-content p{font-size:13px}
.anatomy-sheet-demo{min-height:310px;border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden;background:var(--surface)}.anatomy-sheet-context{position:absolute;inset:0;background:linear-gradient(var(--surface),var(--surface-2));opacity:.75}.anatomy-sheet{position:absolute;inset:auto 0 0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;background:var(--bg);padding:15px 18px 20px}.anatomy-sheet-handle{display:block;width:42px;height:4px;border-radius:99px;background:var(--line-strong);margin:0 auto 13px}.anatomy-sheet h3{margin:0 0 12px}.anatomy-sheet-actions{display:grid;gap:6px}.anatomy-sheet-actions button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px;text-align:start}
.anatomy-lightbox-backdrop{align-content:center}.anatomy-lightbox-close{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,#fff 30%,transparent);background:rgba(0,0,0,.2);color:#fff;font-size:20px}.anatomy-lightbox-media{width:min(480px,86%);height:210px;border-radius:10px;background:var(--surface);display:grid;place-items:center;font-size:44px}.anatomy-lightbox-caption{color:#fff;margin-top:12px;font-size:12px}.anatomy-scrollbox{max-height:210px;overflow:auto;padding:18px;border:1px solid var(--line);border-radius:12px}.anatomy-scrollbox p{margin-bottom:80px}
@media(max-width:900px){.anatomy-lab-grid{grid-template-columns:1fr}.anatomy-canvas{border-inline-end:0;border-bottom:1px solid var(--line);min-height:320px}.anatomy-detail{padding:20px}.component-page-head{grid-template-columns:minmax(0,1fr) auto!important}}
@media(max-width:600px){.anatomy-lab-head{align-items:flex-start}.anatomy-count{display:none}.anatomy-canvas{padding:24px 16px;min-height:280px}.anatomy-specimen{font-size:14px}.anatomy-detail{padding:18px}.anatomy-part-buttons{display:grid;width:100%;grid-template-columns:1fr 1fr}.anatomy-part-buttons button{min-height:42px}.anatomy-drawer-demo{grid-template-columns:1fr}.anatomy-drawer-context{display:none}.component-page-head{grid-template-columns:1fr auto!important}}
@media(prefers-reduced-motion:reduce){.anatomy-target{transition:none!important}}

.carousel-viewport{border-radius:14px;overflow:hidden}.fab-icon{display:inline-block;line-height:1}

/* =========================================================
   Interface Guide v8 — expanded component library + grouped IA
   ========================================================= */
.side-overview{margin-bottom:4px}.side-about{margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.side-subnav{display:grid;gap:2px;margin:4px 0 8px 10px;padding-inline-start:10px;border-inline-start:1px solid var(--line)}
.side-sublink{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px;border-radius:8px;color:var(--muted);font-size:11px}
.side-sublink:hover{background:var(--surface-2);color:var(--text)}.side-sublink .count{font-size:9px;color:var(--muted)}
.component-group{margin-top:42px}.component-group:first-of-type{margin-top:26px}.component-group .section-head{align-items:flex-end}
.progress-total{display:grid;justify-items:end;align-content:center}.progress-total strong{font-size:42px;letter-spacing:-.05em}.progress-total span{color:var(--muted);font-size:12px}
.progress-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.progress-group{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px;display:grid;gap:9px}.progress-group>div:first-child{display:flex;justify-content:space-between;gap:12px}.progress-group span,.progress-group small{font-size:11px;color:var(--muted)}

.link-demo{display:flex;flex-wrap:wrap;gap:18px}.demo-link{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px}.external-mark{display:inline-block;margin-inline-start:3px}
.marquee-demo{display:grid;gap:14px}.marquee-viewport{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.marquee-track{width:max-content;display:flex;gap:10px;padding:12px;animation:ig-marquee 14s linear infinite}.marquee-item{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 12px;font-size:12px;white-space:nowrap}.marquee-demo.paused .marquee-track{animation-play-state:paused}@keyframes ig-marquee{to{transform:translateX(-38%)}}html[dir="rtl"] .marquee-track{animation-direction:reverse}
.combo-demo,.multi-demo{width:min(430px,100%);display:grid;gap:8px}.combo-demo>label,.multi-demo>label{font-size:12px;font-weight:750}.combo-control{display:flex;border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}.combo-input,.token-input{min-width:0;flex:1;border:0;background:transparent;color:var(--text);padding:10px 12px;font:inherit}.combo-clear{width:42px;border:0;background:transparent;color:var(--muted)}.combo-list,.multi-list{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:5px;display:grid;gap:3px}.combo-option,.multi-list span{border:0;background:transparent;border-radius:7px;text-align:start;padding:9px;color:var(--text)}.combo-option.active{background:var(--surface-2)}.token-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--bg)}.token{display:flex;align-items:center;gap:5px;border-radius:8px;background:var(--surface-2);padding:5px 7px;font-size:11px}.token button{border:0;background:transparent;color:var(--muted)}
.segmented,.button-group{display:inline-flex;border:1px solid var(--line);border-radius:11px;padding:4px;background:var(--surface)}.segment,.button-group button{border:0;background:transparent;color:var(--muted);padding:8px 13px;border-radius:8px}.segment.active,.button-group button.active{background:var(--text);color:var(--bg)}
.dropdown-demo,.split-demo{position:relative;display:inline-flex;align-items:stretch}.dropdown-panel,.split-menu{display:grid;position:absolute;top:calc(100% + 7px);inset-inline-start:0;min-width:180px;border:1px solid var(--line);border-radius:10px;padding:5px;background:var(--bg);box-shadow:var(--shadow);z-index:3}.dropdown-panel button,.split-menu button{border:0;background:transparent;color:var(--text);text-align:start;border-radius:7px;padding:9px}.dropdown-panel .danger{color:var(--danger)}.dropdown-demo:not(.open) .dropdown-panel,.split-demo:not(.open) .split-menu{visibility:hidden;opacity:0;pointer-events:none}.split-primary,.split-menu-trigger{border:0;background:var(--text);color:var(--bg);padding:10px 14px;font-weight:750}.split-primary{border-radius:9px 0 0 9px}.split-menu-trigger{border-inline-start:1px solid color-mix(in srgb,var(--bg) 30%,transparent);border-radius:0 9px 9px 0}html[dir="rtl"] .split-primary{border-radius:0 9px 9px 0}html[dir="rtl"] .split-menu-trigger{border-radius:9px 0 0 9px}
.collapsible-demo{width:min(520px,100%);border:1px solid var(--line);border-radius:12px;overflow:hidden}.collapsible-trigger{width:100%;display:flex;justify-content:space-between;border:0;background:var(--surface);color:var(--text);padding:13px 15px;font-weight:750}.collapsible-panel{padding:14px 15px;border-top:1px solid var(--line)}.collapsible-demo.closed .collapsible-panel{display:none}
.number-field{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;width:min(360px,100%)}.number-field button{width:44px;min-height:44px;border:0;background:var(--surface);color:var(--text);font-size:18px}.number-field input{width:72px;border:0;border-inline:1px solid var(--line);background:var(--bg);color:var(--text);padding:10px;text-align:center}.number-unit{flex:1;padding:0 10px;font-size:11px;color:var(--muted)}
.time-picker{display:grid;gap:8px}.time-picker>label{font-size:12px;font-weight:750}.time-picker>div{display:flex;align-items:center;gap:6px}.time-picker button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:9px;padding:10px 12px}
.calendar-standalone{width:min(420px,100%);border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--bg)}.calendar-standalone-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.calendar-standalone-head button{border:0;background:transparent;color:var(--text)}.calendar-weekdays,.calendar-standalone-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-weekdays span{font-size:9px;color:var(--muted);text-align:center;padding:5px}.calendar-standalone-grid button{aspect-ratio:1;border:0;background:transparent;color:var(--text);border-radius:8px}.calendar-standalone-grid .active{background:var(--text);color:var(--bg)}
.otp-demo{display:grid;gap:12px;justify-items:start}.otp-group{display:flex;gap:7px}.otp-cell{width:46px;height:52px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);text-align:center;font-size:18px}.otp-cell.focused{outline:3px solid var(--accent);outline-offset:2px}.otp-help{font-size:11px;color:var(--muted)}
.bottom-nav{width:min(520px,100%);display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;padding:7px;background:var(--surface)}.bottom-nav a{display:grid;justify-items:center;gap:3px;padding:7px;border-radius:10px;color:var(--muted);font-size:10px}.bottom-nav a b{font-size:17px}.bottom-nav a.active{background:var(--text);color:var(--bg)}
.nav-rail{display:grid;justify-items:stretch;width:100px;gap:6px;border:1px solid var(--line);border-radius:14px;padding:8px;background:var(--surface)}.nav-rail a,.nav-rail button{min-height:48px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center;gap:2px;font-size:16px}.nav-rail a span{font-size:9px}.nav-rail a.active{background:var(--text);color:var(--bg)}.nav-rail .rail-action{background:var(--accent);color:white;font-size:20px}
.toolbar-demo{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:11px;padding:5px;background:var(--surface);width:max-content;max-width:100%}.toolbar-group{display:flex;gap:2px}.toolbar-demo button{min-width:38px;height:38px;border:0;border-radius:7px;background:transparent;color:var(--text)}.toolbar-demo button:hover{background:var(--surface-2)}.toolbar-sep{width:1px;height:24px;background:var(--line)}
.menubar-demo{width:min(420px,100%);border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}.menubar-row{display:flex;border-bottom:1px solid var(--line)}.menubar-row button{border:0;background:transparent;color:var(--text);padding:9px 12px}.menubar-row .active{background:var(--surface-2)}.menubar-panel{width:220px;display:grid;padding:5px;background:var(--surface);border-inline-end:1px solid var(--line)}.menubar-panel button{display:flex;justify-content:space-between;gap:14px;border:0;background:transparent;color:var(--text);padding:9px;border-radius:7px;text-align:start}.menubar-panel kbd{font-size:9px;color:var(--muted)}
.tree-demo{width:min(420px,100%);display:grid;gap:4px}.tree-branch{display:flex;align-items:center;gap:7px;padding:7px}.tree-expander{width:28px;height:28px;border:0;background:transparent;color:var(--text)}.tree-children{display:grid;gap:2px;padding-inline-start:36px}.tree-item{border:0;background:transparent;color:var(--text);text-align:start;padding:7px;border-radius:7px}.tree-item:hover{background:var(--surface-2)}
.toc-demo{display:grid;gap:4px;width:min(330px,100%);border-inline-start:2px solid var(--line);padding-inline-start:12px}.toc-demo strong{font-size:12px;margin-bottom:4px}.toc-demo a{font-size:12px;color:var(--muted);padding:5px 8px;border-radius:7px}.toc-demo a.active{background:var(--surface-2);color:var(--text);font-weight:750}
.hover-card-demo{display:grid;justify-items:start;gap:8px}.hover-card-trigger{color:var(--accent);font-weight:750}.hover-card-panel{width:260px;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:13px;box-shadow:var(--shadow)}.hover-card-panel p{font-size:12px;margin:4px 0}.hover-card-panel small{color:var(--muted)}
.list-demo{width:min(520px,100%);border:1px solid var(--line);border-radius:12px;overflow:hidden}.list-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px}.list-row+.list-row{border-top:1px solid var(--line)}.list-row>div{display:grid;gap:2px}.list-row small{color:var(--muted);font-size:10px}.list-row button{border:0;background:transparent;color:var(--muted)}
.presence-demo{display:flex;gap:16px;flex-wrap:wrap}.presence-demo>div{display:flex;align-items:center;gap:7px}.presence-dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}.presence-dot.online{background:var(--success)}.presence-dot.busy{background:var(--warning)}.presence-dot.offline{background:var(--line-strong)}.presence-context{color:var(--muted);font-size:10px}
.reorder-demo{width:min(420px,100%);display:grid;gap:6px}.drop-slot{height:6px;border-radius:99px;background:color-mix(in srgb,var(--accent) 25%,transparent)}.reorder-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:9px}.drag-handle{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:grab}
.inline-edit-demo{width:min(440px,100%)}.inline-display{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px}.inline-edit-trigger{border:0;background:transparent;color:var(--accent)}.inline-edit-field{display:grid;gap:9px}.inline-edit-field input{border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);padding:10px}.inline-edit-actions{display:flex;gap:7px}
.resize-demo{display:grid;grid-template-columns:1fr auto 1.4fr;min-height:180px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.resize-panel{display:grid;place-items:center;background:var(--surface);padding:16px}.resize-panel:last-child{background:var(--bg)}.resize-handle{width:22px;border:0;border-inline:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:col-resize}
.color-picker-demo{display:grid;grid-template-columns:70px 1fr;gap:12px;width:min(440px,100%)}.color-current{grid-row:span 2;border-radius:12px;border:1px solid var(--line)}.color-swatches{display:flex;gap:7px;flex-wrap:wrap}.color-swatch{width:32px;height:32px;border-radius:9px;border:2px solid var(--bg);outline:1px solid var(--line)}.color-swatch.active{outline:3px solid var(--accent);outline-offset:2px}.color-value{border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);padding:9px}
.shortcut-demo{display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(400px,100%);border:1px solid var(--line);border-radius:12px;padding:14px}.key-combo{display:flex;align-items:center;gap:5px}.keycap{min-width:34px;height:32px;display:grid;place-items:center;border:1px solid var(--line-strong);border-bottom-width:3px;border-radius:7px;background:var(--surface);font:inherit;font-size:12px}
.skip-link-wrap{width:min(520px,100%);border:1px solid var(--line);border-radius:12px;overflow:hidden}.skip-link-demo{display:block;background:var(--text);color:var(--bg);padding:9px 12px;font-weight:750}.skip-nav,.skip-main{padding:16px}.skip-nav{background:var(--surface);border-bottom:1px solid var(--line);color:var(--muted)}
.form-field-demo{display:grid;gap:6px;width:min(430px,100%)}.form-field-demo label{font-size:12px;font-weight:750}.form-field-demo input{border:1px solid var(--danger);border-radius:9px;background:var(--bg);color:var(--text);padding:10px}.form-field-demo small{font-size:10px}.form-field-helper{color:var(--muted)}.form-field-error{color:var(--danger)}
.choice-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:min(560px,100%)}.choice-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:13px}.choice-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}.choice-card span{display:grid;gap:3px}.choice-card small{font-size:10px;color:var(--muted)}
.state-link{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.state-link.hover{text-decoration-thickness:2px}.state-link.focus{outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}.state-link.active{opacity:.65}.state-link.visited{color:#7c3aed}.state-marquee{width:100%;display:flex;gap:6px;overflow:hidden}.state-marquee span{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:5px 8px;font-size:9px}.state-marquee.paused{opacity:.72}.state-marquee.reduced span:nth-child(n+3){display:none}

@media (prefers-reduced-motion:reduce){.marquee-track{animation:none!important;transform:none!important}}
@media(max-width:780px){.progress-groups{grid-template-columns:1fr}.progress-total{justify-items:start}.choice-cards{grid-template-columns:1fr}.otp-group{gap:4px}.otp-cell{width:38px;height:46px}.side-subnav{margin-inline-start:6px}.component-group .section-head{align-items:flex-start}}
.side-sublink.active{background:var(--surface-2);color:var(--text);font-weight:700}.side-sublink.active::before{content:"";width:3px;height:14px;border-radius:99px;background:var(--accent);margin-inline-end:2px}

/* =========================================================
   V9 — Zahra Ali portfolio-inspired visual system
   Source cues: monochrome editorial structure + ZA violet/pink
   ========================================================= */
:root{
  --bg:#fbfbfa;
  --surface:#ffffff;
  --surface-2:#f5f4f6;
  --surface-3:#f8f7fa;
  --text:#0b0b0d;
  --muted:#72717a;
  --muted-2:#a4a1ad;
  --line:#e7e5eb;
  --line-strong:#d8d5df;
  --accent:#7b68ee;
  --accent-2:#f0edff;
  --brand-violet:#7b68ee;
  --brand-pink:#e541b3;
  --brand-pink-soft:#fdeaf7;
  --danger:#c92f45;
  --success:#19754a;
  --warning:#a45f00;
  --shadow:0 1px 2px rgba(11,11,13,.03),0 18px 50px rgba(11,11,13,.06);
  --shadow-lg:0 30px 90px rgba(11,11,13,.12);
  --radius:20px;
  --radius-sm:12px;
}
html[data-theme="dark"]{
  --bg:#0c0c0f;
  --surface:#141419;
  --surface-2:#1d1c23;
  --surface-3:#111116;
  --text:#faf9fc;
  --muted:#aaa7b4;
  --muted-2:#74717f;
  --line:#292832;
  --line-strong:#383643;
  --accent:#a99bff;
  --accent-2:#24203b;
  --brand-violet:#a99bff;
  --brand-pink:#f06acb;
  --brand-pink-soft:#321c2d;
  --danger:#ff7d8e;
  --success:#65d39b;
  --warning:#ffc268;
  --shadow:0 1px 2px rgba(0,0,0,.22),0 22px 70px rgba(0,0,0,.30);
  --shadow-lg:0 36px 100px rgba(0,0,0,.42);
}
body{background:var(--bg);letter-spacing:-.006em}
.topbar{background:color-mix(in srgb,var(--bg) 91%,transparent);border-bottom-color:color-mix(in srgb,var(--line) 88%,transparent)}
.brand{letter-spacing:-.035em}
.brand-mark{border:0;background:linear-gradient(135deg,var(--brand-violet) 0 48%,var(--brand-pink) 52% 100%);color:#fff;box-shadow:0 7px 20px color-mix(in srgb,var(--brand-violet) 18%,transparent)}
.brand small{letter-spacing:.015em}
.top-search input{border-radius:14px;background:color-mix(in srgb,var(--surface) 96%,transparent)}
.top-search input:focus{border-color:var(--brand-violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-violet) 18%,transparent)}
.sidebar{background:color-mix(in srgb,var(--bg) 98%,var(--surface));}
.side-section{letter-spacing:.14em;color:var(--muted-2)}
.side-link,.side-sublink{transition:background-color .16s ease,color .16s ease,transform .16s ease}
.side-link:hover{transform:translateX(2px)}
html[dir="rtl"] .side-link:hover{transform:translateX(-2px)}
.side-link.active{background:var(--text);color:var(--bg);box-shadow:0 8px 20px rgba(11,11,13,.08)}
.side-sublink.active::before{background:linear-gradient(180deg,var(--brand-violet),var(--brand-pink))}
.side-progress{border-radius:16px;background:var(--surface)}
.side-progress .bar span,.progress>span{background:linear-gradient(90deg,var(--brand-violet),var(--brand-pink))}
.eyebrow{color:var(--brand-violet);letter-spacing:.15em}
.display,.page-head h1{font-weight:860;text-wrap:balance}
.display{letter-spacing:-.072em;max-width:900px}
.lede,.page-head p{letter-spacing:-.018em}
.primary{background:var(--text);color:var(--bg);border-color:var(--text);box-shadow:0 8px 22px rgba(11,11,13,.10)}
.primary:hover{opacity:1;transform:translateY(-1px)}
.secondary{background:var(--surface)}
.secondary:hover{border-color:var(--line-strong)}
.hero-home.hero-specimen-shell{position:relative}
.hero-home.hero-specimen-shell::before{content:"";position:absolute;z-index:-1;inset:5% -3% auto auto;width:48%;height:72%;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--brand-violet) 13%,transparent),transparent 58%),radial-gradient(circle at 72% 64%,color-mix(in srgb,var(--brand-pink) 10%,transparent),transparent 56%);filter:blur(24px);pointer-events:none}
.hero-specimen::before{background:linear-gradient(135deg,color-mix(in srgb,var(--brand-violet) 12%,transparent),color-mix(in srgb,var(--brand-pink) 9%,transparent));filter:blur(58px);opacity:.85}
.specimen-frame{border-radius:24px;border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
.specimen-ui-card,.anatomy-demo{border-radius:18px}
.specimen-inner-tabs button.active,.anatomy-tabs b{border-bottom-color:var(--brand-violet)}
.stats-row{border-radius:24px;background:var(--line);border-color:var(--line)}
.stat-block{padding:25px 24px}
.stat-block strong{font-size:31px;font-weight:850}
.section-head h2,.doc-section h2{font-weight:830}
.category-card,.pattern-card,.component-card{position:relative;overflow:hidden;border-color:var(--line);box-shadow:none}
.category-card::before,.pattern-card::before,.component-card::before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(180deg,var(--brand-violet),var(--brand-pink));transition:width .18s ease}
html[dir="rtl"] .category-card::before,html[dir="rtl"] .pattern-card::before,html[dir="rtl"] .component-card::before{inset:0 0 0 auto}
.category-card:hover,.pattern-card:hover,.component-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.category-card:hover::before,.pattern-card:hover::before,.component-card:hover::before{width:3px}
.category-icon{border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand-violet) 12%,var(--surface)),color-mix(in srgb,var(--brand-pink) 8%,var(--surface)));border:1px solid color-mix(in srgb,var(--brand-violet) 12%,var(--line))}
.component-card .num{font-weight:750;letter-spacing:.08em}
.tag{background:var(--surface-2)}
.fav-btn.active{color:var(--brand-pink);border-color:color-mix(in srgb,var(--brand-pink) 50%,var(--line));background:color-mix(in srgb,var(--brand-pink) 8%,var(--surface))}
.demo-shell{border-radius:24px;border-color:var(--line-strong);box-shadow:var(--shadow)}
.demo-toolbar button.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.demo-stage-wrap{background:linear-gradient(135deg,color-mix(in srgb,var(--brand-violet) 3.8%,var(--surface-2)),color-mix(in srgb,var(--brand-pink) 2.5%,var(--surface-2)));}
.demo-stage{border-radius:18px;background:var(--surface)}
.callout{border-radius:16px}
.callout.good{border-inline-start-color:var(--brand-violet)}
.callout.bad{border-inline-start-color:var(--brand-pink)}
:focus-visible{outline-color:var(--brand-violet)}
.state-link,.hover-card-trigger,.inline-edit-trigger,.owner-link{color:var(--brand-violet)}
.state-link.visited{color:var(--brand-pink)}
.range{accent-color:var(--brand-violet)}
.step.done span,.step.current span,.fab,.nav-rail .rail-action{background:linear-gradient(135deg,var(--brand-violet),var(--brand-pink));border-color:transparent;color:#fff}
.choice-card:has(input:checked){border-color:var(--brand-violet);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-violet) 13%,transparent)}
.color-swatch.active,.otp-cell.focused{outline-color:var(--brand-violet)}
.anatomy-hotspot.is-active,.anatomy-hotspot:hover{outline-color:var(--brand-violet)!important}
.footer{margin-top:76px;padding-top:34px}
.footer-owner img{filter:drop-shadow(0 7px 14px color-mix(in srgb,var(--brand-violet) 12%,transparent))}
.about-card{border-radius:24px;box-shadow:var(--shadow)}
.search-results{border-radius:18px;box-shadow:var(--shadow-lg)}
.quiz-opt:hover{border-color:var(--brand-violet)}
.glossary-item .ar{color:var(--brand-violet)}
@media(max-width:780px){
  .hero-home.hero-specimen-shell::before{width:90%;height:45%;inset:38% -12% auto auto}
  .category-card,.pattern-card,.component-card{border-radius:18px}
  .side-link:hover{transform:none}
}
.anatomy-part-buttons button.active{border-color:var(--brand-violet);background:color-mix(in srgb,var(--brand-violet) 9%,var(--surface))}
.anatomy-target:hover,.anatomy-target:focus-visible{outline-color:color-mix(in srgb,var(--brand-violet) 55%,transparent)}
.anatomy-target.is-anatomy-selected{outline-color:var(--brand-violet)!important;box-shadow:0 0 0 7px color-mix(in srgb,var(--brand-violet) 10%,transparent)}

/* =========================================================
   V10 — ZA learning product refresh
   Goal: friendlier, more engaging, still focused on learning.
   ========================================================= */
:root{
  --shell-gap:16px;
  --sidebar-v10:274px;
  --header-v10:68px;
  --brand-violet:#7867ed;
  --brand-pink:#e442b2;
  --brand-ink:#0d0d10;
  --soft-violet:#f0edff;
  --soft-pink:#fdebf7;
  --warm:#fffaf1;
}
html[data-theme="dark"]{
  --soft-violet:#211d37;
  --soft-pink:#301c2c;
  --warm:#1c1812;
}
body{
  background:
    radial-gradient(circle at 88% -4%,color-mix(in srgb,var(--brand-violet) 8%,transparent),transparent 27rem),
    radial-gradient(circle at 7% 32%,color-mix(in srgb,var(--brand-pink) 4.5%,transparent),transparent 31rem),
    var(--bg);
  min-height:100vh;
}

/* Floating app chrome */
.topbar{
  top:12px;
  inset-inline:12px;
  height:var(--header-v10);
  border:1px solid color-mix(in srgb,var(--line) 92%,transparent);
  border-radius:20px;
  padding-inline:16px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:0 8px 30px rgba(10,10,14,.055);
  backdrop-filter:blur(22px) saturate(160%);
}
.brand{min-width:calc(var(--sidebar-v10) - 20px)}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand-violet) 0 47%,var(--brand-pink) 53% 100%);
  box-shadow:0 9px 20px color-mix(in srgb,var(--brand-violet) 18%,transparent);
}
.brand-name{font-size:14px;font-weight:800}
.brand small{font-size:10px;margin-top:0}
.top-search input{height:42px;border-radius:13px;background:color-mix(in srgb,var(--bg) 70%,var(--surface));}
.icon-btn,.seg-btn{height:42px;min-width:42px;border-radius:12px;background:color-mix(in srgb,var(--bg) 55%,var(--surface));}
.theme-pop{top:50px}
.sidebar{
  top:calc(12px + var(--header-v10) + 12px);
  bottom:14px;
  inset-inline-start:12px;
  width:var(--sidebar-v10);
  border:1px solid var(--line);
  border-radius:22px;
  background:color-mix(in srgb,var(--surface) 94%,var(--bg));
  padding:18px 12px 24px;
  box-shadow:0 12px 35px rgba(10,10,14,.045);
}
.main{padding-inline-start:calc(var(--sidebar-v10) + 20px);padding-top:calc(var(--header-v10) + 24px)}
.content{padding:46px 52px 92px;max-width:1400px}
.side-section{margin-top:24px;color:var(--muted-2)}
.side-link{min-height:42px;border-radius:12px;padding:9px 11px;font-weight:610}
.side-link:hover{background:color-mix(in srgb,var(--brand-violet) 6%,var(--surface-2));transform:none}
.side-link.active{
  background:var(--text);color:var(--bg);font-weight:760;
  box-shadow:0 8px 18px rgba(10,10,14,.09)
}
.side-link.active::before{display:none}
.side-link.active::after{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--brand-violet),var(--brand-pink));margin-inline-start:auto;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-violet) 14%,transparent)}
.side-subnav{border-inline-start:0;margin:6px 3px 10px;padding-inline-start:8px;gap:3px}
.side-sublink{border-radius:10px;padding:7px 9px}
.side-sublink.active{background:var(--soft-violet);color:var(--text)}
.side-sublink.active::before{width:4px;height:4px;border-radius:50%;background:var(--brand-violet)}
.side-progress{border:0;background:linear-gradient(145deg,var(--soft-violet),color-mix(in srgb,var(--soft-pink) 45%,var(--surface)));padding:15px;border-radius:16px;box-shadow:none}
.side-progress .bar{height:6px;background:color-mix(in srgb,var(--surface) 80%,transparent)}

/* Typography and editorial rhythm */
.eyebrow{font-size:10px;color:var(--brand-violet);font-weight:850;letter-spacing:.16em}
.display{font-size:clamp(52px,6.6vw,96px);font-weight:860;line-height:.91;letter-spacing:-.075em}
.lede{font-size:clamp(18px,1.8vw,24px);line-height:1.48}
.section-head{margin-top:78px;margin-bottom:24px}
.section-head h2{font-size:clamp(28px,3vw,40px);font-weight:850;letter-spacing:-.052em;line-height:1.05}
.section-head p{max-width:620px;margin-top:7px}
.section-head>div>.eyebrow{margin-bottom:9px}

/* Hero gets energy without adding illustrations */
.hero-home.hero-specimen-shell{padding:58px 0 78px;gap:64px;align-items:center}
.hero-copy{position:relative;z-index:1}
.hero-copy::before{content:"";position:absolute;z-index:-1;width:110px;height:110px;border-radius:34px;inset:-28px auto auto -32px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand-violet) 15%,transparent),color-mix(in srgb,var(--brand-pink) 8%,transparent));transform:rotate(12deg);filter:blur(.2px)}
html[dir="rtl"] .hero-copy::before{inset:-28px -32px auto auto;transform:rotate(-12deg)}
.hero-actions .primary{background:linear-gradient(100deg,var(--brand-violet),color-mix(in srgb,var(--brand-pink) 82%,var(--brand-violet)));border:0;color:#fff;box-shadow:0 14px 28px color-mix(in srgb,var(--brand-violet) 18%,transparent)}
.hero-actions .primary:hover{background:linear-gradient(100deg,color-mix(in srgb,var(--brand-violet) 88%,#000),color-mix(in srgb,var(--brand-pink) 84%,#000));transform:translateY(-2px)}
.hero-actions .secondary{border-color:var(--line-strong)}
.hero-meta span{font-weight:680}
.hero-specimen::before{opacity:1;filter:blur(75px)}
.specimen-frame{border-radius:30px;box-shadow:0 35px 100px rgba(12,10,20,.13);transform:rotate(.35deg)}
html[dir="rtl"] .specimen-frame{transform:rotate(-.35deg)}
.specimen-topbar{height:48px}
.specimen-toolbar{padding:12px 14px}
.specimen-tab{border-radius:10px;padding:8px 12px}
.specimen-tab.active{background:linear-gradient(100deg,var(--brand-violet),var(--brand-pink));color:#fff}
.specimen-stage{background-size:32px 32px;background-color:color-mix(in srgb,var(--surface-3) 95%,var(--soft-violet));}
.specimen-ui-card{border-radius:22px;box-shadow:0 22px 50px rgba(12,10,20,.08)}

/* Stats are compact learning signals, not spreadsheet cells */
.stats-row{gap:12px;margin:0 0 84px;padding:0;background:transparent}
.stat-block{position:relative;overflow:hidden;border-radius:18px;padding:22px 22px 21px;border:1px solid var(--line);background:var(--surface)}
.stat-block::after{content:"";position:absolute;width:68px;height:68px;border-radius:50%;inset:-34px -26px auto auto;background:color-mix(in srgb,var(--brand-violet) 8%,transparent)}
.stat-block:nth-child(even)::after{background:color-mix(in srgb,var(--brand-pink) 8%,transparent)}
.stat-block strong{font-size:32px;font-weight:900}.stat-block span{font-size:12px}

/* Learning path feels like a guided journey */
.learning-path-grid{gap:14px;margin-bottom:76px}
.learning-path-card{
  min-height:210px;border:0;border-radius:24px;padding:24px;
  background:var(--text);color:var(--bg);position:relative;overflow:hidden;
  box-shadow:0 18px 45px rgba(12,10,18,.075)
}
.learning-path-card::after{content:"↗";position:absolute;inset:20px 20px auto auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--bg) 35%,transparent);font-size:14px;transition:.2s ease}
html[dir="rtl"] .learning-path-card::after{inset:20px auto auto 20px;content:"↖"}
.learning-path-card:nth-child(2){background:linear-gradient(145deg,#282232,#161419)}
.learning-path-card:nth-child(3){background:linear-gradient(145deg,color-mix(in srgb,var(--brand-violet) 45%,#131218),#151318)}
.learning-path-card:nth-child(4){background:linear-gradient(145deg,color-mix(in srgb,var(--brand-pink) 35%,#171319),#151318)}
.learning-path-card>span{font-size:12px;color:color-mix(in srgb,var(--bg) 62%,transparent);font-weight:800}
.learning-path-card strong{font-size:23px;font-weight:850;letter-spacing:-.035em}
.learning-path-card p{font-size:13px;color:color-mix(in srgb,var(--bg) 72%,transparent);max-width:230px}
.learning-path-card:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(12,10,18,.13)}
.learning-path-card:hover::after{background:var(--bg);color:var(--text);transform:rotate(6deg)}

/* Category bento cards */
.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.category-card{min-height:230px;border-radius:24px;padding:22px;background:var(--surface);position:relative;overflow:hidden;isolation:isolate}
.category-card::before{width:100%!important;height:5px;inset:0 0 auto!important;background:linear-gradient(90deg,var(--brand-violet),var(--brand-pink));opacity:.85}
.category-card::after{content:"";position:absolute;z-index:-1;width:160px;height:160px;border-radius:50%;inset:auto -72px -82px auto;background:var(--soft-violet);transition:.25s ease}
.category-card:nth-child(even)::after{background:var(--soft-pink)}
.category-card:hover::after{transform:scale(1.16)}
.category-icon{width:52px;height:52px;border-radius:17px;margin-bottom:38px;background:linear-gradient(145deg,var(--soft-violet),color-mix(in srgb,var(--soft-pink) 55%,var(--surface)));font-size:19px}
.category-card h3{font-size:20px;font-weight:850}.category-card p{font-size:13px;line-height:1.55;max-width:260px}
.category-meta{margin-top:auto;padding-top:22px;font-weight:700}

/* Component cards feel collectible and scannable */
.cards-list{gap:14px}
.component-card{min-height:190px;border-radius:20px;padding:20px 20px 18px;background:var(--surface);position:relative;overflow:hidden}
.component-card::before{width:4px!important;opacity:0;transition:opacity .18s ease}
html[dir="rtl"] .component-card::before{width:4px!important}
.component-card::after{content:"↗";position:absolute;inset:18px 18px auto auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);font-size:12px;transition:.18s ease}
html[dir="rtl"] .component-card::after{inset:18px auto auto 18px;content:"↖"}
.component-card:hover::before{opacity:1}
.component-card:hover::after{background:linear-gradient(135deg,var(--brand-violet),var(--brand-pink));color:#fff;transform:rotate(7deg)}
.component-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(10,10,14,.08)}
.component-card .num{display:inline-grid;place-items:center;width:34px;height:24px;border-radius:99px;background:var(--surface-2);font-size:10px;color:var(--muted);letter-spacing:.06em}
.component-card h3{font-size:20px;font-weight:850;margin-top:auto;padding-top:44px}
.component-card p{font-size:13px;line-height:1.52}.tag{border:0;background:var(--surface-2);font-weight:650}
.component-card[data-cat="sections"]::before,.component-card[data-cat="navigation"]::before{background:var(--brand-violet)}
.component-card[data-cat="forms"]::before,.component-card[data-cat="overlays"]::before{background:var(--brand-pink)}
.component-card[data-cat="feedback"]::before,.component-card[data-cat="data"]::before{background:linear-gradient(var(--brand-violet),var(--brand-pink))}

/* Page headers are now clear editorial entry points */
.visual-page-head,.component-page-head{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);border-radius:28px;padding:34px 36px;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--soft-violet) 48%,var(--surface)) 72%,color-mix(in srgb,var(--soft-pink) 38%,var(--surface)));
  box-shadow:0 14px 38px rgba(10,10,14,.04);
}
.visual-page-head::after,.component-page-head::after{content:"";position:absolute;z-index:-1;width:260px;height:260px;border-radius:50%;inset:auto -100px -155px auto;background:linear-gradient(135deg,color-mix(in srgb,var(--brand-violet) 22%,transparent),color-mix(in srgb,var(--brand-pink) 14%,transparent));filter:blur(4px)}
html[dir="rtl"] .visual-page-head::after,html[dir="rtl"] .component-page-head::after{inset:auto auto -155px -100px}
.page-head h1{font-size:clamp(46px,6vw,78px);font-weight:900;letter-spacing:-.065em;line-height:.92}
.page-head p{font-size:17px;line-height:1.58;max-width:760px}
.lesson-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.lesson-meta span{font-size:10px;font-weight:750;border:1px solid color-mix(in srgb,var(--line-strong) 78%,transparent);background:color-mix(in srgb,var(--surface) 76%,transparent);border-radius:99px;padding:5px 9px;color:var(--muted)}
.fav-btn{border-radius:14px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px)}

/* Lesson content becomes a guided visual journey */
.page-columns{gap:34px;margin-top:24px}
.page-columns>article{counter-reset:lesson-step}
.doc-section{counter-increment:lesson-step;padding:44px 0;border-bottom:0;position:relative}
.doc-section+.doc-section{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.doc-section h2{display:flex;align-items:center;gap:11px;font-size:clamp(24px,2.5vw,34px);font-weight:870;letter-spacing:-.045em;margin-bottom:18px}
.doc-section h2::before{content:counter(lesson-step,decimal-leading-zero);width:34px;height:26px;display:inline-grid;place-items:center;border-radius:99px;background:linear-gradient(135deg,var(--soft-violet),var(--soft-pink));color:var(--brand-violet);font-size:9px;font-weight:900;letter-spacing:.08em;flex:none}
.toc{border:1px solid var(--line);border-inline-start:1px solid var(--line);border-radius:16px;padding:10px;background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 10px 28px rgba(10,10,14,.035);top:calc(var(--header-v10) + 42px)}
.toc::before{content:"ON THIS PAGE";display:block;font-size:8px;font-weight:900;letter-spacing:.13em;color:var(--muted-2);padding:4px 8px 8px}
html[dir="rtl"] .toc::before{content:"في هذه الصفحة";letter-spacing:0}
.toc a{border-radius:8px;padding:6px 8px;font-size:12px}.toc a:hover{background:var(--surface-2)}

/* Interactive areas */
.demo-shell{border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 46px rgba(10,10,14,.055);overflow:hidden}
.demo-toolbar{padding:10px 12px;background:var(--surface);min-height:60px}
.demo-toolbar button{border-radius:10px;background:var(--surface-2);border-color:transparent;font-weight:700}
.demo-toolbar button.active{background:linear-gradient(100deg,var(--brand-violet),var(--brand-pink));color:#fff;border-color:transparent;box-shadow:0 7px 15px color-mix(in srgb,var(--brand-violet) 17%,transparent)}
.demo-stage-wrap{padding:32px;background:radial-gradient(circle at 20% 15%,color-mix(in srgb,var(--brand-violet) 6%,transparent),transparent 40%),radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--brand-pink) 4%,transparent),transparent 42%),var(--surface-2)}
.demo-stage{min-height:340px;border-radius:20px;border-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 12px 30px rgba(10,10,14,.025)}
.anatomy-lab{border-radius:24px!important;overflow:hidden;border-color:var(--line)!important;box-shadow:0 15px 40px rgba(10,10,14,.04)}
.anatomy-lab-head{background:linear-gradient(90deg,color-mix(in srgb,var(--soft-violet) 72%,var(--surface)),var(--surface));}
.anatomy-part-buttons button{border-radius:10px!important}
.anatomy-part-buttons button.active{background:linear-gradient(100deg,var(--brand-violet),var(--brand-pink));border-color:transparent;color:#fff}
.anatomy-target.is-anatomy-selected{box-shadow:0 0 0 8px color-mix(in srgb,var(--brand-violet) 11%,transparent)!important}

/* States become visually legible cards */
.state-gallery,.state-grid{gap:12px}
.state-card,.state-chip{border-radius:16px!important;border-color:var(--line)!important;background:var(--surface)!important}
.state-card{box-shadow:0 8px 22px rgba(10,10,14,.025)}
.state-card:hover{border-color:var(--line-strong)!important;transform:translateY(-1px)}

/* Calls, exercises, and feedback are warmer */
.callout{border-radius:18px;padding:18px;background:var(--surface)}
.callout.good{background:linear-gradient(145deg,color-mix(in srgb,var(--soft-violet) 55%,var(--surface)),var(--surface));border-inline-start-width:4px}
.callout.bad{background:linear-gradient(145deg,color-mix(in srgb,var(--soft-pink) 45%,var(--surface)),var(--surface));border-inline-start-width:4px}
.exercise,.practice-card{border-radius:22px;padding:22px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--soft-violet) 42%,var(--surface)));box-shadow:0 12px 32px rgba(10,10,14,.035)}
.exercise-option{min-height:48px;border-radius:13px;background:var(--surface);transition:.16s ease}
.exercise-option:hover:not(:disabled){border-color:var(--brand-violet);transform:translateX(3px)}
html[dir="rtl"] .exercise-option:hover:not(:disabled){transform:translateX(-3px)}

/* Overview lesson cards */
.pattern-card,.page-pattern-card,.utility-card{border-radius:22px!important}
.lesson-card-top{margin-bottom:48px}.lesson-type{color:var(--brand-violet)}
.hierarchy-track{border-radius:20px}.principle-card{border-radius:18px!important}.mistake-list>div{border-radius:16px!important}
.page-preview-shell{border-radius:24px!important;overflow:hidden;box-shadow:0 15px 40px rgba(10,10,14,.04)}

/* Glossary, quiz and progress */
.glossary-item{border-radius:20px;padding:20px;transition:.18s ease}.glossary-item:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(10,10,14,.045)}
.quiz-wrap{max-width:860px;border:1px solid var(--line);border-radius:28px;background:var(--surface);padding:34px;box-shadow:0 18px 48px rgba(10,10,14,.055)}
.quiz-options{gap:11px}.quiz-opt{border-radius:16px;padding:16px 18px;min-height:54px}.quiz-opt:hover{border-color:var(--brand-violet);background:var(--soft-violet)}
.progress-group{border-radius:18px!important;padding:17px!important}
.progress-group .bar{height:7px!important}.progress-group .bar span{background:linear-gradient(90deg,var(--brand-violet),var(--brand-pink))}

/* Footer */
.footer{border-top:0;margin-top:88px;padding:28px 0 10px;position:relative}
.footer::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,var(--brand-violet),var(--brand-pink),transparent);opacity:.38}
.footer-owner img{width:58px;height:auto}.footer-owner strong{font-weight:850}

/* Friendly motion without noise */
.category-card,.component-card,.learning-path-card,.stat-block,.glossary-item,.primary,.secondary{will-change:transform}
@media (hover:hover) and (pointer:fine){
  .stat-block:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,10,14,.045)}
}

/* Dark refinements */
html[data-theme="dark"] .topbar,html[data-theme="dark"] .sidebar{box-shadow:0 16px 50px rgba(0,0,0,.18)}
html[data-theme="dark"] .visual-page-head,html[data-theme="dark"] .component-page-head{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--soft-violet) 52%,var(--surface)),color-mix(in srgb,var(--soft-pink) 25%,var(--surface)))}
html[data-theme="dark"] .learning-path-card{box-shadow:0 20px 48px rgba(0,0,0,.2)}

/* Responsive shell */
@media(max-width:1180px){
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content{padding-inline:34px}
}
@media(max-width:780px){
  :root{--header-v10:62px}
  .topbar{top:8px;inset-inline:8px;border-radius:17px;padding-inline:9px;height:var(--header-v10)}
  .brand{min-width:auto}.brand-mark{width:36px;height:36px}
  .sidebar{top:calc(8px + var(--header-v10) + 8px);bottom:8px;inset-inline-start:8px;width:min(332px,calc(100vw - 16px));border-radius:20px;transform:translateX(calc(-100% - 18px));}
  html[dir="rtl"] .sidebar{transform:translateX(calc(100% + 18px))}
  .main{padding-inline-start:0;padding-top:calc(var(--header-v10) + 16px)}
  .content{padding:26px 16px 70px}
  .hero-home.hero-specimen-shell{padding-top:36px;gap:34px}
  .hero-copy::before{width:78px;height:78px;inset:-12px auto auto -13px}
  html[dir="rtl"] .hero-copy::before{inset:-12px -13px auto auto}
  .display{font-size:clamp(46px,13vw,60px)}
  .stats-row{gap:8px;margin-bottom:58px}.stat-block{padding:17px}.stat-block strong{font-size:27px}
  .learning-path-grid{gap:10px}.learning-path-card{min-height:165px;border-radius:20px;padding:20px}.learning-path-card strong{font-size:21px}
  .category-grid{grid-template-columns:1fr}.category-card{min-height:205px}.category-icon{margin-bottom:28px}
  .component-card{min-height:170px}.component-card h3{padding-top:34px}
  .visual-page-head,.component-page-head{border-radius:22px;padding:26px 22px}
  .page-head h1{font-size:clamp(42px,12vw,58px)}
  .lesson-meta{gap:5px}.lesson-meta span{font-size:9px}
  .doc-section{padding:34px 0}.doc-section h2{font-size:26px}
  .demo-stage-wrap{padding:12px}.demo-stage{min-height:300px;padding:16px}
  .quiz-wrap{padding:22px 17px;border-radius:22px}
  .section-head{margin-top:58px}.section-head h2{font-size:31px}
}
@media(prefers-reduced-motion:reduce){
  .specimen-frame{transform:none!important}.hero-copy::before{transform:none!important}
}
/* V10 visual QA adjustment: avoid orphaned hero word at common desktop widths. */
@media(min-width:961px){.hero-copy .display{font-size:clamp(52px,5.6vw,82px);max-width:580px}}
@media(min-width:961px){.hero-copy .display{font-size:clamp(50px,5vw,74px);max-width:600px}}

/* =========================================================
   V11 — Engagement fixes, Skills Lab and Arabic typography
   ========================================================= */

/* Arabic typography: independent system, not a mirrored English scale. */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:0;
}
html[lang="ar"] .display{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-weight:700;line-height:1.08;letter-spacing:0;text-align:right}
html[lang="ar"] .page-head h1,
html[lang="ar"] .section-head h2,
html[lang="ar"] .doc-section h2,
html[lang="ar"] .quiz-q,
html[lang="ar"] .skill-play-head h1,
html[lang="ar"] .skill-question-card h2{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-weight:600;letter-spacing:0;line-height:1.28}
html[lang="ar"] body{font-weight:400;line-height:1.78}
html[lang="ar"] .side-link,html[lang="ar"] .side-sublink,html[lang="ar"] .topbar,html[lang="ar"] .tag,html[lang="ar"] .lesson-meta span{font-weight:500}
html[lang="ar"] .side-link.active,html[lang="ar"] .side-sublink.active{font-weight:600}
html[lang="ar"] .component-term{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;direction:ltr;unicode-bidi:isolate;display:inline-block;letter-spacing:-.02em}
html[lang="ar"] .eyebrow{letter-spacing:0;font-weight:600}
html[lang="ar"] .lede{line-height:1.85;text-align:right}

/* Theme toggle: explicit sun / moon control. */
.theme-toggle{height:42px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 58%,var(--surface));border-radius:13px;padding:5px 8px;transition:.18s ease}
.theme-toggle:hover{border-color:var(--line-strong);background:var(--surface)}
.theme-sun,.theme-moon{width:20px;height:20px;display:grid;place-items:center;font-size:14px;color:var(--muted);transition:.18s ease}
.theme-track{width:34px;height:20px;border-radius:99px;background:color-mix(in srgb,var(--brand-violet) 13%,var(--surface-2));position:relative;box-shadow:inset 0 0 0 1px var(--line)}
.theme-track i{position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--brand-violet),var(--brand-pink));box-shadow:0 2px 8px color-mix(in srgb,var(--brand-violet) 32%,transparent);transition:transform .2s ease}
.theme-toggle.is-dark .theme-track i{transform:translateX(14px)}
html[dir="rtl"] .theme-toggle.is-dark .theme-track i{transform:translateX(-14px)}
.theme-toggle:not(.is-dark) .theme-sun,.theme-toggle.is-dark .theme-moon{color:var(--text)}

/* Sidebar category tree is visible and explicitly expandable. */
.side-tree{display:grid;gap:2px}
.side-tree-head{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:2px}
.side-tree-head .side-link{min-width:0}
.side-tree-head .side-link .count{margin-inline-start:auto}
.side-tree-toggle{height:34px;width:34px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center}
.side-tree-toggle:hover{background:var(--surface-2);color:var(--text)}
.side-tree-toggle span{display:block;font-size:17px;transition:transform .18s ease}
.side-tree.open .side-tree-toggle span{transform:rotate(180deg)}
.side-tree .side-subnav{display:none}
.side-tree.open .side-subnav{display:grid}
.side-subnav{margin:4px 2px 8px;padding-inline-start:10px;gap:2px}
.side-sublink{display:flex;align-items:center;gap:8px;min-height:34px;padding:7px 9px;border-radius:9px;color:var(--muted);font-size:11px;line-height:1.35}
.side-sublink:hover{background:var(--surface-2);color:var(--text)}
.side-sublink.active{background:var(--soft-violet);color:var(--text)}
.side-sublink .count{margin-inline-start:auto;font-size:9px;color:var(--muted-2)}
.side-progress-link{display:block;color:inherit}
.side-progress-link:hover{transform:translateY(-1px)}

/* New editorial / playful hero. */
.hero-home.hero-kinetic{display:block;padding:70px 0 34px;border-bottom:0;position:relative;overflow:hidden;isolation:isolate}
.hero-home.hero-kinetic::before{content:"";position:absolute;z-index:-1;width:430px;height:430px;border-radius:50%;inset:-170px -120px auto auto;background:radial-gradient(circle,color-mix(in srgb,var(--brand-violet) 14%,transparent),transparent 66%)}
html[dir="rtl"] .hero-home.hero-kinetic::before{inset:-170px auto auto -120px}
.hero-center{max-width:940px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
html[dir="rtl"] .hero-center{align-items:flex-end;text-align:right;max-width:900px}
.hero-center .display{max-width:940px;color:var(--text);font-size:clamp(58px,7vw,104px);line-height:.91;font-weight:900;letter-spacing:-.075em}
.hero-center .display span{display:block}
html[lang="ar"] .hero-center .display{font-size:clamp(54px,6.2vw,86px);max-width:820px;line-height:1.08;font-weight:700;text-wrap:balance}
.hero-center .lede{max-width:760px;margin-top:22px}
.hero-center .hero-actions{justify-content:center}
html[dir="rtl"] .hero-center .hero-actions{justify-content:flex-start}
.hero-center .hero-meta{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px;font-weight:600}
.hero-center .hero-meta i{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.throw-zone{position:relative;height:230px;max-width:1040px;margin:38px auto 0;border-radius:28px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 58%,transparent),color-mix(in srgb,var(--soft-violet) 36%,var(--surface)));overflow:hidden;touch-action:pan-y;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 90%,transparent)}
.throw-zone::after{content:"";position:absolute;inset:auto 0 0;height:64px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand-pink) 4%,transparent));pointer-events:none}
.throw-chip{position:absolute;top:0;left:0;z-index:2;border:1px solid color-mix(in srgb,var(--line-strong) 72%,transparent);border-radius:999px;background:var(--surface);padding:10px 17px;font-size:13px;font-weight:750;box-shadow:0 8px 18px rgba(10,10,14,.06);cursor:grab;user-select:none;touch-action:none;will-change:transform;transition:box-shadow .14s ease,border-color .14s ease}
.throw-chip:hover{border-color:color-mix(in srgb,var(--brand-violet) 55%,var(--line));box-shadow:0 12px 24px rgba(10,10,14,.10)}
.throw-chip.dragging{cursor:grabbing;z-index:10;box-shadow:0 18px 34px rgba(10,10,14,.17)}
.throw-chip.chip-1,.throw-chip.chip-4{background:color-mix(in srgb,var(--soft-violet) 66%,var(--surface))}
.throw-chip.chip-2{background:color-mix(in srgb,var(--soft-pink) 55%,var(--surface))}
.throw-chip.chip-3{background:color-mix(in srgb,#d8f7ef 62%,var(--surface))}

/* Statistics: counters, no cards. */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:44px 0 88px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-counter{display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;column-gap:13px;align-items:center;padding:5px 28px;border-inline-end:1px solid var(--line)}
.stat-counter:last-child{border-inline-end:0}
.stat-icon{grid-row:1/3;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--soft-violet),var(--soft-pink));color:var(--brand-violet)}
.stat-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat-counter strong{font-size:34px;line-height:1;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat-counter>span:last-child{font-size:11px;color:var(--muted);font-weight:650;margin-top:4px}
html[lang="ar"] .stat-counter strong{font-weight:700}

/* Functional table of contents. */
.toc{overflow:hidden}
.toc-title{display:block;font-size:8px;font-weight:900;letter-spacing:.13em;color:var(--muted-2);padding:4px 8px 8px;text-transform:uppercase}
html[lang="ar"] .toc-title{letter-spacing:0;text-transform:none;font-weight:600;font-size:10px}
.toc::before{display:none!important}
.toc a{position:relative;padding:7px 9px;border-radius:9px;transition:.14s ease}
.toc a:hover{background:var(--surface-2)}
.toc a.active{color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--soft-violet) 70%,var(--surface)),transparent);font-weight:700}
.toc a.active::before{content:"";position:absolute;inset-inline-start:0;top:10px;bottom:10px;width:3px;border-radius:99px;background:linear-gradient(var(--brand-violet),var(--brand-pink))}
.doc-section{scroll-margin-top:calc(var(--header-v10) + 44px)}

/* Lesson progress reset. */
.lesson-progress-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.danger-quiet{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,var(--line));background:transparent}
.danger-quiet:hover{background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.demo-btn.danger,.ghost.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.confirm-dialog{max-width:520px}
.reset-zone{margin-top:8px;border-top:1px solid var(--line)!important}
.reset-zone p{margin-bottom:14px}

/* Skills Lab. */
.skills-score{min-width:116px;padding:16px 18px;border-radius:20px;background:linear-gradient(145deg,var(--soft-violet),var(--soft-pink));text-align:center}
.skills-score strong{display:block;font-size:36px;line-height:1;font-weight:900}.skills-score span{font-size:11px;color:var(--muted);font-weight:700}
.skills-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
.skill-module-card{min-height:250px;border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:22px;display:flex;flex-direction:column;transition:.18s ease;position:relative;overflow:hidden}
.skill-module-card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;inset:auto -55px -65px auto;background:var(--soft-violet);z-index:0}
.skill-module-card:nth-child(even)::after{background:var(--soft-pink)}
.skill-module-card>*{position:relative;z-index:1}
.skill-module-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(10,10,14,.08);border-color:var(--line-strong)}
.skill-module-top{display:flex;justify-content:space-between;align-items:center}.skill-icon{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--brand-violet),var(--brand-pink));color:#fff;display:grid;place-items:center;font-size:18px}.skill-best{font-size:12px;font-weight:800;color:var(--muted)}
.skill-module-card h2{font-size:22px;margin:34px 0 8px;font-weight:850;letter-spacing:-.03em}.skill-module-card p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}.skill-module-foot{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;font-size:12px;font-weight:750}
.skills-play{max-width:900px;margin:0 auto}.back-link{display:inline-flex;margin-bottom:22px;color:var(--muted);font-size:13px}.back-link:hover{color:var(--text)}
.skill-play-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:24px}.skill-play-head h1{font-size:clamp(42px,5vw,66px);margin:0;letter-spacing:-.055em;line-height:.96}.skill-play-head p{max-width:620px;color:var(--muted)}.skill-live-score{text-align:center;min-width:90px}.skill-live-score strong{display:block;font-size:30px}.skill-live-score span{font-size:10px;color:var(--muted)}
.skill-progress{height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin:20px 0 28px}.skill-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-violet),var(--brand-pink));border-radius:inherit;transition:width .25s ease}
.skill-question-card{border:1px solid var(--line);border-radius:28px;background:var(--surface);padding:30px;box-shadow:0 18px 48px rgba(10,10,14,.045)}.skill-step{font-size:10px;color:var(--muted-2);font-weight:850;letter-spacing:.1em;text-transform:uppercase}.skill-question-card h2{font-size:clamp(24px,3vw,34px);margin:12px 0 22px;line-height:1.2;letter-spacing:-.035em}.skill-instruction{font-size:13px;color:var(--muted);margin-top:-10px;margin-bottom:18px}
.skill-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.skill-choice{min-height:58px;border:1px solid var(--line);border-radius:15px;background:var(--surface);text-align:start;padding:14px 16px;font-weight:650}.skill-choice:hover:not(:disabled){border-color:var(--brand-violet);background:var(--soft-violet)}.skill-choice.correct{background:color-mix(in srgb,var(--success) 10%,var(--surface));border-color:var(--success)}.skill-choice.wrong{background:color-mix(in srgb,var(--danger) 8%,var(--surface));border-color:var(--danger)}
.skill-feedback{margin:18px 0 12px;padding:14px 16px;border-radius:16px;background:var(--surface-2);color:var(--muted)}.skill-feedback strong{color:var(--text)}.skill-feedback p{margin:5px 0 0}.wrong-feedback{color:var(--danger)}
.skill-visual{min-height:130px;border-radius:20px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--soft-violet) 45%,var(--surface)));display:grid;place-items:center;margin-bottom:20px}.state-visual{border:0;border-radius:10px;background:var(--text);color:var(--bg);padding:12px 20px;font-weight:750}.state-visual.focus{outline:4px solid var(--brand-violet);outline-offset:4px}.state-visual:disabled{opacity:.38}.state-visual.loading{display:flex;gap:9px;align-items:center}.state-visual.loading span{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .8s linear infinite}.state-input{border:1px solid var(--danger);color:var(--danger);border-radius:10px;padding:12px 18px;background:var(--surface)}.state-segment{display:flex;border:1px solid var(--line);border-radius:12px;padding:4px;background:var(--surface)}.state-segment>*{padding:8px 14px}.state-segment strong{border-radius:8px;background:var(--text);color:var(--bg)}
.skill-multi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.skill-check{display:flex;align-items:center;gap:11px;min-height:54px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.skill-check:has(input:checked){border-color:var(--brand-violet);background:var(--soft-violet)}.skill-check input{width:18px;height:18px;accent-color:var(--brand-violet)}
.match-board{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}.match-needs,.match-components{display:grid;gap:9px}.match-need,.match-answer{min-height:54px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px;text-align:start}.match-need.active{border-color:var(--brand-violet);background:var(--soft-violet)}.match-need.done{opacity:.45}.match-answer:hover{border-color:var(--brand-pink);background:var(--soft-pink)}
.order-list{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:9px}.order-list li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.order-list li>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:11px;font-weight:850}.order-list li>div{display:flex;gap:5px}.order-list button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.skill-finish{text-align:center;border:1px solid var(--line);border-radius:30px;background:var(--surface);padding:46px 28px;box-shadow:0 18px 48px rgba(10,10,14,.045)}.skill-finish-ring{width:150px;height:150px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--brand-violet),var(--brand-pink),var(--soft-violet));border:12px solid var(--surface)}.skill-finish-ring strong{font-size:36px;line-height:1}.skill-finish-ring span{font-size:10px}.skill-finish h1{font-size:44px;margin:0}.skill-finish p{color:var(--muted);max-width:560px;margin:12px auto 0}.skill-finish .hero-actions{justify-content:center}

/* Progress / mastery. */
.progress-summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:28px}.progress-summary-row>div{background:var(--surface);padding:20px}.progress-summary-row strong{display:block;font-size:30px;line-height:1}.progress-summary-row span{font-size:11px;color:var(--muted)}
.mastery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mastery-grid article{border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--surface)}.mastery-grid article>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.mastery-grid .bar{height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden}.mastery-grid .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-violet),var(--brand-pink));border-radius:inherit}
.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.badge-earned{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:16px;display:flex;align-items:flex-start;gap:12px}.badge-earned>span{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-violet),var(--brand-pink));color:#fff}.badge-earned strong{display:block}.badge-earned small{display:block;color:var(--muted);margin-top:3px;line-height:1.5}

@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:1100px){
 .skills-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stat-counter{padding-inline:18px}
 .throw-zone{height:220px}
}
@media(max-width:780px){
 .theme-toggle{height:38px;padding-inline:6px}.theme-sun,.theme-moon{display:none}.theme-track{width:38px}.theme-toggle.is-dark .theme-track i{transform:translateX(18px)}html[dir="rtl"] .theme-toggle.is-dark .theme-track i{transform:translateX(-18px)}
 .hero-home.hero-kinetic{padding-top:42px}.hero-center{align-items:flex-start;text-align:start}.hero-center .display{font-size:clamp(48px,13vw,62px);line-height:.96}.hero-center .hero-actions{justify-content:flex-start}
 html[lang="ar"] .hero-center .display{font-size:clamp(44px,12vw,58px);line-height:1.12}.throw-zone{height:260px;margin-top:28px;border-radius:22px}.throw-chip{font-size:11px;padding:8px 13px}
 .stats-strip{grid-template-columns:1fr 1fr;margin:30px 0 58px;padding:0;border:1px solid var(--line);border-radius:20px;overflow:hidden}.stat-counter{padding:16px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)}.stat-counter:nth-child(2n){border-inline-end:0}.stat-counter:nth-last-child(-n+2){border-bottom:0}.stat-counter strong{font-size:28px}.stat-icon{width:38px;height:38px}
 .skills-module-grid{grid-template-columns:1fr}.skill-module-card{min-height:210px}.skill-play-head{align-items:flex-start;flex-direction:column}.skill-live-score{text-align:start}.skill-choice-grid,.skill-multi-grid,.match-board,.mastery-grid,.badge-grid,.progress-summary-row{grid-template-columns:1fr}.skill-question-card{padding:21px 16px;border-radius:22px}.skill-finish{padding:36px 18px}.skill-finish h1{font-size:36px}
 .side-tree.open .side-subnav{display:grid}
}
@media(prefers-reduced-motion:reduce){.throw-chip{transition:none!important}.state-visual.loading span{animation:none}}
.theme-sun svg,.theme-moon svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-moon svg{fill:none}


/* =========================================================
   V12 — physics throwables, richer Skills Lab, Arabic hierarchy
   ========================================================= */

/* Hero stays the same design, but the whole content hierarchy is centered in both languages. */
.hero-home.hero-kinetic{padding-top:68px;padding-bottom:20px}
.hero-center,html[dir="rtl"] .hero-center{align-items:center;text-align:center;max-width:940px}
.hero-center .display,html[lang="ar"] .hero-center .display{max-width:900px;text-align:center;margin-inline:auto}
.hero-center .lede,html[lang="ar"] .hero-center .lede{max-width:760px;text-align:center;margin-inline:auto}
.hero-center .hero-actions{justify-content:center}
.hero-center .hero-meta{justify-content:center}

/* Reference-style physics pile: no extra container card, no borders, no shadows. */
.throw-zone{height:188px;max-width:1120px;margin:32px auto 0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;touch-action:pan-y;position:relative}
.throw-zone::after{display:none}
.throw-chip{border:0;border-radius:999px;padding:7px 22px;font-size:16px;font-weight:500;line-height:1.2;box-shadow:none;cursor:grab;user-select:none;touch-action:none;will-change:transform;background:#e9e3f1;color:#111;transition:filter .12s ease}
.throw-chip:hover{border:0;box-shadow:none;filter:brightness(.985)}
.throw-chip.dragging{cursor:grabbing;z-index:20;box-shadow:none;filter:brightness(.96)}
.throw-chip.chip-0{background:#e8e2f0;color:#111}
.throw-chip.chip-1{background:#f9d9c6;color:#111}
.throw-chip.chip-2{background:#63c5d7;color:#fff}
.throw-chip.chip-3{background:#d9efe8;color:#111}
.throw-chip.chip-4{background:#ae62d8;color:#fff}

/* Sidebar hierarchy: stronger contrast, clearer type scale, less dominant scrollbar. */
.sidebar{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 42%,transparent) transparent}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 38%,transparent);border-radius:99px}.sidebar:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 58%,transparent)}
.side-section{font-size:11px;font-weight:750;color:color-mix(in srgb,var(--text) 52%,var(--muted));letter-spacing:.12em;margin-top:22px;margin-bottom:7px}
.side-link{font-size:14px;font-weight:620;color:color-mix(in srgb,var(--text) 74%,var(--muted));min-height:40px}
.side-link:not(.active):hover{color:var(--text);background:var(--surface-2)}
.side-sublink{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:38px;padding:8px 10px;font-size:12.5px;font-weight:500;color:color-mix(in srgb,var(--text) 68%,var(--muted));line-height:1.45}
.side-sublink .count{margin:0;font-size:11px;font-weight:600;color:color-mix(in srgb,var(--text) 42%,var(--muted))}
.side-sublink.active{font-weight:620;color:var(--text);background:color-mix(in srgb,var(--soft-violet) 72%,var(--surface))}
.side-sublink.active::before{content:"";position:absolute;inset-inline-start:3px;width:3px;height:18px;border-radius:9px;background:linear-gradient(var(--brand-violet),var(--brand-pink))}
.side-sublink{position:relative}
.side-tree-toggle{color:color-mix(in srgb,var(--text) 58%,var(--muted))}
.side-tree-head{grid-template-columns:minmax(0,1fr) 38px}
.side-subnav{gap:3px;padding-inline-start:12px}

/* Arabic navigation gets its own readable scale instead of inheriting tiny English UI type. */
html[lang="ar"]{--sidebar-v10:302px}
html[lang="ar"] .side-section{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-size:12px;font-weight:600;line-height:1.6;letter-spacing:0;color:color-mix(in srgb,var(--text) 54%,var(--muted));margin-top:24px;margin-bottom:7px}
html[lang="ar"] .side-link{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.5;color:color-mix(in srgb,var(--text) 82%,var(--muted));min-height:44px}
html[lang="ar"] .side-link.active{font-weight:600;color:#fff}
html[lang="ar"] .side-sublink{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-size:14.5px;font-weight:500;line-height:1.65;color:color-mix(in srgb,var(--text) 72%,var(--muted));min-height:43px;padding-block:8px}
html[lang="ar"] .side-sublink.active{font-weight:600;color:var(--text)}
html[lang="ar"] .side-sublink .count{font-family:Inter,ui-sans-serif,sans-serif;font-size:12px;font-weight:500;color:color-mix(in srgb,var(--text) 46%,var(--muted));direction:ltr}
html[lang="ar"] .side-progress strong{font-size:14px;font-weight:600}html[lang="ar"] .side-progress small{font-size:12px}
html[lang="ar"] .brand-name{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-weight:600}

/* Skills Lab now reads like a playful learning system rather than a card-based quiz page. */
.skills-head{align-items:flex-end}.skills-head-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.skills-head-meta span{border:1px solid var(--line);border-radius:99px;padding:7px 11px;font-size:12px;color:var(--muted)}.skills-head-meta strong{color:var(--text)}
.skills-score{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:6px;min-width:132px}.skills-score strong{grid-row:1 / span 2;font-size:42px}.skills-score span{align-self:end}.skills-score small{font-size:12px;color:var(--text);font-weight:750}
.skill-module-kicker{margin-top:26px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);font-weight:850}
.skill-module-card h2{margin-top:8px}.skill-module-card{min-height:270px}.skill-module-card:nth-child(3n+1) .skill-icon{background:linear-gradient(135deg,#7c68ee,#a36bea)}.skill-module-card:nth-child(3n+2) .skill-icon{background:linear-gradient(135deg,#e541b3,#b863dc)}.skill-module-card:nth-child(3n) .skill-icon{background:linear-gradient(135deg,#49b9ce,#7c68ee)}

.skill-audit-visual{padding:22px}.audit-form,.audit-toolbar,.audit-touch,.audit-actions{width:min(520px,92%)}.audit-form{display:grid;gap:12px}.audit-form label{display:grid;gap:6px;font-size:12px;font-weight:700}.audit-form input{min-height:44px;border:1px solid var(--danger);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--text)}.audit-form button,.audit-toolbar button,.audit-actions button{min-height:42px;border-radius:10px;border:1px solid var(--line);background:var(--text);color:var(--bg);padding:0 14px}.audit-toolbar{display:flex;align-items:center;gap:10px}.audit-toolbar .has-focus{outline:3px solid var(--brand-violet);outline-offset:3px}.fake-click{padding:7px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.audit-modal-scene{position:relative;width:min(560px,94%);min-height:190px;border-radius:16px;background:var(--surface-2);display:grid;place-items:center}.audit-modal-scene .bg-control{position:absolute;inset:auto 16px 16px auto}.audit-modal{width:76%;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:18px;box-shadow:0 14px 30px rgba(0,0,0,.08)}.audit-modal p{color:var(--muted)}.audit-modal>div{display:flex;justify-content:flex-end;gap:8px}.audit-modal button{min-height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface);padding:0 12px}.audit-modal .danger-demo{background:var(--danger);color:white;border-color:transparent}
.audit-touch{display:flex;align-items:center;justify-content:center;gap:6px}.audit-touch button{border:1px solid var(--line);background:var(--surface);border-radius:10px}.audit-touch .tiny-target{width:24px;height:24px;padding:0}.audit-touch .good-target{min-height:48px;padding:0 18px}.audit-contrast{width:min(480px,92%);border-radius:14px;padding:20px;background:#f5f4f8}.audit-contrast strong{color:#8f8d98}.audit-contrast p{color:#b9b6c1}.placeholders input{border-color:var(--line)}
.audit-status{display:flex;align-items:center;gap:10px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.audit-status .dot{width:10px;height:10px;border-radius:50%;background:var(--danger)}.audit-status button{margin-inline-start:auto}.audit-motion{overflow:hidden;width:min(520px,94%);border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--surface)}.audit-motion>div{white-space:nowrap;word-spacing:28px;animation:auditMarquee 5s linear infinite}.audit-actions{display:flex;justify-content:center;gap:12px}.audit-actions a,.audit-actions button{display:grid;place-items:center;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line)}.audit-actions a{background:var(--surface);color:var(--danger)}.audit-zoom{font-size:11px;width:min(420px,92%);padding:18px;border:1px solid var(--line);border-radius:12px}.audit-zoom p{font-size:11px;color:var(--muted)}
@keyframes auditMarquee{to{transform:translateX(-45%)}}

.build-game{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;margin:18px 0}.build-palette{display:flex;align-content:flex-start;flex-wrap:wrap;gap:8px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}.build-chip{border:1px solid var(--line);border-radius:99px;background:var(--surface);min-height:40px;padding:8px 13px;font-weight:650;cursor:grab}.build-chip:hover{border-color:var(--brand-violet)}.build-chip.used{opacity:.38}.build-chip.selected{cursor:pointer;display:inline-flex;align-items:center;gap:8px}.build-canvas{min-height:230px;border:2px dashed color-mix(in srgb,var(--brand-violet) 35%,var(--line));border-radius:20px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--soft-violet) 35%,var(--surface)));padding:18px;transition:.16s ease}.build-canvas.drag-over{border-color:var(--brand-violet);background:var(--soft-violet)}.build-canvas-label{display:block;font-size:10px;color:var(--muted-2);font-weight:850;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}.build-selection{display:flex;align-content:flex-start;flex-wrap:wrap;gap:8px}.build-selection>p{color:var(--muted);font-size:13px;max-width:260px}

.order-list li{cursor:grab}.order-list li.dragging{opacity:.45;border-color:var(--brand-violet)}.drag-handle{color:var(--muted-2);font-size:14px}.order-number{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:11px;font-weight:800}.order-list li>strong{flex:1}

.skill-hotspot-stage{min-height:300px;border-radius:22px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--soft-violet) 30%,var(--surface)));display:grid;place-items:center;padding:26px;margin:18px 0}.spotter-scene,.anatomy-game{position:relative;width:min(620px,96%);min-height:210px;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:24px;display:flex;gap:12px;align-items:center;justify-content:center}.spot-target,.anatomy-game button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;min-height:44px;padding:9px 14px}.spot-target.tiny{width:25px;height:25px;min-height:25px;padding:0}.spot-target.faint{color:color-mix(in srgb,var(--muted) 28%,var(--surface));}.spot-target.vague{font-weight:600}.spot-target.neutral{background:var(--text);color:var(--bg)}.spotter-scene.red-only{display:grid;align-content:center;justify-items:start}.spotter-scene.red-only label{display:grid;gap:6px}.spotter-scene.red-only input{width:290px;max-width:70vw;min-height:46px;border:2px solid var(--danger);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--text)}.hotspot-overlay.field-problem{position:absolute;width:320px;max-width:76%;height:56px;background:transparent;border:0}.helper-good{font-size:12px;color:var(--muted)}.spotter-scene.placeholder-label{display:grid;gap:14px}.spotter-scene.placeholder-label label{display:grid;gap:6px}.spotter-scene.placeholder-label input{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px}.tiny-copy{font-size:10px;color:var(--muted)}.visible-focus{outline:3px solid var(--brand-violet);outline-offset:3px}.hidden-focus{outline:1px solid var(--line)}.correct-hotspot{outline:4px solid var(--success)!important;outline-offset:4px!important}.wrong-hotspot{outline:4px solid var(--danger)!important;outline-offset:4px!important}
.anatomy-game.pagination button.selected,.anatomy-game.tabs button.selected,.calendar-days button.selected{background:var(--text);color:var(--bg)}.anatomy-game.input{display:grid;justify-items:stretch}.field-label,.field-help{text-align:start;background:transparent!important;border:0!important}.field-label{font-weight:700}.field-help{font-size:12px;color:var(--muted)!important}.field-box{text-align:start}.mini-modal{position:relative;width:360px;max-width:100%;border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:10px}.modal-close{position:absolute;inset:10px 10px auto auto;width:34px!important;height:34px!important;min-height:34px!important;padding:0!important}.mini-card{display:grid;gap:8px;width:270px}.mini-card button{text-align:start}.card-media{height:90px;background:var(--surface-2)!important}.card-title{font-weight:800}.card-copy{color:var(--muted)!important}.card-action{background:var(--text)!important;color:var(--bg)!important}.mini-toast{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:10px}.toast-message{flex:1;text-align:start}.accordion-trigger{width:min(430px,100%);display:flex;justify-content:space-between}.accordion-panel{width:min(430px,100%);color:var(--muted)!important}.anatomy-game.accordion{display:grid}.mini-calendar{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.mini-calendar strong{text-align:center}.calendar-days{grid-column:1/-1;display:flex;justify-content:center;gap:7px}

.rtl-visual,.rtl-term-demo,.rtl-layout-demo,.rtl-copy-demo,.rtl-progress-demo,.rtl-media-demo,.rtl-form-demo{width:min(520px,94%);border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--surface)}.rtl-visual.arrows{display:grid;grid-template-columns:1fr auto;gap:8px}.rtl-term-demo{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}.rtl-term-demo span:first-child,.rtl-term-demo code{direction:ltr;font-family:Inter,sans-serif;background:var(--surface-2);padding:7px 10px;border-radius:8px}.rtl-layout-demo{display:flex;justify-content:space-between;direction:rtl}.rtl-copy-demo{direction:rtl;text-align:right;font-family:"IBM Plex Sans Arabic",sans-serif;line-height:1.8}.rtl-progress-demo{display:flex;align-items:center;justify-content:center;gap:8px}.rtl-progress-demo span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg)}.rtl-progress-demo i{width:70px;height:2px;background:var(--line)}.rtl-media-demo{display:flex;justify-content:center;gap:12px;direction:ltr}.rtl-form-demo{direction:rtl}.rtl-form-demo label{display:grid;gap:7px}.rtl-form-demo input{direction:ltr;text-align:left;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:0 12px;background:var(--surface);color:var(--text)}

.responsive-ref{display:grid;grid-template-columns:1fr 120px;gap:20px;align-items:center;width:min(640px,95%)}.responsive-ref>div:first-child{min-height:110px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px}.phone-frame{height:150px;border:5px solid var(--text);border-radius:24px;display:grid;place-items:center;color:var(--muted);background:var(--surface)}.desktop-nav-demo{display:flex;justify-content:space-between;gap:15px;align-items:center}.desktop-nav-demo span{font-size:11px}.desktop-nav-demo button,.desktop-actions-demo button{border:1px solid var(--line);border-radius:8px;padding:8px 10px}.desktop-two-col{display:grid!important;grid-template-columns:1fr .7fr;gap:10px}.desktop-two-col>div{background:var(--surface-2);padding:18px;border-radius:10px}.desktop-table-demo,.desktop-filter-demo,.desktop-hero-demo{display:grid;place-items:center;color:var(--muted);font-size:12px}.desktop-cards-demo{display:grid!important;grid-template-columns:repeat(4,1fr);gap:7px}.desktop-cards-demo i{height:70px;border-radius:8px;background:var(--surface-2)}.desktop-tabs-demo{display:flex!important;gap:13px;align-items:center;white-space:nowrap;font-size:11px}.desktop-actions-demo{display:flex!important;justify-content:flex-end;gap:8px}

.skill-celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:30px}.skill-finish{position:relative;overflow:hidden}.skill-celebration i{--a:calc(var(--i)*30deg);position:absolute;left:50%;top:34%;width:8px;height:8px;border-radius:2px;background:var(--brand-violet);animation:celebrate .8s cubic-bezier(.2,.8,.2,1) both;transform:rotate(var(--a)) translateY(-20px)}.skill-celebration i:nth-child(even){background:var(--brand-pink)}@keyframes celebrate{from{opacity:1;transform:rotate(var(--a)) translateY(-20px) scale(1)}to{opacity:0;transform:rotate(var(--a)) translateY(-155px) scale(.3)}}

@media(max-width:960px){html[lang="ar"]{--sidebar-v10:300px}.build-game{grid-template-columns:1fr}.responsive-ref{grid-template-columns:1fr 100px}}
@media(max-width:680px){
 .hero-home.hero-kinetic{padding-top:42px}.hero-center,html[dir="rtl"] .hero-center{align-items:center;text-align:center}.hero-center .hero-actions{justify-content:center}.hero-center .hero-meta{justify-content:center}.hero-center .display,html[lang="ar"] .hero-center .display{text-align:center}
 .throw-zone{height:170px;margin-top:24px}.throw-chip{font-size:13px;padding:7px 15px}
 html[lang="ar"] .side-link{font-size:16px}html[lang="ar"] .side-sublink{font-size:14.5px}html[lang="ar"] .side-section{font-size:12px}
 .skill-hotspot-stage{min-height:260px;padding:14px}.spotter-scene,.anatomy-game{padding:14px;min-height:190px}.responsive-ref{grid-template-columns:1fr}.phone-frame{height:110px;width:74px;justify-self:center}.skills-head{align-items:flex-start}.skills-score{margin-top:12px}.build-canvas{min-height:180px}
}
@media(prefers-reduced-motion:reduce){.audit-motion>div,.skill-celebration i{animation:none!important}.throw-chip{transition:none!important}}


/* ===== V13 final fixes ===== */
.material-symbols-outlined.mi,.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:1.15em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-feature-settings:'liga';vertical-align:-.12em}
.side-tree-toggle{display:grid;place-items:center}.side-tree-toggle .mi{font-size:20px;transition:transform .18s ease}.side-tree.open .side-tree-toggle .mi{transform:rotate(180deg)}
.hero-home.hero-kinetic::before,.throw-zone::after{display:none!important}
.hero-home.hero-kinetic{padding-top:72px;padding-bottom:0;min-height:680px}
.hero-center,html[dir="rtl"] .hero-center{max-width:930px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-center .display,html[lang="ar"] .hero-center .display{text-align:center;margin-inline:auto}
.hero-center .lede{margin-inline:auto;text-align:center;max-width:800px}
.hero-center .hero-actions,html[dir="rtl"] .hero-center .hero-actions{justify-content:center}
.hero-center .hero-actions .primary,.hero-center .hero-actions .secondary{min-height:52px;padding:0 22px;font-size:16.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
html[lang="ar"] .hero-center .hero-actions .primary,html[lang="ar"] .hero-center .hero-actions .secondary{font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;font-size:17px;font-weight:600}
.throw-zone{height:330px;max-width:1180px;margin:28px auto 0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;position:relative;overflow:hidden;touch-action:none}
.physics-item{position:absolute;left:0;top:0;will-change:transform;cursor:grab;user-select:none;opacity:0;z-index:2}.physics-item.is-dragging{cursor:grabbing;z-index:20}.physics-item *{pointer-events:none}
.phy-ui{background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 8px 24px rgba(15,15,22,.08);color:var(--text);font-size:13px;line-height:1.2;white-space:nowrap}
.phy-button{min-height:46px;border-radius:12px;padding:0 18px;display:flex;align-items:center;gap:8px;font-weight:650;background:linear-gradient(105deg,var(--brand-violet),var(--brand-pink));color:#fff;border:0}
.phy-input{width:220px;border-radius:12px;padding:11px 14px;display:grid;gap:4px}.phy-input small{font-size:10px;color:var(--muted)}.phy-input strong{font-size:12px}
.phy-toggle{height:48px;border-radius:14px;padding:0 14px;display:flex;align-items:center;gap:16px}.phy-toggle i,.toggle-mini i{width:34px;height:20px;border-radius:99px;background:var(--brand-violet);padding:3px;display:block}.phy-toggle i b,.toggle-mini i b{display:block;width:14px;height:14px;background:#fff;border-radius:50%;margin-inline-start:auto}
.phy-tabs{height:48px;border-radius:13px;padding:0 8px;display:flex;align-items:end;gap:2px}.phy-tabs span{padding:14px 11px 12px;position:relative}.phy-tabs .active:after{content:"";position:absolute;height:2px;left:8px;right:8px;bottom:5px;background:var(--brand-violet);border-radius:2px}
.phy-check,.phy-radio{height:44px;border-radius:12px;padding:0 14px;display:flex;align-items:center;gap:8px}.phy-check .box{width:19px;height:19px;border-radius:5px;background:var(--brand-violet);color:#fff;display:grid;place-items:center;font-size:12px}.phy-radio .radio{width:18px;height:18px;border:2px solid var(--line-strong);border-radius:50%}.phy-radio .radio.on{border:5px solid var(--brand-violet)}
.phy-select{height:50px;min-width:190px;border-radius:12px;padding:0 13px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px}.phy-select>span:first-child{color:var(--muted);font-size:10px}
.phy-progress{width:205px;border-radius:13px;padding:11px 13px;display:grid;gap:8px}.phy-progress>div{display:flex;justify-content:space-between}.phy-progress i,.phy-slider i{height:6px;border-radius:99px;background:var(--surface-2);display:block;overflow:visible;position:relative}.phy-progress i b{display:block;width:72%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-violet),var(--brand-pink))}
.phy-toast{min-width:210px;border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:10px}.phy-toast .ok,.phy-badge .ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e7f7ef;color:#157347}.phy-toast div{display:grid;gap:2px}.phy-toast small{font-size:9px;color:var(--muted)}
.phy-pagination{height:44px;border-radius:12px;padding:5px 7px;display:flex;align-items:center;gap:4px}.phy-pagination span{min-width:30px;height:32px;border-radius:8px;display:grid;place-items:center}.phy-pagination .active{background:var(--text);color:var(--bg)}
.phy-segment{height:44px;border-radius:12px;padding:4px;background:var(--surface-2);display:flex;gap:3px}.phy-segment span{padding:9px 14px;border-radius:9px}.phy-segment .active{background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.phy-search{width:205px;height:46px;border-radius:23px;padding:0 15px;display:flex;align-items:center;gap:8px;color:var(--muted)}
.phy-badge{height:40px;border-radius:20px;padding:0 12px;display:flex;align-items:center;gap:7px}.phy-badge .ok{width:19px;height:19px;font-size:10px}
.phy-slider{width:190px;border-radius:13px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.phy-slider i b{position:absolute;left:52%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--brand-violet);transform:translate(-50%,-50%)}.phy-slider i:before{content:"";position:absolute;left:0;top:0;bottom:0;width:52%;background:var(--brand-violet);border-radius:99px}
.phy-avatar{height:48px;border-radius:24px;padding:0 12px;display:flex;align-items:center}.phy-avatar i,.phy-avatar b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--soft-violet);border:2px solid var(--surface);font-style:normal;font-size:9px;margin-inline-start:-6px}.phy-avatar i:first-child{margin-inline-start:0}.phy-avatar b{background:var(--text);color:var(--bg)}
.phy-tooltip{border-radius:9px;padding:9px 12px;position:relative;font-size:11px}.phy-tooltip i{position:absolute;width:9px;height:9px;background:var(--surface);border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);transform:rotate(45deg);bottom:-5px;left:24px}
.side-progress-link{margin-top:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--soft-violet) 92%,var(--surface)),color-mix(in srgb,var(--soft-pink) 55%,var(--surface)))!important;border:1px solid color-mix(in srgb,var(--brand-violet) 15%,var(--line));padding:16px!important;border-radius:18px!important}.side-progress-link strong{display:flex;align-items:center;gap:7px;font-size:13px}.side-progress-link .bar{height:7px!important;background:rgba(255,255,255,.76)!important}.side-progress-link small{font-weight:550}
html[data-theme="dark"] .side-progress-link .bar{background:rgba(255,255,255,.12)!important}
html[lang="ar"] .side-link{font-size:16px!important;font-weight:600!important;color:color-mix(in srgb,var(--text) 88%,var(--muted))!important}html[lang="ar"] .side-sublink{font-size:14.5px!important;font-weight:500!important;color:color-mix(in srgb,var(--text) 78%,var(--muted))!important}html[lang="ar"] .side-section{font-size:11.5px!important;font-weight:600!important;color:color-mix(in srgb,var(--text) 58%,var(--muted))!important}html[lang="ar"] .side-link .count,html[lang="ar"] .side-sublink .count{font-size:12px!important;font-weight:500!important;color:color-mix(in srgb,var(--text) 55%,var(--muted))!important}
.anatomy-button-wrap{display:grid;place-items:center;min-height:180px}.anatomy-button{min-height:54px;border:0;border-radius:12px;padding:0 16px;background:var(--text);color:var(--bg);display:flex;align-items:center;gap:10px;font-weight:650}.anatomy-button .leading,.anatomy-button .trailing{font-size:19px}.anatomy-tabs-demo{width:min(620px,94%)}.anatomy-tabs-list{display:flex;gap:16px;border-bottom:1px solid var(--line)}.anatomy-tab{position:relative;padding:13px 4px 14px;background:transparent;border:0;color:var(--muted)}.anatomy-tab.active{color:var(--text)}.anatomy-tab-label{display:block}.anatomy-tab-indicator{position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:transparent}.anatomy-tab.active .anatomy-tab-indicator{background:var(--brand-violet)}.anatomy-tab-panel{padding:22px 4px;color:var(--text)}
.state-input.is-readonly{background:var(--surface-2);border-style:dashed}.state-choice.indeterminate i:after{content:"−";display:grid;place-items:center;color:#fff;background:var(--brand-violet);width:100%;height:100%;border-radius:4px}.state-chat{width:220px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}.state-chat-head{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px}.state-chat-head .presence{width:8px;height:8px;border-radius:50%;background:#36a269}.state-chat-head b{margin-inline-start:auto;background:var(--brand-pink);color:#fff;border-radius:99px;padding:2px 6px;font-size:9px}.state-chat-body{padding:16px 12px;color:var(--muted);min-height:58px}.state-chat.closed .presence{background:var(--muted)}.state-chat.error .state-chat-body{color:#c64242}.state-media{width:230px}.media-screen{height:92px;border-radius:12px;background:#17171a;color:#fff;display:grid;place-items:center;font-size:22px}.media-track{height:5px;background:var(--surface-2);border-radius:99px;margin-top:8px;overflow:hidden}.media-track i{display:block;height:100%;background:var(--brand-violet)}
.build-palette{align-content:start}.build-chip{display:grid!important;gap:7px!important;justify-items:stretch;text-align:start;padding:9px!important;background:var(--surface)!important}.build-chip .mini-ui{pointer-events:none}.build-chip small.component-term{font-size:9px;color:var(--muted);text-align:center}.build-selection .build-chip{min-width:150px}.remove-mini{font-size:15px!important;position:absolute;top:4px;right:4px}.build-chip.selected{position:relative}.mini-ui{border:1px solid var(--line);background:var(--surface);border-radius:9px;color:var(--text);font-size:9px;min-height:36px;box-shadow:0 3px 8px rgba(0,0,0,.04)}.button-mini{display:flex;align-items:center;justify-content:center;background:var(--text);color:var(--bg);font-weight:650}.input-mini,.field-mini{display:grid;padding:6px 8px;gap:2px}.input-mini small,.field-mini small,.field-mini em{font-size:7px;color:var(--muted);font-style:normal}.field-mini span{height:10px;border:1px solid var(--line);border-radius:3px}.link-mini{display:grid;place-items:center;color:var(--brand-violet);text-decoration:underline}.quantity-mini{display:flex;align-items:center;justify-content:space-around}.quantity-mini b{font-size:15px}.modal-mini{padding:7px;display:grid;gap:4px}.modal-mini span{height:7px;background:var(--surface-2);border-radius:3px}.modal-mini button{border:0;background:#c94f56;color:#fff;border-radius:4px;font-size:7px;padding:4px}.alert-mini,.check-mini,.radio-mini,.search-mini,.toast-mini,.accordion-mini,.select-mini,.toggle-mini{display:flex;align-items:center;gap:6px;padding:0 8px}.alert-mini b{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:#fff0ce}.otp-mini{display:flex;align-items:center;justify-content:center;gap:4px}.otp-mini span{width:22px;height:25px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center}.tabs-mini{display:flex;align-items:end;gap:4px;padding:0 6px}.tabs-mini span{padding:10px 6px 8px}.tabs-mini .active{border-bottom:2px solid var(--brand-violet)}.slider-mini{padding:16px 8px;position:relative}.slider-mini span{height:4px;background:var(--surface-2);display:block;border-radius:99px}.slider-mini i{position:absolute;width:11px;height:11px;background:var(--brand-violet);border-radius:50%;left:55%;top:50%;transform:translate(-50%,-50%)}.progress-mini{padding:8px;display:flex;align-items:center;gap:5px}.progress-mini span{height:5px;flex:1;background:var(--surface-2);border-radius:99px;overflow:hidden}.progress-mini span i{display:block;width:72%;height:100%;background:var(--brand-violet)}.progress-mini b{font-size:8px}.drawer-mini,.filter-mini{display:grid;padding:7px;gap:4px}.drawer-mini i,.drawer-mini span,.filter-mini i{height:5px;background:var(--surface-2);border-radius:3px}.date-mini{display:grid;place-items:center}.date-mini span{font-size:14px;font-weight:700}.toggle-mini i{margin-inline-start:auto}.game-tabs{display:flex;gap:14px;border-bottom:1px solid var(--line);align-items:flex-end}.game-tabs button{background:none;border:0;padding:10px 3px;position:relative}.game-tabs .selected i{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--brand-violet);border-radius:3px}.match-answer{display:grid!important;gap:6px!important}.match-answer .mini-ui{width:100%}.match-component-name{font-size:9px;color:var(--muted)}
@media(max-width:780px){.hero-home.hero-kinetic{min-height:600px;padding-top:46px}.throw-zone{height:245px;margin-top:20px}.physics-item:nth-child(n+10){display:none}.hero-center .hero-actions .primary,.hero-center .hero-actions .secondary{min-height:50px;font-size:16px}.phy-ui{font-size:11px}.phy-input{width:175px}.phy-progress{width:165px}.phy-toast{min-width:170px}.phy-search{width:170px}.phy-slider{width:155px}}
@media(prefers-reduced-motion:reduce){.physics-item{transition:none!important}}
/* V13 Skills Lab miniature component previews */
.avatar-one-mini{display:grid;place-items:center}.avatar-one-mini i,.avatars-mini i,.avatars-mini b{font-style:normal;display:grid;place-items:center;border-radius:50%;background:var(--soft-violet);width:24px;height:24px;font-size:7px;border:1px solid var(--surface)}
.avatars-mini{display:flex;align-items:center;justify-content:center;padding:5px}.avatars-mini i,.avatars-mini b{margin-inline-start:-5px}.avatars-mini i:first-child{margin-inline-start:0}.avatars-mini b{background:var(--text);color:var(--bg)}
.badge-mini{display:flex;align-items:center;justify-content:center;padding:0 9px;color:var(--success);font-weight:700}
.bottomnav-mini{display:flex;align-items:center;justify-content:space-around;padding:5px 8px}.bottomnav-mini .mi{font-size:16px}.bottomnav-mini .mi:first-child{color:var(--brand-violet)}
.crumbs-mini{display:flex;align-items:center;gap:4px;padding:0 8px}.crumbs-mini b{color:var(--muted);font-weight:400}.crumbs-mini strong{font-weight:700}
.carousel-mini{display:flex;align-items:center;justify-content:center;gap:5px;padding:0 7px}.carousel-mini i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}.carousel-mini i.active{background:var(--brand-violet)}
.color-mini{display:flex;align-items:center;gap:8px;padding:0 8px}.color-mini i{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--brand-violet),var(--brand-pink))}
.divider-mini{display:grid;place-items:center;padding:0 8px}.divider-mini span{display:block;width:100%;height:1px;background:var(--line-strong)}
.label-mini{display:flex;align-items:center;padding:0 8px;font-weight:650}
.lightbox-mini{display:grid;place-items:center;position:relative;padding:5px}.lightbox-mini b{position:absolute;top:2px;right:5px}.lightbox-mini i{display:block;width:60%;height:20px;border-radius:4px;background:var(--surface-2)}
.map-mini{display:flex;align-items:center;justify-content:center;gap:6px}.map-mini i{font-style:normal;color:var(--brand-violet);font-size:15px}.map-mini span{width:42%;height:16px;border-radius:8px;background:linear-gradient(135deg,var(--soft-violet),var(--soft-pink))}
.marquee-mini{display:flex;gap:8px;align-items:center;overflow:hidden;padding:0 8px}.marquee-mini span{white-space:nowrap;padding:3px 6px;border-radius:99px;background:var(--surface-2)}
.media-mini{display:flex;align-items:center;gap:7px;padding:0 8px}.media-mini>b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);font-size:8px}.media-mini>span{height:4px;flex:1;background:var(--surface-2);border-radius:99px}.media-mini>span i{display:block;width:45%;height:100%;background:var(--brand-violet);border-radius:inherit}
.mega-mini{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px}.mega-mini>div{display:grid;gap:3px}.mega-mini i{height:5px;border-radius:3px;background:var(--surface-2)}
.pagination-mini{display:flex;align-items:center;justify-content:center;gap:3px;padding:4px}.pagination-mini>*{min-width:20px;height:24px;display:grid;place-items:center;border-radius:5px}.pagination-mini strong{background:var(--text);color:var(--bg)}
.sidebar-mini{display:grid;grid-template-columns:10px 1fr;grid-template-rows:repeat(3,1fr);gap:3px;padding:6px}.sidebar-mini i{grid-row:1/4;background:var(--soft-violet);border-radius:3px}.sidebar-mini span{height:5px;background:var(--surface-2);border-radius:3px}
.textarea-mini{display:grid;gap:3px;padding:6px 8px}.textarea-mini small{color:var(--muted);font-size:7px}.textarea-mini span{height:5px;background:var(--surface-2);border-radius:3px}.textarea-mini span:last-child{width:70%}
.timeline-mini{display:grid;grid-template-columns:9px 1fr;gap:3px 5px;align-items:center;padding:6px 8px}.timeline-mini i{width:7px;height:7px;border-radius:50%;background:var(--brand-violet)}.timeline-mini span{height:5px;background:var(--surface-2);border-radius:3px}
.toolbar-mini{display:flex;align-items:center;justify-content:center;gap:8px}.toolbar-mini>*{font-style:normal;font-size:10px}
.tooltip-mini{display:grid;place-items:center;position:relative;padding:0 8px;background:var(--text);color:var(--bg)}.tooltip-mini i{position:absolute;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);background:var(--text)}
.tree-mini{display:grid;align-content:center;gap:2px;padding:0 8px}.tree-mini small{padding-inline-start:10px;color:var(--muted)}
/* Arabic active navigation must preserve contrast over dark selection. */
html[lang="ar"] .side-link.active{color:#fff!important}
html[lang="ar"] .side-sublink.active{color:var(--text)!important;font-weight:600!important}
/* V13 hero physics field: the entire hero is the rigid-body stage. */
.hero-home.hero-kinetic{position:relative;overflow:hidden;min-height:720px;padding-bottom:0}
.hero-home.hero-kinetic .hero-center{position:relative;z-index:4;pointer-events:none}
.hero-home.hero-kinetic .hero-center a,.hero-home.hero-kinetic .hero-center button{pointer-events:auto}
.hero-home.hero-kinetic .throw-zone{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;z-index:1;overflow:hidden!important;border:0!important;background:transparent!important;box-shadow:none!important}
.hero-home.hero-kinetic .physics-item{z-index:2}
.hero-home.hero-kinetic .physics-item.is-dragging{z-index:3}
@media(max-width:780px){.hero-home.hero-kinetic{min-height:640px}.hero-home.hero-kinetic .throw-zone{height:100%!important;margin:0!important}}
/* No legacy decorative rule in the kinetic hero. */
.hero-home.hero-kinetic::after{display:none!important}


/* ===== V14 content + behavior quality pass ===== */
/* Pattern/Page Pattern metadata tags: stronger scan contrast */
.pattern-card .tag,.page-pattern-card .tag,.utility-card .tag{background:color-mix(in srgb,var(--brand-violet) 12%,var(--surface));color:color-mix(in srgb,var(--brand-violet) 82%,var(--text));font-weight:700;border:1px solid color-mix(in srgb,var(--brand-violet) 18%,transparent)}
html[data-theme="dark"] .pattern-card .tag,html[data-theme="dark"] .page-pattern-card .tag,html[data-theme="dark"] .utility-card .tag{background:color-mix(in srgb,var(--brand-violet) 22%,var(--surface));color:#dcd6ff}

/* Mega Menu lesson: header + open panel, no navigable demo links */
.mega-demo{width:min(920px,100%);border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 16px 40px rgba(10,10,20,.05)}
.mega-demo-header{display:flex;align-items:center;gap:18px;padding:13px 16px;border-bottom:1px solid var(--line)}.mega-demo-header>strong{margin-inline-end:auto}.mega-demo-header nav{display:flex;gap:4px}.mega-demo-header nav button,.mega-demo-item{border:0;background:transparent;color:var(--muted);padding:8px 10px;border-radius:8px;font:inherit}.mega-demo-header nav button:hover,.mega-demo-header nav button:focus-visible,.mega-demo-header nav button.active{color:var(--text);background:var(--surface-2)}.mega-demo-panel{border:0;border-radius:0;box-shadow:none}.mega-demo:not(.is-open) .mega-demo-panel{display:none}.mega-demo-item{display:block;width:100%;text-align:start;font-size:13px}.mega-demo-item:hover,.mega-demo-item:focus-visible{background:var(--surface-2);color:var(--text)}

/* Added Site Section examples */
.section-demo{width:min(900px,100%);padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.section-demo-kicker,.section-demo-heading>span{display:block;color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.section-demo-heading h3,.section-demo h3{font-size:25px;margin:0 0 18px;letter-spacing:-.03em}.section-card-grid,.team-demo,.blog-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.section-mini-card,.team-demo article,.blog-demo article{border:1px solid var(--line);border-radius:13px;padding:14px;background:var(--bg);display:grid;gap:8px}.section-mini-card .mi{font-size:22px;color:var(--brand-violet)}.section-mini-card p,.team-demo small,.blog-demo small{margin:0;color:var(--muted);font-size:12px}.logo-cloud-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.logo-cloud-row b{border:1px solid var(--line);border-radius:10px;padding:15px;text-align:center;color:var(--muted)}.service-list{display:grid;gap:0;border-top:1px solid var(--line)}.service-list article{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;border-bottom:1px solid var(--line);padding:13px 0}.service-list article>span{color:var(--muted);font-size:11px}.service-list button{border:0;background:transparent}.about-section-demo{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:center}.section-demo-media{min-height:210px;border-radius:14px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--brand-violet) 14%,var(--surface-2)))}.process-demo,.stats-section-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.process-demo>div,.stats-section-demo>div{border-top:1px solid var(--line);padding-top:12px}.process-demo>div>span{color:var(--accent);font-size:11px;font-weight:800}.process-demo p{color:var(--muted);font-size:12px}.stats-section-demo strong{display:block;font-size:32px;letter-spacing:-.04em}.stats-section-demo span{font-size:12px;color:var(--muted)}.team-demo article{text-align:center;place-items:center}.team-demo .avatar{margin-bottom:4px}.gallery-demo{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:9px}.gallery-demo figure{margin:0}.gallery-demo figure span{display:block;height:155px;border-radius:12px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--brand-pink) 11%,var(--surface-2)))}.gallery-demo figcaption{font-size:12px;margin-top:6px}.comparison-section-demo{display:grid;grid-template-columns:1fr 1fr;gap:10px}.comparison-section-demo>div{border:1px solid var(--line);border-radius:14px;padding:16px}.comparison-section-demo .featured{border-color:var(--brand-violet);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-violet) 10%,transparent)}.faq-demo{display:grid}.blog-thumb{display:block;height:100px;border-radius:9px;background:var(--surface-2)}.cta-section-demo{text-align:center;padding-block:36px}.cta-section-demo p{color:var(--muted);max-width:560px;margin:0 auto 18px}.newsletter-demo,.contact-section-demo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.newsletter-demo form{display:grid;gap:8px}.newsletter-demo label{display:grid;gap:6px;font-weight:700;font-size:12px}.newsletter-demo input{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--text)}.newsletter-demo small{color:var(--muted)}

/* Hero physics: page scroll is always available until a real object drag begins. */
.hero-home.hero-kinetic .throw-zone{touch-action:pan-y!important;pointer-events:none!important}.hero-home.hero-kinetic .physics-item{pointer-events:auto!important;touch-action:pan-y!important}.hero-home.hero-kinetic .physics-item.is-dragging{touch-action:none!important}

/* Accurate input/form state visuals */
.state-input{border-color:var(--line-strong)!important;color:var(--text)!important}.state-input .placeholder,.state-input.placeholder{color:var(--muted)!important}.state-sample.is-hover .state-input{border-color:color-mix(in srgb,var(--text) 48%,var(--line))!important}.state-sample.is-focus .state-input{border-color:var(--brand-violet)!important}.state-input.has-error{border-color:var(--danger)!important;color:var(--danger)!important}.state-input.has-success,.state-sample.is-success .state-input{border-color:var(--success)!important;color:var(--text)!important}.state-sample.is-success small.ok{color:var(--success)}.state-sample.is-error>small{color:var(--danger)}.state-input.is-readonly{background:var(--surface-2);border-style:solid}.state-sample.is-disabled .state-input{background:var(--surface-2);color:var(--muted)!important}
.state-select,.state-search,.state-date,.state-multi{width:min(100%,300px);min-height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted)}.state-options,.state-picker-pop{width:min(100%,300px);border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:6px;display:grid;gap:4px;box-shadow:var(--shadow);font-size:11px}.state-options span,.state-picker-pop{padding:6px}.state-multi>span{background:var(--soft-violet);color:var(--brand-violet);padding:4px 7px;border-radius:7px;font-style:normal}.state-multi i{font-style:normal;color:var(--muted)}.state-upload{width:min(100%,340px);border:1px dashed var(--line-strong);border-radius:12px;padding:20px;display:grid;gap:5px;justify-items:center;text-align:center}.state-upload.is-success{border-color:var(--success)}.state-upload.is-error{border-color:var(--danger)}.state-number{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}.state-number button{width:42px;height:42px;border:0;background:var(--surface-2)}.state-number span{min-width:50px;text-align:center}.state-otp{display:flex;gap:6px}.state-otp span{width:40px;height:44px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center}.state-otp span.focus{outline:3px solid var(--brand-violet);outline-offset:2px}.state-color{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:8px;border-radius:10px}.state-color>i,.state-color-pop i{width:28px;height:28px;border-radius:8px}.state-color-pop{display:flex;gap:6px;margin-top:6px}.state-inline{display:flex;align-items:center;gap:8px}.state-inline input{border:1px solid var(--line);border-radius:8px;padding:8px}

/* Accurate choice/control state visuals */
.state-check,.state-radio,.state-toggle{display:flex;align-items:center;gap:9px}.state-check .box,.state-radio .radio{width:20px;height:20px;border:1px solid var(--line-strong);display:grid;place-items:center}.state-check .box{border-radius:5px}.state-check .checked,.state-check .mixed{background:var(--brand-violet);color:#fff;border-color:var(--brand-violet)}.state-radio .radio{border-radius:50%}.state-radio .checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand-violet)}.state-toggle i{width:42px;height:24px;background:var(--line);border-radius:99px;padding:3px;display:flex}.state-toggle i b{width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}.state-toggle i.on{background:var(--brand-violet);justify-content:flex-end}.state-slider{display:flex;align-items:center;gap:10px;width:min(100%,280px)}.state-slider>span{height:6px;background:var(--surface-2);border-radius:99px;position:relative;flex:1}.state-slider>span i{display:block;height:100%;background:var(--brand-violet);border-radius:99px}.state-slider>span b{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--brand-violet);transform:translate(-50%,-50%)}.state-rating{display:flex;gap:3px;font-size:24px;color:var(--line-strong)}.state-rating .on{color:#f4b400}.state-segments{display:flex;border:1px solid var(--line);padding:4px;border-radius:11px}.state-segments button{border:0;background:transparent;padding:8px 12px;border-radius:8px}.state-segments button.selected{background:var(--text);color:var(--bg)}.state-choice-card{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px}.state-choice-card.selected{border-color:var(--brand-violet);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-violet) 10%,transparent)}.state-choice-card small{display:block;color:var(--muted)}

/* Accurate component state visuals */
.state-accordion{width:min(100%,420px);border-bottom:1px solid var(--line)}.state-accordion>button{width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-weight:700}.state-accordion>button .mi{transition:.15s}.state-accordion.open>button .mi{transform:rotate(180deg)}.state-accordion-panel{display:none;padding:0 0 13px;color:var(--muted);font-size:12px}.state-accordion.open .state-accordion-panel{display:block}.state-tabs{display:flex;border-bottom:1px solid var(--line);gap:14px}.state-tabs button{border:0;background:transparent;padding:9px 2px;color:var(--muted);border-bottom:2px solid transparent}.state-tabs .selected{color:var(--text);border-color:var(--brand-violet)}.state-pagination{display:flex;gap:5px}.state-pagination button{width:36px;height:36px;border:1px solid var(--line);background:var(--surface);border-radius:8px}.state-pagination .current{background:var(--text);color:var(--bg)}.state-crumbs{display:flex;gap:7px;align-items:center;font-size:12px}.state-crumbs a{color:var(--muted)}.state-stepper{display:flex;align-items:center}.state-stepper span{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}.state-stepper i{width:50px;height:1px;background:var(--line)}.state-stepper .done,.state-stepper .current{background:var(--brand-violet);color:#fff;border-color:var(--brand-violet)}.state-mega{width:min(100%,390px);border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}.state-mega-head{display:flex;gap:6px;align-items:center;padding:9px;border-bottom:1px solid var(--line)}.state-mega-head strong{margin-inline-end:auto}.state-mega-head button{border:0;background:transparent;padding:6px}.state-mega-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;font-size:10px;color:var(--muted)}
.state-table{width:min(100%,420px);overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.state-table table{width:100%;border-collapse:collapse}.state-table th,.state-table td{padding:8px;border-bottom:1px solid var(--line);font-size:10px;text-align:start}.state-table th{color:var(--muted);font-weight:700}.state-table .table-message{text-align:center;padding:22px;color:var(--muted)}.state-table .table-message.error{color:var(--danger)}.state-table .table-message button{margin-inline-start:6px}.state-table .sk{display:block;height:8px;border-radius:5px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite}.state-progress-real{width:min(100%,330px);height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}.state-progress-real span{display:block;height:100%;background:var(--brand-violet);border-radius:99px}.state-progress-real.indeterminate span{animation:indeterminate 1.25s ease-in-out infinite;width:34%!important}@keyframes indeterminate{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}

@media(max-width:680px){.section-card-grid,.team-demo,.blog-demo,.process-demo,.stats-section-demo{grid-template-columns:1fr}.logo-cloud-row{grid-template-columns:repeat(2,1fr)}.about-section-demo,.newsletter-demo,.contact-section-demo,.comparison-section-demo{grid-template-columns:1fr}.gallery-demo{grid-template-columns:1fr 1fr}.gallery-demo figure:first-child{grid-column:1/-1}.mega-demo-header nav button:not(.mega-trigger){display:none}}

/* V14 final behavior/content validation fixes */
.state-input.is-textarea{min-height:78px;align-items:flex-start;padding-top:12px;white-space:normal}
.hero-home.hero-kinetic .throw-zone{pointer-events:none!important;touch-action:pan-y!important;overscroll-behavior:auto!important}
.hero-home.hero-kinetic .physics-item{pointer-events:auto!important;touch-action:pan-y!important;user-select:none}
.hero-home.hero-kinetic .physics-item.is-dragging{touch-action:none!important;cursor:grabbing}

/* V14 content-validation state specimen refinements */
.state-carousel{width:min(100%,390px);display:grid;grid-template-columns:36px 1fr 36px;gap:8px;align-items:center;position:relative}.state-carousel>button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--surface)}.state-carousel-slide{min-height:84px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:5px}.state-carousel-slide span{color:var(--muted);font-size:10px}.state-carousel-dots{grid-column:1/-1;display:flex;justify-content:center;gap:5px}.state-carousel-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}.state-carousel-dots i.on{background:var(--brand-violet)}.state-carousel .sk{height:10px;border-radius:6px;background:var(--line);display:block}.state-carousel .sk.short{width:55%}
.state-command{width:min(100%,360px);border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden}.state-command-input{padding:10px 12px;display:flex;gap:8px;align-items:center;color:var(--muted)}.state-command-list{border-top:1px solid var(--line);padding:6px;display:grid;gap:3px}.state-command-list span,.state-command-empty{padding:8px;border-radius:8px;font-size:11px}.state-command-list .active{background:var(--soft-violet);color:var(--text)}.state-command-empty{color:var(--muted);text-align:center}
.state-notifications{width:min(100%,330px);border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden}.state-notifications header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.state-notifications header b{margin-inline-start:auto;border-radius:99px;background:var(--brand-pink);color:white;padding:2px 6px;font-size:9px}.state-notifications article{display:flex;gap:8px;padding:12px}.state-notifications article.unread{background:var(--soft-violet)}.state-notifications article>span{width:9px;height:9px;border-radius:50%;background:var(--brand-violet);margin-top:4px}.state-notifications article div{display:grid}.state-notifications small,.state-notifications p{color:var(--muted);font-size:10px}.state-notifications>.sk{display:block;height:9px;margin:12px;border-radius:6px;background:var(--line)}
.state-consent{width:min(100%,390px);border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:13px;display:grid;gap:9px}.state-consent p{margin:0;color:var(--muted);font-size:10px}.state-consent label{display:flex;justify-content:space-between;align-items:center}.state-consent label i{width:34px;height:20px;border-radius:99px;background:var(--line-strong);padding:2px}.state-consent label i b{display:block;width:16px;height:16px;background:white;border-radius:50%;transition:.15s}.state-consent label i.on{background:var(--brand-violet)}.state-consent label i.on b{transform:translateX(14px)}[dir=rtl] .state-consent label i.on b{transform:translateX(-14px)}.state-consent>div{display:flex;gap:6px;justify-content:flex-end}.state-consent button{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:7px 9px}
.state-fab{width:48px;height:48px;border:0;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center}.state-skeleton-real{width:min(100%,330px);display:flex;gap:12px;align-items:center}.state-skeleton-real>i{width:52px;height:52px;border-radius:11px;background:var(--line)}.state-skeleton-real>div{flex:1;display:grid;gap:7px}.state-skeleton-real span{height:9px;border-radius:6px;background:var(--line);display:block}.state-skeleton-real .short{width:55%}.state-code{width:min(100%,400px);padding:14px;border-radius:10px;background:#17171a;color:#f5f5f5;overflow:auto;font-size:10px}.state-scrolltop{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface)}.state-back{border:0;background:transparent;display:flex;align-items:center;gap:5px;font-weight:700}
.state-dropdown-menu,.state-split,.state-menubar{position:relative;display:inline-flex}.state-dropdown-menu>button,.state-split>button,.state-menubar>button{border:1px solid var(--line);background:var(--surface);padding:8px 10px}.state-dropdown-menu>div,.state-split>div,.state-menubar>div{position:absolute;top:calc(100% + 5px);inset-inline-start:0;min-width:130px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:5px;display:grid;z-index:2}.state-dropdown-menu>div span,.state-split>div span,.state-menubar>div span{padding:6px 8px;border-radius:6px;font-size:10px}.state-dropdown-menu .active,.state-menubar .focus{outline:2px solid var(--brand-violet);outline-offset:1px}.state-dropdown-menu .danger{color:var(--danger)}.state-split>button:first-child{border-radius:8px 0 0 8px}.state-split>button:nth-child(2){border-radius:0 8px 8px 0}.state-toolbar{display:flex;gap:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:4px}.state-toolbar button{width:34px;height:34px;border:0;background:transparent;border-radius:7px}.state-toolbar>span{width:1px;background:var(--line);margin:4px}.state-menubar{gap:2px}.state-menubar>button{border:0;border-radius:7px}.state-menubar>button.focus{outline:2px solid var(--brand-violet)}
.state-tree{width:230px;display:grid;gap:5px}.state-tree>div,.state-tree>span{padding:7px 9px;border-radius:7px}.state-tree>div.current{background:var(--soft-violet);font-weight:700}.state-tree>span{padding-inline-start:28px;color:var(--muted);font-size:10px}.state-toc{display:grid;gap:3px;border-inline-start:2px solid var(--line);padding-inline-start:9px}.state-toc a{padding:5px;color:var(--muted)}.state-toc a.current{color:var(--brand-violet);font-weight:700;border-inline-start:2px solid var(--brand-violet);margin-inline-start:-11px;padding-inline-start:9px}.state-reorder-row{width:min(100%,330px);display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:7px}.state-reorder-row button{border:0;background:transparent}.state-reorder-row span{flex:1}.state-resizable{width:min(100%,380px);height:96px;display:grid;grid-template-columns:1fr 8px 1.4fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}.state-resizable section{background:var(--surface)}.state-resizable section+button{border:0;border-inline:1px solid var(--line);background:var(--surface-2);cursor:col-resize}.state-shortcut{display:flex;align-items:center;gap:7px}.state-shortcut span{margin-inline-end:8px}.state-shortcut kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;background:var(--surface);padding:6px 9px}.state-filter{width:min(100%,280px);border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px;display:grid;gap:8px}.state-filter label{display:flex;gap:7px;align-items:center}.state-filter label i{width:14px;height:14px;border:1px solid var(--line-strong);border-radius:4px}.state-filter button{justify-self:end;border:0;border-radius:8px;background:var(--text);color:var(--bg);padding:7px 12px}.state-list-row{width:min(100%,340px);display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding:10px}.state-list-row>div{display:grid;flex:1}.state-list-row small{color:var(--muted)}.state-bottomnav{display:flex;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:5px}.state-bottomnav a{min-width:70px;display:grid;justify-items:center;gap:2px;padding:7px;border-radius:9px;color:var(--muted);font-size:9px}.state-bottomnav a.current{background:var(--soft-violet);color:var(--text)}.state-rail{display:grid;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:5px;gap:4px}.state-rail a{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;color:var(--muted)}.state-rail a.current{background:var(--soft-violet);color:var(--brand-violet)}
/* V14 content-valid state specimens */
.state-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-weight:600}.state-chip.selected{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-deep)}.state-chip.disabled{opacity:.42}.state-chip b{font-size:12px}
.state-map{position:relative;width:min(360px,90%);height:150px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(90deg,transparent 24px,rgba(124,104,238,.05) 25px),linear-gradient(transparent 24px,rgba(124,104,238,.05) 25px),var(--surface);background-size:25px 25px;overflow:hidden;display:grid;place-items:center}.state-map-road{position:absolute;background:#fff;border:1px solid var(--border);height:16px;width:130%;border-radius:99px;transform:rotate(-12deg)}.state-map-road.two{transform:rotate(48deg);width:100%}.state-map-pin{position:relative;z-index:2;width:38px;height:38px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,var(--brand),var(--pink));display:grid;place-items:center;color:white}.state-map-pin .material-symbols-rounded{transform:rotate(45deg);font-size:20px}.state-map-message{position:relative;z-index:3;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px}.state-map-message button{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:7px 10px}
.state-skip-page{position:relative;width:min(370px,94%);height:150px;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}.state-skip{position:absolute;inset-inline-start:12px;top:-48px;background:#111;color:#fff;padding:10px 12px;border-radius:8px;font-weight:700;z-index:3;transition:top .15s}.state-skip.visible{top:10px;outline:3px solid var(--brand);outline-offset:3px}.state-skip-header{height:34px;border-bottom:1px solid var(--border)}.state-skip-main{width:68%;height:68px;margin:24px auto;border-radius:10px;background:var(--soft)}
.state-overlay-stage,.state-phone-stage,.state-popover-stage,.state-context-stage,.state-lightbox-stage,.state-hovercard-stage,.state-tooltip-stage{position:relative;width:min(390px,94%);min-height:150px;border:1px solid var(--border);border-radius:16px;background:var(--surface);display:grid;place-items:center;overflow:hidden}.state-trigger{border:0;border-radius:10px;background:#111;color:#fff;padding:10px 14px;font-weight:700}.state-modal-backdrop{position:absolute;inset:0;background:rgba(15,15,18,.35);display:grid;place-items:center}.state-modal-card{width:72%;background:var(--surface);border-radius:14px;padding:18px;display:grid;gap:9px;box-shadow:0 18px 50px rgba(0,0,0,.18)}.state-modal-card span{font-size:12px;color:var(--muted)}.state-modal-card button{justify-self:start;border:0;border-radius:8px;background:#111;color:white;padding:8px 11px}.state-tooltip-stage{overflow:visible}.state-tooltip-bubble{position:absolute;top:23px;inset-inline-start:50%;transform:translateX(-50%);background:#111;color:#fff;padding:7px 9px;border-radius:7px;font-size:12px;white-space:nowrap}.state-drawer{position:absolute;top:0;bottom:0;inset-inline-end:0;width:54%;background:var(--surface);border-inline-start:1px solid var(--border);padding:18px;display:grid;align-content:start;gap:12px;box-shadow:-12px 0 34px rgba(0,0,0,.1)}.state-drawer span,.state-popover-card span,.state-sheet span{height:12px;border-radius:6px;background:var(--soft)}.state-phone-stage{align-items:end}.state-sheet{position:absolute;inset-inline:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);border-radius:18px 18px 0 0;padding:13px 18px 18px;display:grid;gap:10px}.state-sheet i{width:40px;height:4px;border-radius:99px;background:var(--border);justify-self:center}.state-popover-card{position:absolute;top:24px;inset-inline-start:52%;width:180px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px;display:grid;gap:8px;box-shadow:0 12px 34px rgba(0,0,0,.12)}.state-context-stage{place-items:center start;padding-inline:28px}.state-context-menu{position:absolute;top:34px;inset-inline-end:25px;width:150px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px;display:grid;box-shadow:0 12px 32px rgba(0,0,0,.12)}.state-context-menu button{border:0;background:transparent;text-align:start;padding:8px;border-radius:7px}.state-context-menu button.focus{outline:2px solid var(--brand);background:var(--brand-soft)}.state-context-menu button:disabled{opacity:.35}.state-thumb{width:100px;height:70px;border:1px solid var(--border);border-radius:10px;background:var(--soft);font-size:30px}.state-lightbox-overlay{position:absolute;inset:0;background:rgba(10,10,12,.82);display:grid;place-items:center}.state-lightbox-image{width:65%;height:65%;border-radius:10px;background:linear-gradient(135deg,#ded9ff,#f3c9e9)}.state-lightbox-overlay>button{position:absolute;top:10px;inset-inline-end:10px;border:0;border-radius:50%;width:30px;height:30px}.state-hovercard-stage>a{color:var(--brand);font-weight:700}.state-hovercard-card{position:absolute;top:28px;inset-inline-start:55%;width:205px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;display:grid;gap:5px;box-shadow:0 12px 32px rgba(0,0,0,.12)}.state-hovercard-card span,.state-hovercard-card small{font-size:12px;color:var(--muted)}


/* ===== V15 final locked-design behavior refinements ===== */
/* Descriptive/component metadata tags use one consistent violet treatment across learning cards. */
.tag-row .tag{background:color-mix(in srgb,var(--brand-violet) 12%,var(--surface))!important;color:color-mix(in srgb,var(--brand-violet) 82%,var(--text))!important;font-weight:700!important;border:1px solid color-mix(in srgb,var(--brand-violet) 18%,transparent)!important}
html[data-theme="dark"] .tag-row .tag{background:color-mix(in srgb,var(--brand-violet) 22%,var(--surface))!important;color:#dcd6ff!important}
/* The hero field never owns page scrolling; only actual rigid bodies accept pointer input. */
.hero-home.hero-kinetic .throw-zone{pointer-events:none!important;touch-action:pan-y!important;overscroll-behavior:auto!important}
.hero-home.hero-kinetic .physics-item{pointer-events:auto!important;touch-action:pan-y!important;user-select:none;-webkit-user-select:none}
.hero-home.hero-kinetic .physics-item.is-dragging{cursor:grabbing!important}

/* V15.1 — targeted carousel RTL + slide-motion patch */
.carousel-control{min-width:48px;display:inline-grid;place-items:center}
.carousel-arrow{display:inline-block;line-height:1;transform-origin:center;transition:transform .18s ease}
.demo-canvas[dir="rtl"] .carousel-control .carousel-arrow,
.anatomy-specimen[dir="rtl"] .carousel-control .carousel-arrow,
html[dir="rtl"] .state-carousel .carousel-arrow{transform:scaleX(-1)}
.carousel-viewport{position:relative}
.carousel-slide-panel{will-change:transform,opacity;transition:transform .15s ease,opacity .15s ease}
.carousel-slide-panel.carousel-exit{transform:translateX(var(--carousel-out));opacity:0}
.carousel-slide-panel.carousel-enter{transition:none;transform:translateX(var(--carousel-in));opacity:0}
.carousel-slide-panel.carousel-enter.carousel-enter-active{transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .22s ease;transform:translateX(0);opacity:1}
@media (prefers-reduced-motion: reduce){
  .carousel-slide-panel,.carousel-arrow{transition:none!important}
}

/* V16 — audit remediation without redesign */
.indeterminate-demo input:indeterminate{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--accent);border-radius:4px;background:var(--accent);display:inline-grid;place-items:center;vertical-align:middle}
.indeterminate-demo input:indeterminate::after{content:'−';color:white;font-weight:800;line-height:1}
.skill-check.answer-correct{border-color:color-mix(in srgb,var(--success) 55%,var(--line));background:color-mix(in srgb,var(--success) 10%,var(--surface))}
.skill-check.answer-wrong{border-color:color-mix(in srgb,var(--danger) 60%,var(--line));background:color-mix(in srgb,var(--danger) 9%,var(--surface))}
.skill-check.answer-missed{outline:2px dashed color-mix(in srgb,var(--success) 65%,transparent);outline-offset:2px}
.revealed-order{margin:12px 0 0;padding-inline-start:22px;display:grid;gap:6px}.order-list.revealed .correct-order{grid-template-columns:auto 1fr;background:color-mix(in srgb,var(--success) 8%,var(--surface))}
.missed-review{margin-top:28px}.missed-review-list{display:grid;gap:10px}.missed-review-list a{display:grid;grid-template-columns:minmax(150px,.35fr) 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none}.missed-review-list a:hover{border-color:var(--accent)}
.command-input-row{display:flex;align-items:center;gap:8px}.command-input-row input{flex:1}.command-hint{font:inherit;font-size:12px;padding:4px 7px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}.command-results{display:grid}
.anatomy-link-demo{display:grid;gap:10px;justify-items:start}.anatomy-link-destination{font-size:12px;padding:5px 8px;border-radius:7px;background:var(--soft);direction:ltr}.anatomy-chip-icon,.anatomy-chip-remove{display:inline-grid;place-items:center;min-width:16px}
@media(max-width:720px){.missed-review-list a{grid-template-columns:1fr auto}.missed-review-list a span{grid-column:1/-1}}

/* =========================================================
   V16.1 — Purposeful scroll reveal layer
   Progressive enhancement only: classes are added by JS,
   so content remains fully visible if scripting is unavailable.
   ========================================================= */
.reveal-item{
  --reveal-delay:0ms;
  opacity:0;
  translate:0 18px;
  transition:
    opacity .52s cubic-bezier(.22,1,.36,1) var(--reveal-delay),
    translate .66s cubic-bezier(.22,1,.36,1) var(--reveal-delay);
}
.reveal-item.reveal-soft{translate:0 10px}
.reveal-item.reveal-stagger{translate:0 14px}
.reveal-item.is-visible{opacity:1;translate:0 0}

/* Give teaching specimens a tiny sense of depth without animating controls. */
.doc-section.reveal-item .demo-shell,
.doc-section.reveal-item .anatomy-specimen,
.doc-section.reveal-item .page-preview-stage{
  scale:.992;
  transition:scale .72s cubic-bezier(.22,1,.36,1) calc(var(--reveal-delay) + 60ms);
}
.doc-section.reveal-item.is-visible .demo-shell,
.doc-section.reveal-item.is-visible .anatomy-specimen,
.doc-section.reveal-item.is-visible .page-preview-stage{scale:1}

/* Data visualization: bars/charts grow from the logical reading start. */
.reveal-data .bar>span,
.reveal-data .mini-chart span{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .82s cubic-bezier(.22,1,.36,1) .16s;
}
html[dir="rtl"] .reveal-data .bar>span,
html[dir="rtl"] .reveal-data .mini-chart span{transform-origin:right center}
.reveal-data.is-visible .bar>span,
.reveal-data.is-visible .mini-chart span{transform:scaleX(1)}
.reveal-data .mini-kpis>div,
.reveal-data .mini-table>div{
  opacity:0;
  translate:0 8px;
  transition:opacity .42s ease,translate .56s cubic-bezier(.22,1,.36,1);
}
.reveal-data.is-visible .mini-kpis>div,
.reveal-data.is-visible .mini-table>div{opacity:1;translate:0 0}
.reveal-data.is-visible .mini-kpis>div:nth-child(2),
.reveal-data.is-visible .mini-table>div:nth-child(2){transition-delay:70ms}
.reveal-data.is-visible .mini-kpis>div:nth-child(3),
.reveal-data.is-visible .mini-table>div:nth-child(3){transition-delay:140ms}
.reveal-data.is-visible .mini-table>div:nth-child(4){transition-delay:210ms}

@media(prefers-reduced-motion:reduce){
  .reveal-item{opacity:1!important;translate:none!important;transition:none!important}
  .doc-section.reveal-item .demo-shell,
  .doc-section.reveal-item .anatomy-specimen,
  .doc-section.reveal-item .page-preview-stage{scale:1!important;transition:none!important}
  .reveal-data .bar>span,.reveal-data .mini-chart span{transform:none!important;transition:none!important}
  .reveal-data .mini-kpis>div,.reveal-data .mini-table>div{opacity:1!important;translate:none!important;transition:none!important}
}

/* ===== V16.2 targeted mobile hero + Anatomy stability fixes ===== */
@media(max-width:780px){
  /* Keep the kinetic playground physically below the measured hero copy/actions.
     JS sets --throw-mobile-top from the real rendered content height, so EN/AR
     and narrow phones get the space they actually need. */
  .hero-home.hero-kinetic{
    min-height:max(720px,calc(var(--throw-mobile-top,400px) + 280px));
  }
  .hero-home.hero-kinetic .throw-zone{
    top:var(--throw-mobile-top,400px)!important;
    bottom:0!important;
    height:auto!important;
    min-height:260px;
  }
}
@media(max-width:420px){
  .hero-home.hero-kinetic{
    min-height:max(740px,calc(var(--throw-mobile-top,420px) + 280px));
  }
}

/* ===== V17 curriculum IA ===== */
.curriculum-stats{grid-template-columns:repeat(5,1fr)}
.curriculum-path{grid-template-columns:repeat(5,1fr)}
.curriculum-count{min-width:92px;min-height:92px;border:1px solid var(--line);border-radius:22px;background:var(--surface);display:grid;place-items:center;align-content:center;font-size:30px;font-weight:850;line-height:1}
.curriculum-count small{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-top:8px}
.family-section{scroll-margin-top:112px}
.family-variant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.family-variant{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:.18s ease}
.family-variant:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--text) 28%,var(--line));box-shadow:0 10px 26px rgba(0,0,0,.035)}
.family-variant.active{border-color:color-mix(in srgb,var(--accent) 62%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}
.family-variant>span{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--muted)}
.family-variant strong{display:block;font-size:14px;line-height:1.35}.family-variant small{display:block;margin-top:3px;color:var(--muted);font-size:11px;direction:rtl;text-align:start}.family-variant p{margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.family-variant em{font-style:normal;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);padding-top:3px}
.variant-context{display:flex;align-items:center;gap:7px;margin-top:14px;color:var(--muted);font-size:12px}.variant-context a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.site-section-tree .site-section-subnav{max-height:330px;overflow:auto;padding-inline-end:4px;scrollbar-width:thin}
.site-section-tree .side-sublink .component-term{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1200px){.curriculum-stats,.curriculum-path{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.curriculum-stats,.curriculum-path{grid-template-columns:1fr}.family-variant-grid{grid-template-columns:1fr}.family-variant{grid-template-columns:30px minmax(0,1fr)}.family-variant em{grid-column:2}.curriculum-count{min-width:76px;min-height:76px;font-size:25px}}
@media(prefers-reduced-motion:reduce){.family-variant{transition:none}.family-variant:hover{transform:none}}

/* ===== V17.2A — Drag / Reorder / Resize interactive examples ===== */
.demo-note{font-size:12px;color:var(--muted);margin:0 0 10px}.demo-status{font-size:12px;color:var(--muted);margin:10px 0 0}
.reorder-list{display:grid;gap:6px}.reorder-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);transition:border-color .16s,box-shadow .16s,opacity .16s}.reorder-row.dragging{opacity:.65;border-color:var(--accent);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 15%,transparent);z-index:2}.drag-handle{touch-action:none;cursor:grab}.drag-handle.active{cursor:grabbing;color:var(--accent)}.reorder-label{flex:1;min-width:0}.reorder-actions{display:flex;gap:4px}.reorder-actions button{width:34px;height:34px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text)}.reorder-actions button:disabled{opacity:.3}
.resize-demo.interactive-resize{grid-template-columns:minmax(90px,var(--split,40%)) 22px minmax(120px,1fr)}.interactive-resize .resize-panel{gap:6px}.interactive-resize .resize-panel small{color:var(--muted)}.interactive-resize .resize-handle{touch-action:none;cursor:col-resize}.interactive-resize .resize-handle.active,.interactive-resize .resize-handle:focus-visible{background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:620px){.reorder-actions button{width:38px;height:38px}.resize-demo.interactive-resize{min-height:150px}}
@media(prefers-reduced-motion:reduce){.reorder-row{transition:none}}

/* ===== V17.2B — Selection / Toggle / Disclosure ===== */
.demo-interaction-status{margin:10px 0 0!important;font-size:12px!important;color:var(--muted)!important}
.toggle-demo{width:min(460px,100%);display:grid;gap:4px}.toggle-demo-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:14px}.toggle-demo-row>div{display:grid;gap:3px}.toggle-demo-row small{color:var(--muted);font-size:11px}
.selection-demo{display:grid;gap:8px;justify-items:start}.alignment-preview{width:min(420px,100%);margin:4px 0!important;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px!important;color:var(--text)!important}
.selection-fieldset{border:0;padding:0;margin:0}.selection-fieldset legend{font-size:12px;font-weight:750;margin-bottom:9px}.choice-cards.selection-fieldset{border:0;padding:0}.choice-card-check{min-width:18px;color:var(--accent)}
.multi-list button{border:0;background:transparent;border-radius:7px;text-align:start;padding:9px;color:var(--text)}.multi-list button:hover,.multi-list button[aria-pressed="true"]{background:var(--surface-2)}.multi-list button[aria-pressed="true"]::after{content:"✓";float:inline-end;color:var(--accent);font-weight:800}
.chip-demo{display:grid;gap:5px;justify-items:start}.chip-demo .token{font-size:12px}.chip-demo .demo-stack{justify-content:flex-start}
.color-picker-demo .demo-interaction-status{grid-column:2;margin-top:0!important}
@media(max-width:520px){.toggle-demo-row{align-items:flex-start}.color-picker-demo{grid-template-columns:58px 1fr}.selection-demo .button-group,.selection-demo .segmented{max-width:100%;overflow:auto}}

/* ===== V17.2C — Forms / Input / Submission ===== */
.phase3-field.invalid input,
.phase3-form-field.invalid input,
[data-newsletter-email][aria-invalid="true"],
[data-contact-name][aria-invalid="true"],
[data-contact-message][aria-invalid="true"]{border-color:var(--danger,#b42318);box-shadow:0 0 0 1px color-mix(in srgb,var(--danger,#b42318) 28%,transparent)}
.phase3-field.valid input,.phase3-form-field.valid input{border-color:var(--success,#2f7d32)}
.phase3-error{display:block;color:var(--danger,#b42318);margin-top:6px}
.phase3-error[hidden]{display:none}
.phase3-success{color:var(--success,#2f7d32)!important}
.password-control{display:flex;gap:8px;align-items:stretch}
.password-control input{min-width:0;flex:1}
.password-toggle{white-space:nowrap;min-width:84px}
.otp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.otp-cell.filled{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.search-input-row{display:flex;gap:8px;align-items:stretch}
.search-input-row input{min-width:0;flex:1}
.search-results-demo{display:grid;gap:6px;margin-top:10px}
.search-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:start;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:10px 12px;cursor:pointer}
.search-result-row:hover,.search-result-row:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.search-result-row small{color:var(--muted)}
.phase3-combo{position:relative}
.phase3-combo .combo-list{max-height:210px;overflow:auto}
.phase3-combo .combo-list[hidden]{display:none}
.phase3-combo .combo-option{cursor:pointer}
.phase3-combo .combo-option.active{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--text)}
.combo-empty{padding:10px 12px;color:var(--muted)}
.date-demo-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.date-demo-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.date-demo-grid button,.date-demo-grid .date-empty{aspect-ratio:1;min-width:0;border-radius:9px}
.date-demo-grid button{border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer}
.date-demo-grid button:hover,.date-demo-grid button:focus-visible{border-color:var(--line);background:var(--surface)}
.date-demo-grid button.active{background:var(--accent);color:var(--accent-contrast,#fff);border-color:var(--accent)}
.phase3-time .time-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.phase3-time .time-controls button{min-width:52px;min-height:44px}
.file-demo .dropzone{transition:border-color .18s ease,background .18s ease}
.file-demo .dropzone.drop-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
[data-newsletter-form] .demo-interaction-status,[data-contact-form] .demo-interaction-status{margin-top:10px}
@media (max-width:520px){
 .password-control,.search-input-row{align-items:stretch}
 .password-toggle,.search-input-row .demo-btn{min-width:auto}
 .search-result-row{align-items:flex-start;flex-direction:column;gap:3px}
 .date-demo-grid{gap:3px}
 .date-demo-grid button{font-size:13px}
}

/* V17.2D — Menus / Navigation / Overlays */
.phase4-nav-item,.phase4-sidebar .side-link,.bottom-nav button,.nav-rail button,.phase4-toc button,.breadcrumb-demo button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}
.phase4-nav-item.active,.phase4-sidebar .side-link.active,.bottom-nav button.active,.nav-rail button.active,.phase4-toc button.active{color:var(--primary);font-weight:700}
.sidebar-demo-layout{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:260px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.sidebar-demo-layout nav{padding:12px;border-inline-end:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:6px}.sidebar-demo-content{padding:22px;min-width:0}
.phase4-toc{display:grid;gap:6px}.phase4-toc button{text-align:start;padding:8px 10px;border-radius:9px}.toc-preview{margin-top:8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.phase4-stepper .step{border:0;background:transparent;cursor:pointer;color:inherit}.stepper-preview{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.phase4-menu-demo{position:relative}.phase4-menu-demo [data-menu-panel][hidden],.phase4-context [data-context-menu][hidden],.phase4-popover [data-popover-panel][hidden],.phase4-tooltip[hidden]{display:none!important}
.phase4-menubar .menubar-panel{display:flex;flex-direction:column}.phase4-context{position:relative;display:grid;gap:12px}.context-target{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:grid;gap:4px}.phase4-context .context-menu{position:static;max-width:260px}
.phase4-command [data-command-list]{display:grid}.phase4-command .command-result[hidden]{display:none}.phase4-tooltip-demo{position:relative;text-align:center}.phase4-tooltip{display:inline-block;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:13px;max-width:260px}.phase4-popover{position:relative;text-align:center}.phase4-popover .popover-panel{display:block;margin:10px auto 0;position:static;max-width:300px;text-align:start}
.phase4-toast-stack{display:grid;gap:8px;margin-top:12px}.phase4-inline-toast{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.phase4-inline-toast strong{flex:1}.phase4-inline-toast button{border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer}
.phase4-lightbox{max-width:700px}.demo-interaction-status{margin-top:10px;color:var(--muted);font-size:13px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:640px){.sidebar-demo-layout{grid-template-columns:1fr}.sidebar-demo-layout nav{border-inline-end:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}.sidebar-demo-layout nav strong{grid-column:1/-1}.bottom-nav{overflow-x:auto}.phase4-context .context-menu{max-width:none}.phase4-stepper .steps{gap:4px}}
/* V17.2D visual corrections */
.phase4-nav-item.active,.phase4-sidebar .side-link.active,.bottom-nav button.active,.nav-rail button.active,.phase4-toc button.active{background:var(--text);color:var(--bg);font-weight:700}
.bottom-nav button{display:grid;justify-items:center;gap:3px;padding:7px;border-radius:10px;color:var(--muted);font-size:10px}.bottom-nav button b{font-size:17px}.nav-rail button span{font-size:9px}.nav-rail button.active{background:var(--text);color:var(--bg)}
.phase4-nav-item{padding:8px 10px;border-radius:9px}.breadcrumb-demo button{padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px}.phase4-sidebar .side-link{width:100%;text-align:start}

/* V17.2E — final interaction cleanup */
.price-card.selected{outline:3px solid var(--accent);outline-offset:2px}.phase5-chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border-top:1px solid var(--line)}.phase5-chat-form input{min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:var(--surface);color:var(--text)}.phase5-user-bubble{margin-inline-start:auto;background:var(--accent);color:#fff;margin-top:8px}.phase5-format-preview{border:1px solid var(--line);border-radius:9px;padding:12px;background:var(--surface);margin:10px 0}.tree-item.active{background:var(--surface-2);font-weight:750}.phase5-list-menu{position:absolute;z-index:3;inset-inline-end:8px;top:42px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:5px;box-shadow:var(--shadow)}.phase5-list-menu button{display:block;width:100%;border:0;background:transparent;color:var(--text);text-align:start;padding:8px 10px;border-radius:6px}.phase5-list-menu button:hover,.phase5-list-menu button:focus-visible{background:var(--surface-2)}.list-row{position:relative}.hover-card-trigger{border:0;background:transparent;padding:0;cursor:pointer}.phase5-shortcut{outline:none}.phase5-shortcut:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);border-radius:10px}.phase5-media .media-controls button{border:0;background:transparent;color:white;font-size:22px;min-width:34px}.phase5-media .media-track span{transition:width .2s linear}@media(max-width:520px){.phase5-chat-form{grid-template-columns:1fr}.phase5-list-menu{position:static;margin-top:6px}.pricing{grid-template-columns:1fr}}

/* ===== V17.4 — Mobile lesson responsiveness QA ===== */
@media(max-width:640px){
  .state-gallery{grid-template-columns:1fr}
  .state-card{min-height:0}
  .state-card-head{flex-wrap:wrap}
  .state-card-head span{max-width:100%;text-align:start}
  .state-sample{min-width:0}
}

/* ===== V17.5 — in-place preview controls + small-screen toolbar simplification ===== */
.demo-toolbar{justify-content:space-between}
.demo-toolbar-group{display:flex;align-items:center;gap:8px;min-width:0}
.demo-direction-controls{margin-inline-start:auto}

/* The viewport simulator is useful on a desktop canvas where all three target
   widths can actually be represented. On the guide's tablet/mobile layout the
   example should instead use the real available width. */
@media(max-width:1024px){
  .demo-viewport-controls{display:none}
  .demo-direction-controls{margin-inline-start:auto}
  .demo-stage,
  .demo-stage.tablet,
  .demo-stage.mobile{width:100%}
}

/* V17.6 — Figma practice companion card */
.figma-practice-card{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr);gap:28px;align-items:stretch;margin:0 0 76px;border:1px solid var(--line);border-radius:24px;padding:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand-violet) 9%,var(--surface)) 0%,var(--surface) 54%,color-mix(in srgb,var(--brand-pink) 8%,var(--surface)) 100%);overflow:hidden;position:relative;transition:.22s ease}.figma-practice-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--text) 30%,var(--line));box-shadow:0 22px 54px rgba(12,10,18,.08)}.figma-practice-copy{padding:8px 4px;align-self:center}.figma-practice-copy h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.045em;margin:0 0 12px;max-width:620px}.figma-practice-copy p{font-size:15px;line-height:1.65;color:var(--muted);max-width:620px;margin:0}.figma-practice-cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:11px 14px;border-radius:11px;background:var(--text);color:var(--bg);font-size:13px;font-weight:800}.figma-practice-cta .material-symbols-rounded{font-size:18px}.figma-practice-visual{min-width:0;border:1px solid color-mix(in srgb,var(--line) 84%,transparent);border-radius:18px;background:color-mix(in srgb,var(--surface) 92%,var(--surface-2));padding:12px;display:grid;grid-template-rows:auto 1fr;box-shadow:0 18px 44px rgba(12,10,18,.06)}.figma-canvas-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 10px;font-size:10px;color:var(--muted);font-weight:750}.figma-canvas-top span:first-child{color:var(--text)}.figma-canvas-body{border:1px solid var(--line);border-radius:13px;background:var(--bg);padding:22px;display:grid;align-content:center;gap:14px;min-height:210px}.figma-mini-tabs{display:flex;gap:7px}.figma-mini-tabs i{display:block;width:34px;height:7px;border-radius:99px;background:var(--surface-2)}.figma-mini-tabs i.active{width:52px;background:linear-gradient(90deg,var(--brand-violet),var(--brand-pink))}.figma-mini-field{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 13px}.figma-mini-field small{display:block;color:var(--muted);font-size:9px;margin-bottom:4px}.figma-mini-field strong{font-size:14px}.figma-mini-actions{display:flex;gap:8px;flex-wrap:wrap}.figma-mini-actions b,.figma-mini-actions span{padding:9px 12px;border-radius:9px;font-size:11px}.figma-mini-actions b{background:var(--text);color:var(--bg)}.figma-mini-actions span{border:1px solid var(--line);background:var(--surface)}
@media(max-width:900px){.figma-practice-card{grid-template-columns:1fr;gap:20px}.figma-practice-visual{min-height:230px}}
@media(max-width:600px){.figma-practice-card{padding:18px;border-radius:20px;margin-bottom:58px}.figma-practice-copy{padding:2px}.figma-practice-copy h2{font-size:30px}.figma-practice-copy p{font-size:14px}.figma-practice-cta{width:100%;justify-content:space-between;min-height:48px}.figma-canvas-body{padding:16px;min-height:190px}}

/* V17.7 — sidebar resource visibility + Split Button layout correction */
.side-link-external .side-external-mark{margin-inline-start:auto;font-size:12px;line-height:1;color:color-mix(in srgb,var(--text) 52%,var(--muted));font-weight:700}
.side-link-external:hover .side-external-mark{color:var(--text)}
.split-demo.phase4-menu-demo{display:inline-flex;flex-direction:column;align-items:flex-start;position:relative}
.split-demo.phase4-menu-demo .split-control{display:inline-flex;align-items:stretch;position:relative}
.split-demo.phase4-menu-demo .demo-interaction-status{display:block;margin-top:10px!important;max-width:260px;line-height:1.45}