:root{--bg:#f7f8f5;--ink:#222820;--muted:#849080;--line:#e3e8df}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #7f9c45;outline-offset:3px}.shell{display:grid;grid-template-columns:205px 1fr;min-height:100vh}.sidebar{background:#fff;border-right:1px solid var(--line);padding:30px 16px;position:sticky;top:0;height:100vh}.logo{font-size:20px;font-weight:800;letter-spacing:-.05em}.caption,.count,.top{font:11px/1.5 ui-monospace,monospace;color:var(--muted);letter-spacing:.04em}.nav{display:grid;gap:3px;margin-top:35px}.nav button{border:0;background:none;text-align:left;border-radius:8px;padding:11px;color:#687465;font-size:12px}.nav button.active,.nav button:hover{background:#e8efd8;color:#33472a}.main{min-width:0}.top{height:60px;border-bottom:1px solid var(--line);padding:21px 40px;white-space:pre}.content{max-width:1480px;padding:40px clamp(20px,4vw,60px) 70px;margin:auto}h1{font-size:36px;letter-spacing:-.06em;margin:0 0 4px}.intro{font-size:12px;color:#7d8977;margin:0 0 26px}.search{width:min(390px,100%);padding:12px 14px;border:1px solid #dce4d8;border-radius:9px;background:white}.count{margin:29px 0 14px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;min-width:0}.card-head{padding:17px 19px 15px}.card h2{font-size:17px;letter-spacing:-.03em;margin:7px 0 4px}.card p{font-size:12px;color:#828b7e;margin:0}.demo,.detail-demo{background:#f9fbf6;border-top:1px solid #f0f3ed;border-bottom:1px solid #f0f3ed;display:flex;align-items:center;justify-content:center;gap:12px;padding:24px 16px;min-height:174px;flex-wrap:wrap;position:relative}.card-foot{padding:12px 19px;min-height:56px;display:flex;justify-content:space-between;align-items:center;gap:8px}.card-foot code{font:10px/1.4 ui-monospace,monospace;color:#8c9787;overflow-wrap:anywhere}.detail-link{white-space:nowrap;border:0;background:none;font-size:11px;font-weight:700;color:#354d2a}.btn{border-radius:8px;padding:11px 15px;font-size:12px;font-weight:600}.primary{background:#2d3c28;color:#fff;border:1px solid #2d3c28}.primary:hover{background:#47633d}.secondary{background:white;color:#374331;border:1px solid #d3ddd0}.secondary:hover{background:#eef2e8}.feedback{font:11px ui-monospace,monospace;color:#78876e;min-width:25px;text-align:center}.stack{display:grid;gap:7px;font-size:11px;color:#626f5a}.field{border:1px solid #cfdac9;border-radius:8px;padding:11px;background:white;min-width:190px}.field:focus{border-color:#79964e}.switch{height:27px;width:49px;border:0;border-radius:99px;background:#cdd6c8;padding:3px;transition:.2s}.switch:before{content:'';display:block;background:#fff;width:21px;height:21px;border-radius:50%;box-shadow:0 1px 3px #0002;transition:.2s}.switch[aria-checked=true]{background:#7e9c48}.switch[aria-checked=true]:before{transform:translateX(22px)}.choice{font-size:12px;display:inline-flex;align-items:center;gap:5px;color:#4e6048}.choice input,.range{accent-color:#526f35}.segmented{display:flex;background:#e6eddf;padding:4px;border-radius:9px;gap:3px}.segmented button,.tabs button{border:0;background:transparent;color:#7b8b73;border-radius:6px;padding:9px 13px;font-size:11px}.segmented .selected,.tabs [aria-selected=true]{background:#fff;color:#314b27;font-weight:700;box-shadow:0 1px 4px #0001}.range{width:165px}.tabs{border-bottom:1px solid #dfe8d9;display:flex}.tabs [aria-selected=true]{border-bottom:2px solid #718d52}.toast-message{display:none;background:#2a3925;color:#fff;border-radius:7px;padding:10px 13px;font-size:11px}.toast-message.visible{display:block}.accordion{width:min(255px,100%);background:white;border:1px solid #dbe4d6;border-radius:8px;padding:12px}.accordion summary{font-size:12px;font-weight:600;cursor:pointer}.accordion p{font-size:12px;color:#74806c;margin-bottom:0}.tip-wrap{position:relative}.tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#2b3926;color:white;padding:8px 10px;border-radius:6px;white-space:nowrap;font-size:10px;opacity:0;pointer-events:none}.tip-wrap:hover .tip,.tip-wrap:focus-within .tip{opacity:1}.progress-demo{width:180px;display:grid;gap:13px}.progress-demo progress{width:100%;height:10px;accent-color:#76944b}.progress-demo .range{width:100%}.stepper{display:flex;background:white;border:1px solid #d7e0d2;border-radius:8px;align-items:center}.stepper button{border:0;background:none;padding:10px 15px;font-size:18px;color:#4c6641}.stepper output{min-width:22px;text-align:center;font:13px ui-monospace,monospace}.spinner{height:28px;width:28px;border:3px solid #dce6d4;border-top-color:#688c42;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.native-dialog{border:1px solid #d9e2d1;border-radius:12px;box-shadow:0 20px 70px #0003;padding:25px;min-width:270px}.native-dialog::backdrop{background:#15200e75}.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:25px}.backdrop{position:fixed;inset:0;background:#14201280;display:grid;place-items:center;padding:20px;z-index:20}.detail{width:min(650px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0003}.detail-head{padding:22px 27px 20px;position:relative}.detail-head h2{font-size:25px;letter-spacing:-.05em;margin:5px 0 0}.close{position:absolute;right:24px;top:20px;border:0;background:#eef2ea;border-radius:50%;height:33px;width:33px;font-size:21px}.detail-demo{min-height:165px}.detail-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding:0 25px}.detail-tabs button{border:0;background:transparent;padding:16px 12px;color:#899486;font-size:12px}.detail-tabs .active{color:#2c4723;border-bottom:2px solid #638a42;font-weight:700}.detail-body{padding:22px 27px 27px}.spec-row{display:grid;grid-template-columns:105px 1fr;padding:12px 0;border-bottom:1px solid #edf1e9;font-size:12px;gap:14px}.spec-row span{color:#889583;font:11px ui-monospace,monospace}.copy{margin-top:22px;background:#283b23;color:white;border:0;border-radius:8px;padding:11px 16px;font-size:12px}.detail-body pre{white-space:pre;overflow:auto;background:#20291d;color:#d8e9cc;border-radius:9px;padding:19px;font:11px/1.6 ui-monospace,monospace;max-height:360px}@media(max-width:1200px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:730px){.shell{display:block}.sidebar{position:relative;height:auto;padding:14px 18px}.nav{margin-top:15px;display:flex;overflow-x:auto}.nav button{white-space:nowrap}.sidebar .caption{display:none}.top{height:48px;padding:15px 20px}.content{padding:28px 17px 60px}h1{font-size:30px}.grid{grid-template-columns:1fr}.spec-row{grid-template-columns:75px 1fr}.detail-head,.detail-body{padding-left:19px;padding-right:19px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
:is(.icon-button,.text-button,.split-primary,.split-options summary,.split-menu button):focus-visible{outline:2px solid #7f9c45;outline-offset:3px}
.icon-button{width:42px;height:42px;border:1px solid #d3ddd0;border-radius:50%;background:white;color:#374331;font-size:23px;line-height:1}.icon-button:hover{background:#eef2e8}
.text-button{border:0;border-radius:8px;background:transparent;color:#354d2a;font-size:12px;font-weight:600;padding:11px 15px}.text-button:hover{background:#eef2e8}
.split-button{display:inline-flex;position:relative}.split-primary,.split-options summary{background:#2d3c28;color:white;border:1px solid #2d3c28;font-size:12px;font-weight:600;padding:11px 15px}.split-primary{border-radius:8px 0 0 8px}.split-options summary{border-left-color:#71806c;border-radius:0 8px 8px 0;cursor:pointer;list-style:none}.split-options summary::-webkit-details-marker{display:none}.split-primary:hover,.split-options summary:hover{background:#47633d}.split-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:2;min-width:175px;padding:5px;background:white;border:1px solid #d3ddd0;border-radius:8px;box-shadow:0 5px 18px #0002}.split-menu button{display:block;width:100%;border:0;border-radius:5px;background:white;text-align:left;padding:9px;font-size:12px;color:#374331}.split-menu button:hover{background:#eef2e8}
.toggle-button[aria-pressed=true]{background:#2d3c28;color:white;border-color:#2d3c28}.button-group{display:inline-flex;max-width:100%}.button-group button{border:1px solid #d3ddd0;background:white;color:#374331;padding:9px;font-size:12px}.button-group button+button{border-left:0}.button-group button:first-child{border-radius:8px 0 0 8px}.button-group button:last-child{border-radius:0 8px 8px 0}.button-group button:hover:not(:disabled){background:#eef2e8}.button-group button:disabled{opacity:.4;cursor:default}
.fab-preview{position:relative;width:190px;height:115px;background:#e7eee2;border-radius:8px;padding:12px;color:#6b7864}.fab{position:absolute;right:10px;bottom:10px;border:0;border-radius:50%;width:46px;height:46px;background:#2d3c28;color:#fff;font-size:25px;box-shadow:0 3px 8px #0003}.fab:hover{background:#47633d}
.dropdown-demo{position:relative}.dropdown-demo summary{cursor:pointer;list-style:none}.dropdown-demo summary::-webkit-details-marker{display:none}.dropdown-options{position:absolute;top:calc(100% + 5px);left:0;min-width:135px;z-index:3;background:white;border:1px solid #d3ddd0;border-radius:8px;box-shadow:0 5px 18px #0002;padding:5px}.dropdown-options button{display:block;width:100%;text-align:left;border:0;background:white;padding:8px;border-radius:5px;color:#374331}.dropdown-options button:hover{background:#eef2e8}
.copy-sample{background:#eef2e8;border-radius:5px;padding:8px}.close-demo{display:flex;align-items:center;gap:24px;padding:10px 12px;background:#e7eee2;border-radius:8px}.close-demo[hidden]{display:none}.close-demo button{border:0;background:transparent;font-size:20px}.demo-link{color:#355c27;text-decoration:underline}.demo-link:focus-visible,textarea:focus-visible{outline:2px solid #7f9c45;outline-offset:3px}
.demo-textarea{resize:vertical;font:inherit}.demo-search{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.input-affix{display:flex;align-items:center;gap:6px;background:white;border:1px solid #cfdac9;border-radius:8px;padding:0 10px}.input-affix input{width:145px;border:0;outline-offset:1px;padding:11px 2px;background:transparent}
.demo-stack{display:grid;gap:8px;max-width:100%}.tag-list{display:flex;flex-wrap:wrap;gap:5px}.demo-chip{border:1px solid #cfdac9;background:white;border-radius:99px;padding:5px 9px}.editable,.markdown-preview{border:1px solid #cfdac9;border-radius:8px;background:white;min-height:65px;padding:10px;max-width:250px;overflow-wrap:anywhere}.editable:focus-visible,select:focus-visible{outline:2px solid #7f9c45;outline-offset:3px}.demo-code{font:12px/1.5 ui-monospace,monospace;resize:vertical}.otp-input{letter-spacing:.3em}.demo-fieldset,.rating-demo{display:flex;gap:8px;flex-wrap:wrap;border:1px solid #d3ddd0;border-radius:8px;padding:10px}.demo-fieldset label,.rating-demo label{white-space:nowrap;font-size:12px}
.transfer-demo{display:flex;align-items:center;gap:8px;max-width:100%;flex-wrap:wrap}.transfer-demo select{min-width:90px}.sort-list{display:grid;gap:5px;padding-left:25px;margin:0}.sort-list li{padding-left:4px}.sort-list li span{margin-right:8px}.sort-list button{padding:5px;margin-right:4px}.select-card{border:1px solid #cfdac9;border-radius:8px;padding:10px;background:white}.select-card:has(input:checked),.demo-chip[aria-pressed=true]{background:#e8efd8;border-color:#7f9c45}
.wheel-demo{display:grid;text-align:center;width:85px;background:#fff;border:1px solid #d3ddd0;border-radius:10px;overflow:hidden}.wheel-demo button{border:0;background:#eef2e8;color:#374331;padding:4px}.wheel-demo output{padding:8px;font-weight:600}
.date-parts{display:flex;gap:8px;max-width:100%;border:1px solid #d3ddd0;border-radius:8px;padding:10px;flex-wrap:wrap}.date-parts label{display:grid;gap:4px;font-size:11px}.date-parts input{width:70px;border:1px solid #cfdac9;border-radius:5px;padding:7px}.dropzone{border:2px dashed #a9b9a2;border-radius:9px;padding:16px;text-align:center;max-width:100%}.dropzone input{max-width:200px}.upload-list{padding-left:20px}.upload-list li{margin-bottom:8px}.upload-list span,.upload-list progress{display:block;max-width:100%}
.error-text{color:#a02626;font-size:12px}.error-summary{display:grid;gap:5px;border:2px solid #b53d3d;padding:10px;border-radius:7px}.error-summary[hidden]{display:none}.error-summary button{border:0;background:none;color:#8a2424;text-align:left;text-decoration:underline;padding:4px}.required-mark{color:#a02626;font-size:10px;font-weight:700}
.mini-nav{display:flex;gap:4px;flex-wrap:wrap;background:#e7eee2;padding:8px;border-radius:8px}.mini-nav button,.mini-sidebar button,.mini-bar button,.command-list button,.mega-demo button{border:0;background:transparent;border-radius:5px;padding:7px;color:#354d2a}.mini-nav button:hover,.mini-sidebar button:hover,.mini-bar button:hover{background:#d5e3cc}.mini-nav [aria-current],.button-group [aria-current]{background:#d5e3cc;font-weight:700}.mini-layout{display:flex;gap:10px;align-items:center}.mini-sidebar{display:grid;gap:4px;background:#e7eee2;padding:8px;border-radius:8px}.mini-sidebar[hidden],.command-list[hidden],.context-options[hidden]{display:none}.mini-screen{display:flex;flex-direction:column;justify-content:space-between;gap:15px;min-height:110px;min-width:200px;background:#f0f4ed;border-radius:8px;padding:8px}.mini-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;background:white;padding:5px;border-radius:6px}.breadcrumbs{display:flex;gap:6px;list-style:none;padding:0}.breadcrumbs li+li:before{content:' / ';color:#899486}.breadcrumbs button{border:0;background:none;text-decoration:underline;color:#354d2a}.steps{display:flex;gap:14px;padding-left:20px}.steps [aria-current]{font-weight:700;color:#354d2a}.context-options,.command-list,.mega-demo{background:white;border:1px solid #d3ddd0;border-radius:8px;padding:8px}.context-options button,.command-list button,.mega-demo button{display:block}.mega-demo{display:flex;gap:15px}.page-dots button{border:0;background:none;color:#bbc7b6}.page-dots [aria-current]{color:#354d2a}.scroll-demo{height:100px;width:150px;overflow:auto;background:white;border:1px solid #d3ddd0;padding:5px}
.display-icon{font-size:35px;color:#688c42}.display-image{width:160px;max-width:100%;border-radius:8px}.avatar-demo{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#d7e5cd;color:#354d2a;font-weight:700}.avatar-group{display:flex}.avatar-group .avatar-demo+.avatar-demo{margin-left:-8px;border:2px solid white}.badge-demo{display:inline-block;border-radius:99px;background:#354d2a;color:white;padding:1px 7px}.tag-demo,.lozenge-demo{display:inline-block;border-radius:5px;padding:3px 8px;background:#e7eee2;color:#354d2a;font-size:12px}.lozenge-demo{background:#d5edd1;font-weight:700}.sample-card{background:white;border:1px solid #d3ddd0;border-radius:8px;padding:12px;min-width:150px}.sample-card p{margin:5px 0 0}.sample-table{border-collapse:collapse;background:white;font-size:12px}.sample-table th,.sample-table td{border-bottom:1px solid #d3ddd0;padding:7px 9px;text-align:left}.stat-number{display:block;font-size:25px}.sample-quote{border-left:3px solid #8ca879;margin:0;padding:5px 12px}kbd{background:white;border:1px solid #cfdac9;border-radius:4px;padding:3px 6px}
.visual-grid{display:grid;grid-template-columns:repeat(2,70px);gap:6px}.visual-grid div{display:grid;place-items:center;min-height:55px;border-radius:6px;background:#dce9d3}.bar-chart{display:flex;align-items:end;gap:8px;height:100px}.bar-chart span{display:flex;align-items:end;justify-content:center;width:30px;background:#8eac7d}.layout-box{max-width:220px;padding:16px;background:#e7eee2}.sticky-demo{position:sticky;top:0;background:#dce9d3;padding:5px}.sample-alert{display:block;background:#e4efe0;border-left:3px solid #688c42;padding:9px;font-size:12px}.skeleton-line{display:block;width:150px;height:12px;border-radius:4px;background:#dce6d4}.skeleton-line.short{width:90px}.warning-demo{border-left:3px solid #d89a37;padding:8px}.unread-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4b78b8}.diff-demo span{display:block;background:#f9dddd}.diff-demo strong{background:#dcf3df}
.zoom-stage{display:grid;place-items:center;width:200px;height:90px;overflow:hidden;background:#e7eee2}.zoom-stage span{display:block}.drag-list li{padding:8px;cursor:grab;border:1px solid #d3ddd0;background:white}.drag-list button{margin-left:8px}
.map-demo{position:relative;width:200px;height:100px;background:linear-gradient(30deg,#d9ead3 45%,#a4c0d2 46%,#a4c0d2 54%,#d9ead3 55%);border-radius:8px}.map-demo button{position:absolute;border:0;border-radius:50%;background:#354d2a;color:white;width:28px;height:28px}.map-demo button:first-child{top:15px;left:30px}.map-demo button:last-child{bottom:15px;right:30px}
[hidden]{display:none!important}
.catalog-filters{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.catalog-filters .search{flex:1 1 240px}.tag-filter-label{display:grid;gap:4px;font-size:11px;color:#687465}.tag-filter{min-width:160px;max-width:100%;padding:10px 12px;border:1px solid #dce4d8;border-radius:9px;background:#fff;color:var(--ink);font:inherit}.tag-filter:focus-visible{outline:2px solid #7f9c45;outline-offset:3px}.catalog-groups{display:grid;gap:30px}.primitive-section{min-width:0}.primitive-heading{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line)}.primitive-title{margin:0;font-size:16px;letter-spacing:-.02em}.primitive-count{font:11px ui-monospace,monospace;color:var(--muted)}.component-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.component-tag{padding:3px 8px;border:1px solid #dce6d6;border-radius:999px;background:#f4f7f1;color:#526c47;font-size:10px;line-height:1.4}.component-tag:hover,.component-tag[aria-pressed=true]{border-color:#829d70;background:#e3edda;color:#2d4925}.empty-results{padding:24px 0;color:#687465;font-size:13px}@media(max-width:730px){.catalog-filters{align-items:stretch}.catalog-filters .search{flex-basis:100%}.tag-filter-label{width:100%}.tag-filter{width:100%}}
.spatial-button{border:1px solid #829477;border-radius:9px;background:linear-gradient(#f7fbf3,#b7cca9);color:#263c24;padding:10px 16px;font-weight:700;box-shadow:0 5px 0 #748a68,0 8px 10px #0002;transform:translateY(-3px);transition:transform .12s,box-shadow .12s}.spatial-button:active,.spatial-latch[aria-pressed=true]{transform:translateY(2px);box-shadow:0 0 0 #748a68,0 2px 3px #0002}.rocker-demo{display:flex;flex-direction:column;gap:12px;border:4px solid #536b4d;border-radius:8px;background:linear-gradient(145deg,#fafdf8,#9db391);padding:9px 18px;transform:perspective(100px) rotateX(-16deg);box-shadow:0 5px 8px #0003}.rocker-demo[aria-checked=true]{transform:perspective(100px) rotateX(16deg)}.lever-demo{position:relative;width:48px;height:80px;border:3px solid #829477;border-radius:50%;background:radial-gradient(#aebfa4,#6b8062);perspective:100px}.lever-demo span{position:absolute;top:10px;left:18px;width:8px;height:43px;border-radius:8px;background:linear-gradient(90deg,#ddd,#66775e);transform-origin:bottom;transform:rotate(-30deg);transition:transform .2s}.lever-demo span:before{content:'';position:absolute;top:-7px;left:-5px;width:18px;height:18px;border-radius:50%;background:#344b2e}.lever-demo[aria-checked=true] span{transform:rotate(30deg)}.knob-wrap{position:relative;width:85px;height:85px}.knob-face{width:85px;height:85px;border:6px solid #8fa483;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f6faf3,#94aa87);box-shadow:0 5px 8px #0004;position:relative}.knob-face:after{content:'';position:absolute;top:6px;left:34px;width:5px;height:20px;border-radius:4px;background:#30482b}.knob-wrap input{position:absolute;inset:0;width:85px;height:85px;opacity:.01;cursor:ew-resize}.knob-wrap:focus-within{outline:2px solid #7f9c45;outline-offset:3px;border-radius:50%}.spatial-range{accent-color:#617e4e;filter:drop-shadow(0 3px 2px #0004)}.joystick-base{position:relative;width:115px;height:115px;border-radius:50%;background:radial-gradient(#c9d9bf,#6d8662);box-shadow:inset 0 5px 9px #0004}.joystick-stick{position:absolute;left:38px;top:38px;width:39px;height:39px;border:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fafff6,#526d48);box-shadow:0 5px 8px #0005;touch-action:none}.direction-pad{display:grid;grid-template-columns:repeat(3,35px);grid-template-rows:repeat(3,35px)}.direction-pad button{background:#728c66;color:white;border:1px solid #536b4d;box-shadow:0 3px 0 #465c40}.direction-pad button:nth-child(1){grid-column:2}.direction-pad button:nth-child(2){grid-column:1;grid-row:2}.direction-pad button:nth-child(3){grid-column:3;grid-row:2}.direction-pad button:nth-child(4){grid-column:2;grid-row:3}.spatial-keys{display:flex;gap:7px}.spatial-keys .spatial-button{padding:6px 9px}.spatial-stars{display:flex;border:0;padding:0;gap:4px}.spatial-stars input,.spatial-choice input{position:absolute;opacity:0}.spatial-stars span{font-size:25px;color:#9caf8e;text-shadow:0 3px 1px #526d48;cursor:pointer}.spatial-stars input:checked+span{color:#e4b94b}.spatial-stars input:focus-visible+span,.spatial-choice input:focus-visible+span{outline:2px solid #7f9c45;outline-offset:3px}.spatial-choice{display:inline-flex;gap:6px;align-items:center;cursor:pointer}.spatial-choice span{display:inline-grid;place-items:center;width:25px;height:25px;background:#e8f1e2;color:transparent;border:1px solid #8fa483;border-radius:5px;box-shadow:0 3px 0 #8fa483}.spatial-choice input:checked+span{color:#fff;background:#617e4e;transform:translateY(2px);box-shadow:0 1px 0 #8fa483}
.spatial-card{width:160px;height:95px;border:1px solid #9bb390;border-radius:12px;background:linear-gradient(145deg,#f9fdf6,#b7d0ad);box-shadow:0 12px 18px #31452a40;color:#30482b;font-weight:700;transition:transform .2s,box-shadow .2s}.lift-card[aria-pressed=true]{transform:translateY(-12px) scale(1.05);box-shadow:0 22px 20px #31452a45}.flip-frame{width:150px;height:90px;padding:0;border:0;background:none;perspective:500px}.flip-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s}.flip-frame[aria-pressed=true] .flip-inner{transform:rotateY(180deg)}.flip-side{display:grid;place-items:center;position:absolute;inset:0;border-radius:10px;background:#cbe0c1;border:1px solid #8aa180;backface-visibility:hidden}.flip-back{background:#93b38a;transform:rotateY(180deg)}.stack-scene{position:relative;width:150px;height:100px;perspective:400px}.stack-scene div{position:absolute;inset:10px 20px;border:1px solid #849c78;border-radius:9px;background:#d9ead2;display:grid;place-items:center}.stack-scene div:nth-child(1){transform:translate3d(12px,-10px,-30px)}.stack-scene div:nth-child(2){transform:translate3d(6px,-5px,-15px)}.stack-scene div:nth-child(3){box-shadow:0 6px 9px #0003}.carousel-scene,.cube-scene,.wheel-scene{width:200px;height:110px;display:grid;place-items:center;perspective:500px}.carousel-ring,.cube,.wheel-ring{position:relative;width:80px;height:70px;transform-style:preserve-3d;transition:transform .45s}.carousel-ring span,.cube span,.wheel-ring span{position:absolute;inset:0;display:grid;place-items:center;background:#c5ddbbdd;border:1px solid #76926b;border-radius:6px;backface-visibility:hidden}.carousel-ring span:nth-child(1){transform:rotateY(0deg) translateZ(65px)}.carousel-ring span:nth-child(2){transform:rotateY(120deg) translateZ(65px)}.carousel-ring span:nth-child(3){transform:rotateY(240deg) translateZ(65px)}.cube span:nth-child(1){transform:rotateY(0deg) translateZ(40px)}.cube span:nth-child(2){transform:rotateY(90deg) translateZ(40px)}.cube span:nth-child(3){transform:rotateY(180deg) translateZ(40px)}.cube span:nth-child(4){transform:rotateY(270deg) translateZ(40px)}.wheel-ring span:nth-child(1){transform:rotateX(0deg) translateZ(50px)}.wheel-ring span:nth-child(2){transform:rotateX(-72deg) translateZ(50px)}.wheel-ring span:nth-child(3){transform:rotateX(-144deg) translateZ(50px)}.wheel-ring span:nth-child(4){transform:rotateX(-216deg) translateZ(50px)}.wheel-ring span:nth-child(5){transform:rotateX(-288deg) translateZ(50px)}.cover-scene{display:flex;align-items:center;justify-content:center;perspective:400px}.cover-scene span{display:grid;place-items:center;width:60px;height:80px;background:#c5ddbb;border:1px solid #76926b}.cover-scene span:first-child{transform:rotateY(45deg)}.cover-scene span:last-child{transform:rotateY(-45deg)}.spatial-tabs,.spatial-menu,.spatial-crumbs{display:flex;gap:8px;perspective:300px}.spatial-tabs button,.spatial-menu button,.spatial-crumbs button,.depth-list button{border:1px solid #8fa483;border-radius:6px;background:#dce9d3;padding:8px;box-shadow:0 4px 0 #879d7b}.spatial-tabs [aria-pressed=true],.depth-list [aria-pressed=true]{transform:translateY(-5px);box-shadow:0 8px 7px #0003}.spatial-menu button:nth-child(1){transform:rotateY(15deg)}.spatial-menu button:nth-child(3){transform:rotateY(-15deg)}.radial-scene,.orbit-scene{position:relative;width:150px;height:115px}.radial-scene span{position:absolute;left:57px;top:45px}.radial-scene button{position:absolute;border-radius:50%;padding:8px;border:1px solid #8fa483;background:#dce9d3}.radial-scene button:nth-child(2){top:0;left:50px}.radial-scene button:nth-child(3){bottom:0;left:0}.radial-scene button:nth-child(4){bottom:0;right:0}.page-flip{position:relative;width:140px;height:90px;border:0;background:none;perspective:400px}.page-flip span{position:absolute;inset:0;display:grid;place-items:center;background:#fffbe9;border:1px solid #c8b995;backface-visibility:hidden;transition:transform .4s}.page-flip span:first-child{transform-origin:left}.page-flip span:last-child{transform:rotateY(180deg)}.page-flip[aria-pressed=true] span:first-child{transform:rotateY(-180deg)}.page-flip[aria-pressed=true] span:last-child{transform:rotateY(0)}.book-demo{display:flex;perspective:400px}.book-demo span{display:grid;place-items:center;width:65px;height:80px;background:#fffbe9;border:1px solid #c8b995;transition:transform .3s}.book-demo.turned span:last-child{transform:rotateY(-12deg)}.fold-panel,.pop-panel{padding:15px;background:#dce9d3;border:1px solid #8fa483;animation:spatial-in .3s ease}.fold-panel{transform-origin:top;animation-name:fold-in}.spatial-drawer{padding:14px;background:#c5ddbb;border:2px solid #849c78;box-shadow:0 6px 0 #738d68;transition:transform .3s}.spatial-drawer[aria-expanded=true]{transform:perspective(300px) translateZ(25px) translateY(8px)}.depth-list{display:grid;gap:8px;perspective:400px}.depth-list button{transition:transform .2s}.spatial-crumbs [aria-current]{transform:translateZ(20px);font-weight:700}.orbit-ring{position:absolute;inset:5px 25px;border:1px dashed #8fa483;border-radius:50%;transition:transform .4s}.orbit-ring span{position:absolute;background:#dce9d3;border-radius:50%;padding:5px}.orbit-ring span:nth-child(1){top:0;left:42%}.orbit-ring span:nth-child(2){bottom:10px;left:0}.orbit-ring span:nth-child(3){bottom:10px;right:0}@keyframes spatial-in{from{opacity:0;transform:perspective(400px) translateZ(-80px)}to{opacity:1;transform:perspective(400px) translateZ(0)}}@keyframes fold-in{from{opacity:0;transform:perspective(400px) rotateX(-85deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}
.parallax-scene{position:relative;width:200px;height:90px;overflow:hidden;background:#d6e8d0;border-radius:8px}.parallax-scene span{position:absolute;padding:10px;background:#9cba91;border-radius:8px}.parallax-scene span:first-child{top:5px;left:30px;opacity:.6}.parallax-scene span:last-child{bottom:5px;right:30px}.depth-scroll{width:200px;height:100px;overflow:auto;perspective:400px;background:#e1edd9}.depth-scroll div{height:260px;display:grid;place-items:center}.depth-scroll span{display:block;padding:12px;background:white}.zoom-transition,.rotation-transition{width:150px;padding:20px;text-align:center;background:#c5ddbb;border-radius:8px;transition:transform .4s}.zoom-transition.active{transform:perspective(300px) translateZ(-60px)}.rotation-transition.active{transform:perspective(300px) rotateY(30deg)}.floating-object{width:75px;padding:14px;text-align:center;border-radius:50%;background:#bcd5b1;box-shadow:0 12px 10px #0003;animation:spatial-float 2s ease-in-out infinite}.spring-track,.inertia-track{width:200px;height:45px;border-bottom:3px solid #b5c8ac}.spring-track span,.inertia-track span{display:block;width:35px;height:35px;border-radius:50%;background:#719564}.spring-track span{transition:transform .6s cubic-bezier(.18,1.7,.4,1)}.spring-track span.active{transform:translateX(150px)}.squash-object{width:80px;height:65px;border:0;border-radius:50%;background:#9dbd90;box-shadow:0 6px 0 #6d8f61;transition:transform .15s}.squash-object:active{transform:scale(1.2,.7)}.paper-motion{width:100px;height:70px;background:#fff9df;border:1px solid #c9bd93;transform-origin:top;padding:10px}.paper-motion.moving{animation:paper-sway .65s ease-in-out}.hologram-panel{padding:18px;background:#7adbd877;border:1px solid #62bcbc;color:#1f6d72;box-shadow:0 0 20px #67c7ca99;transform:perspective(300px) rotateY(-12deg)}.spatial-tip p{position:absolute;z-index:2;padding:10px;background:#293d25;color:white;border-radius:8px;box-shadow:0 9px 15px #0005;transform:translateY(-5px)}.spatial-ring{--progress:50%;display:grid;place-items:center;width:90px;height:90px;border-radius:50%;background:conic-gradient(#638e50 var(--progress),#dbe7d5 0);box-shadow:0 7px 0 #a4b99b,0 10px 8px #0002;transform:perspective(250px) rotateX(15deg)}.spatial-ring span{display:grid;place-items:center;width:65px;height:65px;border-radius:50%;background:#f9fbf6}.loading-cube{width:45px;height:45px;background:linear-gradient(135deg,#deeed6,#709363);box-shadow:5px 5px 0 #58764e;transform:perspective(200px) rotateY(25deg)}.loading-cube.running{animation:cube-spin 1.3s linear infinite}.spatial-chart{display:flex;align-items:end;gap:12px;height:110px;padding:10px;perspective:250px}.spatial-chart span{display:grid;align-items:end;justify-content:center;width:30px;background:#87a77b;box-shadow:5px -4px 0 #bcd3b1;transform:skewY(-8deg)}@keyframes spatial-float{50%{transform:translateY(-10px)}}@keyframes paper-sway{25%{transform:perspective(250px) rotateX(22deg)}75%{transform:perspective(250px) rotateX(-12deg)}}@keyframes cube-spin{to{transform:perspective(200px) rotateY(385deg)}}
.object-scene{display:grid;place-items:center;width:200px;height:135px;perspective:450px}.object-cube{position:relative;width:66px;height:66px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(30deg);transition:transform .2s}.object-cube i{position:absolute;inset:0;background:#98bd89dd;border:1px solid #567a4c}.object-cube i:nth-child(1){transform:translateZ(33px)}.object-cube i:nth-child(2){transform:rotateY(180deg) translateZ(33px)}.object-cube i:nth-child(3){transform:rotateY(90deg) translateZ(33px)}.object-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(33px)}.object-cube i:nth-child(5){transform:rotateX(90deg) translateZ(33px)}.object-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(33px)}.turntable-scene{background:radial-gradient(ellipse at 50% 85%,#809b75 0 30%,transparent 31%)}.object-cube.object-spin{animation:object-spin 4s linear infinite}.exploded-scene{display:grid;place-items:center;height:130px;perspective:400px}.exploded-scene span{grid-area:1/1;width:90px;height:35px;display:grid;place-items:center;background:#a6c99c;border:1px solid #6e9363;transform:rotateX(55deg);transition:transform .4s}.exploded-scene span:first-child{transform:translateY(-12px) rotateX(55deg)}.exploded-scene span:last-child{transform:translateY(12px) rotateX(55deg)}.exploded-scene.expanded span:first-child{transform:translateY(-45px) rotateX(55deg)}.exploded-scene.expanded span:last-child{transform:translateY(45px) rotateX(55deg)}.cross-section{width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#d4ebca,#6d9861);box-shadow:10px 9px 0 #648a59;display:grid;place-items:center}.cross-section span{visibility:hidden}.cross-section.section{background:radial-gradient(circle,#d6a778 0 25%,#e3c9a3 26% 50%,#75a06b 51%)}.cross-section.section span{visibility:visible}.spatial-objects{display:flex;gap:25px;perspective:300px}.spatial-objects button,.gizmo-object,.drag-object,.depth-object{width:65px;height:65px;border:1px solid #58764e;background:#a8c99d;box-shadow:8px 8px 0 #688b5d;transform:rotateY(-15deg);color:#263c24}.spatial-objects [aria-pressed=true]{outline:3px solid #e2b33f;outline-offset:4px}.gizmo-scene,.drag-scene{display:grid;place-items:center;width:200px;height:110px;background:#e3eddf;perspective:350px;overflow:hidden}.drag-object{touch-action:none;cursor:grab}.depth-object{display:grid;place-items:center;transition:transform .15s}.snap-scene{width:160px;height:55px;background:repeating-linear-gradient(90deg,#dce9d3 0 28px,#8fa483 29px 30px);display:flex;align-items:center}.snap-scene span{width:30px;height:30px;background:#668a5a;box-shadow:3px 4px 0 #466b3e}.map-spatial{display:grid;place-items:center;width:210px;height:130px;perspective:350px;overflow:hidden}.map-spatial div{position:relative;width:150px;height:110px;background:#cbe0bf;transform:rotateX(55deg);transform-style:preserve-3d}.map-spatial span{position:absolute;width:30px;height:30px;background:#7eaa71;box-shadow:5px -10px 0 #506f49}.map-spatial span:nth-child(1){left:20px;top:20px}.map-spatial span:nth-child(2){left:75px;top:15px;height:45px}.map-spatial span:nth-child(3){left:50px;bottom:10px}.marker-scene,.follow-scene,.billboard-scene,.callout-scene,.magnifier-scene,.measure-scene,.minimap-scene{position:relative;width:200px;height:100px;background:#dce9d3;border-radius:8px;overflow:hidden}.marker-scene span{position:absolute;left:50%;top:30%;color:#c63838;transform:translateX(-50%);font-size:30px}.follow-object{position:absolute;left:75px;top:40px;width:40px;height:35px;background:#7fa773;box-shadow:5px -5px 0 #5c8052}.follow-object span{position:absolute;bottom:100%;left:0;background:white;white-space:nowrap;padding:3px}.billboard-scene{display:grid;place-items:center;perspective:250px}.billboard-world{width:110px;height:60px;background:#91b885;transform-style:preserve-3d}.billboard-world span{display:block;width:60px;margin:12px auto;padding:5px;background:white;text-align:center}.callout-scene>span{position:absolute;left:30px;top:40px;background:#89ae7e;padding:8px;box-shadow:6px 6px 0 #5e8055}.callout-label{position:absolute;left:120px;top:10px;background:white;padding:5px}.callout-label:before{content:'';position:absolute;width:50px;height:2px;background:#4d6c45;right:100%;top:22px;transform:rotate(-20deg);transform-origin:right}.magnifier-scene{display:grid;place-items:center}.magnifier-lens{position:absolute;left:50%;top:15px;transform:translateX(-50%);display:grid;place-items:center;width:55px;height:55px;border:4px solid #617e4e;border-radius:50%;background:#fff9;font-size:20px;box-shadow:4px 6px 6px #0004}.measure-scene span{position:absolute;top:40px;width:14px;height:14px;border-radius:50%;background:#516d47;transform:translateX(-50%)}.measure-scene div{position:absolute;top:46px;height:2px;background:#516d47}.minimap-world{position:absolute;inset:12px 60px 15px 10px;background:#9dbd90;transform:perspective(180px) rotateX(35deg)}.minimap-world span,.minimap-overlay i{position:absolute;left:50%;top:50%;width:8px;height:8px;background:#b53636;border-radius:50%;transform:translate(-50%,-50%)}.minimap-overlay{position:absolute;right:5px;top:5px;width:55px;height:35px;border:1px solid #4d6c45;background:#c6ddbc}@keyframes object-spin{to{transform:rotateX(-20deg) rotateY(390deg)}}
.magnifier-pattern{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,#5e8055 10px 11px),repeating-linear-gradient(0deg,#edf5e9 0 9px,#5e8055 10px 11px)}.magnifier-scene .magnifier-lens{background:repeating-linear-gradient(90deg,transparent 0 19px,#5e8055 20px 22px),repeating-linear-gradient(0deg,#edf5e9 0 19px,#5e8055 20px 22px)}@media(prefers-reduced-motion:reduce){.floating-object,.object-cube.object-spin,.loading-cube.running,.paper-motion.moving,.fold-panel,.pop-panel{animation:none!important}.spatial-button,.spatial-card,.flip-inner,.carousel-ring,.cube,.wheel-ring,.orbit-ring,.page-flip span,.book-demo span,.object-cube,.exploded-scene span{transition:none!important}}