/* SamGo playground: isolated from the landing page and application UI. */
.effects-lab { padding-top:94px; background:#183e33; }
.effects-lab .demo-heading h2 { font-size:clamp(33px,3.8vw,53px); line-height:1.35; }
.effects-lab .demo-heading h2 span { color:#dcf99c; }
.effects-lab .demo-heading>p:last-of-type { margin-top:22px; line-height:1.9; color:#b8cec1; font-size:14px; }
.lab-heading-tags { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:25px; }
.lab-heading-tags span { padding:4px 11px; border:1px solid #7b9a7f50; border-radius:4px; color:#b4cba7; font-size:10px; letter-spacing:.04em; }
.lab-shell { background:#113328; border:1px solid #678b6759; border-radius:13px; overflow:hidden; box-shadow:0 25px 60px #08261b40; }
.lab-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 22px; border-bottom:1px solid #6687693b; }
.lab-topbar>span:first-child { display:flex; align-items:center; gap:8px; font:600 15px Arial,sans-serif; }
.lab-topbar b { font:400 11px var(--font); margin-left:7px; color:#98b5a3; padding-left:15px; border-left:1px solid #68846c65; }
.lab-topbar img { border-radius:6px; }
.lab-live { display:flex; align-items:center; gap:7px; font:8px Arial,sans-serif; letter-spacing:.12em; color:#a8c48c; }
.lab-live i { width:5px; height:5px; background:#cdf693; border-radius:50%; box-shadow:0 0 8px #cdf69370; }
.lab-layout { display:grid; grid-template-columns:305px minmax(0,1fr); }
.lab-sidebar { padding:23px 17px 22px; display:flex; flex-direction:column; min-width:0; }
.lab-side-label { font-size:10px; color:#88aa96; letter-spacing:.04em; margin-bottom:17px; }
.lab-groups { display:flex; gap:3px; border-bottom:1px solid #65836d40; padding-bottom:15px; margin-bottom:16px; }
.lab-groups button { border:0; padding:7px 8px; border-radius:4px; background:transparent; color:#9fb6a1; font-size:11px; white-space:nowrap; min-height:35px; }
.lab-groups button.active { color:#e2f3cd; background:#d1edb314; }
.lab-groups button:hover { background:#d1edb320; }
.lab-groups button>span { font-size:8px; opacity:.55; margin-left:4px; }
.lab-tasks { display:flex; flex-direction:column; gap:8px; }
.lab-task { width:100%; display:flex; align-items:center; gap:9px; text-align:left; padding:15px 10px; border:1px solid #6b8b713f; background:#ffffff02; color:#d2e2d0; border-radius:6px; position:relative; overflow:hidden; transition:background .25s, transform .25s, border-color .25s; }
.lab-task:hover { background:#dbf99c0a; border-color:#a1c67c80; transform:translateX(2px); }
.lab-task.active { background:#e3f5c9; color:#244b38; border-color:#e3f5c9; }
.lab-task.active::before { content:""; width:3px; height:26px; background:#416f35; position:absolute; left:0; top:50%; transform:translateY(-50%); }
.lab-task-icon { display:grid; place-items:center; width:22px; flex-shrink:0; }
.lab-task-icon .icon { width:17px; height:17px; }
.lab-task>span:nth-child(2) { min-width:0; }
.lab-task strong { display:block; font-size:11px; font-weight:550; line-height:1.8; letter-spacing:-.01em; }
.lab-task small { display:block; font-size:9px; color:#88a28f; margin-top:4px; }
.lab-task.active small { color:#789464; }
.lab-task-arrow { margin-left:auto; color:#9bb98e; font-size:17px; }
.lab-task.active .lab-task-arrow { color:#416838; }
.lab-response { display:flex; gap:9px; align-items:start; margin-top:22px; color:#9fbd9e; font-size:11px; line-height:1.9; }
.lab-response>.icon { width:15px; height:15px; margin-top:3px; color:#c4e59a; }
.lab-next { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 2px 0; border:0; border-top:1px solid #5f7e6340; background:transparent; margin-top:auto; color:#a6c096; font-size:10px; }
.lab-response + .lab-next { margin-top:25px; }
.lab-next>span { font-size:17px; }
.lab-right { min-width:0; background:#fcfdf8; color:#21362b; border-left:1px solid #50634a; display:flex; flex-direction:column; }
.lab-canvas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:43px; border-bottom:1px solid #e2e8db; padding:7px 20px; background:#f0f3e9; color:#829176; font:9px Arial,sans-serif; }
.lab-canvas-toolbar>div { display:flex; align-items:center; gap:8px; min-width:0; }
.lab-canvas-dot { width:5px; height:5px; border-radius:50%; background:#89aa68; flex-shrink:0; }
#lab-location { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lab-mode { margin-left:auto; font-size:7px; letter-spacing:.08em; white-space:nowrap; }
.lab-reset { border:0; background:transparent; color:#7b8c6d; display:grid; place-items:center; width:30px; height:28px; border-radius:4px; flex-shrink:0; }
.lab-reset:hover { background:#e0e7d6; }
.lab-reset>.icon { width:13px; height:13px; }
.lab-stage { padding:28px; min-height:545px; flex:1; min-width:0; position:relative; }
.lab-canvas-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid #e2e8db; padding:12px 20px; background:#f3f6ee; color:#7f9071; font-size:10px; line-height:1.7; }
.lab-canvas-footer>span:first-child { display:flex; align-items:center; gap:7px; }
.lab-canvas-footer .icon { width:13px; height:13px; }
.lab-task-counter { font:8px Arial,sans-serif; white-space:nowrap; color:#9cab8d; }
.lab-disclaimer { display:flex; justify-content:space-between; gap:20px; color:#819e8d; padding:13px 21px; font-size:9px; }
.lab-disclaimer>span:last-child { color:#608473; font:7px Arial,sans-serif; letter-spacing:.12em; align-self:center; }
.lab-noscript { margin-top:20px; text-align:center; }
.effects-lab .demo-bottom { font-size:12px; padding-block:29px 5px; }
.effects-lab button:focus-visible,.effects-lab input:focus-visible,.effects-lab select:focus-visible,[tabindex="0"]:focus-visible { outline:2px solid #80a75b; outline-offset:3px; }

/* Shared controls inside the miniature, fully functional website. */
.fx-heading { margin-bottom:22px; }
.fx-overline { display:block; font:8px/1.6 Arial,sans-serif; letter-spacing:.15em; color:#8a9c73; }
.fx-heading h3 { font:400 clamp(23px,2.5vw,33px)/1.13 Georgia,"Times New Roman",serif; letter-spacing:-.04em; color:#284330; margin-top:10px; }
.fx-heading>p { font-size:11px; line-height:1.8; color:#829176; margin-top:10px; }
.fx-chips { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.fx-chips button { border:1px solid #dde5d2; background:transparent; color:#879573; font-size:10px; border-radius:5px; padding:7px 12px; min-height:34px; line-height:1.5; transition:background .2s,color .2s,border-color .2s; }
.fx-chips button:hover { border-color:#86a560; }
.fx-chips button.active { background:#244e3a; color:#edf9dd; border-color:#244e3a; }
.lab-stage input,.lab-stage select { font:11px var(--font); color:#566c47; background:#fff; border:1px solid #dfe7d4; border-radius:4px; min-width:0; }
.lab-stage input[type="range"] { appearance:none; -webkit-appearance:none; background:#dbe6cc; height:3px; border:0; border-radius:10px; accent-color:#416f35; cursor:ew-resize; min-width:0; }
.lab-stage input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px; border:3px solid #fafdf5; background:#587f3c; border-radius:50%; box-shadow:0 0 0 1px #adbf97; }
.lab-stage input[type="range"]::-moz-range-thumb { width:11px; height:11px; border:3px solid #fafdf5; background:#587f3c; border-radius:50%; }
.lab-stage input[type="checkbox"] { accent-color:#386944; width:14px; height:14px; }
.fx-small-note { font-size:9px; color:#96a388; line-height:1.9; margin-top:16px; }
.fx-inline-button { border:0; background:#284c38; color:#e6f4d8; padding:10px 13px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:10px; border-radius:4px; min-height:37px; }
.fx-inline-button:hover { background:#123c28; }
.fx-square-button { display:inline-grid; place-items:center; min-width:35px; height:35px; background:#f5f8ef; border:1px solid #dfe8d2; border-radius:5px; font-size:17px; color:#587244; }
.fx-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:32px 20px; border:1px dashed #cddbbd; border-radius:6px; color:#839872; min-height:170px; text-align:center; }
.fx-empty>span { font:35px Georgia,serif; }
.fx-empty strong { font-size:13px; font-weight:550; }
.fx-empty p { font-size:10px; }

/* 01 / Compound filters with keyed, animated product positions. */
.fx-filter-toolbar { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.fx-search { display:flex; align-items:center; gap:8px; background:white; border:1px solid #dfe7d4; border-radius:5px; padding-inline:11px; min-width:0; }
.fx-search>span { font:23px/1 Georgia,serif; color:#839e67; }
.fx-search input { width:100%; min-height:36px; border:0; background:transparent; font-size:11px; padding:5px 0; outline-offset:0!important; }
.fx-sort { display:flex; align-items:center; gap:8px; color:#8c9a7c; font-size:9px; }
.fx-sort select { border:0; background:transparent; padding:9px 2px; font-size:10px; }
.fx-filter-line { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:14px; }
.fx-capacity select { padding:7px; min-height:34px; font-size:10px; }
.fx-area-row { display:flex; align-items:center; gap:13px; margin-top:15px; padding-bottom:18px; border-bottom:1px solid #e4eadb; }
.fx-area-row label { font-size:10px; white-space:nowrap; color:#8a977c; }
.fx-area-row output { margin-left:6px; color:#54753a; font-weight:600; }
.fx-area-row input { flex:1; max-width:210px; }
.fx-area-row button { margin-left:auto; padding:4px; min-height:30px; border:0; background:transparent; color:#8a9a79; font-size:9px; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
.fx-results-meta { display:flex; justify-content:space-between; margin-block:14px 12px; color:#839575; font-size:9px; }
.fx-results-meta>span:last-child { color:#a2ad96; font-size:8px; }
.fx-result-grid,.fx-catalogue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.fx-product { border:1px solid #e4eadb; background:white; border-radius:6px; padding:9px; text-align:left; min-width:0; transition:border-color .2s,box-shadow .2s; overflow:hidden; }
.fx-product:hover { border-color:#a7c580; box-shadow:0 8px 22px #536c2520; }
.fx-product-art { display:block; background:#f1f4eb; padding:9px 3px; position:relative; border-radius:3px; overflow:hidden; }
.fx-product-art img { width:100%; height:87px; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.fx-product:hover img { transform:scale(1.07); }
.fx-product-series { position:absolute; top:5px; left:6px; font:6px/1 Arial,sans-serif; letter-spacing:.08em; color:#98a887; }
.fx-product-title { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font:600 12px Arial,sans-serif; color:#3a5632; }
.fx-product-title>span { font-size:14px; color:#8da675; }
.fx-product-meta { display:block; margin-top:6px; font:9px Arial,var(--font),sans-serif; color:#93a181; }
.fx-product-meta i { font-style:normal; padding-inline:6px; color:#b8c5a7; }

/* 02 / Expanding category panels. */
.fx-category-rack { display:flex; gap:10px; min-height:355px; }
.fx-category-card { background:var(--cat-tone); border:1px solid #566a341a; border-radius:7px; flex:1; position:relative; overflow:hidden; min-width:0; transition:flex .7s cubic-bezier(.2,.8,.2,1); }
.fx-category-card.active { flex:2.55; }
.fx-category-toggle { background:transparent; border:0; padding:22px 17px 14px; display:flex; flex-direction:column; align-items:start; width:100%; color:#455d3e; position:relative; z-index:2; }
.fx-category-toggle>span:first-child { font:9px Arial,sans-serif; opacity:.5; }
.fx-category-toggle>strong { font:400 63px/1 Georgia,serif; margin-top:25px; letter-spacing:-.07em; }
.fx-category-toggle small { display:block; font:7px Arial,sans-serif; letter-spacing:.12em; margin-top:9px; }
.fx-category-toggle .fx-category-plus { position:absolute; top:19px; right:17px; font-size:18px; opacity:.6; }
.fx-category-card.active .fx-category-toggle { padding-bottom:2px; }
.fx-category-card.active .fx-category-toggle>strong { font-size:43px; margin-top:20px; }
.fx-category-detail { position:relative; z-index:2; padding:0 16px 18px; animation:fx-reveal-content .55s ease both; }
.fx-category-detail>p { font-size:9px; color:#6e825b; margin-top:8px; }
.fx-category-detail>img { width:100%; height:132px; object-fit:contain; mix-blend-mode:multiply; transition:transform .6s; }
.fx-category-card:hover .fx-category-detail>img { transform:translateY(-4px); }
.fx-category-detail .fx-inline-button { width:100%; font-size:9px; padding:10px; }
.fx-category-watermark { position:absolute; bottom:-12px; left:4px; font:200px/.9 Georgia,serif; color:#3957320b; pointer-events:none; }

/* 03 / Comparison with a real selection limit and differences toggle. */
.fx-compare-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.fx-compare-option { position:relative; border:1px solid #dfe7d3; border-radius:5px; padding:10px 6px; background:#f5f7f0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; font:11px Arial,sans-serif; color:#6e825c; }
.fx-compare-option:has(:checked) { background:#edf4e1; border-color:#9cba7b; }
.fx-compare-option input { position:absolute; top:4px; left:4px; }
.fx-compare-option img { width:100%; height:70px; object-fit:contain; mix-blend-mode:multiply; }
.fx-compare-option>span { font-weight:600; }
.fx-compare-tools { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-block:20px; font-size:10px; color:#8b9a7c; }
.fx-check { display:flex; align-items:center; gap:6px; cursor:pointer; }
.fx-table-wrap { border:1px solid #dce6ce; border-radius:6px; overflow-x:auto; }
.fx-comparison-table { width:100%; border-collapse:collapse; font:11px/1.6 Arial,var(--font),sans-serif; table-layout:fixed; color:#587045; }
.fx-comparison-table caption { font-size:9px; text-align:left; padding:13px; background:#f1f6e9; color:#8da179; }
.fx-comparison-table th,.fx-comparison-table td { padding:18px 10px; text-align:center; border-bottom:1px solid #e3ebd8; border-right:1px solid #e6eddd; overflow-wrap:anywhere; }
.fx-comparison-table thead th { background:#e9f1df; color:#3c5c2e; font-size:15px; font-weight:500; }
.fx-comparison-table tr>th:first-child { font-size:10px; font-weight:400; background:#f6f9f0; color:#81946c; width:23%; }
.fx-comparison-table tr>td:last-child,.fx-comparison-table tr>th:last-child { border-right:0; }
.fx-comparison-table tr:last-child td,.fx-comparison-table tr:last-child th { border-bottom:0; }
.fx-compare-note { font-size:10px; color:#819c69; margin-top:16px; }

/* 04 / Interactive annotated image. */
.fx-hotspot-scene { position:relative; background:#eef2e5; border-radius:6px; min-height:285px; display:grid; place-items:center; overflow:hidden; }
.fx-hotspot-scene>img { width:91%; max-height:250px; object-fit:contain; position:relative; z-index:1; mix-blend-mode:multiply; }
.fx-hotspot-grid { position:absolute; inset:0; background-image:linear-gradient(#bdcba238 1px,transparent 1px),linear-gradient(90deg,#bdcba238 1px,transparent 1px); background-size:30px 30px; }
.fx-hotspot { position:absolute; z-index:3; transform:translate(-50%,-50%); width:35px; height:35px; border:1px solid #f4fbdc; border-radius:50%; background:#2d5c43; color:#ebffbf; font:11px Arial,sans-serif; box-shadow:0 0 0 6px #d2e9b04d; }
.fx-hotspot::before { content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid #749958; animation:fx-breathe 3s ease-in-out infinite; }
.fx-hotspot.active { background:#e3f99e; border-color:#254b37; color:#224834; box-shadow:0 0 0 6px #365b3c38; }
.fx-scene-label { position:absolute; left:16px; bottom:15px; font:7px Arial,sans-serif; letter-spacing:.12em; color:#83986d; }
.fx-hotspot-info { display:flex; align-items:start; gap:17px; padding:22px 5px 3px; min-height:116px; }
.fx-point-number { background:#e4eed7; color:#6c8b4f; border-radius:5px; display:grid; place-items:center; width:34px; height:34px; font:12px Arial,sans-serif; flex-shrink:0; }
.fx-hotspot-info>div>span { font-size:9px; color:#90a07f; }
.fx-hotspot-info h4 { font:500 23px/1.3 Georgia,serif; margin:4px 0 7px; color:#3d6031; }
.fx-hotspot-info p { font-size:11px; color:#81976e; }
.fx-hotspot-info>.icon { margin-left:auto; width:17px; height:17px; color:#8d9f7c; }

/* 05 / Gallery and native, focus-trapped lightbox. */
.fx-gallery-main { display:block; position:relative; width:100%; background:#f1f4e9; padding:16px; border:1px solid #e1e7d6; border-radius:6px; overflow:hidden; }
.fx-gallery-main>img { width:100%; height:255px; object-fit:contain; mix-blend-mode:multiply; transition:transform .6s; }
.fx-gallery-main:hover>img { transform:scale(1.06); }
.fx-gallery-zoom { position:absolute; bottom:13px; right:13px; padding:7px 11px; background:#fafff1d9; backdrop-filter:blur(10px); border:1px solid #c7d5b6; border-radius:4px; font-size:9px; color:#6a8a4c; display:flex; align-items:center; gap:5px; }
.fx-gallery-zoom .icon { width:13px; height:13px; }
.fx-gallery-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:16px; }
.fx-gallery-bar>div { display:flex; align-items:center; gap:9px; }
.fx-gallery-bar>div:first-child { gap:14px; }
.fx-gallery-bar span { font:9px Arial,sans-serif; color:#9da991; }
.fx-gallery-bar strong { font-size:11px; color:#57723f; font-weight:500; }
.fx-gallery-thumbs { display:flex; gap:10px; margin-top:14px; }
.fx-gallery-thumbs>button { width:83px; height:58px; padding:6px; background:#f3f6ec; border:1px solid #e1e9d6; border-radius:4px; }
.fx-gallery-thumbs>button.active { border-color:#658c40; box-shadow:0 0 0 1px #658c40; }
.fx-gallery-thumbs img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.fx-lightbox { width:min(950px,calc(100vw - 34px)); border:1px solid #d6e4c6; border-radius:12px; padding:40px 35px 24px; background:#f9fcf3; color:#3d5d32; }
.fx-lightbox::backdrop { background:#09241de8; backdrop-filter:blur(10px); }
.fx-lightbox>img { width:100%; height:min(62vh,560px); object-fit:contain; mix-blend-mode:multiply; }
.fx-lightbox>p { font-size:12px; margin-top:10px; }
#fx-lightbox-close { position:absolute; top:8px; right:10px; width:35px; height:35px; background:transparent; border:0; font-size:29px; color:#7a9164; }
.fx-lightbox>div { display:flex; gap:10px; justify-content:end; }
.fx-lightbox>div button { width:43px; height:37px; background:#e5efda; border:1px solid #cadbb7; border-radius:4px; color:#5d7d40; font-size:21px; }
.fx-lightbox-open { overflow:hidden; }

/* 06 / Tilt card: pointer and keyboard controls share the same CSS variables. */
.fx-tilt-zone { display:grid; place-items:center; padding:32px 35px; min-height:334px; perspective:900px; background:#dfe9d2; background-image:radial-gradient(#afc39950 .6px,transparent .6px); background-size:15px 15px; border-radius:7px; }
.fx-tilt-card { --rx:0deg; --ry:0deg; --sx:50%; --sy:50%; width:100%; max-width:415px; padding:23px; border:1px solid #c1d2ac; border-radius:13px; background:#ecf5df; box-shadow:0 28px 35px -14px #3c552d4d; position:relative; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .15s ease-out; }
.fx-tilt-light { position:absolute; inset:0; background:radial-gradient(circle at var(--sx) var(--sy),#ffffffbd,transparent 60%); border-radius:inherit; pointer-events:none; }
.fx-tilt-top { display:flex; align-items:center; justify-content:space-between; position:relative; font:8px Arial,sans-serif; letter-spacing:.15em; color:#6e8b55; transform:translateZ(18px); }
.fx-tilt-top>span:last-child { font-size:22px; }
.fx-tilt-word { display:block; position:absolute; top:50px; left:20px; font:700 clamp(48px,6vw,85px)/1 Arial,sans-serif; letter-spacing:-.07em; color:#8fa9782c; transform:translateZ(3px); }
.fx-tilt-card>img { width:100%; height:150px; object-fit:contain; position:relative; mix-blend-mode:multiply; transform:translateZ(46px); margin-top:13px; }
.fx-tilt-bottom { display:flex; justify-content:space-between; align-items:end; gap:16px; position:relative; transform:translateZ(20px); margin-top:15px; }
.fx-tilt-bottom strong { font:500 26px/1.3 Georgia,serif; color:#3c5c30; display:block; }
.fx-tilt-bottom>div>span { font:8px Arial,sans-serif; display:block; margin-top:5px; color:#7d9667; }
.fx-tilt-bottom>span { text-align:right; font:15px/1.6 Arial,sans-serif; color:#3d6330; }
.fx-tilt-bottom small { font-size:6px; letter-spacing:.07em; }
.fx-tilt-controls { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:17px; }
.fx-tilt-controls button { border:1px solid #dbe5cf; background:#f4f8ec; border-radius:4px; padding:7px 11px; min-height:35px; font-size:10px; color:#7b9462; }
.fx-tilt-controls button:last-child { padding:7px; display:grid; place-items:center; }
.fx-tilt-controls .icon { width:14px; height:14px; }
.fx-tilt-controls>span { font-size:9px; color:#93a281; }

/* 07 / Three CSS-only motion compositions; paused out of view. */
.fx-motion-scene { height:338px; position:relative; background:#e2ecd4; border:1px solid #d6e0c8; border-radius:7px; overflow:hidden; isolation:isolate; transition:background .6s; }
.fx-motion-mesh { position:absolute; inset:0; background-image:linear-gradient(#8ca5781a 1px,transparent 1px),linear-gradient(90deg,#8ca5781a 1px,transparent 1px); background-size:29px 29px; mask-image:linear-gradient(transparent,#000); }
.fx-motion-copy { position:absolute; top:33px; left:25px; font:700 clamp(36px,4.6vw,65px)/.91 Arial,sans-serif; color:#6383422b; letter-spacing:-.075em; }
.fx-motion-product { position:absolute; top:40%; left:12%; width:76%; z-index:3; mix-blend-mode:multiply; animation:fx-levitate 5s ease-in-out infinite; }
.fx-motion-product>img { width:100%; height:165px; object-fit:contain; mix-blend-mode:multiply; }
.fx-motion-shadow { display:block; width:69%; height:12px; border-radius:50%; margin:0 auto; filter:blur(10px); background:#536a385e; animation:fx-shadow 5s ease-in-out infinite; }
.fx-motion-orbit { width:240px; height:240px; border:1px solid #5d853eb3; position:absolute; border-radius:50%; top:49%; left:50%; transform:translate(-50%,-50%) rotateX(60deg); opacity:0; transition:opacity .5s; }
.fx-motion-orbit::before { content:""; position:absolute; width:8px; height:8px; background:#80a74d; border-radius:50%; top:50%; left:-4px; box-shadow:0 0 10px #b9e582; }
.fx-motion-orbit.orbit-a { animation:fx-orbit-a 13s linear infinite; }
.fx-motion-orbit.orbit-b { width:290px; height:290px; animation:fx-orbit-b 18s linear infinite; border-style:dashed; }
.fx-motion-orbit.orbit-c { width:345px; height:345px; animation:fx-orbit-a 24s linear infinite reverse; opacity:0; }
.fx-motion-scene[data-motion="orbit"] { background:#e4eee1; }
.fx-motion-scene[data-motion="orbit"] .fx-motion-orbit { opacity:1; }
.fx-motion-scene[data-motion="orbit"] .fx-motion-product { animation-name:fx-orbit-float; }
.fx-motion-badge { display:flex; align-items:center; gap:6px; position:absolute; bottom:21px; left:23px; font:8px Arial,sans-serif; letter-spacing:.09em; color:#759254; z-index:4; }
.fx-motion-badge i { width:4px; height:4px; background:#739247; border-radius:50%; }
.fx-motion-axis { position:absolute; right:21px; bottom:21px; font:8px Arial,sans-serif; letter-spacing:.1em; color:#8eaa70; z-index:4; }
.fx-scan-line { position:absolute; z-index:5; left:0; right:0; height:65px; top:0; background:linear-gradient(transparent,#9affcd1f); border-bottom:1px solid #a8f6d482; opacity:0; pointer-events:none; animation:fx-scan 5s ease-in-out infinite; }
.fx-motion-scene[data-motion="scan"] { background:#142d28; border-color:#375243; }
.fx-motion-scene[data-motion="scan"] .fx-motion-copy { color:#b2f4c926; }
.fx-motion-scene[data-motion="scan"] .fx-motion-product>img { filter:invert(1); mix-blend-mode:screen; opacity:.8; }
.fx-motion-scene[data-motion="scan"] .fx-motion-product { animation:none; mix-blend-mode:screen; }
.fx-motion-scene[data-motion="scan"] .fx-motion-shadow { opacity:0; }
.fx-motion-scene[data-motion="scan"] .fx-scan-line { opacity:1; }
.fx-motion-scene[data-motion="scan"] .fx-motion-badge,.fx-motion-scene[data-motion="scan"] .fx-motion-axis { color:#96c6a3; }
.fx-motion-scene * { animation-play-state:paused; }
.fx-motion-scene.playing * { animation-play-state:running; }
.lab-shell:not(.lab-in-view) .fx-motion-scene *,.lab-document-hidden .fx-motion-scene * { animation-play-state:paused; }
.fx-motion-tools { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:17px; }
.fx-pause { border:1px solid #d4e0c6; border-radius:5px; background:#f4f8ed; padding:8px 11px; font-size:10px; min-height:34px; color:#6e8c56; }

/* 08 / Branding controls. */
.fx-brand-preview { --brand-accent:#275542; --brand-radius:12px; background:#eef1e8; border:1px solid #dce5d1; border-radius:var(--brand-radius); padding:25px; color:#364630; position:relative; overflow:hidden; transition:background .35s,color .35s,border-radius .25s; }
.fx-brand-top { display:flex; align-items:center; justify-content:space-between; gap:15px; font:9px Arial,sans-serif; }
.fx-brand-top strong { font-size:11px; letter-spacing:-.035em; }
.fx-brand-top>span { font-size:7px; letter-spacing:.12em; color:#8b967f; }
.fx-brand-layout { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:10px; min-height:245px; }
.fx-brand-tag { display:block; color:var(--brand-accent); font:7px Arial,sans-serif; letter-spacing:.14em; }
.fx-brand-layout h4 { font:500 43px/.97 Georgia,serif; letter-spacing:-.05em; margin:15px 0 20px; }
.fx-brand-layout em { font-style:normal; color:var(--brand-accent); transition:color .3s; }
.fx-brand-cta { display:inline-block; padding:10px 13px; border-radius:calc(var(--brand-radius) / 3); background:var(--brand-accent); color:#fff; font:8px Arial,sans-serif; transition:background .3s; }
.fx-brand-layout>img { width:100%; height:170px; object-fit:contain; mix-blend-mode:multiply; }
.fx-brand-rule { display:block; height:2px; background:var(--brand-accent); opacity:.5; transition:background .3s; }
.fx-brand-preview[data-background="dark"] { background:#202b25; color:#e7edde; border-color:#42533c; }
.fx-brand-preview[data-background="dark"] .fx-brand-layout>img { mix-blend-mode:normal; border-radius:50%; background:#eef1e8; padding:13px; }
.fx-brand-preview[data-background="dark"] em,.fx-brand-preview[data-background="dark"] .fx-brand-tag { color:color-mix(in srgb,var(--brand-accent),white 45%); }
.fx-customize-tools { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:22px; }
.fx-customize-tools fieldset { border:0; padding:0; margin:0; min-width:0; }
.fx-customize-tools legend { font-size:10px; color:#8a9879; margin-bottom:9px; }
.fx-swatch { width:26px; height:26px; border:3px solid #fafcf7; background:var(--swatch); border-radius:50%; padding:0; margin-right:3px; outline:1px solid transparent; }
.fx-swatch.active { outline-color:var(--swatch); }
.fx-customize-tools .fx-chips { gap:4px; }
.fx-customize-tools .fx-chips button { padding:5px 9px; min-height:28px; font-size:9px; }
.fx-radius { color:#8a9879; font-size:10px; }
.fx-radius output { float:right; font:9px Arial,sans-serif; color:#69904a; }
.fx-radius input { display:block; width:100%; margin:17px 0 0; }

/* 09 / A draggable split uses two full-width layers, never stretched halves. */
.fx-reveal-scene { height:338px; background:#fff; position:relative; border:1px solid #d5dfc8; border-radius:7px; overflow:hidden; cursor:ew-resize; user-select:none; touch-action:pan-y; }
.fx-before,.fx-after { position:absolute; inset:0; padding:25px; overflow:hidden; }
.fx-before { background:#f3f3ef; color:#8f9588; }
.fx-reveal-badge { display:inline-block; position:relative; z-index:3; font:7px Arial,var(--font),sans-serif; letter-spacing:.07em; padding:4px 7px; border:1px solid #c4cabb; color:#838d78; background:#ffffff50; }
.fx-before-nav { font:8px Arial,sans-serif; margin-top:18px; color:#8f958a; }
.fx-before h4 { font:500 22px Arial,sans-serif; margin:25px 0 9px; color:#7a8272; }
.fx-before>p { font:9px Arial,sans-serif; }
.fx-before>img { position:absolute; bottom:37px; right:24px; width:56%; height:148px; object-fit:contain; mix-blend-mode:multiply; filter:grayscale(1); opacity:.72; }
.fx-before-link { position:absolute; bottom:22px; left:25px; font:9px Arial,sans-serif; text-decoration:underline; }
.fx-after { background:#244731; color:#e7f5d6; clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.fx-after .fx-reveal-badge { border-color:#a9c89270; background:#386045; color:#d6edbd; }
.fx-after-mark { position:absolute; right:25px; top:28px; font:9px Arial,sans-serif; letter-spacing:.05em; }
.fx-after h4 { position:relative; z-index:2; font:500 47px/.98 Georgia,serif; letter-spacing:-.045em; margin:25px 0; }
.fx-after>img { position:absolute; bottom:28px; right:17px; width:62%; height:190px; object-fit:contain; background:#e5efd8; padding:12px; border-radius:50%; }
.fx-after-bottom { position:absolute; bottom:18px; left:25px; right:25px; display:flex; justify-content:space-between; font:7px Arial,sans-serif; letter-spacing:.04em; z-index:2; }
.fx-reveal-divider { position:absolute; top:0; bottom:0; width:2px; left:var(--split); background:#e9fab4; box-shadow:0 0 16px #34522460; transform:translateX(-1px); z-index:5; pointer-events:none; }
.fx-reveal-divider>span { position:absolute; top:50%; left:50%; width:37px; height:37px; transform:translate(-50%,-50%); border-radius:50%; background:#d7f394; border:3px solid #f0fada; display:grid; place-items:center; font:21px Arial,sans-serif; color:#446830; box-shadow:0 3px 10px #0a391850; }
.fx-reveal-slider { display:flex; align-items:center; gap:17px; font-size:10px; color:#879a73; margin-top:23px; }
.fx-reveal-slider>input { flex:1; }
.fx-reveal-slider>span { white-space:nowrap; }

/* 10–12 / Familiar tasks, now also interactive. */
.fx-view-tools { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:10px; color:#8d9b7d; margin-bottom:17px; }
.fx-catalogue-grid[data-layout="list"] { grid-template-columns:1fr; gap:9px; }
.fx-catalogue-grid[data-layout="list"] .fx-product { display:grid; grid-template-columns:120px 1fr 100px; align-items:center; gap:20px; padding:7px; }
.fx-catalogue-grid[data-layout="list"] .fx-product img { height:47px; }
.fx-catalogue-grid[data-layout="list"] .fx-product-title,.fx-catalogue-grid[data-layout="list"] .fx-product-meta { margin-top:0; }
.fx-spec-models { margin-bottom:24px; }
.fx-spec-body { display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:center; margin-top:15px; }
.fx-spec-art { background:#eef4e5; padding:18px; border:1px solid #e1e8d7; border-radius:7px; min-height:275px; display:flex; flex-direction:column; justify-content:center; gap:15px; }
.fx-spec-art>span { font:7px Arial,sans-serif; letter-spacing:.08em; color:#8ca073; }
.fx-spec-art>img { width:100%; height:195px; object-fit:contain; mix-blend-mode:multiply; }
.fx-spec-copy h4 { font:500 32px/1.1 Georgia,serif; margin:10px 0 20px; color:#486a36; }
.fx-spec-copy table { width:100%; border-collapse:collapse; font-size:11px; color:#617d4b; }
.fx-spec-copy caption { text-align:left; font-size:8px; color:#95a783; padding-bottom:9px; }
.fx-spec-copy th { text-align:left; font-weight:400; color:#8d9e7c; }
.fx-spec-copy td { text-align:right; font:11px Arial,sans-serif; }
.fx-spec-copy th,.fx-spec-copy td { padding:12px 0; border-bottom:1px solid #e0e9d6; }
.fx-spec-copy .fx-inline-button { margin-top:18px; width:100%; }
.fx-design-tabs { margin-bottom:20px; }
.fx-design-scene { position:relative; height:338px; padding:23px; background:#e8eee0; border:1px solid #d4dfc8; border-radius:7px; overflow:hidden; color:#4a6739; transition:background .5s,color .5s; }
.fx-design-header,.fx-design-footer { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; font:8px Arial,sans-serif; letter-spacing:.05em; }
.fx-design-header span:first-child { font-size:10px; }
.fx-design-text { position:relative; z-index:2; margin-top:33px; }
.fx-design-text>span { font:7px Arial,sans-serif; letter-spacing:.17em; }
.fx-design-text h4 { font:500 47px/.99 Georgia,serif; margin:16px 0; letter-spacing:-.06em; }
.fx-design-scene>img { position:absolute; width:61%; height:185px; bottom:29px; right:15px; object-fit:contain; mix-blend-mode:multiply; transition:transform .6s; }
.fx-design-footer { position:absolute; bottom:20px; left:23px; right:23px; font-size:6px; }
.fx-design-scene[data-design="industrial"] { background:#1e2d30; color:#dce9cd; border-radius:0; border-color:#54746b; }
.fx-design-scene[data-design="industrial"] h4 { font:600 32px/.99 Arial,sans-serif; letter-spacing:-.03em; }
.fx-design-scene[data-design="industrial"]>img { filter:invert(1); mix-blend-mode:screen; opacity:.8; }
.fx-design-scene[data-design="industrial"]::before { content:""; position:absolute; inset:0; background-image:linear-gradient(#bfddbf0d 1px,transparent 1px),linear-gradient(90deg,#bfddbf0d 1px,transparent 1px); background-size:24px 24px; }
.fx-design-scene[data-design="editorial"] { background:#f3dcc8; color:#9b4728; border-color:#d4aa8b; }
.fx-design-scene[data-design="editorial"] h4 { font:500 59px/.88 Georgia,serif; font-style:italic; }
.fx-design-scene[data-design="editorial"]>img { transform:rotate(-5deg); }

@keyframes fx-reveal-content { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fx-breathe { 0%,100% { transform:scale(.9); opacity:.3; } 50% { transform:scale(1.15); opacity:.75; } }
@keyframes fx-levitate { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-15px) rotate(1deg); } }
@keyframes fx-shadow { 0%,100% { transform:scale(1); opacity:.4; } 50% { transform:scale(.83); opacity:.2; } }
@keyframes fx-orbit-float { 0%,100% { transform:translateY(1px) rotate(0); } 50% { transform:translateY(-8px) rotate(-2deg); } }
@keyframes fx-orbit-a { from { transform:translate(-50%,-50%) rotateX(62deg) rotateZ(0); } to { transform:translate(-50%,-50%) rotateX(62deg) rotateZ(360deg); } }
@keyframes fx-orbit-b { from { transform:translate(-50%,-50%) rotateY(58deg) rotateZ(0); } to { transform:translate(-50%,-50%) rotateY(58deg) rotateZ(-360deg); } }
@keyframes fx-scan { 0%,100% { transform:translateY(-65px); opacity:0; } 20% { opacity:1; } 80% { opacity:1; } 95% { transform:translateY(338px); opacity:0; } }

@media (min-width:1450px) { .lab-stage { padding:32px; } .lab-layout { grid-template-columns:320px minmax(0,1fr); } .lab-task strong { font-size:12px; } }
@media (max-width:1150px) and (min-width:1001px) {
  .lab-layout { grid-template-columns:270px minmax(0,1fr); }
  .lab-sidebar { padding-inline:13px; }
  .lab-groups button { font-size:10px; padding-inline:6px; }
  .lab-task { padding:13px 8px; gap:7px; }
  .lab-task strong { font-size:10px; }
  .lab-task small { font-size:8px; }
  .lab-stage { padding:23px; }
  .fx-heading h3 { font-size:28px; }
  .fx-filter-line { gap:8px; }
  .fx-chips button { font-size:9px; padding-inline:9px; }
  .fx-customize-tools { gap:10px; }
  .fx-swatch { width:23px; height:23px; margin-right:1px; }
}
@media (max-width:1000px) {
  .lab-layout { grid-template-columns:1fr; }
  .lab-sidebar { padding:21px 23px 16px; }
  .lab-side-label { margin-bottom:11px; }
  .lab-groups { margin-bottom:13px; padding-bottom:10px; gap:7px; }
  .lab-groups button { font-size:12px; padding-inline:12px; }
  .lab-tasks { display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; gap:9px; padding-bottom:8px; scrollbar-color:#52745d transparent; scrollbar-width:thin; overscroll-behavior-x:contain; }
  .lab-task { flex:0 0 235px; scroll-snap-align:start; padding:12px 10px; }
  .lab-task:hover { transform:none; }
  .lab-task strong { font-size:10px; }
  .lab-task small { font-size:9px; }
  .lab-response { margin-top:12px; font-size:11px; }
  .lab-response + .lab-next { margin-top:12px; padding-top:9px; align-self:end; gap:20px; min-width:150px; }
  .lab-right { border-left:0; border-top:1px solid #688468; }
  .lab-stage { min-height:520px; padding:27px; }
  .fx-heading h3 { font-size:33px; }
  .fx-product-art img { height:112px; }
  .fx-category-rack { min-height:365px; }
  .fx-category-detail>img { height:144px; }
  .fx-motion-scene { height:350px; }
  .fx-motion-copy { font-size:64px; }
  .fx-tilt-zone { min-height:348px; }
  .fx-brand-layout h4 { font-size:48px; }
  .fx-customize-tools { gap:25px; }
}
@media (max-width:640px) {
  .effects-lab { padding-top:63px; }
  .effects-lab .demo-heading h2 { font-size:32px; line-height:1.4; }
  .effects-lab .demo-heading>p:last-of-type { font-size:12px; margin-top:18px; max-width:none; }
  .lab-heading-tags { justify-content:flex-start; gap:6px; margin-top:18px; }
  .lab-heading-tags span { font-size:8px; padding:3px 6px; }
  .lab-heading-tags span:last-child { display:none; }
  .lab-shell { border-radius:8px; }
  .lab-topbar { padding:12px 14px; gap:10px; }
  .lab-topbar>span:first-child { font-size:13px; gap:7px; }
  .lab-topbar img { width:22px; height:22px; }
  .lab-topbar b { font-size:9px; padding-left:10px; margin-left:3px; }
  .lab-live { font-size:6px; gap:5px; letter-spacing:.06em; }
  .lab-sidebar { padding:17px 13px 13px; }
  .lab-side-label { font-size:9px; margin-bottom:9px; }
  .lab-groups { gap:4px; margin-bottom:10px; padding-bottom:10px; }
  .lab-groups button { font-size:11px; padding:6px 9px; min-height:33px; }
  .lab-groups button>span { font-size:7px; }
  .lab-tasks { gap:8px; margin-right:-3px; padding-bottom:8px; }
  .lab-task { flex-basis:226px; padding:12px 10px; gap:7px; }
  .lab-task strong { font-size:10px; }
  .lab-task small { font-size:8px; }
  .lab-task-icon { width:20px; }
  .lab-task-icon .icon { width:15px; height:15px; }
  .lab-response { font-size:10px; gap:7px; margin-top:10px; }
  .lab-response>.icon { width:13px; height:13px; margin-top:4px; }
  .lab-response + .lab-next { font-size:9px; margin-top:9px; min-width:136px; padding-top:7px; }
  .lab-next>span { font-size:15px; }
  .lab-canvas-toolbar { padding:6px 12px; gap:6px; min-height:36px; font-size:7px; }
  .lab-mode { font-size:6px; letter-spacing:0; }
  .lab-reset { width:24px; height:26px; }
  .lab-reset>.icon { width:11px; height:11px; }
  .lab-stage { padding:21px 15px; min-height:440px; }
  .lab-canvas-footer { padding:11px 12px; font-size:9px; gap:8px; align-items:start; }
  .lab-canvas-footer>span:first-child { align-items:start; gap:5px; }
  .lab-canvas-footer .icon { width:11px; height:11px; margin-top:2px; }
  .lab-task-counter { font-size:7px; padding-top:3px; }
  .lab-disclaimer { padding:11px 13px; font-size:8px; }
  .lab-disclaimer>span:last-child { display:none; }
  .effects-lab .demo-bottom { font-size:11px; line-height:1.9; padding-top:22px; }
  .fx-heading { margin-bottom:20px; }
  .fx-overline { font-size:6px; letter-spacing:.11em; }
  .fx-heading h3 { font-size:27px; line-height:1.1; margin-top:9px; }
  .fx-heading>p { font-size:10px; margin-top:10px; }
  .fx-chips { gap:5px; }
  .fx-chips button { padding:6px 9px; font-size:9px; min-height:33px; }
  .fx-filter-toolbar { grid-template-columns:1fr; gap:8px; }
  .fx-search { padding-inline:9px; }
  .fx-search>input { font-size:11px; min-height:39px; }
  .fx-sort { justify-content:flex-end; gap:8px; }
  .fx-sort>select { padding:5px 0; min-height:29px; font-size:9px; }
  .fx-filter-line { margin-top:7px; gap:8px; flex-wrap:wrap; }
  .fx-capacity { margin-left:auto; }
  .fx-capacity>select { font-size:9px; padding:5px; min-height:33px; }
  .fx-area-row { gap:8px; margin-top:14px; padding-bottom:15px; flex-wrap:wrap; }
  .fx-area-row label { font-size:9px; }
  .fx-area-row output { margin-left:4px; }
  .fx-area-row>input { max-width:112px; min-width:45px; }
  .fx-area-row button { font-size:8px; }
  .fx-results-meta { font-size:9px; margin-block:12px; }
  .fx-results-meta>span:last-child { font-size:7px; }
  .fx-result-grid,.fx-catalogue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .fx-product { padding:7px; }
  .fx-product-art { padding:11px 2px 5px; }
  .fx-product-art img { height:79px; }
  .fx-product-series { font-size:5px; left:5px; }
  .fx-product-title { margin-top:10px; font-size:11px; }
  .fx-product-meta { font-size:8px; margin-top:6px; }
  .fx-product-meta i { padding-inline:4px; }
  .fx-empty { min-height:175px; padding:20px 10px; }
  .fx-empty strong { font-size:11px; }
  .fx-empty p { font-size:9px; }
  .fx-category-rack { flex-direction:column; gap:8px; min-height:0; }
  .fx-category-card { flex:none; height:65px; transition:height .6s cubic-bezier(.2,.8,.2,1); }
  .fx-category-card.active { flex:none; height:286px; }
  .fx-category-toggle,.fx-category-card.active .fx-category-toggle { flex-direction:row; align-items:center; padding:18px 17px; gap:15px; min-height:63px; }
  .fx-category-toggle>strong,.fx-category-card.active .fx-category-toggle>strong { font-size:28px; margin-top:0; display:flex; align-items:center; gap:9px; }
  .fx-category-toggle small { margin:0; font-size:7px; }
  .fx-category-toggle .fx-category-plus { top:19px; right:16px; }
  .fx-category-toggle>span:first-child { font-size:8px; }
  .fx-category-detail { padding:0 17px 15px; }
  .fx-category-detail>p { margin:0; font-size:9px; }
  .fx-category-detail>img { height:143px; }
  .fx-category-watermark { font-size:180px; left:auto; right:15px; bottom:-18px; }
  .fx-compare-options { gap:6px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .fx-compare-option { padding:11px 4px 7px; gap:3px; font-size:10px; }
  .fx-compare-option img { height:52px; }
  .fx-compare-option input { width:12px; height:12px; top:2px; left:2px; }
  .fx-compare-tools { padding-block:15px; font-size:9px; }
  .fx-check { gap:4px; font-size:9px; }
  .fx-comparison-table { font-size:9px; }
  .fx-comparison-table caption { font-size:8px; padding:10px; }
  .fx-comparison-table thead th { font-size:12px; }
  .fx-comparison-table tr>th:first-child { font-size:8px; width:22%; }
  .fx-comparison-table th,.fx-comparison-table td { padding:13px 5px; }
  .fx-compare-note { font-size:9px; }
  .fx-hotspot-scene { min-height:240px; }
  .fx-hotspot-scene>img { width:96%; max-height:215px; }
  .fx-hotspot { width:34px; height:34px; font-size:10px; }
  .fx-scene-label { font-size:6px; left:13px; bottom:13px; }
  .fx-hotspot-info { gap:12px; padding-top:20px; min-height:132px; }
  .fx-point-number { width:29px; height:29px; font-size:10px; }
  .fx-hotspot-info h4 { font-size:23px; }
  .fx-hotspot-info p { font-size:10px; }
  .fx-hotspot-info>.icon { width:14px; height:14px; }
  .fx-gallery-main { padding:9px; }
  .fx-gallery-main>img { height:210px; }
  .fx-gallery-zoom { bottom:10px; right:10px; font-size:8px; padding:6px 9px; }
  .fx-gallery-bar { gap:12px; margin-top:14px; }
  .fx-gallery-bar>div:first-child { display:block; }
  .fx-gallery-bar strong { display:block; margin-top:4px; font-size:10px; }
  .fx-gallery-bar span { font-size:8px; }
  .fx-gallery-thumbs>button { height:55px; width:77px; }
  .fx-lightbox { padding:40px 15px 20px; }
  .fx-lightbox>img { height:47vh; }
  .fx-tilt-zone { min-height:310px; padding:27px 17px; }
  .fx-tilt-card { padding:19px 15px; border-radius:10px; }
  .fx-tilt-word { font-size:58px; top:50px; left:10px; }
  .fx-tilt-card>img { height:140px; margin-top:9px; }
  .fx-tilt-bottom { margin-top:6px; }
  .fx-tilt-bottom strong { font-size:24px; }
  .fx-tilt-bottom>div>span { font-size:7px; }
  .fx-tilt-bottom>span { font-size:12px; }
  .fx-tilt-bottom small { font-size:5px; }
  .fx-tilt-controls { gap:8px; flex-wrap:wrap; }
  .fx-tilt-controls>span { font-size:8px; }
  .fx-tilt-controls button { padding:7px 9px; font-size:9px; }
  .fx-motion-scene { height:303px; }
  .fx-motion-copy { font-size:48px; top:31px; left:19px; }
  .fx-motion-product { width:88%; left:6%; top:42%; }
  .fx-motion-product>img { height:135px; }
  .fx-motion-orbit { width:200px; height:200px; }
  .fx-motion-orbit.orbit-b { width:246px; height:246px; }
  .fx-motion-orbit.orbit-c { width:284px; height:284px; }
  .fx-motion-badge { font-size:6px; left:17px; bottom:18px; }
  .fx-motion-axis { font-size:6px; right:17px; bottom:18px; }
  .fx-motion-tools { gap:10px; align-items:center; flex-wrap:wrap; }
  .fx-motion-tools .fx-chips button { font-size:8px; padding:7px 8px; }
  .fx-pause { font-size:8px; padding:7px 8px; }
  .fx-small-note { font-size:8px; }
  .fx-brand-preview { padding:19px; }
  .fx-brand-top>span { font-size:5px; letter-spacing:.05em; }
  .fx-brand-top strong { font-size:9px; }
  .fx-brand-layout { grid-template-columns:1fr; gap:0; padding-top:25px; min-height:300px; }
  .fx-brand-layout h4 { font-size:38px; margin:10px 0 15px; }
  .fx-brand-tag { font-size:6px; }
  .fx-brand-cta { font-size:7px; padding:8px 10px; }
  .fx-brand-layout>img { margin-left:auto; margin-top:-15px; width:68%; height:130px; }
  .fx-brand-preview[data-background="dark"] .fx-brand-layout>img { padding:7px; margin-top:3px; height:120px; }
  .fx-customize-tools { grid-template-columns:1fr 1fr; gap:17px; }
  .fx-customize-tools legend { font-size:9px; }
  .fx-swatch { width:25px; height:25px; margin-right:3px; }
  .fx-radius { grid-column:1/-1; font-size:9px; }
  .fx-radius input { margin-top:16px; }
  .fx-reveal-scene { height:315px; }
  .fx-before,.fx-after { padding:18px; }
  .fx-reveal-badge { font-size:6px; padding:4px 6px; }
  .fx-before-nav { font-size:6px; margin-top:21px; }
  .fx-before h4 { font-size:20px; margin-top:22px; }
  .fx-before>p { font-size:7px; }
  .fx-before>img { width:72%; height:128px; bottom:33px; right:12px; }
  .fx-before-link { font-size:7px; left:18px; bottom:18px; }
  .fx-after-mark { font-size:7px; right:18px; top:58px; }
  .fx-after h4 { font-size:39px; margin-top:28px; }
  .fx-after>img { width:75%; height:150px; bottom:28px; right:11px; padding:8px; }
  .fx-after-bottom { font-size:5px; left:18px; right:18px; bottom:17px; }
  .fx-reveal-divider>span { width:31px; height:31px; border-width:2px; font-size:18px; }
  .fx-reveal-slider { gap:12px; font-size:9px; }
  .fx-catalogue-grid[data-layout="list"] .fx-product { grid-template-columns:72px 1fr 65px; gap:10px; }
  .fx-catalogue-grid[data-layout="list"] .fx-product img { height:44px; }
  .fx-catalogue-grid[data-layout="list"] .fx-product-meta { font-size:7px; }
  .fx-catalogue-grid[data-layout="list"] .fx-product-title { font-size:10px; }
  .fx-spec-body { grid-template-columns:1fr; gap:22px; }
  .fx-spec-art { min-height:205px; padding:16px; gap:5px; }
  .fx-spec-art>span { font-size:6px; }
  .fx-spec-art>img { height:165px; }
  .fx-spec-copy h4 { font-size:28px; margin-top:9px; margin-bottom:18px; }
  .fx-spec-copy table { font-size:11px; }
  .fx-spec-copy th,.fx-spec-copy td { padding:11px 0; }
  .fx-design-tabs { gap:5px; }
  .fx-design-tabs button { font-size:9px; padding-inline:8px; }
  .fx-design-scene { height:345px; padding:18px; }
  .fx-design-header span:first-child { font-size:8px; }
  .fx-design-header>span:last-child { font-size:6px; }
  .fx-design-text { margin-top:31px; }
  .fx-design-text>span { font-size:6px; }
  .fx-design-text h4 { font-size:42px; }
  .fx-design-scene>img { width:82%; height:160px; bottom:31px; right:13px; }
  .fx-design-footer { left:18px; right:18px; font-size:5px; }
  .fx-design-scene[data-design="industrial"] h4 { font-size:29px; }
  .fx-design-scene[data-design="editorial"] h4 { font-size:54px; }
}
@media(max-width:370px) {
  .lab-groups button { font-size:10px; padding-inline:8px; }
  .lab-live { font-size:5px; }
  .lab-stage { padding-inline:13px; }
  .lab-mode { font-size:5px; }
  .fx-chips button { padding-inline:8px; font-size:8px; }
  .fx-capacity>select { font-size:8px; }
  .fx-heading h3 { font-size:25px; }
  .fx-area-row { gap:7px; }
  .fx-area-row>input { max-width:85px; }
  .fx-area-row label { font-size:8px; }
  .fx-swatch { width:23px; height:23px; }
  .fx-tilt-zone { padding-inline:13px; }
  .fx-tilt-controls>span { font-size:7px; }
  .fx-motion-tools .fx-chips { gap:4px; }
  .fx-motion-tools .fx-chips button { padding-inline:7px; }
  .fx-motion-tools { gap:7px; }
  .fx-comparison-table { font-size:8px; }
  .fx-before h4 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .effects-lab *,.effects-lab *::before,.effects-lab *::after { animation:none!important; transition:none!important; }
  .fx-tilt-card { transform:none!important; }
  .fx-category-card,.fx-category-detail { transition:none!important; }
}