/* UltimatePro Hero Lab — hand-built, framework-free.
   Arabic font is optional/remote; no font binaries are distributed. */
:root{color-scheme:dark;--lab-bg:#0b1019;--lab-panel:#131b27;--lab-line:#26313e;--lab-text:#e5ecf4;--lab-muted:#9aa9ba;--blue:#54daf0;--font:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--lab-bg);color:var(--lab-text);font-family:var(--font);font-size:14px;line-height:1.7;min-width:320px}button,input{font:inherit}button{cursor:pointer;color:inherit}button,a,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{border:0;background:none}button:disabled{cursor:default;opacity:.4}a{color:inherit}img{max-width:100%;display:block}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin:0}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #24bfd3;outline-offset:5px}button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}.sr-only{position:absolute;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;top:-80px;right:24px;background:#fff;color:#112;z-index:300;padding:12px}.skip-link:focus{top:12px}
.lab-shell{width:min(1480px,calc(100% - 64px));margin-inline:auto}.lab-header{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--lab-line);gap:20px}.lab-signature{display:flex;align-items:center;gap:14px}.lab-signature b{font-family:Arial,sans-serif;font-size:18px;display:block;letter-spacing:-.4px}.lab-signature small{display:block;color:var(--lab-muted);font-size:11px;margin-top:3px}.slash{color:#435569;margin-inline:7px}.lab-monogram{font:bold 25px Arial;letter-spacing:-5px;color:#5fd9f5;width:36px;transform:skewY(-9deg);direction:ltr}.lab-monogram span{color:#fff}.lab-tools{display:flex;align-items:center;gap:9px}.tool-button,.view-switch button,.overview-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:39px;border-radius:9px;color:#b9c8d8;padding:7px 12px;font-size:11px;transition:background .2s,color .2s}.tool-button:hover,.overview-button:hover{background:#1e2a3b;color:#fff}.tool-button[aria-pressed=true]{background:#2b273e;color:#e1d4ff}.view-switch{display:flex;background:#151e2b;border:1px solid #283345;border-radius:11px;padding:3px}.view-switch button{min-height:31px;border-radius:7px}.view-switch .selected{background:#e8edf4;color:#152c40;box-shadow:0 3px 10px #0002}.lab-tools svg{width:17px;height:17px}.lab-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0 18px}.overline{display:block;font:10px/1.6 Arial,sans-serif;letter-spacing:2.2px;color:var(--lab-muted);direction:ltr;text-align:inherit}.lab-intro h1{font-size:25px;margin-top:5px;line-height:1.5;letter-spacing:-.5px;font-weight:600}.lab-intro h1 span{color:#8191a5}.overview-button{border:1px solid #344154;min-height:42px}.concept-nav{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;padding:0 0 16px}.concept-tab{text-align:start;min-height:55px;padding:7px 11px;border:1px solid transparent;border-radius:10px;color:#99a9bc;position:relative;transition:.2s}.concept-tab:hover{background:#192536;color:#fff}.concept-tab[aria-current=true]{background:#182736;border-color:#2c5368;color:white;box-shadow:inset 0 1px 0 #ffffff0a}.concept-tab b{font:11px Arial,sans-serif;display:flex;align-items:center;gap:9px;color:#697e96;margin-bottom:4px}.concept-tab[aria-current=true] b{color:#6bd5e7}.concept-tab span{display:block;white-space:nowrap;font-size:11px;font-weight:500}.concept-tab i{width:4px;height:4px;border-radius:50%;background:currentColor;display:block;opacity:0}.concept-tab[aria-current=true] i{opacity:1}.preview-surround{width:min(1480px,calc(100% - 64px));margin:0 auto;display:flex;justify-content:center;align-items:start;border-radius:22px}.viewport{width:100%;container-type:inline-size;container-name:hero-preview;overflow:hidden;border-radius:22px;border:1px solid #354253;box-shadow:0 28px 90px #0003;isolation:isolate;transition:max-width .4s}.viewport.mobile{max-width:420px;border-radius:30px;border:7px solid #364150;box-shadow:0 30px 100px #0008}.concept-caption{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:19px 3px 13px}.caption-main{display:flex;gap:13px;align-items:center}.caption-number{font:22px Arial,sans-serif;color:#466075}.caption-main strong{font-size:13px;display:block;color:#e3eaf3}.caption-main p{font-size:11px;color:#90a2b6;margin-top:2px}.caption-nav{display:flex;align-items:center;gap:14px}.caption-nav span{font:11px monospace;color:#97a8bc;direction:ltr}.caption-nav button{width:35px;height:35px;display:grid;place-items:center;border:1px solid #354155;border-radius:50%}.caption-nav button:hover{background:#24374c}.lab-note{display:flex;align-items:center;gap:7px;padding:0 3px 25px;color:#8d9aae;font-size:10px}.lab-note>span:last-child{margin-inline-start:auto;font:9px Arial;letter-spacing:1px}.status-dot{width:5px;height:5px;border-radius:50%;background:#65a5b5;flex-shrink:0}.focus-mode .lab-shell{display:none}.focus-mode .preview-surround{width:100%;max-width:none}.focus-mode .viewport{border:0;border-radius:0;box-shadow:none}.focus-mode .viewport:not(.mobile) .hero{min-height:100svh}.exit-focus{position:fixed;bottom:16px;left:18px;z-index:70;border:1px solid #ffffff30;border-radius:40px;background:#101927db;color:#fff;font-size:11px;padding:10px 18px;backdrop-filter:blur(12px)}
/* Shared hero anatomy */
.hero{--ink:#f3f8ff;--muted:#a2b6c9;--line:#ffffff21;--accent:#55e4ed;--soft:#ffffff09;--surface:#111f30;--button-ink:#082131;position:relative;overflow:hidden;background:#0b1b2d;color:var(--ink);min-height:760px;display:flex;flex-direction:column;color-scheme:dark}.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 22% 50%,#1466894d,transparent 55%)}.hero>*{position:relative;z-index:1}.sitebar{height:82px;margin:0 3.8cqw;display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid var(--line);flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;text-align:start;padding:0}.brand img{width:49px;height:36px;object-fit:contain}.brand b{display:block;font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap}.brand small{display:block;letter-spacing:3px;font:8px/1.7 Arial,sans-serif;direction:ltr;color:var(--muted);margin-top:4px}.site-nav{display:flex;align-items:center;gap:30px;font-size:11px}.site-nav button{color:var(--muted);padding:7px 0}.site-nav button:hover{color:var(--ink)}.site-actions{display:flex;align-items:center;gap:16px;font-size:10px}.site-actions>span{color:var(--muted)}.site-actions .nav-cta{border:1px solid var(--line);border-radius:7px;padding:8px 15px;font-size:11px}.nav-cta:hover{background:var(--soft)}.hero-main{padding:35px 4.6cqw 22px;flex:1;position:relative}.hero-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:3cqw;align-items:center;min-height:470px}.hero-copy{position:relative;z-index:5;max-width:500px}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:500;color:var(--muted);margin-bottom:21px}.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent),transparent 50%)}.hero-title{font-size:clamp(38px,4.25cqw,67px);font-weight:700;line-height:1.37;letter-spacing:-.025em;text-wrap:balance}.hero-title em{font-style:normal;color:var(--accent);display:block}.hero-description{font-size:clamp(13px,1.04cqw,16px);line-height:1.95;color:var(--muted);margin-top:20px;max-width:420px}.hero-buttons{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:28px}.primary-button{min-height:46px;padding:10px 23px;background:var(--accent);color:var(--button-ink);border-radius:8px;font-size:12px;font-weight:700;box-shadow:0 7px 24px color-mix(in srgb,var(--accent),transparent 90%);transition:transform .2s,box-shadow .2s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 10px 35px color-mix(in srgb,var(--accent),transparent 78%)}.secondary-button{min-height:44px;padding:10px 17px;color:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:11px;display:inline-flex;gap:9px;align-items:center;justify-content:center}.secondary-button svg{width:14px;height:14px}.secondary-button:hover{background:var(--soft)}.quiet-note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;margin-top:19px}.quiet-note svg{width:14px;height:14px;color:var(--accent)}.feature-tags{display:flex;gap:15px;flex-wrap:wrap;margin-top:28px;font-size:10px;color:var(--muted)}.feature-tags span{border-inline-start:1px solid var(--line);padding-inline-start:12px}.hero-center{text-align:center;margin-inline:auto;max-width:810px}.hero-center .eyebrow,.hero-center .hero-buttons{justify-content:center}.hero-center .hero-description{margin-inline:auto;max-width:560px}.hero-center .hero-title{font-size:clamp(36px,3.55cqw,56px)}.hero-center .hero-title em{display:inline}.hero-center .eyebrow{margin-bottom:10px}.hero-center .hero-description{margin-top:12px}.hero-center .hero-buttons{margin-top:19px}.hero-bottom{padding:0 3.8cqw 20px}.reel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--muted);font-size:10px}.reel-heading b{font-weight:500;color:var(--ink)}.reel-heading .reel-info{display:flex;align-items:center;gap:9px}.reel-count{font:9px monospace;color:var(--accent);border:1px solid var(--line);border-radius:4px;padding:2px 5px}.reel-actions{display:flex;align-items:center;gap:8px}.reel-actions button{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid transparent;border-radius:5px;font-size:10px;min-height:32px}.reel-actions button:hover{border-color:var(--line)}.reel-actions svg{width:13px;height:13px}.reel-actions button[aria-pressed=true]{background:var(--accent);color:var(--button-ink)}.screen-reel{display:flex;gap:7px;padding:5px 2px 3px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior-inline:contain}.reel-item{min-width:79px;flex:1;padding:5px;border:1px solid var(--line);border-radius:8px;background:var(--soft);text-align:start;position:relative;transition:background .2s,border-color .2s,transform .2s}.reel-item img{height:39px;width:100%;object-fit:cover;object-position:top;border-radius:3px;opacity:.55;transition:opacity .2s}.reel-item span{font-size:9px;white-space:nowrap;display:block;margin-top:5px;padding:0 1px;color:var(--muted)}.reel-item:hover{transform:translateY(-3px);border-color:var(--accent)}.reel-item:hover img,.reel-item[aria-pressed=true] img{opacity:1}.reel-item[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 93%)}.reel-item[aria-pressed=true] span{color:var(--ink)}.reel-item::after{content:"";position:absolute;bottom:0;right:4px;width:calc(var(--progress,0) * (100% - 8px));height:2px;background:var(--accent);border-radius:4px}.source-note{font-size:8px;color:var(--muted);opacity:.85;display:flex;gap:9px;align-items:center;padding-top:8px}.source-note .engine{margin-inline-start:auto;font:8px Arial;letter-spacing:1.5px;opacity:.7;direction:ltr}
.browser{border:1px solid #98b9d34d;border-radius:11px;padding:6px;background:linear-gradient(140deg,#7698b736,#142b4280);box-shadow:0 30px 65px #0003;overflow:hidden;transform-style:preserve-3d;position:relative}.browser-top{height:29px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);padding:0 6px;font-size:8px;gap:10px}.browser-dots{display:flex;gap:4px;direction:ltr}.browser-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}.browser-title{display:flex;gap:7px;align-items:center;font-size:8px}.browser-title svg{width:9px;height:9px}.frame-zoom{width:25px;height:24px;display:grid;place-items:center}.frame-zoom svg{width:12px;height:12px}.screen-image{position:relative;display:block;padding:0;width:100%;aspect-ratio:1.93;background:#f6f8fa;border-radius:5px;overflow:hidden;cursor:zoom-in}.screen-image img{width:100%;height:100%;object-fit:contain;transform-origin:center;pointer-events:none}.screen-image .open-hint{position:absolute;bottom:10px;left:10px;background:#091c2ee8;color:#fff;border:1px solid #ffffff40;font-size:9px;padding:4px 10px;border-radius:30px;opacity:0;transform:translateY(5px);transition:.2s}.screen-image:hover .open-hint{opacity:1;transform:none}.screen-surface{position:relative}.screen-surface img{user-select:none;-webkit-user-drag:none}.browser.light-frame{background:#fff;box-shadow:0 16px 55px #1e4c7417;border-color:#dbe3ee}.light-frame .browser-top{color:#7f93a7}
.floating-card{position:absolute;border:1px solid #ffffff3b;box-shadow:0 25px 55px #00142552;border-radius:12px;background:linear-gradient(135deg,#314b63ed,#142b41eb);backdrop-filter:blur(16px);color:#effcff;padding:12px;text-align:start}.floating-card .micro{font-size:8px;color:#b9d0df;display:block;margin-bottom:7px}.floating-card b{font-size:13px}.floating-card svg{width:16px;height:16px;color:var(--accent)}.scene-hint{display:flex;gap:7px;align-items:center;justify-content:center;color:var(--muted);font-size:9px;margin-top:12px}.scene-hint svg{width:13px;height:13px}.pill-label{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:30px;border:1px solid var(--line);font-size:9px;color:var(--muted);background:var(--soft)}
/* 01 / PRISM */
.prism .hero-main{padding-top:26px;padding-bottom:15px}.prism .hero-title{font-size:clamp(39px,4.5cqw,69px)}.prism .hero-split{min-height:490px;gap:1.8cqw}.prism .hero-description{max-width:370px}.prism .sitebar{border-bottom-color:#99ccf01c}.prism::after{content:"";position:absolute;left:-10%;bottom:130px;width:78%;height:210px;background-image:linear-gradient(#8ccbf216 1px,transparent 1px),linear-gradient(90deg,#8ccbf216 1px,transparent 1px);background-size:38px 38px;transform:perspective(500px) rotateX(68deg);mask-image:radial-gradient(ellipse,#000,transparent 70%);pointer-events:none}.prism-deck{height:465px;position:relative;perspective:1300px;transform-style:preserve-3d;direction:ltr;isolation:isolate}.deck-aura{position:absolute;left:13%;top:20%;width:80%;height:70%;border-radius:50%;background:#17c9ff20;filter:blur(40px)}.tilt-root{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}.prism-back{position:absolute;width:83%;top:48px;left:10%;transform:rotateY(17deg) rotateX(10deg) rotateZ(-5deg) translateZ(-60px);opacity:.42;pointer-events:none}.prism-back .screen-image{cursor:default}.prism-main{position:absolute;top:117px;width:97%;left:0;transform:rotateY(14deg) rotateX(7deg) rotateZ(-4deg);z-index:2;direction:rtl}.prism-main::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#ffffff12,transparent 45%);pointer-events:none}.prism-float-chart{width:41%;left:-2%;bottom:17px;z-index:4;direction:rtl;transform:rotateY(10deg) rotateZ(-4deg);padding:7px 9px 9px}.prism-float-chart img{border-radius:5px;mix-blend-mode:screen;opacity:.96}.prism-float-chart .micro{display:flex;justify-content:space-between}.prism-float-note{right:5%;top:36px;z-index:3;display:flex;gap:9px;align-items:center;padding:11px 15px;transform:rotateZ(-4deg)}.prism-float-note b{font-size:10px;display:block}.prism-float-note small{font-size:8px;color:#9bbaca}.prism .orbit-chip{position:absolute;right:4%;bottom:5px;color:#83cddd;font-size:8px;letter-spacing:1px;font-family:Arial;display:flex;gap:8px;align-items:center}.orbit-chip i{height:4px;width:4px;background:#58e6de;border-radius:50%}
/* 02 / CLARITY */
.clarity{--ink:#16344c;--muted:#688093;--line:#21456523;--accent:#1f63df;--soft:#1f63df05;--surface:white;--button-ink:#fff;background:#f8fbff;color-scheme:light}.clarity::before{background:radial-gradient(ellipse at 50% 73%,#d7eaff,transparent 55%)}.clarity .sitebar{margin-inline:4.6cqw}.clarity .hero-main{padding-top:27px;padding-bottom:5px}.clarity .hero-title{font-size:clamp(34px,3.7cqw,55px)}.clarity .hero-title em{display:block}.clarity .hero-description{font-size:12px;max-width:450px}.clarity .hero-buttons{margin-top:15px}.clarity-scene{position:relative;width:80%;max-width:930px;margin:27px auto 12px;perspective:1800px}.clarity-monitor{width:100%;transform:rotateX(5deg);transform-origin:bottom}.clarity-monitor .browser{background:#fff;border-color:#dde6ee;padding:7px;box-shadow:0 15px 45px #1660df15}.clarity-monitor .browser-top{height:24px;color:#778a9e}.clarity-monitor .screen-image{aspect-ratio:2.8}.clarity-monitor .screen-image img{object-fit:cover;object-position:top}.clarity-base{height:9px;position:relative;width:107%;margin:0 -3.5%;background:linear-gradient(#e1e8f0,#b7c5d7);border-radius:1px 1px 50% 50%;box-shadow:0 7px 15px #47719c22}.clarity-base::after{content:"";position:absolute;left:44%;width:12%;height:4px;top:0;border-radius:0 0 5px 5px;background:#a7b8cc}.clarity-tag{position:absolute;background:#fff;border:1px solid #dfe7f0;box-shadow:0 10px 24px #254d6810;border-radius:11px;display:flex;align-items:center;gap:9px;padding:13px 15px;font-size:10px;z-index:2}.clarity-tag svg{color:var(--accent);width:17px;height:17px}.clarity-tag.one{left:-9%;top:39%}.clarity-tag.two{right:-7%;bottom:15%}.clarity .hero-bottom{padding-top:17px}.clarity .reel-item img{opacity:.75}.clarity .source-note{color:#718494}
/* 03 / ORBIT */
.orbit{--ink:#edf9f5;--muted:#9bbeb1;--accent:#87eac6;--line:#b7e3cf26;--soft:#84d2b108;--surface:#16372b;--button-ink:#0b3225;background:#091f1b}.orbit::before{background:radial-gradient(ellipse at 25% 40%,#25675066,transparent 56%)}.orbit .hero-main{padding-top:15px;padding-bottom:10px}.orbit .hero-title em{color:#a1efce}.orbit .hero-split{grid-template-columns:.7fr 1.3fr;min-height:493px;gap:1.5cqw}.orbit-world{height:487px;position:relative;isolation:isolate;direction:ltr}.orbit-ring{position:absolute;border:1px solid #a0dec621;left:50%;top:50%;width:89%;height:87%;transform:translate(-50%,-50%);border-radius:50%}.orbit-ring.inner{width:67%;height:63%;border-style:dashed}.orbit-ring::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#a9ead4;left:15%;top:13%;box-shadow:0 0 20px #a1f4d5}.orbit-radar{position:absolute;inset:5% 5%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,#9be5bc0d 45deg,transparent 90deg);animation:orbit-spin 30s linear infinite;pointer-events:none}.orbit-center{position:absolute;left:16%;width:68%;top:34%;z-index:2;direction:rtl;filter:drop-shadow(0 0 35px #a5efc716)}.orbit-center .browser{background:#234b3ddd;border-color:#a3dbbd4a;box-shadow:0 22px 45px #0005}.orbit-center .browser-top{color:#acc6ba;height:22px}.orbit-node{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translate(-50%,-50%);display:flex;gap:7px;align-items:center;justify-content:center;background:#15372edb;border:1px solid #6bbca648;border-radius:10px;padding:9px 12px;z-index:3;min-width:95px;color:#afd2c4;font-size:9px;white-space:nowrap;transition:background .25s,box-shadow .25s}.orbit-node svg{width:15px;height:15px}.orbit-node:hover,.orbit-node[aria-pressed=true]{background:#a4f1d1;color:#153b2d;box-shadow:0 0 35px #b6f9db22;border-color:#c1f8de}.orbit-center-label{display:flex;justify-content:center;gap:8px;color:#9fceba;font-size:8px;margin-top:11px;letter-spacing:1px;font-family:Arial}
/* 04 / MOSAIC */
.mosaic{--ink:#172f4d;--muted:#748399;--line:#1939651f;--accent:#326fdc;--soft:#dde8f736;--button-ink:white;background:#f5f6fa;color-scheme:light}.mosaic::before{background:none}.mosaic .hero-main{padding-top:25px}.mosaic-heading{display:flex;align-items:center;justify-content:space-between;gap:35px;padding-bottom:25px}.mosaic-heading .hero-title{font-size:clamp(34px,3.1cqw,48px);max-width:480px}.mosaic-heading .eyebrow{margin-bottom:6px}.mosaic-heading .hero-description{font-size:12px;max-width:300px;margin-top:8px}.mosaic-heading .hero-buttons{margin-top:15px}.mosaic-board{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:147px 147px;gap:14px;direction:rtl}.bento-tile{border:1px solid #dbe3ef;border-radius:14px;background:white;overflow:hidden;position:relative;text-align:start;padding:16px}.bento-main{grid-column:span 7;grid-row:span 2;background:#e8edf5;display:flex;flex-direction:column}.bento-main .bento-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;gap:8px}.bento-main .bento-title>div span{display:block;font:8px Arial;color:#7d8eaa;letter-spacing:1.5px}.bento-main .bento-title b{font-size:14px}.bento-main .browser{background:#fff;box-shadow:0 10px 25px #203f6718;border-color:#d2deed;flex:1}.bento-main .browser-top{height:17px;color:#70829b}.bento-main .screen-image{height:calc(100% - 17px);aspect-ratio:auto}.bento-main .screen-image img{object-fit:cover;object-position:top}.bento-secondary{grid-column:span 3;background:#fff;display:flex;flex-direction:column}.bento-secondary b{font-size:12px;position:relative;z-index:2}.bento-secondary small{font-size:9px;color:#75879f;display:block}.bento-secondary img{width:115%;max-width:none;transform:rotate(-5deg);margin-top:8px;border:1px solid #e3e7ec;border-radius:4px;box-shadow:0 5px 15px #30405c1a;transition:transform .4s}.bento-secondary:hover img{transform:translateY(-8px) rotate(0)}.bento-secondary.two{background:#ecf4f3}.bento-tile[aria-pressed=true]{border-color:#326fdc}.bento-mini{grid-column:span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;background:#ebeafb}.bento-mini svg{width:28px;height:28px;color:#7669b6}.bento-mini b{font-size:11px}.bento-mini small{font-size:8px;color:#738299}.bento-mini:nth-child(5){background:#192d48;color:white;border:0}.bento-mini:nth-child(5) svg{color:#93dbed}.bento-mini:nth-child(5) small{color:#9cb1c9}.mosaic .hero-bottom{padding-top:16px}
/* 05 / FLOW */
.flow{--ink:#16463d;--muted:#638b80;--line:#275b4224;--accent:#1e876e;--soft:#2b8c6110;--button-ink:white;background:#eff6f1;color-scheme:light}.flow::before{background:radial-gradient(ellipse at 10% 10%,#d4ecdf,transparent 50%)}.flow .hero-title{font-size:clamp(34px,3.4cqw,50px)}.flow .hero-description{font-size:12px;margin-top:12px}.flow .hero-split{grid-template-columns:.75fr 1.25fr;min-height:490px;align-items:start;gap:5cqw}.flow .eyebrow{margin-bottom:12px}.flow-steps{display:grid;gap:5px;margin-top:23px;position:relative}.flow-steps::before{content:"";position:absolute;right:17px;top:18px;bottom:18px;width:1px;background:#b9d2c5}.flow-step{padding:9px 0;display:flex;gap:13px;align-items:center;text-align:start;position:relative;color:#738c82}.flow-step>span{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;background:#eff6f1;border:1px solid #c4d8cc;border-radius:50%;font:10px Arial;color:#93a69b;z-index:1}.flow-step b{font-size:12px;font-weight:500}.flow-step small{font-size:9px;display:block;color:#7f9b90;max-height:0;opacity:0;overflow:hidden;transition:.3s}.flow-step[aria-pressed=true]>span{background:#1e876e;border-color:#1e876e;color:white;box-shadow:0 0 0 5px #dcebe3}.flow-step[aria-pressed=true] b{font-weight:700;color:#1b6752}.flow-step[aria-pressed=true] small{max-height:30px;opacity:1}.flow-visual{padding-top:30px;position:relative}.flow-visual .browser{background:#fff;border:1px solid #cee0d4;box-shadow:0 28px 55px #2a5b3a20}.flow-visual .browser-top{color:#6f9485}.flow-caption{margin:24px 20px 0;padding-right:16px;border-right:2px solid #74af93;max-width:420px}.flow-caption .chapter{font:9px monospace;letter-spacing:2px;color:#80a090;direction:ltr;text-align:right}.flow-caption h3{font-size:19px;color:#2b6c56;margin-top:4px}.flow-caption p{font-size:11px;color:#6d8f81;line-height:1.8;margin-top:4px}.flow-controls{display:flex;align-items:center;gap:10px;margin:18px 20px 0}.flow-controls button{font-size:10px;display:flex;align-items:center;gap:5px;padding:7px 11px;border-radius:5px;border:1px solid #bbd4c4}.flow-controls button svg{width:13px;height:13px}.flow-controls button[aria-pressed=true]{background:#1e876e;color:white}
/* 06 / GALLERY */
.gallery{--ink:#f1eeff;--muted:#aea4c9;--line:#d1c0ff26;--accent:#c2b5ff;--soft:#bea3fb0c;--button-ink:#322365;background:#19182d}.gallery::before{background:radial-gradient(ellipse at 50% 68%,#51487b60,transparent 58%)}.gallery .hero-main{padding-inline:0;padding-top:25px;padding-bottom:13px}.gallery .hero-title em{display:block;color:#cbbfff}.gallery .hero-description{font-size:12px}.gallery .hero-center .hero-buttons{display:none}.cover-stage{position:relative;height:328px;margin-top:26px;perspective:1300px;touch-action:pan-y;user-select:none;direction:ltr;overflow:hidden}.cover-stage:active{cursor:grabbing}.cover-card{position:absolute;top:25px;left:50%;width:52%;transform:translateX(calc(-50% + var(--d)*34%)) translateZ(calc(var(--abs)*-110px)) rotateY(calc(var(--d)*-24deg));z-index:calc(20 - var(--abs));opacity:calc(1 - var(--abs)*.2);transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s,filter .4s;filter:brightness(calc(1 - var(--abs)*.16));border:1px solid #dbd2ff5c;border-radius:10px;background:#282840;box-shadow:0 30px 60px #0005;cursor:pointer;direction:rtl;padding:7px;text-align:start}.cover-card .cover-label{font-size:9px;color:#bfb9d4;padding:3px 4px 8px;display:flex;justify-content:space-between;align-items:center}.cover-card img{aspect-ratio:1.93;width:100%;object-fit:contain;background:#f6f8fa;border-radius:5px;pointer-events:none}.cover-card[aria-pressed=true]{border-color:#bfb0f4;filter:none;box-shadow:0 30px 80px #090d1eaa,0 0 40px #a391e51c}.cover-controls{display:flex;gap:20px;align-items:center;justify-content:center;color:#aea4c9;font-size:10px;margin-top:8px}.cover-controls button{width:31px;height:31px;border:1px solid #665782;border-radius:50%;display:grid;place-items:center}.cover-controls button:hover{color:white;border-color:white}.cover-controls svg{width:14px;height:14px}.cover-controls b{font-weight:500;color:#ece9ff}.gallery .hero-bottom{padding-top:10px}
/* 07 / BLUEPRINT */
.blueprint{--ink:#e5f2ff;--muted:#91b4d0;--line:#8fc4f129;--accent:#78c9ff;--soft:#83b1e10b;--button-ink:#062853;background:#112d50}.blueprint::before{background:linear-gradient(#659ad817 1px,transparent 1px),linear-gradient(90deg,#659ad817 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(90deg,#000,transparent 80%)}.blueprint .hero-split{grid-template-columns:.72fr 1.28fr;gap:4cqw;min-height:490px}.blueprint .hero-title{font-size:clamp(34px,3.8cqw,56px)}.blueprint .hero-description{font-size:12px}.exploded-world{height:426px;perspective:1100px;position:relative;direction:ltr;margin-top:15px}.assembly{position:absolute;left:7%;top:27%;width:88%;aspect-ratio:1.93;transform:rotateX(51deg) rotateZ(-29deg);transform-style:preserve-3d;--depth:40}.blueprint-layer{position:absolute;inset:0;transform:translateZ(calc(var(--layer) * var(--depth) * 1px));border:1px solid #bddfff77;border-radius:8px;transform-style:preserve-3d;background:#0e2849cc;box-shadow:0 7px 0 #7099c318,0 16px 20px #071b2f33;transition:transform .12s ease-out,filter .3s;text-align:left;cursor:pointer;padding:6px}.blueprint-layer img{width:100%;height:100%;object-fit:contain;opacity:calc(.33 + var(--layer)*.21);border-radius:4px;pointer-events:none}.blueprint-layer>span{position:absolute;left:100%;top:18px;white-space:nowrap;font:9px Arial,sans-serif;letter-spacing:1px;background:#244b72;border:1px solid #608bb4;padding:4px 9px;color:#cbe8ff;transform-origin:left;transform:rotateZ(0);border-radius:0 5px 5px 0}.blueprint-layer:hover{filter:brightness(1.18)}.blueprint-layer.top{box-shadow:0 5px 0 #8bcaf333,0 20px 45px #0005}.blueprint-layer.top img{opacity:1}.depth-control{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#0c2544a8;border:1px solid #6c9ecc44;border-radius:8px;padding:10px 13px;font-size:10px;max-width:310px;margin-top:28px}.depth-control input{width:120px;accent-color:#87d6ff;direction:ltr;cursor:ew-resize}.depth-control output{font:10px monospace;min-width:25px;color:#a8dbff}.technical-label{position:absolute;bottom:9px;left:18%;font:9px monospace;letter-spacing:1.5px;color:#83aed5;direction:ltr}.dimension-line{position:absolute;top:14%;left:3%;height:78%;border-left:1px solid #92bce850}.dimension-line::before,.dimension-line::after{content:"";width:9px;height:1px;background:#92bce8;position:absolute;left:-5px}.dimension-line::before{top:0}.dimension-line::after{bottom:0}
/* 08 / CINEMA */
.cinema{--ink:#f1f2e9;--muted:#9ca494;--line:#dce2d021;--accent:#c4e796;--soft:#d4e8b608;--button-ink:#273315;background:#131714}.cinema::before{background:radial-gradient(ellipse at 50% 50%,#49543642,transparent 60%)}.cinema .hero-main{padding-top:21px;padding-bottom:10px}.cinema .hero-center .hero-title{font-size:clamp(34px,3.4cqw,50px)}.cinema .hero-center .hero-description{font-size:11px;margin-top:7px}.cinema .hero-center .hero-buttons{display:none}.cinema .eyebrow{font-family:Arial,sans-serif;font-size:8px;letter-spacing:2px;direction:ltr}.cinema-screen{width:83%;max-width:1030px;margin:22px auto 0;position:relative}.cinema .browser{border-radius:10px;background:#262b23;border-color:#6c795458;box-shadow:0 20px 65px #0008;padding:7px}.cinema .browser-top{height:20px;color:#a0ad8f}.cinema .screen-image{aspect-ratio:2.85}.cinema .screen-image img{object-fit:contain}.cinema .screen-image::after{content:"";position:absolute;inset:0;background:linear-gradient(#00000005,transparent 70%,#04160425);pointer-events:none}.cinema .screen-image .open-hint{display:none}.cinema-corner{position:absolute;width:13px;height:13px;border-color:#b7d898;border-style:solid;pointer-events:none;opacity:.65}.cinema-corner.a{top:-6px;right:-6px;border-width:1px 1px 0 0}.cinema-corner.b{top:-6px;left:-6px;border-width:1px 0 0 1px}.cinema-corner.c{bottom:-6px;right:-6px;border-width:0 1px 1px 0}.cinema-corner.d{bottom:-6px;left:-6px;border-width:0 0 1px 1px}.cinema-controls{display:flex;align-items:center;gap:15px;width:83%;max-width:1030px;margin:17px auto 0;direction:ltr}.cinema-play{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border:1px solid #6e7c5d;border-radius:50%;color:#c4e796}.cinema-play svg{width:13px;height:13px}.cinema-chapters{display:flex;flex:1;gap:5px;direction:rtl}.cinema-chapter{height:21px;flex:1;position:relative;display:flex;align-items:center;padding:0}.cinema-chapter::before{content:"";height:2px;background:#75856c55;width:100%}.cinema-chapter::after{position:absolute;right:0;content:"";height:2px;width:calc(var(--progress,0)*100%);background:#d6f6b2}.cinema-chapter[aria-pressed=true]::before{background:#788f5b}.cinema-time{font:9px monospace;color:#a3b291;white-space:nowrap;min-width:56px}.speed-button{font:9px monospace;color:#becaa9;padding:5px;border-radius:4px;border:1px solid #6c795440;min-width:28px}.cinema .hero-bottom{padding-top:12px}.cinema-caption{display:flex;justify-content:space-between;align-items:center;gap:14px;width:83%;margin:8px auto 0;font-size:9px;color:#95a588}.cinema-caption b{font-weight:500;color:#cbd7bb}.ghost-cursor{position:absolute;top:35%;left:35%;z-index:5;pointer-events:none;opacity:0;color:#1b7fda;filter:drop-shadow(0 3px 4px #0005)}.ghost-cursor svg{width:22px;height:22px;fill:#fff;stroke:#155e9d}.cinema.is-playing .ghost-cursor{opacity:1;animation:cursor-tour 6s ease-in-out infinite}
/* 09 / LENS */
.lens{--ink:#103e45;--muted:#64878a;--line:#12657520;--accent:#0793a3;--soft:#00849308;--button-ink:white;background:#f1f8f8;color-scheme:light}.lens::before{background:radial-gradient(ellipse at 12% 60%,#bce7eb8c,transparent 58%)}.lens .hero-split{grid-template-columns:.76fr 1.24fr;min-height:490px;gap:4cqw}.lens .hero-title{font-size:clamp(36px,4cqw,58px)}.lens .hero-description{font-size:12px}.lens .hero-title em{display:block}.lens-stage{position:relative;padding:18px 0;margin-top:15px;touch-action:pan-y}.lens-stage .browser{background:#fff;border-color:#bedadf;box-shadow:0 28px 70px #25566b27}.lens-stage .browser-top{color:#7ca1a4}.magnifier{width:190px;aspect-ratio:1;position:absolute;left:35%;top:20%;border-radius:50%;border:7px solid #fcffff;background-color:#fff;background-repeat:no-repeat;box-shadow:0 16px 40px #163d5959,0 0 0 1px #b2d6dd;z-index:5;pointer-events:none;direction:ltr;overflow:hidden}.magnifier::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#ffffff22,transparent 45%);border-radius:50%;box-shadow:inset 0 0 0 1px #4392a126}.magnifier::after{content:"2×";position:absolute;bottom:9px;left:50%;transform:translateX(-50%);padding:1px 9px;background:#147888e8;color:#fff;font:9px/1.7 monospace;border-radius:30px}.lens-caption{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:9px;color:#6c989c}.lens-caption svg{width:13px;height:13px}.lens-detail{position:relative;margin-top:24px;display:flex;gap:14px;align-items:center}.lens-detail>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#e3eeee;color:#1995a2}.lens-detail small{font-size:9px;color:#749b9e;display:block}.lens-detail b{font-size:11px;font-weight:500;color:#407c84}
/* 10 / COMMAND */
.command{--ink:#28264b;--muted:#7c7b98;--line:#3d397225;--accent:#7262ca;--soft:#7f6dbe08;--button-ink:#fff;background:#f5f3fb;color-scheme:light}.command::before{background:radial-gradient(ellipse at 50% 50%,#e4def8a6,transparent 64%)}.command .hero-main{padding-top:23px;padding-bottom:8px}.command .hero-title{font-size:clamp(32px,3.6cqw,54px)}.command .hero-title em{display:inline}.command .hero-description{font-size:12px}.command .hero-buttons{display:none}.command-center{position:relative;z-index:6;width:min(660px,80%);margin:22px auto 0}.command-search{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid #d7d3e6;box-shadow:0 6px 18px #4c416011,0 1px 3px #ffffff;border-radius:12px;padding:10px 15px}.command-search svg{color:#8f88ab;width:18px;height:18px}.command-search input{width:100%;border:0;background:transparent;outline:none!important;color:#373053;font-size:12px;min-height:25px;padding:0}.command-search input::placeholder{color:#9b95ac}.command-search:focus-within{border-color:#8970d5;box-shadow:0 0 0 3px #8970d510}.command-search kbd{font:9px/1.4 monospace;padding:3px 5px;background:#f7f6fb;border:1px solid #e6e2ee;border-radius:4px;color:#9892a6;white-space:nowrap}.command-results{position:absolute;top:100%;margin-top:7px;right:0;left:0;background:#fff;border:1px solid #ddd7ec;box-shadow:0 24px 60px #2b174d28;border-radius:13px;padding:7px;z-index:10}.command-result{display:flex;align-items:center;gap:12px;text-align:start;width:100%;padding:11px 13px;border-radius:7px;color:#78718a}.command-result:hover,.command-result:focus-visible{background:#f0edf9}.command-result svg{width:16px;height:16px;color:#7a64c3}.command-result b{display:block;font-size:11px;color:#4a3b70}.command-result small{display:block;font-size:8px}.command-empty{padding:15px;color:#8c849b;font-size:11px}.command-suggestions{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;flex-wrap:wrap}.command-suggestions button{padding:5px 10px;font-size:9px;border:1px solid #ddd7e9;border-radius:30px;color:#888196}.command-suggestions button:hover,.command-suggestions button[aria-pressed=true]{background:#7262ca;color:white;border-color:#7262ca}.command-visual{position:relative;width:77%;max-width:960px;margin:21px auto 10px;perspective:1400px}.command-visual>.browser{width:88%;margin:auto;background:#fff;border-color:#d8d1e7;z-index:3;box-shadow:0 25px 40px #41306018}.command-visual>.browser .browser-top{height:23px;color:#958aa9}.command-visual>.browser .screen-image{aspect-ratio:2.8}.command-visual>.browser .screen-image img{object-fit:contain}.command-side{position:absolute;width:40%;top:15%;border:1px solid #d4cce1;border-radius:8px;padding:5px;background:#fff;opacity:.4;box-shadow:0 16px 35px #5c487224}.command-side.left{left:-10%;transform:rotateY(28deg) rotateZ(-9deg)}.command-side.right{right:-10%;transform:rotateY(-28deg) rotateZ(9deg)}.command-side img{border-radius:4px;aspect-ratio:1.7;object-fit:cover;object-position:top}.command-local{font-size:8px;color:#9a90aa;margin-top:5px;text-align:center}
/* Dialogs */
.dialog{color:#dbe7f3;background:#111c2a;border:1px solid #354357;border-radius:20px;padding:25px;width:min(1160px,calc(100% - 40px));max-height:90svh;box-shadow:0 40px 150px #0008;overscroll-behavior:contain}.dialog::backdrop{background:#030912b5;backdrop-filter:blur(12px)}.dialog-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:24px}.dialog-heading h2{font-size:24px;line-height:1.5;margin-top:5px}.dialog-heading p{font-size:11px;color:#899eb5;margin-top:7px}.icon-button{width:36px;height:36px;border:1px solid #39485c;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.icon-button:hover{background:#2b3e54}.icon-button svg{width:16px;height:16px}.concept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.concept-card{display:block;text-align:start;border:1px solid #354357;border-radius:12px;overflow:hidden;background:#172436;transition:.25s;padding:0}.concept-card:hover{border-color:#87c5db;transform:translateY(-3px)}.concept-card img{width:100%;aspect-ratio:1.9;object-fit:cover;object-position:top;background:#0a1d31}.concept-card-copy{padding:13px 15px}.concept-card-copy strong{display:flex;align-items:center;justify-content:space-between;font-size:13px}.concept-card-copy strong small{font:9px Arial;letter-spacing:1px;color:#8ea4b9}.concept-card-copy p{font-size:10px;color:#8fa6ba;margin-top:5px}.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.library-screen{padding:9px;border:1px solid #314357;border-radius:12px;background:#172536;text-align:start}.library-screen img{width:100%;aspect-ratio:1.75;object-fit:contain;background:#f6f8fa;border-radius:6px}.library-screen b{display:block;font-size:12px;margin:9px 5px 1px}.library-screen small{display:block;font-size:9px;color:#8ba1b6;margin:0 5px 5px}.library-screen:hover{border-color:#87c5db}.zoom-dialog{width:min(1400px,calc(100% - 30px));padding:16px;overflow:hidden}.zoom-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:13px}.zoom-toolbar b{font-size:15px}.zoom-toolbar small{font:10px monospace;color:#90a4b8;display:block;margin-top:3px;direction:ltr;text-align:right}.zoom-tools{display:flex;align-items:center;gap:7px}.text-button{font-size:10px;color:#b9cadc;padding:7px 10px;border-radius:7px;background:#23364b}.zoom-canvas{height:min(67svh,760px);background:#e5eaf0;overflow:auto;border-radius:8px;display:grid;place-items:center;direction:ltr}.zoom-canvas img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.zoom-canvas.actual{display:block;overflow:auto}.zoom-canvas.actual img{max-width:none;max-height:none;width:auto;height:auto;margin:auto}.zoom-dialog>p{font-size:10px;color:#96acc1;margin-top:10px}.no-script{padding:30px;color:#fff;background:#20324a}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes cursor-tour{0%,100%{left:32%;top:43%;transform:scale(1)}35%{left:68%;top:31%;transform:scale(1)}40%{transform:scale(.86)}65%{left:52%;top:72%;transform:scale(1)}70%{transform:scale(.86)}}
@keyframes float-soft{0%,100%{translate:0 0}50%{translate:0 -7px}}
.ambient-float{animation:float-soft 6s ease-in-out infinite}.ambient-float.slow{animation-duration:8s;animation-delay:-3s}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation-play-state:paused!important;scroll-behavior:auto!important}
body.motion-paused .cover-card{transition:none}body.motion-paused .blueprint-layer{transition:none}
/* Container queries keep the actual hero responsive even inside the mobile preview. */
@container hero-preview (min-width: 1500px){.hero-split{min-height:560px}.prism .hero-split{min-height:560px}.prism-deck{height:520px}.prism-main{top:130px}.cover-stage{height:385px}.mosaic-board{grid-template-rows:175px 175px}.hero-main{padding-top:45px}}
@container hero-preview (max-width: 1050px){.site-nav{gap:18px}.hero-title{font-size:42px}.hero-split{gap:2cqw}.prism .hero-title{font-size:44px}.prism-deck{height:400px}.prism-main{top:120px}.prism-float-chart{bottom:12px}.prism-float-note{top:55px}.prism .hero-split{min-height:445px}.orbit-node{font-size:8px;min-width:83px;padding:8px}.orbit-world{height:450px}.orbit-center{top:37%;left:13%;width:74%}.cover-stage{height:290px}.blueprint .hero-title{font-size:41px}.flow .hero-title{font-size:39px}.mosaic-board{grid-template-rows:135px 135px}.hero-description{font-size:12px}.hero{min-height:730px}.magnifier{width:160px}.command-visual{width:82%}}
@container hero-preview (max-width: 760px){.sitebar{height:70px;margin-inline:5cqw}.site-nav{display:none}.site-actions>span{display:none}.site-actions .nav-cta{font-size:10px;padding:7px 12px}.brand b{font-size:13px}.brand img{width:43px;height:31px}.brand small{font-size:7px;letter-spacing:2px}.hero-main{padding:24px 6cqw 20px}.hero-split,.prism .hero-split,.orbit .hero-split,.flow .hero-split,.blueprint .hero-split,.lens .hero-split{display:flex;flex-direction:column;gap:0;min-height:0;align-items:stretch}.hero-copy{max-width:none;text-align:center}.eyebrow{justify-content:center;font-size:9px;margin-bottom:13px}.hero-title,.prism .hero-title,.orbit .hero-title,.blueprint .hero-title,.lens .hero-title,.flow .hero-title{font-size:clamp(34px,7cqw,48px);line-height:1.43}.hero-description,.prism .hero-description,.flow .hero-description,.lens .hero-description{max-width:440px;margin:13px auto 0;font-size:12px;line-height:1.9}.hero-buttons{justify-content:center;margin-top:20px;gap:9px}.primary-button{font-size:11px;padding:10px 17px;min-height:43px}.secondary-button{font-size:10px;padding:9px 12px;min-height:43px}.quiet-note{justify-content:center;font-size:9px;margin-top:14px}.feature-tags{display:none}.hero-bottom{padding:4px 5cqw 14px}.screen-reel{gap:7px}.reel-item{min-width:81px;max-width:90px}.reel-item img{height:40px}.reel-item span{font-size:9px}.reel-heading{font-size:9px;gap:6px}.reel-heading .reel-info{gap:5px}.reel-actions{gap:2px}.reel-actions button{font-size:9px;padding:5px}.source-note{font-size:8px;line-height:1.7}.source-note .engine{display:none}.hero{min-height:0}.prism-deck{height:360px;width:min(590px,100%);margin:20px auto 0}.prism-main{top:110px;width:91%;left:3%}.prism-back{top:46px;left:12%;width:78%}.prism-float-chart{bottom:9px;width:37%;left:0}.prism-float-note{top:35px;right:4%}.prism .orbit-chip{right:5%;bottom:9px}.prism .hero-main{padding-top:26px;padding-bottom:22px}.clarity .hero-main{padding-top:24px}.hero-center .hero-title,.clarity .hero-title{font-size:clamp(31px,6.5cqw,44px)}.hero-center .hero-description{font-size:12px;max-width:370px}.clarity-scene{width:92%;margin-top:30px;margin-bottom:45px}.clarity-monitor .screen-image{aspect-ratio:1.93}.clarity-tag{font-size:8px;padding:8px 11px;border-radius:7px}.clarity-tag svg{width:13px;height:13px}.clarity-tag.one{top:auto;left:-2%;bottom:-27px}.clarity-tag.two{right:-2%;bottom:-27px}.clarity .hero-bottom{padding-top:10px}.orbit-world{height:415px;max-width:540px;width:100%;margin:17px auto 0}.orbit-node{font-size:8px;padding:7px 8px;min-width:79px;gap:5px}.orbit-node svg{width:13px;height:13px}.orbit-center{top:35%;left:12%;width:76%}.orbit .hero-main{padding-bottom:12px}.mosaic-heading{display:block;text-align:center;padding-bottom:24px}.mosaic-heading .hero-title{max-width:none;font-size:clamp(32px,7cqw,44px)}.mosaic-heading .hero-description{max-width:350px;margin:12px auto 0}.mosaic-heading .hero-buttons{margin-top:15px}.mosaic-board{grid-template-columns:repeat(6,1fr);grid-template-rows:auto 145px;gap:9px}.bento-main{grid-column:span 6;grid-row:span 1;height:245px;padding:11px}.bento-main .bento-title b{font-size:12px}.bento-main .screen-image{aspect-ratio:1.95;height:auto}.bento-main .screen-image img{object-fit:contain}.bento-secondary{grid-column:span 2;padding:11px}.bento-secondary img{margin-top:15px}.bento-mini{grid-column:span 2;padding:11px;gap:5px}.bento-mini:last-child{display:none}.bento-secondary small{font-size:8px}.bento-secondary b{font-size:10px}.bento-mini b{font-size:10px}.bento-mini svg{width:22px;height:22px}.flow .hero-main{padding-top:25px;padding-bottom:15px}.flow-steps{display:flex;gap:4px;margin-top:22px;justify-content:center}.flow-steps::before{display:none}.flow-step{flex:1;flex-direction:column;gap:6px;padding:5px 0;text-align:center}.flow-step b{font-size:9px}.flow-step small{display:none!important}.flow-step>span{width:30px;height:30px;font-size:9px}.flow-visual{padding-top:20px}.flow-caption{margin:15px 4px 0;padding-right:12px}.flow-caption h3{font-size:16px}.flow-caption p{font-size:10px}.flow-caption .chapter{font-size:8px}.flow-controls{margin:13px 4px 0}.gallery .hero-main{padding-top:24px}.gallery .hero-center{padding-inline:6cqw}.gallery .hero-title{font-size:clamp(34px,6.8cqw,48px)}.cover-stage{height:270px;margin-top:23px}.cover-card{width:76%;top:27px;transform:translateX(calc(-50% + var(--d)*26%)) translateZ(calc(var(--abs)*-100px)) rotateY(calc(var(--d)*-23deg))}.cover-controls{margin-top:0;font-size:9px;gap:14px}.depth-control{margin:20px auto 0;justify-content:center;max-width:300px}.exploded-world{width:100%;max-width:550px;height:345px;margin:22px auto 0}.assembly{top:32%;width:81%;left:6%;transform:rotateX(47deg) rotateZ(-26deg)}.blueprint-layer>span{font-size:7px;letter-spacing:.5px;padding:4px 7px}.technical-label{bottom:0;font-size:8px}.dimension-line{top:13%;height:84%}.cinema .hero-center .hero-title{font-size:clamp(31px,6.8cqw,43px)}.cinema .hero-main{padding:25px 4cqw 14px}.cinema-screen{width:94%;margin-top:26px}.cinema .screen-image{aspect-ratio:1.93}.cinema-controls,.cinema-caption{width:94%}.cinema-controls{gap:9px}.cinema-time{font-size:8px;min-width:44px}.cinema-play{width:31px;height:31px}.cinema-chapters{gap:3px}.cinema-caption{font-size:8px}.lens-stage{width:100%;max-width:580px;margin:25px auto 0;padding-top:15px}.magnifier{width:145px;border-width:6px;top:24%;left:37%}.lens-detail{justify-content:center;text-align:start;margin-top:18px}.lens-caption{font-size:8px;margin-top:17px}.command .hero-main{padding-top:24px}.command .hero-title{font-size:clamp(31px,6.4cqw,43px)}.command-center{width:100%;max-width:510px;margin-top:20px}.command-search{border-radius:10px;padding:11px}.command-search input{font-size:11px}.command-search kbd{font-size:8px}.command-visual{width:100%;margin-top:23px}.command-visual>.browser{width:100%}.command-visual>.browser .screen-image{aspect-ratio:1.93}.command-side{display:none}.command .hero-description{font-size:11px}.command-local{font-size:8px}.command .hero-main{padding-bottom:15px}.command-results{max-height:230px;overflow:auto}}
@container hero-preview (max-width: 450px){.hero-main{padding-inline:6cqw}.hero-title,.prism .hero-title,.blueprint .hero-title,.orbit .hero-title,.lens .hero-title,.flow .hero-title{font-size:35px}.hero-description{font-size:11px}.sitebar{height:65px;margin-inline:5cqw}.brand{gap:7px}.brand img{width:37px;height:28px}.brand b{font-size:12px}.brand small{font-size:6px}.site-actions .nav-cta{font-size:9px;padding:6px 10px}.prism-deck{height:280px;margin-top:18px}.prism-main{top:86px;width:94%;left:1%}.prism-back{top:34px}.prism-float-chart{bottom:0;width:41%;padding:6px}.prism-float-note{top:19px;padding:8px 10px;border-radius:8px}.prism-float-note b{font-size:8px}.prism-float-note small{font-size:7px}.prism-float-note svg{width:14px;height:14px}.prism-float-chart .micro{font-size:7px}.prism .orbit-chip{font-size:7px;bottom:0}.browser{padding:4px;border-radius:7px}.browser-top{height:24px;font-size:7px}.browser-title{font-size:7px;gap:3px}.hero-center .hero-title,.clarity .hero-title{font-size:33px}.clarity .hero-description{font-size:11px}.clarity-scene{width:96%;margin-top:25px}.hero-bottom{padding-top:12px}.reel-info b{max-width:135px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reel-heading{gap:5px}.reel-actions svg{width:12px;height:12px}.reel-actions button{font-size:8px;gap:4px}.reel-count{font-size:8px}.source-note{font-size:7px}.orbit-world{height:315px;margin-top:25px;width:100%}.orbit-node{min-width:65px;font-size:7px;padding:7px 6px;gap:4px;border-radius:7px}.orbit-node svg{width:11px;height:11px}.orbit-center{left:10%;width:80%;top:34%}.orbit-center .browser-title{font-size:6px}.orbit-center-label{font-size:6px;margin-top:8px}.mosaic .hero-title{font-size:32px}.mosaic-board{grid-template-rows:auto 125px;gap:7px}.bento-main{height:217px}.bento-main .bento-title b{font-size:10px}.bento-title .pill-label{font-size:7px;padding:3px 7px}.bento-main .browser-top{height:18px}.bento-main .screen-image{height:calc(100% - 18px)}.bento-main .browser{min-height:0}.bento-secondary,.bento-mini{padding:9px}.bento-secondary b,.bento-mini b{font-size:9px}.bento-secondary img{width:140%;margin-top:15px}.bento-secondary small,.bento-mini small{font-size:7px}.flow-step b{font-size:8px}.flow-caption p{font-size:9px}.cover-stage{height:225px;margin-top:13px}.cover-card{width:82%;padding:5px;top:29px}.cover-card .cover-label{font-size:8px;padding:3px 3px 6px}.gallery .hero-title{font-size:34px}.gallery .hero-description{font-size:11px}.exploded-world{height:280px;margin-top:25px}.assembly{top:35%;width:81%;left:6%}.blueprint-layer>span{font-size:6px;padding:3px 5px}.technical-label{font-size:7px;left:12%;bottom:0}.depth-control{font-size:9px;padding:8px 10px;margin-top:20px}.depth-control input{width:100px}.magnifier{width:118px;border-width:5px}.magnifier::after{font-size:7px;bottom:5px}.lens .hero-description{font-size:11px}.lens-detail small{font-size:8px}.lens-detail b{font-size:10px}.command .hero-title{font-size:33px}.command-search kbd{display:none}.command-search{gap:9px}.command-suggestions{gap:5px}.command-suggestions button{font-size:8px;padding:5px 8px}.command .hero-center .eyebrow{font-size:8px}}
/* Host / gallery responsiveness */
@media(max-width:1100px){.lab-shell,.preview-surround{width:calc(100% - 36px)}.concept-nav{display:flex;overflow:auto;scrollbar-width:none}.concept-tab{min-width:105px}.tool-label{display:none}.lab-header{height:74px}}
@media(max-width:600px){.lab-shell,.preview-surround{width:calc(100% - 24px)}.lab-header{height:auto;min-height:73px;gap:8px;flex-wrap:wrap;padding-block:13px}.lab-signature{gap:8px}.lab-signature b{font-size:14px}.lab-signature small{display:none}.lab-monogram{font-size:23px;width:29px}.lab-tools{gap:2px}.view-switch{padding:2px;border-radius:8px}.view-switch button{padding:4px 7px;min-height:28px}.view-switch button span:not(:first-child){display:none}.tool-button{padding:5px 8px;min-height:32px}.lab-intro{padding:17px 0 12px;gap:10px}.lab-intro h1{font-size:19px}.lab-intro .overline{font-size:8px;letter-spacing:1.2px}.overview-button{font-size:0;border:0;padding:8px;min-width:34px}.overview-button svg{width:18px;height:18px}.concept-nav{gap:2px;padding-bottom:12px}.concept-tab{min-width:101px;min-height:51px;padding:6px 9px}.concept-tab span{font-size:10px}.concept-tab b{font-size:10px}.viewport{border-radius:16px}.viewport.mobile{border-width:4px}.concept-caption{gap:10px;padding:14px 2px}.caption-main{gap:8px}.caption-main strong{font-size:11px}.caption-main p{font-size:9px}.caption-number{font-size:19px}.caption-nav{gap:5px}.caption-nav span{display:none}.caption-nav button{width:29px;height:29px}.caption-nav svg{width:13px;height:13px}.lab-note{font-size:8px;line-height:1.8;align-items:start}.lab-note .status-dot{margin-top:6px}.lab-note>span:last-child{display:none}.dialog{width:calc(100% - 20px);padding:16px;border-radius:14px;max-height:93svh}.dialog-heading{margin-bottom:17px}.dialog-heading h2{font-size:18px}.dialog-heading .overline{font-size:8px;letter-spacing:1px}.concept-grid{grid-template-columns:1fr;gap:13px}.screen-grid{grid-template-columns:repeat(2,1fr);gap:9px}.library-screen{padding:6px;border-radius:9px}.library-screen b{font-size:10px;margin-inline:3px}.library-screen small{font-size:7px;margin-inline:3px}.zoom-toolbar{align-items:start;gap:6px;flex-wrap:wrap}.zoom-tools{gap:6px;flex-wrap:wrap;width:100%;justify-content:space-between}.zoom-tools .text-button{font-size:9px;padding:7px}.zoom-tools .icon-button{width:29px;height:29px}.zoom-canvas{height:65svh}.zoom-toolbar b{font-size:13px}.dialog .icon-button{width:32px;height:32px}.dialog-heading p{font-size:9px}.exit-focus{font-size:9px;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Final composition refinements */
@container hero-preview (min-width:761px){
  .prism-main{top:60px;width:90%;left:3%;transform:rotateY(8deg) rotateX(2deg) rotateZ(-3deg)}
  .prism-back{top:8px;width:78%;left:16%;transform:rotateY(12deg) rotateX(5deg) rotateZ(-4deg) translateZ(-40px)}
  .prism-float-note{top:0;right:2%;transform:translateZ(30px) rotateZ(-3deg)}
  .prism-float-chart{left:0;bottom:24px;width:38%;transform:translateZ(65px) rotateZ(-3deg)}
  .prism .orbit-chip{bottom:12px}
  .cover-stage{height:clamp(330px,31cqw,455px)}
  .cover-card{width:48%;top:17px}
}
.orbit-center{top:50%;transform:translateY(-50%)}
.cover-card img{height:auto}
.cover-label{line-height:1.5}
@container hero-preview (max-width:760px){
  .cover-stage{height:clamp(255px,47cqw,335px)}
  .cover-card{top:22px}
  .prism-float-chart{transform:translateZ(30px) rotateZ(-3deg)}
}
@container hero-preview (max-width:450px){
  .cover-stage{height:215px}
  .cover-card{top:20px}
}