/* Version 2 keeps Twocy's aurora and lets the product carry the scene. */
.concept .cur6 { transition: transform .62s cubic-bezier(.22,.62,.3,1),opacity .2s; filter:drop-shadow(0 1px 2px #0008); width:21px;height:21px; }
.concept .cur6.drag { transition-duration:1.05s; }
.concept .cur6.click svg { transform:scale(.94); }
.concept .w6 { transition:opacity .22s ease,visibility .22s; }
.concept .concept-aurora { opacity:.85; }
.concept .fit6 { background:#09090b; }
.concept .fit6::after { z-index:-1;background:linear-gradient(180deg,#09090b90,transparent 45%,#09090b40),radial-gradient(ellipse at center,transparent 45%,#09090b 100%); }
.demo-controls {display:flex;align-items:center;gap:9px;max-width:100%;margin:22px 0 0;color:#9999a2;font-size:12px;}
.demo-controls>span {margin-right:auto;line-height:1.6;}
.demo-controls button {flex:none;border:1px solid #ffffff17;border-radius:7px;background:#ffffff05;color:#b4b4bd;padding:7px 12px;font:inherit;cursor:pointer;}
.demo-controls button:hover {color:#fff;background:#ffffff0b;}
.demo-controls button:focus-visible,.tab6:focus-visible {outline:2px solid #ff744c;outline-offset:3px;}
.saved-v2 {position:absolute;z-index:90;left:50%;bottom:30px;translate:-50% 0;padding:12px 20px;background:#202022ed;border:1px solid #ffffff1a;box-shadow:0 10px 30px #0006;border-radius:10px;font:13px Inter,sans-serif;color:#eeeeef;animation:save-v2 .2s ease-out both;}
@keyframes save-v2 {from {opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.demo-paused * {animation-play-state:paused!important;}
.concept .keys6.on {opacity:.85;}
.concept .tabs6 {flex-wrap:wrap;}
#w6-reference{left:0;top:0;width:1200px;height:654px;z-index:4;opacity:0;pointer-events:none;}
#w6-reference.front{z-index:12;opacity:1;pointer-events:auto;}
.reference-v2{display:flex;height:615px;background:#242428;font:13px Inter,sans-serif;color:#b4b4bb;}
.reference-v2 aside{width:220px;flex:none;background:#1c1c20;padding:26px 20px;border-right:1px solid #ffffff09;}
.reference-v2 aside b{display:block;color:#eee;font-size:14px;}.reference-v2 aside small{display:block;margin:9px 0 30px;color:#777780;}.reference-v2 aside p{padding:10px;margin:0 -10px;}.reference-v2 aside p.on{background:#ffffff09;border-radius:5px;color:#ddd;}
.reference-canvas{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#ffffff10 1px,transparent 1px);background-size:18px 18px;}
.reference-poster{width:340px;height:440px;background:linear-gradient(180deg,#07070b25,#07070b9e),url(assets/aurora/aurora-neon-b.png) center/cover;padding:30px 34px;box-shadow:0 18px 35px #0005;color:#fff;}
.reference-poster>span{font-weight:800;font-size:23px;letter-spacing:-1px;}.reference-poster i{display:inline-block;width:7px;height:7px;background:#ff5a2c;border-radius:50%;margin-right:7px;}.reference-poster strong{display:block;font-size:43px;line-height:1.12;font-weight:600;letter-spacing:-1.5px;margin:68px 0 26px;}.reference-poster small{font-size:13px;color:#ddd;}.reference-caption{margin-top:18px;font-size:11px;color:#90909b;}
#w6-pdf{left:0;top:0;width:1200px;height:654px;z-index:4;opacity:0;pointer-events:none;background:#363638;}
#w6-pdf.front{z-index:12;opacity:1;pointer-events:auto;}
.pdf-mark{font:600 8px Inter,sans-serif!important;color:#fff!important;background:#c74f47!important;padding:3px;width:auto!important;}
.pdf-tools{height:44px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;background:#29292d;border-bottom:1px solid #ffffff0d;color:#ccc;font-size:12px;}
.pdf-reader{height:570px;display:flex;overflow:hidden;background:#424246;}
.pdf-reader>aside{width:165px;flex:none;padding:22px;background:#303034;border-right:1px solid #ffffff08;}
.pdf-reader>aside>div{width:82px;height:100px;background:#eee;color:#bbb;margin:0 auto 25px;padding:18px 8px;font-size:20px;border-radius:2px;box-shadow:0 2px 4px #0004;}
.pdf-reader>aside>div.on{outline:3px solid #739ef4;}.pdf-reader>aside small{display:block;color:#999;font-size:9px;margin-top:20px;}
.pdf-page{position:relative;width:590px;flex:none;background:#fff;color:#27272a;margin:22px auto 0;padding:35px 50px;box-shadow:0 2px 15px #0003;font:14px/1.65 Inter,sans-serif;}
.pdf-page header{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:13px;font-size:9px;color:#777;letter-spacing:.08em;}.pdf-page h3{font-size:31px;line-height:1.15;letter-spacing:-1px;margin:22px 0 13px;font-weight:600;}.pdf-page .pdf-intro{font-size:11px;color:#999;margin:0 0 23px;}.pdf-page h4{font-size:13px;margin:18px 0 6px;}.pdf-page p{margin:0;}.pdf-page ul{padding-left:18px;font-size:12px;}.pdf-page footer{display:flex;justify-content:space-between;border-top:1px solid #ddd;padding-top:10px;margin-top:25px;font-size:9px;color:#999;}
#pdf-selection.on{background:#bcd5fa;color:#192334;box-shadow:2px 0 #bcd5fa,-2px 0 #bcd5fa;}
.workspace-scenes{display:flex;justify-content:center;gap:5px;margin:17px 0 0;}
.workspace-scenes button{font:12px Inter,sans-serif;color:#85858f;border:1px solid transparent;border-radius:7px;background:transparent;padding:8px 13px;cursor:pointer;}
.workspace-scenes button[aria-pressed="true"]{color:#eee;border-color:#ffffff16;background:#ffffff07;}
.workspace-scenes button:focus-visible{outline:2px solid #ff744c;outline-offset:2px;}
.concept .demo-controls{margin-top:12px;}
@media(max-width:600px){.demo-controls{flex-wrap:wrap;font-size:11px;}.demo-controls>span{flex-basis:100%;}.concept .tab6 kbd{font-size:8px;}.concept .tab6{padding:0 7px;}}
@media(prefers-reduced-motion:reduce){.concept .cur6,.concept .w6{transition:none;}.saved-v2{animation:none;}}




/* Each example has its own context; the wallpaper remains Twocy's aurora. */
.scene-window{left:0;top:0;width:1200px;height:654px;z-index:4;opacity:0;pointer-events:none;background:#18191d}.scene-window.front{z-index:12;opacity:1;pointer-events:auto}
.wa-chat i,.wa-head i{background-image:url(assets/demo/chat-portraits-v2.png)!important;background-size:300% 200%!important;background-position:var(--portrait,0% 0%)!important;color:transparent!important}
.wa-chat i[style*="--c:#e76f51"]{background-image:url(assets/demo/chat-mother-raw.png)!important}
.meeting-icon,.map-icon{font-style:normal;color:#d2d6e2}.meeting-app{height:615px;background:#17181d;color:#e9ebf1;font:14px Inter,sans-serif}.meeting-app>header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:#9296a0;font-size:12px}.meeting-app>header b{color:#dce0e9;font-size:14px;font-weight:500}.meeting-app>header small{margin-left:8px;color:#7d818c}.meeting-app>header i{display:inline-block;width:7px;height:7px;background:#e65d54;border-radius:50%;margin-right:7px}.meeting-content{display:flex;gap:26px;padding:8px 28px 0;height:464px}.meeting-grid{width:760px;flex:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}.meeting-person{position:relative;border-radius:12px;background-image:url(assets/demo/chat-portraits-v2.png);background-size:300% 200%;overflow:hidden}.meeting-person:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#0009)}.meeting-person>span{position:absolute;z-index:1;bottom:15px;left:17px;font-size:13px;text-shadow:0 1px 3px #000}.meeting-person small{font-size:10px;color:#eee;margin-left:8px}.p0{background-position:0 0}.p5{background-position:100% 100%}.p4{background-position:50% 100%}.p3{background-position:0 100%}.meeting-content>aside{padding:23px 12px;flex:1}.meeting-content>aside>small{color:#797e8b;font-size:10px;letter-spacing:.1em}.meeting-content h3{font-size:24px;font-weight:500;letter-spacing:-.7px;margin:18px 0 14px}.meeting-content p{font-size:13px;line-height:1.6;color:#969aa5}.meeting-agenda{display:grid;gap:22px;margin-top:36px;font-size:12px;color:#777e8c}.meeting-agenda .done{color:#869d8e}.meeting-agenda .current{color:#eeeff3}.meeting-content blockquote{font:12px/1.65 Inter,sans-serif;margin:30px 0 0;color:#b9bdc8;border-left:2px solid #656b79;padding-left:14px}.meeting-app>footer{display:flex;justify-content:center;align-items:center;gap:16px;height:90px;color:#afb4c0;font-size:12px}.meeting-app>footer span{padding:12px 16px;border-radius:8px;background:#252830}.meeting-app>footer b{padding:12px 19px;background:#ad4245;color:#fff;border-radius:8px;font-weight:500}
.map-app{display:flex;height:615px;font:13px Inter,sans-serif;background:#eeeae1;color:#26323e}.map-app>aside{width:310px;flex:none;background:#fffefa;padding:25px}.map-search{border:1px solid #dddcd6;border-radius:8px;padding:13px 10px;font-size:11px;color:#7e827e}.map-app h3{font-size:31px;line-height:1.13;font-weight:500;letter-spacing:-1px;margin:30px 0 12px}.map-app aside>p{font-size:12px;color:#858b89;line-height:1.6;margin-bottom:28px}.map-stop{display:flex;gap:13px;align-items:center;margin:23px 0}.map-stop i{width:24px;height:24px;border-radius:50%;background:#e8eef5;color:#4585dc;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600}.map-stop b{display:block;font-size:12px;font-weight:500}.map-stop small{display:block;margin-top:5px;color:#909690;font-size:10px}.map-route{display:flex;align-items:center;gap:12px;border-top:1px solid #e5e5df;padding-top:23px;margin-top:34px}.map-route b{font-size:22px;font-weight:500}.map-route span{font-size:11px;color:#8c938d}.map-area{position:relative;flex:1;overflow:hidden}.map-map{position:absolute;inset:0;background:url(assets/demo/map-route.svg) center/cover}#route-crop{position:absolute;left:85px;top:100px;width:645px;height:270px}.map-chip{position:absolute;left:28px;top:25px;border-radius:10px;padding:14px 20px;background:#fffefa;box-shadow:0 3px 15px #0001;font-size:12px}.map-chip b{margin-left:35px}.map-zoom{position:absolute;bottom:40px;right:24px;background:#fffefa;box-shadow:0 3px 15px #0001;padding:10px 14px;border-radius:6px;font-size:19px}.map-zoom hr{border:0;border-top:1px solid #ddd;margin:8px -8px}.map-area>small{position:absolute;bottom:12px;left:18px;font-size:10px;color:#697a78}
.guide-app{display:flex;height:575px;background:#f3f4ef;color:#29352e;font:14px/1.7 Inter,sans-serif}.guide-app>aside{width:240px;padding:42px 25px;background:#e9ede4;border-right:1px solid #d9dfd3;flex:none}.guide-app>aside>b{font-size:27px;font-weight:600;letter-spacing:-1.5px}.guide-app>aside>small{display:block;font-size:10px;color:#85927d;margin:2px 0 55px}.guide-app>aside>p{font-size:12px;color:#778571;margin:17px 0}.guide-app>aside>.on{color:#315842}.guide-app>article{padding:33px 55px;max-width:800px}.guide-app article>small{font-size:10px;color:#85927d;letter-spacing:.1em}.guide-app h3{font:500 39px/1.12 Georgia,serif;letter-spacing:-1.2px;margin:14px 0}.guide-deck{font-size:13px;color:#8a9386;margin:0 0 27px}.guide-app h4{font-size:14px;font-weight:600;margin:0 0 9px}.guide-app article>p:not(.guide-deck){max-width:590px;font-size:15px}.guide-example{display:flex;gap:12px;align-items:center;background:#e6eade;padding:18px 20px;border-radius:9px;margin:23px 0}.guide-example>span{width:34px;height:34px;background:var(--swatch);border-radius:50%}.guide-example code{font:10px/1.7 monospace;margin-left:20px;color:#819078}.guide-example code b{font-weight:400;color:#3c543e}#guide-selection.on{background:#b8d6c5;box-shadow:3px 0 #b8d6c5,-3px 0 #b8d6c5}.guide-next{color:#7b8975;font-size:12px!important}.concept .cur6{transition:transform .48s cubic-bezier(.22,.62,.3,1),opacity .2s}

.meeting-person{background-size:300% auto}.p0{background-position:0 15%}.p5{background-position:100% 85%}.p4{background-position:50% 85%}.p3{background-position:0 85%}