html,body,#root{margin:0;min-height:100%}body{background:#fff9ed}*{box-sizing:border-box}div:has(>.lab){padding:0!important;max-width:none!important;background:#fff9ed!important;border-radius:0!important}.lab{font-family:Arial,Helvetica,sans-serif;background:#fff9ed;color:#24352d;padding:0 22px;max-width:1180px;margin:auto;--accent:#008b74}.preview-strip{font:9px/1.3 monospace;letter-spacing:.1em;border-bottom:1px solid #d8d7c4;padding:11px 0;display:flex;justify-content:space-between;color:#69745e}.preview-strip span{letter-spacing:0}header{display:flex;justify-content:space-between;align-items:center;padding:19px 0 14px}.brand{font-size:24px;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;gap:6px}.brand>span:last-child{color:var(--accent)}.brand-glyph{font-size:28px;color:var(--accent)}.studio-label{font:9px/1.4 monospace;text-transform:uppercase;text-align:right;color:#64705e;letter-spacing:.05em}.lead{padding:16px 0 5px}.kicker{font-size:10px;letter-spacing:.02em;color:#69745e;margin:0 0 10px}h1{font-size:clamp(33px,9.3vw,72px);font-weight:400;letter-spacing:-.065em;line-height:1.05;margin:0}h1 em{font-weight:400;font-style:normal;color:var(--accent)}.console{position:relative}.scene{height:190px;position:relative;background:radial-gradient(ellipse at 50% 55%,#ffe8a455,transparent 65%);margin:5px -8px 0}.coordinate{position:absolute;top:15px;left:8px;color:#798268;font:8px monospace;letter-spacing:.1em}.coordinate.right{left:auto;right:8px}.object{width:100%;height:190px;display:block}.axis{display:flex;align-items:center;gap:12px;position:absolute;left:8px;right:8px;bottom:8px;font:7px monospace;letter-spacing:.1em;color:#69745e}.axis i{flex:1;height:1px;background:#d8d7c4}.index-label{font:8px monospace;letter-spacing:.13em;color:#69745e;display:flex;justify-content:space-between;margin:9px 0 6px}.switch{font-family:inherit;text-align:left;width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:0;border-bottom:1px solid #dedbc8;color:#485a49;min-height:62px;padding:10px 4px;cursor:pointer;transition:background .2s,color .2s}.switch.on{color:#24352d;background:linear-gradient(90deg,#fff0b4,transparent);border-bottom-color:var(--accent)}.switch-number{font:9px monospace;color:#78836a;width:15px}.switch.on .switch-number{color:var(--accent)}.switch-copy{display:flex;flex-direction:column;gap:3px}.switch-copy strong{font-size:19px;letter-spacing:-.045em;font-weight:500;line-height:1}.switch-copy>span{font-size:11px;line-height:1.3;color:#61745e}.switch-end{margin-left:auto;display:flex;align-items:center;gap:11px}.switch-end>span{font-size:8px;line-height:1.3;max-width:65px;text-align:right;color:#69745e}.switch-end i{font:13px monospace;color:var(--accent)}.switch:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.readout{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 0 13px;min-height:101px}.readout-label{font:8px/1.5 monospace;color:var(--accent);text-transform:uppercase}.readout p{font-size:12px;line-height:1.5;color:#485a49;margin:5px 0 0;max-width:29ch}.lab a[href^=https]{color:var(--accent)!important;text-decoration:none;font-size:11px;font-weight:600;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}.lab a:hover{text-decoration:underline!important}footer{border-top:1px solid #dedbc8;padding:15px 0;display:flex;justify-content:space-between;gap:12px;color:#69745e;font-size:9px}footer p{margin:0;color:#485a49}.notes{border-top:1px solid #dedbc8;color:#69745e;padding:4px 0 18px;font-size:11px;line-height:1.6}.notes summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.notes summary:before{content:"+";margin-right:8px;color:var(--accent)}.notes[open] summary:before{content:"\2212"}.notes p{max-width:70ch}.notes a{display:inline!important;min-height:0!important}.sculpture{animation:arrive .4s ease-out}@keyframes arrive{0%{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(min-width:750px){.lab{padding:0 48px}.preview-strip{padding:13px 0}header{padding:27px 0}.lead{padding:35px 0 25px}h1{max-width:850px}.kicker{font-size:12px;margin-bottom:15px}.console{display:grid;grid-template-columns:1.1fr 1fr;gap:0 55px;padding:12px 0 32px;align-items:center}.stage{grid-column:1;grid-row:1/3}.scene{height:380px;margin:0}.object{height:380px}.axis{font-size:8px}.coordinate{font-size:9px}.switches{grid-column:2}.switch{min-height:76px}.switch-copy strong{font-size:24px}.switch-copy>span{font-size:13px}.switch-end>span{font-size:10px;max-width:none}.switch-number{font-size:10px;width:21px}.readout{grid-column:2;padding-bottom:0}.readout p{font-size:14px}.readout-label{font-size:9px}.lab a[href^=https]{font-size:12px}footer{font-size:11px;padding:22px 0}.studio-label{font-size:10px}.brand{font-size:29px}}@media(max-width:340px){.lab{padding:0 16px}.scene,.object{height:164px}h1{font-size:31px}.switch{min-height:61px}.switch-copy strong{font-size:18px}.switch-copy>span{font-size:10px}.readout p{max-width:24ch;font-size:11px}.readout{gap:10px}.lab a[href^=https]{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.file-card:has(.lab){padding:0!important;background:#fff9ed!important;max-width:none!important;border-radius:0!important}.sculpture{animation:arrive .4s ease-out,drift 7s ease-in-out .4s infinite alternate;transform-origin:50% 50%}@keyframes drift{0%{transform:translateY(-3px) rotate(-1deg)}to{transform:translateY(3px) rotate(1deg)}}@media(prefers-reduced-motion:reduce){.sculpture{animation:none!important}}.brand-glyph{display:inline-flex;align-items:center;justify-content:center;background:#ffce50;color:#284f3d;width:34px;height:34px;border-radius:10px;transform:rotate(-7deg);font-size:29px}.scene{border-radius:40% 50% 45% 42%;background:radial-gradient(ellipse at 50% 52%,#ffe7a4 0%,#fff0c8 40%,transparent 70%)}.switch{border-radius:12px;padding-left:10px;padding-right:10px;margin-bottom:3px;border-bottom:0}.switch.on{background:#fff0b4;box-shadow:inset 3px 0 var(--accent)}.switch:nth-of-type(1) .switch-end i{color:#008b74}.switch:nth-of-type(2) .switch-end i{color:#7351e8}.switch:nth-of-type(3) .switch-end i{color:#e87528}.switch:nth-of-type(4) .switch-end i{color:#db426e}.lab h1 em{color:#008b74}.readout{border-top:1px dashed #d8d7c4;margin-top:10px}.lab a[href^=https]{color:#006d5b!important}.coordinate,.axis{color:#5c7559}.lab{--accent:#008b74}.lab .switch-end>span{font-size:9px}.readout-label{font-weight:700}.sculpture{filter:drop-shadow(0px 9px 5px #d9b95e33)}.index-label{margin-top:12px}.switch-number{background:var(--app-color);color:#fff!important;width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transform:rotate(-6deg);flex-shrink:0}.switch-copy strong{color:var(--app-color)}.switch.on .switch-copy strong{color:#24352d}.switch{gap:10px}.switch-end>span{max-width:76px}@media(max-width:340px){.switch-number{width:20px;height:23px}.switch-copy strong{font-size:17px}.switch-end{gap:7px}.switch-end>span{max-width:60px}.switch-copy>span{font-size:10px}}.scene{background:none!important;border-radius:0}.app-illustration{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.scene{height:230px;padding:22px 0 20px}.coordinate{top:2px}.axis{bottom:0}.app-illustration{animation:arrive .3s ease-out}.sculpture{animation:none!important}@media(min-width:750px){.scene{height:400px;padding:25px 0 20px}}@media(max-width:340px){.scene{height:210px}}.scene{height:342px;padding:24px 0 22px;margin-top:10px}.product-scene{height:100%;width:100%;position:relative;isolation:isolate;border-radius:22px;background:#d8efe4;overflow:hidden;color:#008b74}.product-1{background:#e9dffc;color:#7351e8}.product-2{background:#ffe4bd;color:#d97126}.product-3{background:#f8dce4;color:#d73d6b}.scene-orbit{position:absolute;width:270px;height:270px;border:1px solid #ffffff99;border-radius:50%;left:18px;top:10px;box-shadow:0 0 0 25px #ffffff26,0 0 0 65px #ffffff18;transform:rotate(-15deg)}.scene-dot{position:absolute;border-radius:50%;background:currentColor;opacity:.16}.d1{width:52px;height:52px;right:-10px;top:45px}.d2{width:10px;height:10px;left:19px;bottom:52px}.product-phone{width:176px;height:300px;background:#fffdf7;border:5px solid #25382f;border-radius:25px;position:absolute;left:50%;top:20px;margin-left:-88px;transform:rotate(-8deg);box-shadow:11px 16px #24352d18,0 20px 25px #24352d12;padding:9px 10px;overflow:hidden}.product-1 .product-phone{transform:rotate(7deg)}.product-3 .product-phone{transform:rotate(5deg)}.phone-camera{position:absolute;width:48px;height:10px;border-radius:0 0 9px 9px;background:#25382f;top:0;left:59px}.phone-top{display:flex;justify-content:space-between;font:7px Arial;color:#65726b;margin:1px 0 14px}.phone-app{font-size:12px;font-weight:700;letter-spacing:-.4px;padding-bottom:8px;border-bottom:1px solid #ede8de}.phone-app>span{font:6px monospace;float:right;margin-top:4px;color:#69745e}.micro{font:6px monospace;letter-spacing:.07em;margin:13px 0 7px;color:#69745e}.product-phone h2{font-size:19px;font-weight:500;letter-spacing:-.9px;line-height:1.06;margin:0 0 15px;color:#24352d}.poll-answer{position:relative;font-size:7px;color:#30483b;padding:10px 0 16px;border-bottom:1px solid #eee9dd}.poll-answer b{float:right;font-size:9px}.poll-answer i{position:absolute;height:6px;bottom:5px;left:0;background:currentColor;border-radius:4px}.poll-answer:nth-of-type(3) i{opacity:.5}.poll-answer:nth-of-type(4) i{opacity:.25}.ui-footer{font-size:6px;color:#687a6b;margin-top:10px;line-height:1.4}.floating-fragment{position:absolute;z-index:2;background:#fffef7;box-shadow:0 8px 15px #24352d12;border-radius:11px;padding:12px;color:#24352d}.fragment-one{width:140px;left:10px;top:160px;transform:rotate(5deg)}.fragment-kicker{font:6px monospace;letter-spacing:.05em;color:#6a7769;display:block;margin-bottom:5px}.fragment-one b{display:block;font-size:13px;letter-spacing:-.3px}.fragment-one small{font-size:7px;color:#69745e;display:block;margin-top:5px}.fragment-two{right:8px;top:50px;font-size:8px;transform:rotate(8deg);padding:10px;display:flex;align-items:center;gap:5px}.live-dot{width:6px;height:6px;background:#008b74;border-radius:50%;box-shadow:0 0 0 3px #008b7415}.scene-caption{position:absolute;bottom:9px;left:0;right:0;text-align:center;font:6px monospace;letter-spacing:.015em;color:#415844}.chat-date{font:5px monospace;text-align:center;color:#7b7393;margin:11px 0}.bubble{font-size:8px;line-height:1.4;padding:8px;margin:7px 0;border-radius:8px;max-width:95%}.bubble.out{background:#e9dffc;margin-left:12px;border-bottom-right-radius:1px}.bubble.in{background:#f0eee7;margin-right:12px;border-bottom-left-radius:1px}.bubble.done{color:#6745d5;font-weight:700}.calendar-mini{font-size:6px;margin-top:5px}.calendar-mini b{margin-right:5px}.calendar-mini hr{border:0;border-top:1px solid #dedbd1;margin:4px 0}.chat-input{font-size:7px;color:#9a94a2;margin-top:8px;display:flex;justify-content:space-between;border:1px solid #e5dff0;border-radius:15px;padding:6px 8px}.chat-input span{color:#7351e8}.chess-grid{width:142px;height:142px;display:grid;grid-template-columns:repeat(8,1fr);background:#fff0d4;border:3px solid #b06939;box-shadow:0 5px #7f452c22}.chess-grid>span{display:flex;justify-content:center;align-items:center}.chess-grid .dark-square{background:#dfa16a}.chess-grid svg{height:22px;width:18px;color:#553722;filter:drop-shadow(0 1px 0 white)}.move-dot{height:6px;width:6px;border-radius:50%;background:#71442466}.chess-ui h2{margin-bottom:10px}.product-2 .fragment-one{top:187px;left:12px;transform:rotate(-5deg)}.fragment-two svg{height:15px;width:13px;color:#d97126}.session-card{background:#fbe9ed;border-radius:10px;padding:10px}.session-card>span{font:5px monospace;color:#9a6376}.session-card>b{display:block;font-size:11px;color:#47303b;margin:4px 0 9px}.session-card small{font-size:6px;color:#8a596a}.session-dots{display:flex;align-items:center;gap:5px;font-size:13px;color:#d73d6b;margin-bottom:5px}.session-dots i{flex:1;height:2px;background:#eaa5b9}.progress-chart{width:100%;height:60px;margin-top:10px}.product-3 .fragment-one{top:185px;left:9px;transform:rotate(-6deg)}.product-scene{animation:arrive .35s ease-out}.floating-fragment{animation:ui-float 6s ease-in-out infinite alternate}.fragment-two{animation-delay:-3s}@keyframes ui-float{0%{translate:0 -2px}to{translate:0 3px}}@media(min-width:750px){.scene{height:480px;padding:28px 0 24px}.product-phone{width:230px;height:392px;top:24px;margin-left:-115px;padding:14px;transform:rotate(-9deg)}.phone-camera{left:81px;width:58px;height:12px}.phone-top{font-size:8px;margin-bottom:19px}.phone-app{font-size:16px;padding-bottom:12px}.phone-app>span{font-size:8px}.micro{font-size:8px;margin:18px 0 10px}.product-phone h2{font-size:26px;margin-bottom:17px}.poll-answer{font-size:10px;padding:15px 0 23px}.poll-answer b{font-size:12px}.poll-answer i{height:9px;bottom:8px}.ui-footer{font-size:8px;margin-top:13px}.fragment-one{width:180px;padding:16px;left:15px;top:250px}.fragment-one b{font-size:19px}.fragment-one small{font-size:10px}.fragment-kicker{font-size:8px;margin-bottom:8px}.fragment-two{top:80px;right:12px;font-size:11px;padding:14px}.scene-caption{font-size:9px;bottom:12px}.scene-orbit{width:360px;height:360px;top:30px;left:70px}.chat-date{font-size:7px;margin:15px 0}.bubble{font-size:11px;padding:10px;margin:10px 0}.calendar-mini{font-size:9px}.chat-input{font-size:10px;padding:8px}.chess-grid{width:190px;height:190px}.chess-grid svg{width:23px;height:29px}.product-2 .fragment-one,.product-3 .fragment-one{top:285px}.session-card{padding:13px}.session-card>span{font-size:7px}.session-card>b{font-size:15px}.session-card small{font-size:9px}.session-dots{font-size:18px}.progress-chart{height:78px}.switches{align-self:start;padding-top:15px}}@media(max-width:340px){.scene{height:322px}.product-phone{width:164px;margin-left:-82px;left:54%}.fragment-one{width:126px;left:5px;top:171px}.fragment-two{font-size:7px;right:3px;top:54px}.scene-caption{font-size:5px}.chess-grid{width:132px;height:132px}.product-2 .fragment-one,.product-3 .fragment-one{top:187px}}@media(prefers-reduced-motion:reduce){.product-scene,.floating-fragment{animation:none!important}}.product-scene{animation:none}.scene{height:390px}.product-phone{left:58%;top:20px}.fragment-one{top:234px;width:128px;left:10px}.fragment-two{top:34px;right:6px;font-size:7px}.scene-caption{background:#fff9eddd;padding:5px 0;bottom:5px;color:#415844}.product-2 .fragment-one,.product-3 .fragment-one{top:235px}.product-scene .poll-answer{color:#008b74}.scene-orbit{opacity:.8}@media(min-width:750px){.scene{height:480px}.product-phone{left:57%;top:12px}.fragment-one{width:155px;top:287px;left:12px}.fragment-one b{font-size:16px}.fragment-two{top:38px;right:8px;font-size:10px}.product-2 .fragment-one,.product-3 .fragment-one{top:287px}}@media(max-width:340px){.scene{height:365px}.product-phone{left:60%;top:12px}.fragment-one{width:115px;top:218px}.fragment-one b{font-size:11px}.product-2 .fragment-one,.product-3 .fragment-one{top:217px}}.product-phone,.floating-fragment,.product-phone div,.product-phone span,.product-phone small{line-height:1.25}.scene-caption{z-index:4}.fitness-ui h2{font-size:19px;margin-bottom:9px}.fitness-ui .micro{margin:10px 0 7px}.fitness-ui .session-card{padding:9px}.fitness-ui .session-card>b{margin:4px 0 8px}.fitness-ui .progress-chart{height:48px;margin-top:8px}.fitness-ui .ui-footer{margin-top:5px}.fragment-one{font-size:10px}.fragment-one b{line-height:1.2}.phone-app>span{float:none;margin-left:8px}@media(min-width:750px){.fitness-ui h2{font-size:25px;margin-bottom:14px}.fitness-ui .micro{margin:16px 0 10px}.fitness-ui .session-card{padding:12px}.fitness-ui .progress-chart{height:70px;margin-top:12px}}.scene{height:480px}.fragment-one,.product-2 .fragment-one,.product-3 .fragment-one{top:335px;left:12px;width:160px;padding:10px;transform:rotate(-3deg)}.fragment-one b{font-size:13px}.fragment-one small{font-size:8px}.scene-caption{bottom:5px;font-size:7px}.fragment-two{top:12px;right:8px}.product-phone{top:20px}@media(min-width:750px){.scene{height:570px}.product-phone{top:22px}.fragment-one,.product-2 .fragment-one,.product-3 .fragment-one{top:430px;left:16px;width:190px;padding:12px}.fragment-one b{font-size:17px}.fragment-one small{font-size:10px}.scene-caption{font-size:9px}.fragment-two{top:12px}}@media(max-width:340px){.scene{height:475px}.fragment-one,.product-2 .fragment-one,.product-3 .fragment-one{top:335px;width:150px}.fragment-one b{font-size:13px}.scene-caption{font-size:6px}}.fragment-one,.product-2 .fragment-one,.product-3 .fragment-one{padding:8px}.fragment-one .fragment-kicker{margin-bottom:3px}.fragment-one small{margin-top:3px}@media(min-width:750px){.fragment-one,.product-2 .fragment-one,.product-3 .fragment-one{top:420px}}.chess-ui .micro{margin:8px 0 5px}.chess-ui h2{font-size:18px;margin-bottom:8px}.chess-grid{width:124px;height:124px}.chess-ui .ui-footer{margin-top:6px}@media(min-width:750px){.chess-ui h2{font-size:25px}.chess-grid{width:166px;height:166px}.chess-ui .micro{margin:12px 0 8px}.chess-ui .ui-footer{margin-top:8px}}
/* Illustrated scenes: generated original artwork per app */
.scene-art{width:100%;height:100%;object-fit:cover;object-position:center;display:block;user-select:none;-webkit-user-drag:none}
/* Hero default scene + compact phone scene so all four apps fit one screen */
.product-scene.product-hero{background:#fff9ed}
@media(max-width:749.5px){.scene{height:230px;margin-top:6px;padding:10px 0 8px}header{padding:14px 0 10px}.lead{padding:10px 0 4px}.index-label{margin:6px 0 4px}.readout{padding:14px 0 10px;min-height:0}}
@media(max-width:340px){.scene{height:205px}}
@media(max-width:749.5px) and (max-height:720px){.scene{height:168px}}
/* Gentle idle motion for the hero scene (CSS only, no layout shift) */
@media(prefers-reduced-motion:reduce){.product-hero .scene-art{animation:none;transform:none}}
@media(min-width:750px){.product-hero .scene-art{object-fit:contain}}
.hero-stack{position:relative;height:100%;aspect-ratio:3/2;max-width:100%;margin:0 auto}
.hero-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
.hero-arm{animation:hero-offer 4.4s ease-in-out .3s infinite;transform-origin:42.8% 40%;animation-fill-mode:both}
.hero-card{animation:hero-glide 4.4s ease-in-out .3s infinite;transform-origin:48% 30%;animation-fill-mode:both}
.hero-hand{animation:hero-carry 7s ease-in-out .9s infinite;transform-origin:54% 41%;animation-fill-mode:both}
.hero-queen{animation:hero-carry 7s ease-in-out .9s infinite;transform-origin:55.6% 48.5%;animation-fill-mode:both}
.hero-unit{animation:hero-lift 2.6s ease-in-out 1.4s infinite;transform-origin:87.6% 44.9%;animation-fill-mode:both}
.hero-bar1{animation:hero-grow 1.7s ease-in-out 0s infinite alternate;transform-origin:17.4% 49.7%;animation-fill-mode:both}
.hero-bar2{animation:hero-grow 2.1s ease-in-out .5s infinite alternate;transform-origin:20.8% 48.6%;animation-fill-mode:both}
.hero-bar3{animation:hero-grow 2.5s ease-in-out 1s infinite alternate;transform-origin:24.2% 47.7%;animation-fill-mode:both}
@keyframes hero-offer{0%{transform:none}35%{transform:rotate(-10deg) translateY(-1%)}60%{transform:rotate(-10deg) translateY(-1%)}100%{transform:none}}
@keyframes hero-glide{0%{transform:none}35%{transform:translate(5%,-1.8%) rotate(4deg)}60%{transform:translate(5%,-1.8%) rotate(4deg)}100%{transform:none}}
@keyframes hero-carry{0%,8%{transform:translate(0,0)}12%{transform:translate(0,1.4%)}20%{transform:translate(0,-1%)}42%{transform:translate(-3.2%,-0.2%)}50%,58%{transform:translate(-3.2%,0.8%)}66%{transform:translate(-3.2%,-0.2%)}88%{transform:translate(0,-0.6%)}96%,100%{transform:translate(0,0)}}
@keyframes hero-lift{0%{transform:none}30%{transform:translateY(-3.5%) scale(1.015)}55%{transform:translateY(-3.5%) scale(1.015)}85%,100%{transform:none}}
@keyframes hero-grow{0%{transform:scaleY(.55)}100%{transform:scaleY(1.16)}}
@media (prefers-reduced-motion:reduce){.hero-layer{animation:none!important}}