/* Volume 02 — more motion, more useful controls */
.source-strip{max-width:1250px;margin:-36px auto 44px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:10px;color:#89907e}.source-strip button{border:1px solid #d5ddca;border-radius:20px;background:#eef1e6;color:#68775a;padding:9px 13px;font-size:10px}.source-strip button:hover{background:#dfe8d2}.source-strip a{margin-left:auto;text-decoration:underline;text-underline-offset:3px}.filters{flex-wrap:wrap}.filters button{padding:10px}.toolbar{align-items:start}.search{flex-shrink:0;margin-top:2px}.source-badge{display:inline-block;font-size:8px;color:#ae7148;margin-left:6px}.new-tag{background:#fbe7da!important;color:#b16a40!important}.darkhero{background:#090e19}.tech-grid{position:absolute;inset:0;background-image:linear-gradient(#7299cb13 1px,transparent 1px),linear-gradient(90deg,#7299cb13 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse,#000,transparent)}.tech-glow{position:absolute;width:180px;height:180px;border-radius:50%;background:#2467f4;filter:blur(65px);opacity:.5;animation:techGlow 7s ease-in-out infinite alternate}.darkhero em{font-style:normal;color:#9abfff}.darkhero .demo-word{font-size:32px}.grain{background:#d5ceba;color:#3e4135}.grain-color{position:absolute;inset:-30%;background:conic-gradient(from 20deg,#d8b798,#e4dfc5,#85978e,#d2b1a4,#d8b798);filter:blur(20px);animation:grainTurn 30s linear infinite}.grain-noise{position:absolute;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23noise)'/%3E%3C/svg%3E");mix-blend-mode:multiply}.grain .stage-label,.grain .stage-prompt,.grain .demo-kicker{color:#46514490}.grain .demo-word{font-family:Georgia,serif;font-style:italic}.meteors{background:radial-gradient(ellipse at top,#1a2e44,#0d121d)}.meteor{position:absolute;width:100px;height:1px;background:linear-gradient(90deg,transparent,#d2eaff);left:-100px;top:20%;transform:rotate(30deg);animation:shoot 5s linear infinite;box-shadow:0 0 8px #b3dcf7}.meteor.m2{top:6%;animation-delay:-2s;animation-duration:7s}.meteor.m3{top:52%;animation-delay:-4s;animation-duration:9s}.meteors .demo-word{font-size:29px}.orbital{background:#14211d}.orbit-demo{position:relative;width:190px;height:190px;display:grid;place-items:center}.orbit-core{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:40px;color:#dbebbf;background:#90aa6420;box-shadow:0 0 30px #93b56720}.orbit-line{position:absolute;inset:25px;border:1px solid #91b07950;border-radius:50%;animation:orbit 9s linear infinite}.orbit-line i{position:absolute;width:11px;height:11px;top:12px;left:12px;background:#c0d79b;border-radius:50%;box-shadow:0 0 12px #b7d79070}.orbit-line.second{inset:5px;animation-duration:15s;animation-direction:reverse}.orbit-line.second i{width:7px;height:7px;background:#a8c5ce;top:22px}.orbit-line.third{inset:43px;animation-duration:5s}.orbit-line.third i{width:6px;height:6px;background:#dfaf86;top:12px;left:5px}.blurtype{background:#e6e9df;color:#384a33}.blurtype .stage-label,.blurtype .stage-prompt{color:#748066}.focus-text{font-size:29px;font-weight:450;letter-spacing:-1px;animation:focusText 6s ease-in-out infinite}.blurtype small{display:block;margin-top:15px;font-size:7px;letter-spacing:2px;color:#929d86}.wordrotate{background:#192b39}.rotating-copy{font-size:29px;color:#acc7d7;font-weight:400;line-height:1.35}.word-window{height:42px;overflow:hidden}.word-reel{animation:wordReel 9s var(--ease) infinite}.word-reel b{height:42px;display:block;color:#e4f3fc;font-weight:500;font-size:34px}.rotating-copy small{font-size:6px;letter-spacing:1.6px;display:block;margin-top:13px;color:#7695a7}.marker{background:#f0e9dc;color:#4d4f3d}.marker .stage-label,.marker .stage-prompt{color:#8e8e77}.marker-copy{font-size:34px;line-height:1.45;letter-spacing:-1px;font-weight:500}.marker-copy span{position:relative;display:inline-block;isolation:isolate}.marker-copy span:before{content:"";position:absolute;left:-3%;top:24%;height:70%;width:106%;background:#d7ce77;z-index:-1;transform-origin:left;transform:rotate(-2deg);animation:markerFill 5s var(--ease) infinite}.glitch{background:#15171c}.glitch-text{font-family:ui-monospace,monospace;font-size:29px;letter-spacing:-2px;color:#f0ece1;animation:glitch 6s steps(1) infinite}.fan{background:linear-gradient(155deg,#0971b4,#8fcce5);display:block;perspective:800px}.fan-area{position:absolute;inset:35px 0 38px;touch-action:pan-y;overflow:hidden}.fan-track{height:100%;position:relative;perspective:800px}.fan-card{position:absolute;left:50%;top:16px;width:114px;height:141px;background:var(--fan-color);border:2px solid #fff9;border-radius:10px;padding:13px;color:#283335;transform:translateX(calc(-50% + var(--slot)*86px)) translateY(calc(var(--slot)*var(--slot)*7px)) rotateY(calc(var(--slot)*-18deg)) rotateZ(calc(var(--slot)*5deg));transition:transform .65s var(--ease),opacity .65s;box-shadow:0 7px 18px #10496a38}.fan-card small{font-size:6px;letter-spacing:1px}.fan-card b{display:block;font-size:22px;font-weight:500;letter-spacing:-1px;margin-top:17px;line-height:1.1}.fan-card i{display:block;text-align:right;font-style:normal;font-size:26px;margin-top:8px}.fan-controls{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:18px;align-items:center}.fan-controls button{border:1px solid #ffffff80;border-radius:50%;width:25px;height:25px;background:#ffffff20;color:white}.fan-status{font-size:8px;font-family:ui-monospace,monospace}.fan .stage-prompt{font-size:7px;bottom:9px}.preview-stage .fan-area{inset:40px 0 55px}.preview-stage .fan-card{width:150px;height:198px;padding:18px;top:20px;transform:translateX(calc(-50% + var(--slot)*130px)) translateY(calc(var(--slot)*var(--slot)*10px)) rotateY(calc(var(--slot)*-22deg)) rotateZ(calc(var(--slot)*5deg))}.preview-stage .fan-card b{font-size:31px;margin-top:25px}.preview-stage .fan-card i{font-size:40px}.preview-stage .fan-controls{bottom:37px}.glowborder{background:#151a1f}.border-card{width:230px;height:138px;position:relative;border-radius:12px;padding:1px;overflow:hidden}.border-spin{position:absolute;width:300px;height:300px;left:-35px;top:-81px;background:conic-gradient(transparent 30%,#a9c9f5 46%,#cfb2d5 50%,transparent 60%);animation:orbit 5s linear infinite}.border-inside{position:relative;height:100%;background:#1a2229;border:1px solid #76899330;border-radius:11px;padding:23px}.border-inside span{font-size:6px;letter-spacing:1.5px;color:#89a1b1}.border-inside strong{display:block;font-size:21px;font-weight:400;color:#d5e1e7;margin:14px 0}.border-inside small{font-size:8px;color:#8396a0}.dragnotes{background:#e6e6da;display:block}.dragnotes .stage-label,.dragnotes .stage-prompt{color:#748164}.notes-board{position:absolute;inset:31px 18px 29px}.drag-note{position:absolute;width:124px;height:130px;border:0;padding:15px;text-align:left;box-shadow:0 7px 14px #34422518;touch-action:none;cursor:grab;transform:translate(var(--dx,0px),var(--dy,0px));border-radius:3px}.drag-note:active{cursor:grabbing}.note-one{left:8%;top:7px;background:#ecd897;color:#5c5235}.note-two{left:45%;top:25px;background:#c4d6b2;color:#435939}.drag-note small{font-size:6px;letter-spacing:.5px}.drag-note b{display:block;font-size:16px;line-height:1.4;margin-top:15px;font-weight:500}.drag-note i{font-style:normal;font-size:24px;position:absolute;bottom:9px;right:12px}.compare{background:#e4e5dc;display:block;padding:34px 22px 40px}.compare .stage-label,.compare .stage-prompt{color:#718166}.compare-scene{height:100%;position:relative;border-radius:8px;overflow:hidden;--split:inherit}.compare-base,.compare-after{position:absolute;inset:0;background:#bfc0b8;overflow:hidden;display:grid;place-items:center}.compare-after{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0);background:linear-gradient(130deg,#ddbea3,#aecbbd)}.compare-shape{width:95px;height:95px;border-radius:50%;background:linear-gradient(135deg,#e3e3dd,#8b8f8a);box-shadow:10px 12px 16px #39443724}.compare-after .compare-shape{background:radial-gradient(circle at 30% 25%,#fff4cd,#eba783 38%,#a26a6d 75%);box-shadow:10px 12px 18px #795f572d}.compare-scene b{position:absolute;bottom:9px;font-size:7px;letter-spacing:2px;color:#4f5b4c}.compare-divider{position:absolute;left:var(--split,50%);top:0;bottom:0;width:2px;background:#fff9;display:grid;place-items:center}.compare-divider span{border-radius:50%;background:#ffffffdc;width:23px;height:23px;display:grid;place-items:center;color:#526c5b;font-size:13px}.compare-control{position:absolute;bottom:25px;left:22px;right:22px;font-size:0}.compare-control input{width:100%;accent-color:#7d9273;cursor:ew-resize}.compare .stage-prompt{bottom:6px;font-size:7px}.revealimage{background:#242b29;display:block;cursor:crosshair}.reveal-base,.reveal-color{position:absolute;inset:0;display:grid;place-items:center}.reveal-base{background:repeating-linear-gradient(30deg,#343c38 0 1px,#262d29 1px 15px)}.reveal-base span{font-size:28px;color:#a6b0a5;font-weight:300;letter-spacing:-1px}.reveal-color{clip-path:circle(65px at var(--cx,50%) var(--cy,50%));background:#e89b6d}.reveal-flower{position:absolute;font-size:160px;color:#f7d199;line-height:1;left:20%;top:8%}.reveal-color b{position:relative;font-size:22px;font-weight:500;color:#5c4533;letter-spacing:-.6px}.trail{background:radial-gradient(ellipse,#263047,#111a24)}.trail .demo-word{font-size:29px}.trail-layer{position:absolute;inset:0;pointer-events:none;z-index:3}.trail-layer i{position:absolute;width:8px;height:8px;border-radius:50%;background:#c0d7ef;box-shadow:0 0 14px #97bfef;animation:trailFade .7s ease-out forwards}.textlight{background:#222a24}.textlight-space{height:650px}.textlight-pin{position:sticky;top:0;padding:25px 18px}.textlight-pin small{font-size:6px;letter-spacing:1.2px;color:#8c997d}.textlight-pin p{font-size:23px;line-height:1.6;margin:20px 0;font-weight:500}.textlight-pin span{color:#c7cebe;transition:color .15s}.textlight-pin span.lit{color:#374c2d}.preview-stage .textlight-pin p{font-size:37px;max-width:500px}.drawpath{background:#242623}.path-space{height:650px}.path-pin{position:sticky;top:0;padding:16px}.path-pin small{font-size:6px;letter-spacing:1.4px;color:#88997b}.path-pin svg{width:100%;height:102px;display:block;margin-top:2px;fill:none;stroke-width:2.5;stroke-linecap:round}.path-ghost{stroke:#cbd5be}.path-draw{stroke:#b77446;stroke-dasharray:1;stroke-dashoffset:1}.path-pin>span{font-size:8px;color:#8a987b;display:block;text-align:center}.preview-stage .path-pin svg{height:205px}.zoomscene{background:#34342c}.zoom-space{height:650px}.zoom-pin{position:sticky;top:0;height:175px;overflow:hidden;background:#c9d9cd;display:grid;place-items:center}.zoom-object{width:170px;height:122px;background:#ebbd92;border:1px solid #fff5;border-radius:10px;padding:17px;transform:scale(var(--zoom,1));box-shadow:0 12px 27px #4d684827}.zoom-object>span{font-size:6px;letter-spacing:1.1px;color:#8a674c}.zoom-object b{font-size:21px;font-weight:500;display:block;margin-top:15px;color:#4c4030}.zoom-object i{position:absolute;right:17px;bottom:12px;font-size:29px;color:#8d7650;font-style:normal}.preview-stage .zoom-pin{height:340px}.preview-stage .zoom-object{width:240px;height:185px;padding:24px}.preview-stage .zoom-object b{font-size:32px;margin-top:24px}.timeline{background:#2c302a}.timeline-track{position:relative;margin:22px 18px 30px 31px;padding-left:18px;border-left:2px solid #d2dcc4}.timeline-fill{position:absolute;left:-2px;top:0;width:2px;background:#819c64;height:0}.timeline-step{position:relative;padding:5px 0 31px}.timeline-step:before{content:"";position:absolute;width:8px;height:8px;left:-23px;top:6px;border-radius:50%;background:#cdd6c3;border:2px solid #eff0e9;box-sizing:content-box}.timeline-step.lit:before{background:#7a985a}.timeline-step small{font-size:6px;letter-spacing:1px;color:#9aa98a}.timeline-step b{font-size:16px;font-weight:500;display:block;margin-top:10px;color:#526743}.timeline-step p{font-size:9px;color:#8b9b7b;line-height:1.8}.timeline-step:not(.lit){opacity:.55}.preview-stage .timeline-step{padding-bottom:90px}.preview-stage .timeline-step b{font-size:23px}.faqdemo{background:#e7eadf;color:#475a39}.faqdemo .stage-label,.faqdemo .stage-prompt{color:#849572}.faq-list{width:260px;max-height:167px;overflow:auto;scrollbar-width:thin}.faq-list>div{border-bottom:1px solid #cdd6c0}.faq-list button{display:flex;justify-content:space-between;gap:15px;width:100%;background:none;border:0;padding:13px 0;color:#415534;font-size:11px;text-align:left}.faq-list button>span{font-size:13px;color:#809567}.faq-list p{font-size:9px;line-height:1.7;margin:0 0 13px;color:#8a9a79;max-width:225px}.preview-stage .faq-list{width:400px;max-height:260px}.preview-stage .faq-list button{font-size:14px;padding:17px 0}.preview-stage .faq-list p{font-size:12px;max-width:350px}.bentodemo{background:#dddcd0}.bentodemo .stage-label,.bentodemo .stage-prompt{color:#7a8367}.mini-bento{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:88px 55px;gap:7px;width:245px}.mini-bento button{border:0;border-radius:8px;text-align:left;padding:12px;position:relative;transition:transform .25s,box-shadow .25s;overflow:hidden}.mini-bento button:hover{transform:translateY(-4px);box-shadow:0 9px 15px #4953371a}.bento-big{background:#bdcdaa;color:#384b2d;grid-row:span 2}.bento-big small{font-size:5px;letter-spacing:.8px}.bento-big strong{font-size:26px;font-weight:500;line-height:1.1;display:block;margin-top:14px;letter-spacing:-1px}.bento-big i{font-size:27px;position:absolute;bottom:6px;right:9px;font-style:normal;color:#71855e}.bento-small{background:#e7c4a3;color:#7f6348}.bento-small span{display:block;font-size:28px}.bento-small b{font-size:10px;font-weight:500}.bento-wide{background:#ecebdc;color:#80866b;font-size:9px}.bento-wide b{position:absolute;right:8px;bottom:7px;font-size:18px;font-weight:400}.testimonial{background:#203229}.quote-slider{width:250px}.quote-mark{font-family:Georgia,serif;font-size:52px;height:35px;display:block;line-height:1;color:#a4bf87}.quote-copy{font-size:20px;line-height:1.6;color:#d9e5cd;font-weight:400;margin:8px 0 18px;min-height:64px}.quote-bottom{display:flex;align-items:center;justify-content:space-between}.quote-person{font-size:8px;letter-spacing:1px;color:#91a77c}.quote-bottom button{width:25px;height:25px;border:1px solid #849e694f;color:#b4c79f;background:transparent;border-radius:50%;margin-left:6px}.pricingdemo{background:#e7eae2;color:#4d6141}.pricingdemo .stage-label,.pricingdemo .stage-prompt{color:#8b9b7c}.price-demo{text-align:center;width:230px}.price-switch{display:flex;border-radius:30px;padding:3px;background:#d7dfcf;gap:3px;justify-content:center}.price-switch button{border:0;background:none;border-radius:25px;padding:8px 14px;font-size:9px;color:#82976e}.price-switch button[aria-pressed=true]{background:#fff;color:#4c653b;box-shadow:0 2px 6px #7188591a}.price-number{font-size:20px;margin-top:14px;color:#435937}.price-number strong{font-weight:500;font-size:41px;letter-spacing:-2px}.price-number small{font-size:10px;margin-left:5px;color:#93a384}.price-caption{font-size:8px;color:#819370;margin:5px 0 12px}.price-plan{font-size:6px;letter-spacing:1px;color:#a1ad95}.successdemo{background:#edf0e5;color:#60794c}.successdemo .stage-label,.successdemo .stage-prompt{color:#9cab8e}.success-orbit{width:47px;height:47px;border-radius:50%;background:#d6e0c8;display:grid;place-items:center;margin:0 auto 17px;color:#6a8850;font-size:25px;transition:background .3s,transform .3s}.success-button{border:1px solid #a9bd97;background:#f9fcf2;border-radius:6px;padding:12px 20px;font-size:10px;color:#64814c;min-width:158px}.success-button span{margin-left:15px}.success-label{font-size:8px;color:#91a480;margin-top:13px}.saved .success-orbit{background:#91b373;color:white;transform:scale(1.12)}.saved .success-button{background:#dbe9cd;border-color:#b3cd9c}.expanddemo{background:#deded2;color:#566849}.expanddemo .stage-label,.expanddemo .stage-prompt{color:#879777}.expanding-card{width:242px;border:1px solid #c6d2b8;background:#f1f4e9;border-radius:10px;overflow:hidden;transition:box-shadow .4s}.expand-toggle{border:0;background:none;padding:19px;position:relative;width:100%;text-align:left;color:#4d6341}.expand-toggle span{font-size:6px;letter-spacing:1.5px;color:#91a17f;display:block}.expand-toggle strong{font-weight:500;font-size:22px;display:block;margin-top:12px}.expand-toggle i{font-style:normal;position:absolute;right:14px;top:13px;font-size:18px;color:#819b68}.expand-body{padding:0 19px 19px}.expand-body p{font-size:10px;line-height:1.7;margin:0 0 9px;color:#7a9264}.expand-body small{font-size:7px;color:#a0b18e}.expanded{box-shadow:0 12px 30px #78915725}
@keyframes techGlow{to{transform:translate(45px,-15px) scale(1.25)}}@keyframes grainTurn{to{transform:rotate(360deg)}}@keyframes shoot{0%,25%{transform:translate(0,0) rotate(30deg);opacity:0}30%{opacity:1}50%,100%{transform:translate(550px,270px) rotate(30deg);opacity:0}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes focusText{0%,8%{filter:blur(10px);opacity:0;transform:translateY(8px)}30%,80%{filter:blur(0);opacity:1;transform:none}100%{filter:blur(8px);opacity:0}}@keyframes wordReel{0%,23%{transform:translateY(0)}33%,56%{transform:translateY(-42px)}66%,89%{transform:translateY(-84px)}100%{transform:translateY(-126px)}}@keyframes markerFill{0%,12%,100%{scale:0 1}35%,85%{scale:1 1}}@keyframes glitch{0%,88%,94%,100%{text-shadow:none;transform:none}89%{text-shadow:3px 0 #a3cbd0,-3px 0 #bd8b9d;transform:translateX(1px)}91%{text-shadow:-2px 0 #a3cbd0,2px 0 #bd8b9d;transform:translateX(-1px)}}@keyframes trailFade{to{opacity:0;transform:scale(.1) translateY(18px)}}
body.paused .focus-text{animation:none;filter:none;opacity:1}body.paused .trail-layer{display:none}body.paused .reveal-color{clip-path:circle(65px at 50% 50%)}body.paused .fan-card,body.paused .mini-bento button{transition:none}body.paused .marker-copy span:before{animation:none;scale:1 1}
@media(max-width:1100px){.source-strip{margin:-22px 5% 38px}.toolbar{flex-wrap:wrap}.search{margin:0}.filters{gap:2px}.filters button{font-size:10px}}
@media(max-width:680px){.source-strip{margin:-17px 6% 29px;gap:7px}.source-strip button{font-size:9px;padding:8px 10px}.source-strip a{font-size:8px;margin-left:0}.source-strip>span{display:none}.filters{flex-wrap:wrap}.filters button{font-size:10px;padding:9px}.preview-stage .fan-card{width:110px;height:165px;padding:12px;transform:translateX(calc(-50% + var(--slot)*81px)) translateY(calc(var(--slot)*var(--slot)*7px)) rotateY(calc(var(--slot)*-18deg)) rotateZ(calc(var(--slot)*5deg))}.preview-stage .fan-card b{font-size:25px}.preview-stage .fan-card i{font-size:28px}.preview-stage .faq-list{width:240px}.preview-stage .faq-list button{font-size:11px}.preview-stage .faq-list p{font-size:10px}.preview-stage .textlight-pin p{font-size:27px}.preview-stage .path-pin svg{height:153px}.preview-stage .zoom-pin{height:240px}}
@media(prefers-reduced-motion:reduce){.focus-text{filter:none;opacity:1}.trail-layer{display:none}.marker-copy span:before{scale:1 1}.reveal-color{clip-path:circle(65px at 50% 50%)}}
/* Small UI components, inspired by the component-library categories */
.ui-orb{background:#080811}.loading-orb{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 60%,#080914 28%,#241744 58%,#aa8de2 96%);box-shadow:inset -8px -5px 17px #bd9def,inset 2px 4px 12px #e4d0ff80,0 0 25px #b392ec20;animation:orbBreathe 5s ease-in-out infinite}.loading-orb span{font-size:14px;color:#ada6c3;letter-spacing:-.5px}.ui-bars{background:#efefeb}.ui-bars .stage-label,.ui-bars .stage-prompt{color:#8d9486}.loading-bars{display:flex;align-items:center;gap:9px;height:115px}.loading-bars i{width:6px;height:75px;border-radius:7px;background:linear-gradient(#c4bfd2,#abc5b9,#e1c49f);animation:barRhythm 1.9s ease-in-out infinite}.loading-bars i:nth-child(2){animation-delay:-.2s}.loading-bars i:nth-child(3){animation-delay:-.4s}.loading-bars i:nth-child(4){animation-delay:-.6s}.loading-bars i:nth-child(5){animation-delay:-.8s}.loading-bars i:nth-child(6){animation-delay:-1s}.loading-bars i:nth-child(7){animation-delay:-1.2s}.ui-skeleton{background:#202322}.skeleton-card{width:237px;padding:17px;border:1px solid #ffffff12;background:#ffffff06;border-radius:11px}.skeleton-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}.skeleton-head i{width:25px;height:25px;border-radius:50%;background:#ffffff09}.skeleton-head span{height:8px;width:70px;border-radius:8px;background:#ffffff0d}.skeleton-line{height:7px;margin-bottom:9px;border-radius:7px;background:#ffffff09;position:relative;overflow:hidden}.skeleton-line.short{width:75%}.skeleton-image{height:38px;border-radius:5px;background:#ffffff06;position:relative;overflow:hidden}.skeleton-line:after,.skeleton-image:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#a2c3d430,transparent);animation:shimmer 2.8s ease-in-out infinite}.ui-floatinput,.ui-password{background:#e9ede3}.ui-floatinput .stage-label,.ui-floatinput .stage-prompt,.ui-password .stage-label,.ui-password .stage-prompt{color:#8d9b7e}.float-input-wrap{width:245px}.float-input-wrap label{position:relative;display:block}.float-input-wrap input{width:100%;padding:24px 14px 10px;background:#f7f9f3;border:1px solid #c8d5ba;border-radius:7px;outline:none;color:#4c6541;font-size:13px}.float-input-wrap label>span{position:absolute;left:14px;top:20px;font-size:12px;color:#95a586;pointer-events:none;transition:transform .25s,font-size .25s}.float-input-wrap input:focus+span,.float-input-wrap input:not(:placeholder-shown)+span{transform:translateY(-12px);font-size:8px;color:#709650}.float-input-wrap input:focus{border-color:#8fac77;box-shadow:0 0 0 3px #99b47c17}.float-input-wrap>small{font-size:8px;color:#9fac90;display:block;margin-top:14px}.password-wrap{width:240px}.password-wrap label{font-size:9px;color:#95a586}.password-wrap label>div{display:flex;margin-top:10px;background:#f8faf3;border:1px solid #ccd8be;border-radius:6px;overflow:hidden}.password-wrap input{min-width:0;width:100%;padding:13px 11px;border:0;background:none;color:#5d764b;font-size:12px}.password-wrap button{background:none;border:0;font-size:9px;color:#7b9566;padding:10px;white-space:nowrap}.password-wrap>small{font-size:8px;color:#a0ae90;display:block;margin-top:13px}.ui-daynight{background:#d9e9e9;transition:background .5s}.ui-daynight .stage-label,.ui-daynight .stage-prompt{color:#759999}.daynight-switch{position:relative;width:135px;height:57px;border-radius:40px;border:3px solid #fff6;background:#89bccd;box-shadow:inset 0 3px 8px #3a6a7a40,0 6px 14px #60909222;overflow:hidden;transition:background .5s}.switch-sun{width:43px;height:43px;position:absolute;left:4px;top:4px;border-radius:50%;background:#fae4a0;box-shadow:0 0 0 8px #ffffff15,0 0 0 17px #ffffff0b;transition:transform .5s var(--ease),background .5s}.daynight-switch>i{position:absolute;font-style:normal;left:24px;top:13px;color:#bdd8e9;opacity:0;transition:opacity .4s}.daynight-switch>b{position:absolute;font-size:31px;color:#e7f2ed;right:7px;bottom:-4px;transition:opacity .4s}.daynight-label{font-size:9px;color:#648a8b;margin:16px 0 0}.night{background:#1a263c}.night .daynight-switch{background:#253951}.night .switch-sun{transform:translateX(76px);background:#cbd9df}.night .daynight-switch>i{opacity:1}.night .daynight-switch>b{opacity:0}.night .daynight-label{color:#8baac0}.ui-checkbox{background:#e9eee3}.ui-checkbox .stage-label,.ui-checkbox .stage-prompt{color:#94a486}.spring-checks{display:grid;gap:15px}.spring-checks label{position:relative;display:flex;align-items:center;gap:10px;font-size:11px;color:#6d8758;cursor:pointer}.spring-checks input{position:absolute;opacity:0;width:22px;height:22px;left:0;margin:0;cursor:pointer}.check-visual{border:1px solid #becfaf;background:#f9fcf4;border-radius:5px;width:22px;height:22px;display:grid;place-items:center;color:transparent;transition:background .25s,transform .35s cubic-bezier(.2,1.8,.5,1)}.spring-checks input:checked+.check-visual{background:#8baa70;color:white;border-color:#8baa70;transform:scale(1.04)}.spring-checks input:focus-visible+.check-visual{outline:3px solid #bf7947;outline-offset:3px}.ui-softbutton{background:#e4e7e0}.ui-softbutton .stage-label,.ui-softbutton .stage-prompt{color:#8f9b86}.soft-button{border:1px solid #ffffff50;background:#e4e7e0;border-radius:17px;padding:20px 33px;color:#819473;box-shadow:9px 9px 18px #bec8b5,-9px -9px 18px #ffffffad;transition:box-shadow .15s,transform .15s}.soft-button span{font-size:35px;display:block;margin-bottom:8px}.soft-button b{font-size:10px;font-weight:500}.soft-button:active{box-shadow:inset 6px 6px 12px #bfc9b7,inset -6px -6px 12px #fff9;transform:scale(.98)}.ui-shine{background:#263026}.shine-button{position:relative;overflow:hidden;border:1px solid #afc0954d;background:linear-gradient(130deg,#526345,#35452f);border-radius:8px;padding:17px 28px;font-size:12px;color:#dce7ce;box-shadow:0 9px 20px #111a1325}.shine-button span{margin-left:25px}.shine-button:after{content:"";position:absolute;inset:-20% -50%;background:linear-gradient(110deg,transparent 37%,#ffffff30 50%,transparent 63%);transform:translateX(-100%)}.shine-button:hover:after,.shine-button:focus-visible:after,.shine-button.shine-again:after{animation:shimmer .8s ease-out}.ui-segments{background:#e8ecec;color:#4f6269}.ui-segments .stage-label,.ui-segments .stage-prompt{color:#8e9fa4}.segment-demo{width:254px;text-align:center}.segment-group{padding:5px;display:flex;background:#fff;border-radius:35px;border:1px solid #dbe2e2;box-shadow:0 5px 15px #80929712;position:relative}.segment-group i{position:absolute;left:5px;top:5px;bottom:5px;background:#242f37;border-radius:25px;width:calc((100% - 10px)/4);transform:translateX(calc(var(--segment,1)*100%));transition:transform .4s var(--ease)}.segment-group button{position:relative;flex:1;border:0;background:none;padding:10px;font-size:11px;color:#86959b}.segment-group button[aria-pressed=true]{color:white}.segment-caption{font-size:9px;color:#96a4a8;margin-top:18px}.ui-composer{background:#1e2324}.mini-composer{width:263px;border:1px solid #a3b3b329;border-radius:12px;background:#ffffff04;padding:14px}.mini-composer label{font-size:10px;color:#c0cdcb;display:block;margin-bottom:12px}.mini-composer textarea{resize:none;width:100%;height:48px;font-size:10px;color:#c3d5cf;background:none;border:0;outline:none;line-height:1.7}.mini-composer textarea::placeholder{color:#788d86}.mini-composer>div{display:flex;justify-content:space-between;align-items:center}.composer-status{font-size:7px;color:#81968e}.mini-composer button{width:30px;height:30px;border:1px solid #c4dace44;border-radius:8px;background:#829b8c;color:#e9f3ea;font-size:20px}.mini-composer button:disabled{opacity:.3;cursor:default}.ui-stepper{background:#eceee6;color:#637854}.ui-stepper .stage-label,.ui-stepper .stage-prompt{color:#9aab8c}.stepper-demo{width:240px;text-align:center}.stepper-demo ol{display:flex;justify-content:space-between;list-style:none;padding:0;margin:0 15px 18px;position:relative}.stepper-demo ol:before{content:"";position:absolute;height:1px;background:#c6d1b9;left:15px;right:15px;top:14px}.stepper-demo li{position:relative;z-index:1}.stepper-demo li>span{display:grid;place-items:center;width:29px;height:29px;background:#e5eadd;border:1px solid #c9d5bc;border-radius:50%;font-size:10px;color:#a5b597}.stepper-demo li>small{font-size:8px;margin-top:8px;display:block;color:#a6b69a}.stepper-demo .current>span{background:#fff;border-color:#8daa71;color:#728e59;box-shadow:0 0 0 4px #a3bd8915}.stepper-demo .done>span{background:#8eab77;color:#fff;border-color:#8eab77}.stepper-copy{font-size:9px;color:#9dae8e}.stepper-next{border:1px solid #b8c9a5;background:#f8fcf1;color:#7e9865;border-radius:20px;padding:8px 17px;font-size:9px;margin-top:6px}
@keyframes orbBreathe{50%{transform:scale(1.06);filter:brightness(1.2)}}@keyframes barRhythm{0%,100%{transform:scaleY(.35);opacity:.35}50%{transform:scaleY(1);opacity:1}}@keyframes shimmer{to{transform:translateX(100%)}}
@media(max-width:680px){.preview-stage .demo-content.faq-list{scale:1}.preview-stage .fan-controls{bottom:31px}.ui-composer .demo-content{max-width:90%}}
.fan-card{overflow:hidden}.fan-card i{position:absolute;right:13px;bottom:9px;margin:0}.preview-stage .fan-card b{font-size:28px}.mini-composer textarea:focus-visible{outline:2px solid #c7dbb7;outline-offset:3px;border-radius:3px}.mini-composer:focus-within{border-color:#a3b995}

/* Volume 02 supplement — pattern backgrounds + dropdown menu */
.patternbg{background:#f1f0e8}.patternbg .stage-label,.patternbg .stage-prompt,.patternbg .demo-kicker{color:#8d9486}.patternbg .demo-word{color:#3e4135}
.pattern-layer{position:absolute;inset:0;transition:opacity .3s}
.patternbg[data-pattern="dots"] .pattern-layer{background-image:radial-gradient(#8a917955 1.2px,transparent 1.2px);background-size:18px 18px}
.patternbg[data-pattern="lines"] .pattern-layer{background-image:repeating-linear-gradient(45deg,#8a91792e 0 2px,transparent 2px 15px)}
.patternbg[data-pattern="grid"] .pattern-layer{background-image:linear-gradient(#8a917930 1px,transparent 1px),linear-gradient(90deg,#8a917930 1px,transparent 1px);background-size:22px 22px}
.patternbg[data-pattern="cross"] .pattern-layer{background-image:linear-gradient(#8a91794a 1px,transparent 1px),linear-gradient(90deg,#8a91794a 1px,transparent 1px);background-size:24px 24px;background-position:center;mask-image:radial-gradient(#000 30%,transparent)}
.pattern-chips{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.pattern-chips button{border:1px solid #ccd3bd;border-radius:20px;background:#f7f7f0cc;color:#5c6552;padding:6px 13px;font-size:10px;backdrop-filter:blur(4px)}
.pattern-chips button:hover{background:#e6e9da}
.pattern-chips button[aria-pressed="true"]{background:#3e4135;border-color:#3e4135;color:#f1f0e8}
.ui-menu{background:#e9ede3}.ui-menu .stage-label,.ui-menu .stage-prompt{color:#8d9486}
.menu-demo{display:flex;flex-direction:column;align-items:center;gap:14px}
.menu-trigger{display:flex;align-items:center;gap:8px;border:none;border-radius:22px;background:#26281f;color:#f1f0e8;padding:11px 20px;font-size:12px;box-shadow:0 8px 18px #2b2f241f;cursor:pointer}
.menu-trigger span{display:inline-block;transition:transform .25s}
.menu-open .menu-trigger span{transform:rotate(180deg)}
.menu-pop{position:absolute;top:calc(50% - 6px);left:50%;transform:translateX(-50%);min-width:218px;padding:6px;background:#fdfdf8;border:1px solid #dfe4d2;border-radius:13px;box-shadow:0 16px 34px #2b2f2426;z-index:5}
.menu-pop button{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;padding:9px 10px;border-radius:8px;font-size:11px;color:#3e4135;text-align:left;cursor:pointer}
.menu-pop button span{width:15px;text-align:center;color:#7d8a6e}
.menu-pop button small{margin-left:auto;color:#9aa28d;font-size:9px}
.menu-pop button:hover,.menu-pop button:focus-visible{background:#eef1e4}
.menu-pop button.danger{color:#a8573f}.menu-pop button.danger span{color:#a8573f}
.menu-pop hr{border:none;border-top:1px solid #e7ebdb;margin:5px 8px}
.menu-caption{margin:0;font-size:10px;color:#8d9486}
@media(max-width:680px){.pattern-chips{bottom:28px}.pattern-chips button{padding:5px 10px;font-size:9px}.menu-pop{min-width:190px}}
.fluid-cloud{background:radial-gradient(ellipse at 20% 20%,#eaf7ff,transparent 60%),radial-gradient(ellipse at 80% 70%,#e9f5ff,transparent 55%),#5d95e4;color:#163962}.fluid-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}.fluid-cloud .stage-label,.fluid-cloud .stage-prompt{color:#345c88c9}.fluid-cloud .demo-word{font-size:30px;letter-spacing:-1px;color:#16375b;text-shadow:0 1px 12px #ffffff75}.fluid-cloud .demo-kicker{color:#3a6da0}.fluid-copy>small{display:block;margin-top:17px;font-size:9px;letter-spacing:2px;color:#3f6d96}.fluid-fallback{position:absolute;bottom:29px;font-size:8px;color:#486484}.preview-stage.fluid-cloud{height:430px}.fluid-cloud .demo-content{pointer-events:none}@media(max-width:680px){.preview-stage.fluid-cloud{height:290px}.fluid-cloud .demo-word{font-size:25px}}
/* Advanced interactive studies use isolated, lazily mounted renderers. */
.advanced-demo{background:#101c25;color:#f3efdb;min-height:310px}.advanced-host{position:absolute;inset:0;display:grid;place-items:center;font-size:12px}.advanced-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.advanced-demo>.stage-label,.advanced-demo>.stage-prompt{display:none}.preview-stage.advanced-demo{height:500px}.advanced-strip{background:#243b34;color:#f0efda}.advanced-strip button{color:inherit}.advanced-strip button:hover{background:#ffffff18}@media(max-width:600px){.preview-stage.advanced-demo{height:390px}}