/* Shared surfaces, controls and motion tokens for the 90 independently mounted demos. */
.lab{width:100%;max-width:360px;min-width:0;color:#eff0fa;--ink:#eff0fa;--muted:#a7a8bd;--panel:#20212d;--line:#ffffff14;--ease:cubic-bezier(.2,.8,.2,1);position:relative;font:14px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}.lab *{box-sizing:border-box}.lab button,.lab input,.lab select{font:inherit}.lab button{color:inherit;cursor:pointer}.lab button:disabled{cursor:default;opacity:.4}.lab h3{font-size:23px;line-height:1.3;margin:12px 0}.lab p{color:var(--muted);font-size:14px;margin:14px 0}.lab small,.l-caption{font:12px/1.5 ui-monospace,monospace;letter-spacing:1px;color:var(--muted)}.lab small{display:block}.lab input:not([type=range]),.lab select{width:100%;padding:12px;border:1px solid #454559;background:#181923;color:var(--ink);border-radius:10px}.lab input[type=range]{width:100%;accent-color:var(--accent);cursor:ew-resize}.lab button:focus-visible,.lab input:focus-visible,.lab [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.lab svg.li{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}.l-btn{display:inline-flex;justify-content:center;align-items:center;gap:7px;border:1px solid #ffffff19;background:#2c2c3c;border-radius:10px;padding:9px 13px;min-height:40px;transition:background .2s,transform .2s}.l-btn:hover{background:#3a394f}.l-btn:active{transform:scale(.96)}.lab button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,#20212c)}.l-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}.l-center{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.l-panel{background:linear-gradient(140deg,#282836,#1c1d28);border:1px solid var(--line);border-radius:16px;padding:20px}.l-status{display:block;min-height:36px;padding-top:13px;color:var(--accent);font-size:12px;line-height:1.6;overflow-wrap:anywhere}.l-range{display:block;margin:12px 0;color:var(--muted);font-size:12px}.l-number{display:block;font:32px/1.5 ui-monospace,monospace;color:var(--accent)}.l-tile{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:1px solid #ffffff14;background:#30303e;border-radius:13px;padding:14px}.l-tile span{font-size:12px}.l-segment{display:flex;gap:6px;margin-bottom:14px}.l-segment .l-btn{flex:1;padding:8px}.selected{border-color:var(--accent)!important}.orb{width:48px;height:48px;border:1px solid #ffffff22;border-radius:50%;display:grid;place-items:center;background:#313143;color:var(--accent);padding:0}.dock{display:flex;gap:9px;align-items:end;background:#242431;border:1px solid #ffffff17;padding:14px;border-radius:22px;margin-top:20px}.dock .l-tile{padding:10px;width:46px;height:52px;transform-origin:bottom;transition:transform .22s var(--ease);position:relative}.dock .l-tile span{position:absolute;top:-30px;white-space:nowrap;opacity:0;transition:opacity .2s}.dock .l-tile:hover span,.dock .l-tile:focus span{opacity:1}.radial{position:relative;height:230px}.radial .orb{position:absolute;left:calc(50% - 24px);top:calc(50% - 24px)}.radial .trigger{z-index:3;background:var(--accent);color:#16151e;transition:transform .4s}.radial .satellite{opacity:0;transform:scale(.4);transition:transform .45s var(--ease),opacity .25s;transition-delay:calc(var(--i)*35ms)}.radial.active .trigger{transform:rotate(45deg)}.radial.active .satellite{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}.command{margin-top:12px;padding:12px}.command [role=listbox]{margin-top:10px}.command [role=option]{width:100%;display:flex;justify-content:space-between;background:none;border:0;padding:10px;border-radius:8px;text-align:left}.command [aria-selected=true]{background:#3e385b;color:var(--accent)}.command kbd{color:#b4adcd}.mega{overflow:hidden;transition:height .4s var(--ease);padding:14px}.mega-item{width:100%;justify-content:start;background:none;border:0;min-height:40px;padding:8px}.mega-item svg{width:16px!important}.crumbs{display:flex;gap:5px;flex-wrap:wrap;margin:20px 0}.crumbs .l-btn{padding:6px 9px;font-size:12px}.avatar-row{display:flex;padding:20px}.avatar{width:56px;height:56px;border-radius:50%;border:3px solid #15151f;margin-left:-8px;background:linear-gradient(140deg,var(--accent),#4c526f);font-weight:600;color:#fff;transition:transform .3s}.avatar:nth-child(2){background:linear-gradient(140deg,#d8a66f,#694f80)}.avatar:nth-child(3){background:linear-gradient(140deg,#66b8ac,#475978)}.avatar:hover{transform:translateY(-8px);z-index:2}.tooltip-bubble{padding:12px 20px;border-radius:12px;background:#eeeaf9;color:#262035;box-shadow:0 10px 30px #0005}.context-zone{position:relative;min-height:240px}.context-pop{position:absolute;width:145px;z-index:4;background:#343244;border:1px solid #ffffff22;border-radius:12px;padding:6px;box-shadow:0 15px 40px #0006;transform-origin:top left}.context-pop button{display:block;width:100%;border:0;background:none;justify-content:start}.pill-nav{position:relative;display:flex;padding:4px;background:#1d1e28;border:1px solid var(--line);border-radius:30px}.pill-nav i{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:25px;background:#45405e;transition:transform .5s var(--ease)}.pill-nav button{flex:1;background:none!important;border:0!important;z-index:1}.big-word{font-size:42px!important}.sidebar-demo{display:flex;min-height:240px;overflow:hidden;border:1px solid var(--line);border-radius:16px}.sidebar-demo nav{width:0;overflow:hidden;flex:none;background:#2b293a;transition:width .45s var(--ease);display:flex;flex-direction:column;gap:5px;padding-block:12px}.sidebar-demo.active nav{width:114px}.sidebar-demo nav button{min-width:100px;background:none;border:0}.sidebar-demo section{padding:18px;min-width:160px;flex:1}.sidebar-demo .toggle{width:40px;padding:8px}.nested{min-height:240px}.nested .entry{display:flex;justify-content:start;width:100%;margin:8px 0;border:0}.nested .back{margin-bottom:10px}
.perspective{perspective:700px;padding:15px}.depth-card{width:100%;height:215px;text-align:left;background:linear-gradient(125deg,#454062,#232a42);border:1px solid #bcb1ff50;border-radius:20px;padding:26px;transform-style:preserve-3d;transition:transform .35s var(--ease);box-shadow:0 25px 40px #0005}.depth-card strong{display:block;font-size:34px;transform:translateZ(35px);margin:25px 0}.depth-card span{display:block;transform:translateZ(50px);font-size:12px;letter-spacing:2px}.holo-card{width:100%;height:245px;border:1px solid #ffffff50;border-radius:22px;padding:26px;background:radial-gradient(circle at var(--px,50%) var(--py,50%),#fff9,transparent 35%),conic-gradient(from 30deg at var(--px,50%) var(--py,50%),#7063a2,#389993,#bf886a,#9b6ca9,#7063a2);display:flex;flex-direction:column;align-items:start;gap:18px;color:white;box-shadow:inset 0 0 45px #ffffff20,0 20px 40px #0004}.holo-card strong{font-size:42px;letter-spacing:6px}.holo-card small{color:#fff9}.holo-card span{font-size:12px}.spot-card{width:100%;height:245px;position:relative;text-align:left;border-radius:20px;border:1px solid #ffffff32;padding:26px;background:radial-gradient(150px circle at var(--x,50%) var(--y,40%),color-mix(in srgb,var(--accent) 30%,#1a1c27),#171923 90%);box-shadow:inset 0 0 24px #ffffff05;transition:border-color .2s}.spot-card h3{font-size:31px}.spot-card:hover,.spot-card:focus{border-color:var(--accent)}.spot-card span{display:flex;gap:10px;align-items:center}.fan{height:240px;position:relative}.fan button{position:absolute;width:116px;height:160px;left:calc(50% - 58px);top:50px;transform:translateX(calc((var(--i) - 1.5)*20px)) rotate(calc((var(--i) - 1.5)*8deg));transform-origin:50% 110%;border:1px solid #ffffff30;background:linear-gradient(calc(var(--i)*30deg),#3b3654,#252331);border-radius:15px;display:flex;flex-direction:column;justify-content:space-between;align-items:start;padding:18px;transition:transform .5s var(--ease);box-shadow:0 10px 30px #0004}.fan:hover button,.fan.active button{transform:translateX(calc((var(--i) - 1.5)*47px)) rotate(calc((var(--i) - 1.5)*13deg))}.fan button.selected{transform:translateX(calc((var(--i) - 1.5)*47px)) translateY(-30px) rotate(calc((var(--i) - 1.5)*13deg));z-index:5;background:#50456b}.fan strong{font:30px ui-monospace,monospace}.fan small{font-size:9px}.card-stack{height:245px;position:relative;padding:20px}.card-stack button{position:absolute;inset:15px 20px 35px;border-radius:18px;border:1px solid #b9adff40;background:linear-gradient(120deg,#46405a,#252738);text-align:left;padding:25px;transform:translateY(calc(var(--i)*16px)) scale(calc(1 - var(--i)*.06));transition:transform .5s var(--ease)}.card-stack button:disabled{opacity:1}.card-stack svg{margin-top:15px}.flip-pass{width:100%;height:235px;background:none;border:0;perspective:800px;padding:0}.flip-inner{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s var(--ease)}.flip-pass.active .flip-inner{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:start;padding:26px;border-radius:18px;border:1px solid #9bd1be66;background:linear-gradient(135deg,#27574e,#182c36);backface-visibility:hidden}.flip-face strong{font-size:25px}.flip-face em{font-size:12px;font-style:normal}.flip-face.back{transform:rotateY(180deg);background:linear-gradient(135deg,#34464f,#182531)}.barcode{height:28px;width:100%;background:repeating-linear-gradient(90deg,#d5e9dd 0 2px,transparent 2px 5px,#d5e9dd 5px 6px,transparent 6px 9px)}.expanding-deck{display:flex;gap:8px;height:240px}.expanding-deck button{flex:1;min-width:44px;border-radius:18px;border:1px solid #ffffff1c;background:linear-gradient(calc(30deg + var(--i)*25deg),#39334d,#202832);padding:15px 8px;display:flex;flex-direction:column;align-items:center;gap:20px;overflow:hidden;transition:flex .6s var(--ease)}.expanding-deck button.active{flex:3.5}.expanding-deck strong{writing-mode:vertical-rl;letter-spacing:4px}.expanding-deck .active strong{writing-mode:horizontal-tb;white-space:nowrap}.expanding-deck span{font-size:12px;opacity:0;width:130px;transition:opacity .2s}.expanding-deck .active span{opacity:1;transition-delay:.2s}.direction-card{height:235px;width:100%;position:relative;overflow:hidden;border:1px solid #ffffff1a;border-radius:18px;background:repeating-linear-gradient(45deg,#272736 0 20px,#242430 20px 40px);font-size:22px}.direction-cover{position:absolute;inset:0;background:#a398d9;color:#1e1c2c;display:flex;flex-direction:column;gap:15px;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.direction-cover b{font-size:21px}.direction-cover small{color:#302b48}.folder-peek{height:245px;position:relative;perspective:700px}.folder-cover{position:absolute;left:15%;right:15%;bottom:5px;height:125px;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#ae9073,#896a53);border:1px solid #dfc5a266;border-radius:8px 18px 18px 18px;transform-origin:bottom;transition:transform .5s;z-index:4}.folder-peek.active .folder-cover{transform:rotateX(-35deg);height:95px}.paper{position:absolute;left:calc(50% - 70px);bottom:15px;width:140px;height:170px;background:#dcdbe8;color:#31313e!important;border:1px solid white;border-radius:8px;padding:14px;transform:translateY(0) rotate(calc((var(--i) - 1)*5deg));transition:transform .5s var(--ease);z-index:calc(3 - var(--i))}.paper:disabled{opacity:1!important}.folder-peek.active .paper{transform:translateY(-60px) translateX(calc((var(--i) - 1)*70px)) rotate(calc((var(--i) - 1)*12deg))}.paper-lines{display:block;height:70px;margin-top:20px;background:repeating-linear-gradient(transparent 0 12px,#77758c44 12px 14px)}.shared-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.shared-card{background:linear-gradient(130deg,#2e3042,#22232f);border:1px solid #ffffff16;border-radius:14px;padding:16px;min-height:95px;display:flex;flex-direction:column;align-items:start;gap:8px}.shared-card.active{grid-column:span 2;min-height:180px;background:#393148}.shared-card span{font-size:13px;text-align:left;color:#c6bedb}
.swipe-area{height:215px;padding:8px 25px;overflow:hidden}.swipe-card{height:195px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #bcb2ee44;border-radius:20px;background:linear-gradient(130deg,#484366,#252b3e);position:relative;cursor:grab;transition:transform .35s var(--ease)}.swipe-card:active{transition:none;cursor:grabbing}.decision{position:absolute;top:20px;right:20px;color:#a8efcc}.reorder-list{display:flex;flex-direction:column;gap:10px}.reorder-row{display:flex;align-items:center;gap:10px;background:#242634;border:1px solid #ffffff1a;border-radius:12px;padding:12px}.reorder-row>span:nth-child(2){flex:1}.reorder-row button{padding:4px;min-height:30px;width:28px}.grip{cursor:grab;font-size:26px;color:#a8a4bf;touch-action:none}.dragging{background:#40394e;border-color:var(--accent)}.sheet-scene{height:250px;position:relative;overflow:hidden;border-radius:18px;background:radial-gradient(ellipse at 30% 25%,#456358,#252d3f);padding:18px}.snap-sheet{position:absolute;inset:30px 10px 0;background:#30303e;border:1px solid #ffffff22;border-radius:20px 20px 0 0;padding:0 18px;transition:transform .45s var(--ease);transform:translateY(140px)}.sheet-handle{width:100%;height:30px;border:0;background:none;display:grid;place-items:center;cursor:ns-resize!important}.sheet-handle i{width:36px;height:4px;border-radius:4px;background:#9b98ac}.snap-sheet h3{font-size:18px}.snap-sheet p{font-size:12px;border-top:1px solid #ffffff12;padding-top:10px}.elastic-track{height:8px;border-radius:10px;background:linear-gradient(90deg,#525064,var(--accent));position:relative;width:90%;margin-top:20px}.elastic-thumb{position:absolute;top:-13px;width:34px;height:34px;border:4px solid #fff9;border-radius:50%;background:var(--accent);box-shadow:0 5px 15px #0005;transition:transform .35s var(--ease);padding:0}.compare{position:relative;height:210px;border-radius:15px;overflow:hidden;cursor:ew-resize}.compare-layer{position:absolute;inset:0;background:#272833;padding:24px}.compare-layer h3{font:700 34px/1 ui-monospace,monospace}.compare-layer.after{background:linear-gradient(135deg,#a49ad3,#5c719a);color:#191927}.compare-layer.after small,.compare-layer.after p{color:#262637}.compare-line{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none}.compare-line:after{content:'↔';position:absolute;top:45%;left:-15px;width:32px;height:32px;border-radius:50%;background:white;color:#333;display:grid;place-items:center}.confirm-track{height:54px;width:100%;position:relative;overflow:hidden;border:1px solid #ffffff1c;border-radius:30px;background:#222633;display:grid;place-items:center}.confirm-track>span{z-index:1;font-size:13px}.confirm-track>i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--accent) 30%,transparent);border-radius:30px;transition:width .35s}.confirm-track button{position:absolute;top:3px;left:3px;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--accent);color:#222;z-index:2;transition:transform .35s var(--ease)}.confirm-track button:active{transition:none}.marquee-window{overflow:hidden;background:#23232f;border:1px solid #ffffff1a;border-radius:16px;padding:60px 0;cursor:grab}.marquee-strip{font:600 45px/1.2 ui-monospace,monospace;white-space:nowrap;width:max-content;color:var(--accent)}.swipe-row{position:relative;border-radius:14px;overflow:hidden;margin-top:45px}.swipe-actions{position:absolute;inset:0;display:flex;align-items:stretch;justify-content:end;background:#554251}.swipe-actions button{border:0;border-radius:0;width:69px;padding:8px}.swipe-actions .archive{background:#825365}.swipe-front{position:relative;display:flex;align-items:center;gap:12px;padding:20px;background:#30323e;transition:transform .35s var(--ease);min-height:98px}.swipe-front>span{flex:1}.swipe-front small{font-size:11px;letter-spacing:0;margin-top:5px}.swipe-front .reveal{background:transparent;border:0;font-size:25px}.swipe-row+.l-btn{margin-top:18px}.split-pane{display:grid;grid-template-columns:50fr 12px 50fr;min-height:230px;border-radius:14px;overflow:hidden;border:1px solid #ffffff22}.split-pane section{min-width:0;padding:18px 10px;background:#282636;overflow-wrap:anywhere}.split-pane section:last-child{background:#202d35}.split-handle{background:#454257;border:0;padding:0;cursor:ew-resize!important}.split-pane h3{font-size:20px}.split-pane p{font-size:12px}.pull-zone{position:relative;min-height:215px;padding-top:40px}.pull-indicator{position:absolute;top:2px;left:0;right:0;text-align:center;color:var(--accent)}.pull-zone .l-panel{transition:transform .4s}.pull-zone.loading .pull-indicator{animation:lab-spin 1s linear infinite}
.float-field{position:relative;margin:30px 0 10px;border:1px solid #535064;border-radius:12px;transition:border-color .25s,box-shadow .25s}.float-field input{border:0!important;padding:22px 14px 10px!important;background:none!important}.float-field span{position:absolute;top:17px;left:14px;pointer-events:none;transition:transform .25s,top .25s,font-size .25s;color:var(--muted)}.float-field input:focus+span,.float-field input:not(:placeholder-shown)+span{top:4px;font-size:11px;color:var(--accent)}.float-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #b2a0ff18}.float-field.invalid{border-color:#ee8e98}.float-field.valid{border-color:#90d4b4}.field-message{min-height:44px}.otp{display:flex;gap:7px;margin:35px 0}.otp input{width:calc((100% - 35px)/6)!important;height:58px;padding:5px!important;text-align:center;font:24px ui-monospace,monospace!important;transition:border-color .3s,transform .3s}.otp input:focus{transform:translateY(-4px);border-color:var(--accent)}.otp.complete input{border-color:#8ed9b8;background:#234038!important}.tag-box{background:#1c1d28;border:1px solid #454154;border-radius:14px;padding:12px}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.tag{border:1px solid #c2b7ec44;border-radius:30px;background:#423850;color:#e5d5ff;padding:7px 11px;font-size:13px}.tag-box input{background:none!important;border:0!important;padding:5px!important}.range-chart{display:flex;align-items:end;gap:4px;height:90px}.range-chart i{flex:1;background:#373544;border-radius:3px 3px 0 0;transition:background .3s}.range-chart i.active{background:var(--accent)}.dial{width:150px;height:150px;position:relative;border:1px solid #ffffff2c;border-radius:50%;background:radial-gradient(circle at 40% 30%,#484555,#242531);box-shadow:0 15px 30px #0005,inset 0 0 0 12px #ffffff04;padding:0}.dial i{position:absolute;inset:12px;transform:rotate(var(--angle));pointer-events:none}.dial i:before{content:'';width:4px;height:18px;position:absolute;top:0;left:calc(50% - 2px);background:var(--accent);border-radius:4px}.dial b{font:30px ui-monospace,monospace}.theme-scene{padding:25px;border-radius:20px;min-height:240px;background:linear-gradient(130deg,#b99769,#ddbf86);color:#272121;display:flex;flex-direction:column;align-items:center;gap:20px;transition:background .6s,color .6s}.theme-scene small{color:inherit}.theme-scene.night{background:linear-gradient(130deg,#242a49,#4c4870);color:#f0eaff}.theme-switch{width:112px;height:56px;border:1px solid #ffffff44;border-radius:30px;position:relative;padding:4px;background:#ffffff22}.theme-switch span{position:absolute;top:4px;left:4px;width:46px;height:46px;background:#f3d891;color:#6d5537;display:grid;place-items:center;border-radius:50%;transition:transform .5s var(--ease),background .5s}.night .theme-switch span{transform:translateX(56px);background:#c7c5ec;color:#575778}.calendar-title{font-size:13px;color:var(--muted);margin-bottom:16px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid button{height:34px;min-height:34px;padding:0;border:0;background:#262733;border-radius:5px;font-size:12px;transition:background .25s,transform .25s}.calendar-grid .in-range{background:#514569}.calendar-grid .endpoint{border-radius:50%;background:var(--accent);color:#181822;transform:scale(1.06)}.dropzone{display:flex;flex-direction:column;align-items:center;gap:15px;padding:32px 14px;border:1px dashed #68617c;border-radius:18px;min-height:210px;text-align:center;background:#20212c;cursor:pointer;transition:transform .3s,background .3s}.dropzone svg{width:38px!important;height:38px!important;color:var(--accent)}.dropzone span{font-size:12px;color:var(--muted)}.dropzone.active{transform:scale(1.03);background:#3c344b;border-color:var(--accent)}.file-result{font-size:12px;color:var(--accent);padding-top:14px;overflow-wrap:anywhere}.color-preview{height:135px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:15px;color:white;box-shadow:inset 0 0 35px #ffffff11}.color-preview strong{font-size:13px;letter-spacing:2px}.step-dots{display:flex;gap:8px;margin:10px 0 22px}.step-dots i{height:5px;flex:1;background:#3b384a;border-radius:5px;transition:background .3s}.step-dots i.active{background:var(--accent)}.step-content{min-height:150px}.step-content h3{font-size:22px}.toast-stack{height:210px;position:relative;margin-top:16px}.toast-item{position:absolute;left:0;right:0;top:calc(var(--i)*12px);z-index:calc(5 - var(--i));display:flex;align-items:center;gap:12px;background:#373544;border:1px solid #bfb3e22c;padding:18px;border-radius:13px;transform:scale(calc(1 - var(--i)*.05));transition:top .4s var(--ease),transform .4s;box-shadow:0 8px 15px #0003}.toast-stack:hover .toast-item,.toast-stack:focus-within .toast-item{top:calc(var(--i)*55px);transform:scale(1)}.toast-item span{font-size:12px;flex:1}.toast-item svg{color:#99d5b4}.toast-item button{border:0;background:none;color:#ddd;font-size:18px}.undo-row{display:flex;align-items:center;gap:12px;margin:20px 0}.undo-row span{flex:1}.undo-row button{font-size:12px;padding:8px}.undo-bar{position:relative;background:#373347;border:1px solid #9e8edb55;border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;margin-bottom:16px}.undo-bar i{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);transform-origin:left}.hold-btn{width:150px;height:150px;border:0;border-radius:50%;background:conic-gradient(var(--accent) var(--progress,0deg),#353442 0);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.hold-btn:before{content:'';position:absolute;inset:5px;border-radius:50%;background:#242531}.hold-btn>*{position:relative}.heart-btn{width:86px;height:86px;border:1px solid #ffffff22;background:#302534;border-radius:30px;display:grid;place-items:center;z-index:2}.heart-btn svg{width:37px!important;height:37px!important;stroke:#e99aad!important}.heart-btn.active svg{fill:#e99aad!important}.burst-zone{position:relative}.particle{position:absolute;top:90px;left:50%;width:7px;height:7px;background:#e9a0c3;border-radius:50%;pointer-events:none}.like-count{font:25px ui-monospace,monospace}.stages{display:flex;flex-direction:column;gap:13px;margin:20px 0}.stages>div{display:flex;gap:12px;padding:12px;border:1px solid #ffffff11;border-radius:12px;align-items:center;background:#232431;transition:background .4s}.stages i{width:20px;height:20px;border:2px solid #656075;border-radius:50%}.stages .active{background:#383248}.stages .active i{border-top-color:var(--accent);animation:lab-spin 1s linear infinite}.stages .done i{background:#88c9a7;border-color:#88c9a7}.download-ring{width:135px;height:135px;border-radius:50%;background:conic-gradient(var(--accent) var(--progress,0deg),#363442 0);display:grid;place-items:center;position:relative}.download-ring:before{content:'';position:absolute;inset:7px;background:#1f202b;border-radius:50%}.download-ring b{position:relative;font:26px ui-monospace,monospace}.island-space{height:175px;display:flex;align-items:center;justify-content:center}.island{background:#08090d;border:1px solid #45424e;border-radius:42px;width:125px;height:42px;display:flex;align-items:center;justify-content:center;gap:14px;overflow:hidden;transition:width .6s var(--ease),height .6s var(--ease);white-space:nowrap}.island svg{color:var(--accent)}.island span{font-size:13px}.island small{font-size:10px;letter-spacing:0}.mini-bars{display:flex;align-items:center;gap:3px;height:30px}.mini-bars i{height:22px;width:3px;background:var(--accent);animation:lab-wave .7s infinite alternate}.mini-bars i:nth-child(2){animation-delay:.2s}.mini-bars i:nth-child(3){animation-delay:.4s}.skeleton-card{height:215px;position:relative}.skeleton{background:linear-gradient(100deg,#333342 30%,#484757 50%,#333342 70%);background-size:240% 100%;animation:lab-shimmer 1.7s linear infinite;border-radius:7px}.avatar-placeholder{width:48px;height:48px;border-radius:14px;margin-bottom:20px}.skeleton.line{height:12px;margin-top:15px;width:90%}.skeleton.short{width:60%}.skeleton-card+.l-btn{margin-top:16px}.confetti-zone{position:relative;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse,#343145,#1b1d28);height:240px}.confetti-zone>svg{width:42px!important;height:42px!important;color:var(--accent)}.confetto{position:absolute;left:50%;top:55%;width:7px;height:11px;pointer-events:none}.save-panel{margin-bottom:20px;transition:border-color .3s}.save-toggle{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid #ffffff22;background:#353344}.lab label>select{margin-top:8px}
.mono-title{font:700 37px/1.2 ui-monospace,monospace!important;letter-spacing:2px}.split-title{display:flex;gap:3px;perspective:500px;overflow:hidden;padding:15px 0;font-size:36px!important}.split-title span{display:inline-block;transform-origin:bottom}.word-window{height:65px;width:104px;overflow:hidden;background:#403650;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:width .45s var(--ease)}.word-window strong{font-size:35px;display:block;white-space:nowrap;color:var(--accent)}.type-output{min-height:120px;padding:24px 5px;font-size:24px}.type-output i{display:inline-block;height:25px;width:2px;background:var(--accent);vertical-align:middle;animation:lab-blink 1s steps(2) infinite}.proximity{height:200px;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;letter-spacing:0}.proximity span{display:inline-block;transition:transform .2s,opacity .2s;opacity:.6;transform-origin:bottom}.text-mask{position:relative;height:185px}.text-mask h3{position:absolute;inset:0;margin:0;padding:15px;font:800 45px/1.2 ui-monospace,monospace;color:#393b4a}.text-mask .mask-layer{color:var(--accent);clip-path:circle(64px at 50% 50%)}.rolling-digits{display:flex;justify-content:center;gap:7px;padding:35px 0}.digit-window{height:58px;width:54px;overflow:hidden;background:#2a2738;border:1px solid #ffffff22;border-radius:10px}.digit-window>div{transition:transform .7s cubic-bezier(.22,.8,.2,1)}.digit-window span{display:grid;place-items:center;height:58px;font:42px/1 ui-monospace,monospace;color:var(--accent)}.focus-words{position:relative;display:flex;justify-content:space-between;margin:55px 0 35px}.focus-words button{border:0;background:none;padding:14px 10px;font-size:24px;filter:blur(1.5px);color:#797387;transition:filter .3s,color .3s;z-index:1}.focus-words button.active{filter:none;color:#eae5fc}.focus-words i{position:absolute;top:0;border:1px solid var(--accent);border-radius:7px;transition:left .45s var(--ease),width .45s var(--ease);box-shadow:0 0 20px #9d8bdb18}.stroke-heading{height:155px;position:relative;display:grid;place-items:center}.stroke-heading strong{position:absolute;font:800 clamp(38px,4vw,62px)/1 ui-monospace,monospace;-webkit-text-stroke:1px var(--accent);color:transparent}.stroke-heading strong:last-child{color:var(--accent);clip-path:inset(0 60% 0 0)}.reflow-copy{min-height:225px;display:flex;flex-wrap:wrap;align-content:center;gap:10px 12px;width:100%;transition:width .4s;font-size:29px;line-height:1.5}.reflow-copy span{display:inline-block}.reflow-copy span:nth-child(3n){color:var(--accent)}.reflow-copy.compact{width:65%;font-size:29px;gap:8px}
.scroll-lab{height:270px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) #242430;border-radius:14px;background:#1a1c28;position:relative}.scroll-section{min-height:200px;padding:24px 20px;border-bottom:1px solid #ffffff0c}.scroll-section h3{font-size:24px}.scroll-section p{font-size:14px}.reading-track{height:25px;position:sticky;top:0;background:#242532;z-index:3}.reading-track i{display:block;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}.reading-track b{font:11px ui-monospace,monospace;padding:2px 10px;display:block;color:var(--accent)}.story-scroll{display:flex}.story-pin{position:sticky;top:0;width:38%;height:270px;flex:none;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(140deg,#615185,#293244);filter:hue-rotate(var(--hue,0deg));transition:filter .4s}.story-pin strong{font:48px ui-monospace,monospace}.story-pin small{font-size:10px;color:#ccc1de}.story-copy{width:62%}.story-copy .scroll-section{height:200px;padding:18px 14px}.story-copy h3{font-size:20px}.story-copy p{font-size:12px}.scroll-stack{padding:15px}.scroll-stack section{position:sticky;top:calc(var(--i)*9px + 5px);height:155px;margin-bottom:12px;background:linear-gradient(calc(var(--i)*40deg),#564466,#253440);border:1px solid #c6b9e333;border-radius:16px;padding:18px;transform-origin:top center}.scroll-stack section svg{float:right;width:34px!important;height:34px!important}.stack-spacer{height:120px}.horizontal-journey,.parallax-scroll,.zoom-scroll{height:265px}.journey-pin,.parallax-pin,.zoom-pin{height:265px;position:sticky;top:0;overflow:hidden}.journey-track{height:100%;width:400%;display:flex}.journey-track>div{width:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(130deg,#3e3954,#232b39);gap:20px;border-right:1px solid #ffffff22}.journey-track>div:nth-child(even){background:linear-gradient(130deg,#304847,#24283d)}.journey-track svg{height:42px!important;width:42px!important;color:var(--accent)}.journey-spacer{height:550px}.parallax-pin{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}.parallax-grid{position:absolute;inset:-40px;background:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:25px 25px}.parallax-pin strong{font:700 54px ui-monospace,monospace;position:relative;color:#a0a1c5}.parallax-chip{position:relative;padding:18px;background:#534967;border:1px solid #cfbceb44;border-radius:15px;font-size:12px;color:#e7d6ff;box-shadow:0 20px 40px #0005}.highlight-scroll{padding:18px}.highlight-scroll>p{font-size:27px;line-height:1.85;padding-top:30px;color:#f0eaff}.highlight-scroll span{transition:opacity .1s}.path-scroll{padding:15px 25px}.path-scroll svg{width:100%;height:540px;fill:none}.path-bg{stroke:#383344;stroke-width:4}.path-line{stroke:var(--accent);stroke-width:4;stroke-linecap:round}.path-scroll circle{fill:#282635;stroke:var(--accent);stroke-width:3}.path-scroll>span{display:block;font-size:12px;color:var(--muted);padding-bottom:30px}.zoom-pin{display:grid;place-items:center}.zoom-window{height:230px;width:100%;background:linear-gradient(140deg,#5e557e,#2c3b50);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:25px;transform-origin:center}.zoom-window strong{font-size:42px;line-height:1.1}.velocity-line{font:800 36px/1.2 ui-monospace,monospace;padding:25px 14px;white-space:nowrap;color:var(--accent);transition:transform .2s}.velocity-line:nth-child(even){color:#737186}.chapter-nav{display:flex;gap:5px;margin-bottom:8px}.chapter-nav button{flex:1;font-size:12px;padding:7px}.chapter-scroll{height:220px}.chapter-scroll .scroll-section{height:200px}.chapter-scroll:after{content:'';display:block;height:20px}
.chart-value{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.chart-value b{font:30px ui-monospace,monospace;color:var(--accent)}.line-chart{width:100%;height:140px;overflow:visible;background:repeating-linear-gradient(0deg,transparent 0 34px,#ffffff0a 34px 35px);touch-action:pan-y}.line-chart path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.line-chart line{stroke:#a9a1bf;stroke-dasharray:3 3}.line-chart circle{fill:var(--accent);stroke:#20222d;stroke-width:2;transition:cx .12s,cy .12s}.rank-chart{display:flex;flex-direction:column;gap:15px;margin:20px 0}.rank-chart>div{display:flex;align-items:center;gap:10px;height:28px}.rank-chart span{width:30px;font-size:12px}.rank-chart i{display:block;height:20px;background:linear-gradient(90deg,#514969,var(--accent));border-radius:3px 8px 8px 3px;transition:width .6s}.rank-chart b{font:12px ui-monospace,monospace}.donut-wrap{width:170px;height:170px;position:relative;margin:auto;display:grid;place-items:center}.donut-wrap svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.donut-wrap circle{fill:none;stroke:var(--accent);stroke-width:9;transition:stroke-width .3s;cursor:pointer}.donut-wrap circle:nth-child(2){stroke:#6dadad}.donut-wrap circle:nth-child(3){stroke:#c69976}.donut-wrap b{font:27px ui-monospace,monospace}.brush-chart{height:130px;position:relative;display:flex;align-items:end;gap:3px;cursor:crosshair}.brush-chart i{flex:1;background:#3b3a48;transition:background .2s;border-radius:2px}.brush-chart i.active{background:var(--accent)}.brush-box{position:absolute;top:0;bottom:0;border:1px solid #d8ccff;background:#b9a2ff15;pointer-events:none;border-radius:3px}.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:8px 0}.heatmap button{aspect-ratio:1;min-height:20px;max-height:31px;border:1px solid #ffffff0c;border-radius:5px;background:color-mix(in srgb,var(--accent) calc(var(--level)*100%),#222633);transition:transform .2s,border-color .2s}.heatmap button:hover{transform:scale(1.18);border-color:var(--accent)}.heat-detail{padding:12px;margin-top:12px;font-size:12px}.metric strong{display:block;font:46px ui-monospace,monospace;letter-spacing:-2px;margin:10px 0;color:var(--accent)}.metric-spark{height:75px;display:flex;align-items:end;gap:5px}.metric-spark i{flex:1;background:linear-gradient(var(--accent),#45405d);border-radius:4px 4px 0 0;transition:height .7s var(--ease)}.timeline{position:relative;display:flex;justify-content:space-between;margin:25px 12px;height:35px}.timeline:before,.timeline>i{content:'';position:absolute;height:3px;left:0;right:0;top:16px;background:#363341}.timeline>i{right:auto;width:0;background:var(--accent);transition:width .5s}.timeline button{position:relative;width:34px;height:34px;border:1px solid #625c73;border-radius:50%;background:#292733;font:12px ui-monospace,monospace}.timeline button.active{background:var(--accent);color:#24202c}.timeline-detail{min-height:150px}.treemap{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:5px;height:195px;margin-top:12px}.treemap button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(calc(var(--i)*45deg),#60516e,#334551);border:1px solid #ffffff25;border-radius:10px;font-size:18px}.treemap small{color:#d5cbdc}.scatter{width:100%;height:175px;background:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:30px 30px}.scatter circle{fill:var(--accent);filter:hue-rotate(calc(var(--i)*50deg));transition:opacity .35s,r .35s;cursor:pointer}.motion-table{width:100%;border-collapse:collapse;margin:15px 0}.motion-table th,.motion-table td{padding:13px 6px;text-align:left;border-bottom:1px solid #ffffff12;font-size:13px}.motion-table th button{border:0;background:none;color:var(--accent);padding:0}.motion-table td i{display:inline-block;height:6px;background:var(--accent);border-radius:3px;margin-right:8px}
.coverflow{height:215px;position:relative;perspective:650px;overflow:hidden}.coverflow button{position:absolute;top:25px;left:calc(50% - 68px);width:136px;height:170px;border:1px solid #b8b2ce55;border-radius:15px;background:linear-gradient(calc(var(--i)*35deg),#55506e,#253644);display:flex;flex-direction:column;align-items:start;justify-content:space-between;padding:18px;transition:transform .6s var(--ease),opacity .4s}.coverflow small{font-size:9px}.coverflow strong{font:20px ui-monospace,monospace}.orbit-select{width:220px;height:235px;position:relative;margin:auto;display:grid;place-items:center}.orbit-select strong{font-size:23px;color:var(--accent)}.orbit-ring{position:absolute;left:25px;right:25px;top:32px;bottom:32px;border:1px dashed #a398c944;border-radius:50%;transition:transform .65s var(--ease)}.orbit-ring button{position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:1px solid #aaa0c944;background:#333044;display:grid;place-items:center;transform:rotate(calc(var(--i)*60deg)) translateY(-85px) rotate(calc(var(--i)*-60deg));transition:transform .65s var(--ease)}.cube-scene{height:195px;perspective:600px;display:grid;place-items:center}.cube{position:relative;width:160px;height:160px;transform-style:preserve-3d;transform:translateZ(-80px);transition:transform .8s var(--ease)}.cube>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #b4a8db55;background:linear-gradient(135deg,#48405c,#243742);transform:rotateY(calc(var(--i)*90deg)) translateZ(80px);backface-visibility:hidden}.cube small{font-size:10px}.magnetic-field{display:grid;grid-template-columns:repeat(9,1fr);gap:15px;padding:20px 10px;height:205px;align-items:center;touch-action:none}.magnetic-field i{height:2px;width:19px;border-radius:2px;background:var(--accent);transition:transform .18s,opacity .18s;opacity:.65}.spring-canvas{height:235px;position:relative;overflow:hidden;background:radial-gradient(ellipse,#333147,#191d28);border-radius:16px;cursor:crosshair;touch-action:none}.spring-canvas strong{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:700 30px/1.3 ui-monospace,monospace;color:#a6a0c3}.spring-dot{position:absolute;top:-12px;left:-12px;width:24px;height:24px;border-radius:50%;background:#cec1ff;box-shadow:0 0 25px #baa6ff99;mix-blend-mode:screen;pointer-events:none}.spring-canvas+.l-btn{margin-top:12px}.ripple-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:20px 0}.ripple-grid button{aspect-ratio:1;border:1px solid #ffffff12;border-radius:7px;background:#242731;padding:0}.bezier-editor{height:180px;width:100%;position:relative;background:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:24px 24px;border-radius:12px}.bezier-editor svg{width:100%;height:100%;overflow:visible}.bezier-editor path{fill:none}.bezier-editor .curve{stroke:var(--accent);stroke-width:3}.bezier-editor .guide{stroke:#a2a4bc;stroke-width:1;stroke-dasharray:4 3}.bezier-editor .control{position:absolute;width:17px;height:17px;border-radius:50%;padding:0;background:#e4c499;border:2px solid #24212d;transform:translate(-50%,-50%);cursor:grab}.bezier-editor .p2{background:#8acac3}.bezier-run{height:24px;position:relative;margin:18px 0;background:#282737;border-radius:20px}.bezier-run i{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--accent)}.path-follower{width:100%;height:175px}.path-follower>path{fill:none;stroke:#5e5974;stroke-width:2;stroke-dasharray:5 4}.path-follower g path{fill:var(--accent);stroke:none}.spring-track{height:100px;position:relative;margin:25px 8px;background:linear-gradient(transparent 49%,#5b536b 49% 51%,transparent 51%)}.spring-track i{position:absolute;top:32px;width:36px;height:36px;border-radius:12px;background:var(--accent);box-shadow:0 8px 20px #0004}.spring-track button{position:absolute;right:0;top:29px;width:44px;height:44px;background:none;border:1px dashed #b6acd0;border-radius:50%;font-size:11px}.tilt-scene{height:205px;perspective:600px;display:grid;place-items:center}.tilt-grid{display:grid;grid-template-columns:repeat(3,50px);gap:10px;transform-style:preserve-3d;transform:rotateX(25deg) rotateY(-15deg);transition:transform .3s}.tilt-grid button{height:50px;display:grid;place-items:center;background:linear-gradient(135deg,#504761,#2b3b46);border:1px solid #c5bbda44;border-radius:10px;box-shadow:0 8px 0 #151d29;transition:transform .35s,background .35s}.tilt-grid button:hover,.tilt-grid button.selected{transform:translateZ(25px);background:#78678c}
@keyframes lab-spin{to{transform:rotate(360deg)}}@keyframes lab-wave{to{transform:scaleY(.35)}}@keyframes lab-shimmer{to{background-position:-240% 0}}@keyframes lab-blink{to{opacity:0}}@media(max-width:420px){.lab h3{font-size:21px}.proximity{font-size:32px}.focus-words button{font-size:21px}.dock{gap:5px;padding:9px}.dock .l-tile{width:41px}.fan button{width:100px;left:calc(50% - 50px)}.mono-title{font-size:30px!important}.split-title{font-size:30px!important}}
@media(prefers-reduced-motion:reduce){.lab *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.reduce-motion .lab *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.lab [hidden]{display:none!important}