/* allow menus to escape card bounds */
.demo-grid.xl > .item{overflow:visible;z-index:1}
.demo-grid.xl > .item:hover,
.demo-grid.xl > .item:focus-within,
.demo-grid.xl > .item:has(.dd.open){z-index:8}
.demo-grid.xl > .item .stage{overflow:hidden}
.demo-grid.xl > .item .stage.menu-stage{
  min-height:380px;height:auto;padding:36px 16px 120px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:visible!important;border-radius:0;position:relative;
}

/* Dropdown Menus · showcase */
.item .stage.menu-stage{
  min-height:380px;height:auto;padding:36px 16px 120px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:visible!important;border-radius:0;position:relative;
}
.item .stage.menu-stage.s7,.item .stage.menu-stage.s3{align-items:center;padding-top:0;}
.item .stage.phone-stage{
  min-height:680px;padding:24px;display:flex;justify-content:center;align-items:center;
  overflow:hidden;
}
.item .stage.menu-stage.s2{background:linear-gradient(160deg,#0a2540,#05101d);}
.item .stage.menu-stage.s9{padding-top:28px;background:radial-gradient(circle at 50% 0,#1a0420,#050005 70%);}

.pg 


.dd{position:relative}
.dd .tg{cursor:pointer;font:600 14px system-ui,sans-serif;color:#fff;-webkit-tap-highlight-color:transparent}
.dd .tg:focus-visible,.dd [role^=menuitem]:focus-visible,.dd button:focus-visible,.dd input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dd a{text-decoration:none;color:inherit}
.cv{display:inline-block;width:7px;height:7px;border-right:2px solid;border-bottom:2px solid;transform:translateY(-2px) rotate(45deg);margin-left:8px;transition:transform .3s}
.open>.tg .cv{transform:translateY(1px) rotate(225deg)}
.pn{position:absolute}
.dd:not(.open) .pn{pointer-events:none;visibility:hidden}
.dd.open .pn{visibility:visible}
/* d1 mega */
.d1 .tg{background:#111;border:1px solid #2a2a2a;padding:11px 18px;border-radius:10px}
.d1 .pn{top:54px;left:50%;translate:-50% 0;width:420px;display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:4px;padding:14px;background:#0e0e10;border:1px solid #26262b;border-radius:16px;box-shadow:0 30px 60px -20px #000,0 0 0 1px #000;transition:visibility 0s .4s;font-size:13px}
.d1.open .pn{transition:none}
.d1 .col{opacity:0;transform:translateY(-12px);transition:.4s cubic-bezier(.2,.8,.2,1) calc(var(--i)*70ms)}
.d1.open .col{opacity:1;transform:none}
.d1 h4{font:700 10px ui-monospace,monospace;letter-spacing:.2em;color:#666;margin:2px 8px 8px}
.d1 a{display:block;padding:7px 8px;border-radius:8px;color:#eee}.d1 a small{display:block;color:#777;font-size:11px}
.d1 a:hover,.d1 a:focus{background:#1b1b20;outline:none}
.d1 .feat{background:linear-gradient(160deg,#1e1b4b,#0e0e10);border-radius:10px}.d1 .art{height:64px;margin:6px;border-radius:8px;background:conic-gradient(from 200deg,#6366f1,#ec4899,#f59e0b,#6366f1);filter:saturate(1.2)}
/* d2 stripe morph */

.d2 .bar{display:flex;gap:2px}.d2 .tg{background:none;border:0;padding:10px 14px;border-radius:8px;color:#cbd5e1;transition:color .2s}
.d2 .tg[aria-expanded=true],.d2 .tg:hover{color:#fff}
.d2 .pn{top:58px;left:0;width:0;height:0;transition:transform .35s cubic-bezier(.3,1,.4,1),width .35s cubic-bezier(.3,1,.4,1),height .35s cubic-bezier(.3,1,.4,1),opacity .25s,visibility 0s .3s;opacity:0}
.d2.open .pn{opacity:1;transition:transform .35s cubic-bezier(.3,1,.4,1),width .35s cubic-bezier(.3,1,.4,1),height .35s cubic-bezier(.3,1,.4,1),opacity .25s}
.d2 .mbg{position:absolute;inset:0;background:#fff;border-radius:12px;box-shadow:0 50px 100px -20px rgba(50,50,93,.4),0 30px 60px -30px #000}
.d2 .arrow{position:absolute;top:-6px;left:var(--ax,40px);width:12px;height:12px;background:#fff;transform:rotate(45deg);border-radius:2px;transition:left .35s cubic-bezier(.3,1,.4,1)}
.d2 .sect{position:absolute;top:0;left:0;padding:16px;display:grid;gap:4px;opacity:0;transition:opacity .25s,transform .35s;color:#0a2540;font-size:14px;font-weight:600;white-space:nowrap}
.d2 .sect[data-s="1"]{grid-template-columns:1fr 1fr}
.d2 .sect.on{opacity:1;transform:none!important}.d2 .sect:not(.on){pointer-events:none}
.d2 .sect a{padding:8px 12px;border-radius:8px}.d2 .sect a:hover,.d2 .sect a:focus{background:#f0f4f8;outline:none;color:#635bff}
/* d3 liquid glass */
.s3 .blobs i{position:absolute;border-radius:50%;filter:blur(8px)}
.s3 .blobs i:nth-child(1){width:160px;height:160px;background:#f43f5e;left:12%;top:45%;animation:bf 9s ease-in-out infinite}
.s3 .blobs i:nth-child(2){width:130px;height:130px;background:#3b82f6;right:12%;top:30%;animation:bf 7s ease-in-out infinite reverse}
.s3 .blobs i:nth-child(3){width:100px;height:100px;background:#facc15;left:45%;top:70%;animation:bf 11s ease-in-out infinite}
@keyframes bf{50%{transform:translate(40px,-60px) scale(1.2)}}
.d3 .tg{background:rgba(255,255,255,.1);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.25);padding:11px 20px;border-radius:99px}
.d3 .pn{top:56px;left:50%;width:230px;padding:8px;translate:-50% 0;border-radius:22px;background:rgba(255,255,255,.08);backdrop-filter:blur(24px) saturate(180%) url(#lens);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -10px 20px rgba(255,255,255,.05),0 20px 40px rgba(0,0,0,.5);transform-origin:top center;transform:scale(.6,.2);opacity:0;border-radius:40px;transition:transform .55s cubic-bezier(.3,1.6,.4,1),opacity .2s,border-radius .5s,visibility 0s .55s}
.d3.open .pn{transform:none;opacity:1;border-radius:22px;transition:transform .55s cubic-bezier(.3,1.6,.4,1),opacity .2s,border-radius .5s}
.d3 a{display:block;padding:11px 14px;border-radius:14px;color:#fff;font-size:14px;text-shadow:0 1px 3px #0008}.d3 a:hover,.d3 a:focus{background:rgba(255,255,255,.18);outline:none}
.d3 hr{border:0;border-top:1px solid rgba(255,255,255,.2);margin:4px 8px}
/* d4 fold */
.d4{perspective:700px}.d4 .tg{background:linear-gradient(#2a2a2e,#1a1a1d);border:1px solid #333;padding:11px 20px;border-radius:10px}
.d4 .pn{top:50px;left:50%;translate:-50% 0;width:210px;transform-style:preserve-3d;transition:visibility 0s .6s}.d4.open .pn{transition:none}
.d4 a{display:block;padding:12px 16px;background:#e8e3d9;color:#222;font-weight:600;font-size:14px;border-bottom:1px solid #0002;transform-origin:top;transform:rotateX(-95deg);opacity:0;transition:transform .45s cubic-bezier(.3,1.4,.5,1) calc(var(--i)*60ms),opacity .3s calc(var(--i)*60ms),background .2s}
.d4 a:nth-child(even){background:#d9d2c5}.d4 a:first-child{border-radius:10px 10px 0 0}.d4 a:last-child{border-radius:0 0 10px 10px;color:#b91c1c}
.d4.open a{transform:none;opacity:1}
.d4:not(.open) a{transition-delay:calc((4 - var(--i))*40ms)}
.d4 a:hover,.d4 a:focus{background:#fff;outline:none}
/* d5 circle */
.d5 .tg{background:#7c3aed;border:0;padding:12px 22px;border-radius:99px;position:relative;z-index:2;box-shadow:0 8px 24px -6px #7c3aed}
.d5 .pn{top:-6px;left:50%;translate:-50% 0;width:260px;padding:66px 12px 12px;background:radial-gradient(circle at 50% 0,#4c1d95,#1e1033 70%);border-radius:20px;clip-path:circle(0 at 50% 30px);transition:clip-path .6s cubic-bezier(.6,0,.2,1),visibility 0s .6s}
.d5.open .pn{clip-path:circle(150% at 50% 30px);transition:clip-path .7s cubic-bezier(.6,0,.2,1)}
.d5 a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;color:#ede9fe;font-weight:600}.d5 a em{font-style:normal;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#ffffff14}
.d5 a:hover,.d5 a:focus{background:#ffffff14;outline:none}
/* d6 cmd */
.d6 .tg{display:flex;gap:40px;align-items:center;background:#0f0f12;border:1px solid #2a2a30;padding:10px 12px 10px 16px;border-radius:12px;color:#888;font-weight:500}
.d6 kbd{font:11px ui-monospace,monospace;background:#1d1d22;border:1px solid #333;border-radius:6px;padding:3px 6px;color:#ccc}
.d6 .pn{top:-10px;left:50%;translate:-50% 0;width:340px;background:#121216ee;backdrop-filter:blur(20px);border:1px solid #2f2f37;border-radius:16px;box-shadow:0 40px 80px -10px #000,0 0 0 9999px #0009;transform:scale(.96);opacity:0;transition:.18s,visibility 0s .2s}
.d6.open .pn{transform:none;opacity:1;transition:.18s}
.d6 input{width:100%;background:none;border:0;border-bottom:1px solid #26262c;padding:16px 18px;font:16px system-ui;color:#fff;outline:none}
.d6 ul{list-style:none;margin:0;padding:6px;max-height:230px;overflow:auto}
.d6 li{display:flex;justify-content:space-between;padding:10px 12px;border-radius:9px;color:#ccc;font-size:14px;cursor:pointer}
.d6 li mark{background:none;color:#a78bfa;font-weight:700}.d6 li small{color:#666}
.d6 li[aria-selected=true]{background:#2a2550;color:#fff}
.d6 .hint{font:10px ui-monospace,monospace;color:#555;padding:9px 16px;border-top:1px solid #1e1e24}
/* d7 radial */

.d7 .tg{width:68px;height:68px;border-radius:50%;border:0;background:linear-gradient(135deg,#f97316,#e11d48);font-size:30px;position:relative;z-index:2;transition:transform .4s cubic-bezier(.3,1.6,.4,1);box-shadow:0 10px 30px -5px #e11d48}
.d7.open .tg{transform:rotate(135deg)}
.d7 .pn{inset:0}
.d7 a{position:absolute;left:10px;top:10px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#18181b;border:1px solid #333;color:#fff;font-size:18px;transform:rotate(var(--a)) translate(0) rotate(calc(-1*var(--a))) scale(.2);opacity:0;transition:transform .5s cubic-bezier(.3,1.5,.4,1),opacity .3s,background .2s}
.d7.open a{transform:rotate(var(--a)) translate(100px) rotate(calc(-1*var(--a)));opacity:1}
.d7 a:hover,.d7 a:focus{background:#e11d48;outline:none}
.d7 .pn::before{content:'';position:absolute;left:-76px;top:-76px;width:220px;height:220px;border-radius:50%;border:1px dashed #333;transform:scale(0);transition:transform .5s}.d7.open .pn::before{transform:scale(1)}
/* d8 magnetic */
.d8 .tg{background:none;border:1px solid #444;padding:11px 20px;border-radius:99px}
.d8 .pn{top:56px;left:50%;translate:-50% 0;width:260px;padding:8px;background:#0c0c0c;border:1px solid #222;border-radius:18px;opacity:0;transform:translateY(-8px);transition:.25s,visibility 0s .25s}
.d8.open .pn{opacity:1;transform:none;transition:.25s}
.d8 a{position:relative;z-index:1;display:block;padding:12px 16px;color:#aaa;font-size:14px;transition:color .2s,transform .2s cubic-bezier(.2,.8,.2,1.4)}
.d8 a:hover,.d8 a:focus{color:#000;outline:none}
.d8 .hl{position:absolute;left:8px;right:8px;height:44px;top:8px;background:#fde047;border-radius:12px;transition:transform .35s cubic-bezier(.3,1.4,.4,1),opacity .2s;opacity:0}
/* d9 neon spring */

.d9 .tg{background:none;border:2px solid #ff2fd0;color:#fff;padding:11px 22px;border-radius:8px;letter-spacing:.2em;text-shadow:0 0 8px #ff2fd0;box-shadow:0 0 14px #ff2fd0,inset 0 0 10px #ff2fd0}
.d9 .pn{top:58px;left:50%;translate:-50% 0;width:220px;display:grid;gap:8px}
.d9 a{display:block;text-align:center;padding:10px;border:2px solid var(--c);border-radius:8px;color:var(--c);font-weight:800;letter-spacing:.25em;text-transform:uppercase;text-shadow:0 0 10px var(--c);box-shadow:0 0 12px var(--c),inset 0 0 10px var(--c);background:#0008;opacity:0}
.d9 a:hover,.d9 a:focus{background:var(--c);color:#000;text-shadow:none;outline:none}
/* d10 popover anchor */
.d10 .tg{anchor-name:--opt;background:#fafafa;color:#111;border:0;padding:11px 20px;border-radius:10px}
.d10 .pn{margin:0;inset:auto;position:fixed;width:210px;padding:6px;background:#fafafa;color:#111;border:0;border-radius:14px;box-shadow:0 24px 50px -10px #000c,0 0 0 1px #0001;opacity:0;transform:translateY(-6px) scale(.97);transition:opacity .2s,transform .2s,overlay .2s allow-discrete,display .2s allow-discrete}
.d10 .pn:popover-open{opacity:1;transform:none}
@starting-style{.d10 .pn:popover-open{opacity:0;transform:translateY(-6px) scale(.97)}}
@supports (position-anchor:--x){.d10 .pn{position-anchor:--opt;top:anchor(bottom);left:anchor(center);translate:-50% 10px}}
.d10 a{display:block;color:#111;text-decoration:none;padding:10px 12px;border-radius:9px;font-size:14px}.d10 a:hover,.d10 a:focus{background:#eaeaea;outline:none}.d10 a.danger{color:#dc2626}
.d10 .sup{display:block;font:10px ui-monospace,monospace;color:#888;padding:6px 12px 4px;border-top:1px solid #e5e5e5;margin-top:4px}

/* phone frames */
.phone{position:relative;width:320px;height:640px;border-radius:46px;background:#0b0b0d;border:10px solid #1c1c1f;box-shadow:0 0 0 2px #2a2a2e,0 40px 80px -30px #000;overflow:hidden;font:14px system-ui,-apple-system,sans-serif;color:#eee;isolation:isolate}
.phone::before{content:'';position:absolute;top:8px;left:50%;translate:-50% 0;width:96px;height:26px;border-radius:20px;background:#000;z-index:50}
.sb{display:flex;justify-content:space-between;padding:12px 26px 6px;font:600 12px system-ui;position:relative;z-index:40}
.app{position:absolute;inset:0;padding-top:42px;transition:transform .45s cubic-bezier(.3,1,.3,1),border-radius .45s}
.ab{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;font-size:20px}
.phone .dd{position:static}
.phone .tg{background:#1c1c20;border:0;border-radius:12px;min-width:40px;height:40px;padding:0 12px;font-size:18px;color:#fff}
.sk{margin:10px 18px;height:420px;border-radius:16px;background:repeating-linear-gradient(#141418 0 60px,transparent 60px 74px)}
.scrim{position:absolute;inset:0;background:#000a;opacity:0;pointer-events:none;transition:opacity .35s;z-index:60}
.dd.open .scrim{opacity:1;pointer-events:auto}
/* m1 sheet */
.m1 .pn{left:0;right:0;bottom:0;z-index:61;background:#1c1c20;border-radius:26px 26px 0 0;padding:8px 14px 30px;transform:translateY(105%);transition:transform .45s cubic-bezier(.3,1.2,.4,1),visibility 0s .45s;touch-action:none}
.m1.open .pn{transform:translateY(var(--dy,0px));transition:transform .45s cubic-bezier(.3,1.2,.4,1)}.m1 .pn.drag{transition:none}
.m1 .grab{width:44px;height:5px;border-radius:9px;background:#555;margin:4px auto 12px;cursor:grab}
.m1 h5{margin:0 6px 8px;font-size:12px;color:#888;font-weight:600}
.m1 a{display:block;padding:14px 10px;border-radius:12px;font-size:16px}.m1 a:hover,.m1 a:focus{background:#2a2a30;outline:none}.danger{color:#ff6b6b!important}
/* m2 overlay */
.m2 .tg{font:800 12px system-ui;letter-spacing:.2em;background:#fff;color:#000}
.m2 .pn{inset:0;z-index:60;background:#e7ff3c;color:#000;display:flex;flex-direction:column;justify-content:center;padding:30px;clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s}
.m2.open .pn{clip-path:inset(0);transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
.m2 a{font:900 52px/1.05 system-ui;letter-spacing:-.04em;overflow:hidden;display:block;transform:translateY(60px);opacity:0;transition:.5s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i)*.07s)}
.m2.open a{transform:none;opacity:1}.m2 a:hover,.m2 a:focus{font-style:italic;outline:none;padding-left:12px;transition:.3s}
.m2 .x{position:absolute;top:56px;right:20px;background:#000;color:#e7ff3c;border:0;border-radius:12px;padding:12px 16px;font:800 12px system-ui;letter-spacing:.2em;cursor:pointer}
/* m3 drill */
.m3 .pn{top:100px;left:14px;right:14px;z-index:60;background:#18181c;border:1px solid #2a2a30;border-radius:18px;overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.3,1,.3,1),visibility 0s .45s;box-shadow:0 30px 50px #000}
.m3.open .pn{max-height:320px;transition:max-height .45s cubic-bezier(.3,1,.3,1)}
.m3 .lv{display:flex;transition:transform .4s cubic-bezier(.3,1,.3,1)}
.m3 .lvl{flex:0 0 100%;padding:10px}.m3 .lvl[data-l]{display:none}.m3 .lvl.show{display:block}
.m3 h5{margin:4px 10px 8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#777}
.m3 a,.m3 .dr,.m3 .bk{display:flex;justify-content:space-between;width:100%;text-align:left;padding:13px 12px;border-radius:10px;background:none;border:0;color:#eee;font:15px system-ui;cursor:pointer}
.m3 .bk{color:#60a5fa;font-size:13px;padding:6px 10px}
.m3 a:hover,.m3 .dr:hover,.m3 a:focus,.m3 .dr:focus{background:#25252b;outline:none}
/* m4 drawer push */
.m4 .tg{display:flex;flex-direction:column;justify-content:center;gap:4px;width:40px;padding:0 10px}.m4 .tg i{height:2px;background:#fff;border-radius:2px}
.m4p.pn{visibility:hidden;top:0;bottom:0;left:0;width:240px;z-index:61;background:#111827;padding:60px 14px 20px;transform:translateX(-100%);transition:transform .45s cubic-bezier(.3,1,.3,1),visibility 0s .45s}

.phone.pushed .app{transform:translateX(200px) scale(.86);border-radius:30px;overflow:hidden}
.phone.push .app{z-index:1}.phone.push>.m4p{z-index:61}
.m4p .me{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:0 6px 20px;border-bottom:1px solid #1f2937;margin-bottom:10px}
.m4p .me span{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f59e0b,#ef4444);font-weight:800}.m4p .me small{color:#9ca3af}
.m4p a{display:block;padding:13px 10px;border-radius:10px;font-size:15px}.m4p a:hover,.m4p a:focus{background:#1f2937;outline:none}
/* m5 fab */
.m5 .tg{position:absolute;right:22px;bottom:30px;z-index:62;width:60px;height:60px;border-radius:50%!important;background:linear-gradient(135deg,#06b6d4,#3b82f6)!important;font-size:28px!important;box-shadow:0 10px 30px -6px #3b82f6;transition:transform .45s cubic-bezier(.3,1.6,.4,1)}
.m5.open .tg{transform:rotate(225deg)}
.m5 .pn{right:22px;bottom:30px;width:60px;height:60px;z-index:61}
.m5 .pn::before{content:'';position:absolute;inset:0;border-radius:50%;background:#3b82f622;transform:scale(0);transition:transform .5s}.m5.open .pn::before{transform:scale(5.5)}
.m5 a{position:absolute;left:8px;top:8px;width:44px;height:44px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:18px;transform:rotate(calc(-90deg - var(--i)*30deg)) translate(0) rotate(calc(90deg + var(--i)*30deg)) scale(.3);opacity:0;transition:transform .5s cubic-bezier(.3,1.5,.4,1) calc(var(--i)*50ms),opacity .3s}
.m5.open a{transform:rotate(calc(-90deg - var(--i)*30deg)) translate(100px) rotate(calc(90deg + var(--i)*30deg));opacity:1}
.m5 a:hover,.m5 a:focus{background:#fde047;outline:none}
/* m6 curtain */
.m6 .tg{position:relative;z-index:70;display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;padding:0 11px;background:transparent!important}
.m6 .tg i{height:2.5px;background:#fff;border-radius:2px;transition:transform .4s cubic-bezier(.3,1.5,.4,1),opacity .2s}
.m6.open .tg i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.m6.open .tg i:nth-child(2){opacity:0;transform:scaleX(0)}.m6.open .tg i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.m6 .cur{position:absolute;inset:0;z-index:60;display:flex;pointer-events:none}
.m6 .cur i{flex:1;background:#14532d;transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.m6 .cur i:nth-child(2){transition-delay:.05s;background:#166534}.m6 .cur i:nth-child(3){transition-delay:.1s}.m6 .cur i:nth-child(4){transition-delay:.15s;background:#166534}.m6 .cur i:nth-child(5){transition-delay:.2s}
.m6.open .cur i{transform:none}
.m6 .pn{inset:0;z-index:65;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.m6 a{font:300 34px/1.3 Georgia,serif;color:#dcfce7;opacity:0;transform:scale(.9);transition:.4s}.m6.open a{opacity:1;transform:none;transition-delay:.45s}
.m6 a:hover,.m6 a:focus{color:#fff;font-style:italic;outline:none}
/* m7 pill */
.m7 .tg{font-size:14px!important;border-radius:99px!important}
.m7 .pn{top:100px;left:14px;right:14px;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);padding:5px;background:#1c1c20;border-radius:99px;box-shadow:0 20px 40px #000;transform:translateY(-14px) scale(.8,.5);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.4,1),opacity .2s,visibility 0s .45s}
.m7.open .pn{transform:none;opacity:1;transition:transform .45s cubic-bezier(.3,1.6,.4,1),opacity .2s}
.m7 a{position:relative;z-index:1;text-align:center;padding:11px 0;border-radius:99px;font-weight:600;font-size:13px;color:#999;transition:color .3s}.m7 a[aria-checked=true]{color:#000}
.m7 .pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/4);border-radius:99px;background:#fff;transition:transform .45s cubic-bezier(.3,1.4,.4,1);transform:translateX(calc(var(--k,1)*100%))}
.m7 a:focus-visible{outline:2px solid #60a5fa}
.chart{display:flex;align-items:flex-end;gap:10px;height:150px;margin:20px 18px 0;padding:14px;background:#141418;border-radius:16px}.chart i{flex:1;height:var(--h);background:linear-gradient(#60a5fa,#3b82f6);border-radius:6px;transition:height .6s cubic-bezier(.3,1.4,.4,1)}
/* m8 stack */
.m8 .pn{top:100px;left:0;right:0;z-index:60;height:360px;opacity:0;transition:opacity .3s,visibility 0s .3s}
.m8.open .pn{opacity:1;transition:opacity .3s}
.m8 .stack{position:relative;height:290px;margin:0 30px;touch-action:pan-y}
.m8 .stack a{position:absolute;inset:0;border-radius:24px;background:var(--g);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 20px 40px #000a;transition:transform .5s cubic-bezier(.3,1.3,.4,1),opacity .4s;transform:translateY(calc(var(--p)*-18px)) scale(calc(1 - var(--p)*.06));z-index:calc(10 - var(--p));opacity:calc(1 - var(--p)*.25)}
.m8:not(.open) .stack a{transform:translateY(60px) scale(.8)}
.m8 .stack a b{font-size:30px}.m8 .stack a small{opacity:.8}
.m8 .stack a.gone{transform:translateX(var(--out,-140%)) rotate(-18deg)!important;opacity:0}
.m8 .stack a:focus-visible{outline:3px solid #fff}
.m8 .sw{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:14px;color:#777;font-size:12px}.m8 .sw button{width:40px;height:40px;border-radius:50%;border:1px solid #333;background:#18181b;color:#fff;font-size:18px;cursor:pointer}
/* m9 action sheet */
.m9 .pn{left:10px;right:10px;bottom:16px;z-index:61;transform:translateY(120%);transition:transform .4s cubic-bezier(.2,1,.3,1),visibility 0s .4s}
.m9.open .pn{transform:none;transition:transform .4s cubic-bezier(.2,1,.3,1)}
.m9 .grp{background:rgba(44,44,48,.85);backdrop-filter:blur(30px);border-radius:14px;overflow:hidden;text-align:center}
.m9 .grp p{margin:0;padding:12px;font-size:12px;color:#999;border-bottom:.5px solid #555}
.m9 .grp a{display:block;padding:15px;color:#0a84ff;font-size:18px;border-bottom:.5px solid #555}.m9 .grp a:last-child{border:0}
.m9 a:active,.m9 .cancel:active{background:#5558}.m9 a:focus-visible{outline-offset:-3px}
.m9 .cancel{width:100%;margin-top:8px;padding:15px;border:0;border-radius:14px;background:#2c2c30;color:#0a84ff;font:600 18px system-ui;cursor:pointer}
.ph{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:6px 3px}.ph i{aspect-ratio:1;background:linear-gradient(135deg,hsl(calc(var(--n,0)*50),60%,40%),hsl(calc(var(--n,0)*50 + 40),70%,25%))}
.ph i:nth-child(1){--n:1}.ph i:nth-child(2){--n:2}.ph i:nth-child(3){--n:3}.ph i:nth-child(4){--n:4}.ph i:nth-child(5){--n:5}.ph i:nth-child(6){--n:6}
/* m10 gooey tab bar */
.m10 .tb{position:absolute;left:12px;right:12px;bottom:20px;height:64px;border-radius:22px;background:#1d1d22;display:flex;justify-content:space-around;align-items:center;color:#777;font-size:22px;z-index:60}.m10 .tb .sp{width:60px}
.m10 .gz{position:absolute;left:50%;bottom:30px;width:0;height:0;z-index:61;filter:url(#goo3)}
.m10 .gz i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;background:#ec4899;transition:transform .6s cubic-bezier(.3,1.5,.4,1)}
.m10 .gz i.g0{left:-32px;top:-42px;width:64px;height:64px}
.m10.open .gz i:not(.g0){transform:translate(var(--x),var(--y)) scale(.85)}
.m10 .fab{position:absolute;left:50%;bottom:30px;z-index:62}
.m10 .tg{position:absolute;left:-32px;top:-42px;width:64px;height:64px;border-radius:50%!important;background:transparent!important;font-size:28px!important;transition:transform .5s cubic-bezier(.3,1.5,.4,1)}
.m10.open .tg{transform:rotate(45deg)}
.m10 .pn{left:0;top:0}
.m10 a{position:absolute;left:-26px;top:-26px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;font-size:20px;color:#fff;transition:transform .6s cubic-bezier(.3,1.5,.4,1),opacity .3s;opacity:0}
.m10.open a{transform:translate(var(--x),var(--y));opacity:1}.m10 a:hover,.m10 a:focus{background:#fff3;outline:2px solid #fff}

.phone.push>.scrim{z-index:60}
.m4p a{color:#eee;text-decoration:none}

/* ===== NEW 21–25 ===== */
.n21-area{width:min(420px,90%);height:260px;border:1px dashed #334155;border-radius:16px;display:grid;place-items:center;color:#93a0b8;font:600 13px ui-monospace,monospace;letter-spacing:.06em;cursor:context-menu;user-select:none;background:radial-gradient(circle at 50% 50%,#121826,#0a0d16);position:relative}
.n21-area:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}
.n21-ring{position:fixed;width:0;height:0;z-index:80;pointer-events:none}
.n21-ring.open{pointer-events:auto}
.n21-ring button{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;border:1px solid #333;background:#18181b;color:#fff;font-size:18px;display:grid;place-items:center;cursor:pointer;transform:rotate(var(--a)) translate(0) rotate(calc(-1*var(--a))) scale(.2);opacity:0;transition:transform .45s cubic-bezier(.3,1.5,.4,1),opacity .25s,background .2s;transition-delay:calc(var(--n)*.04s)}
.n21-ring.open button{transform:rotate(var(--a)) translate(92px) rotate(calc(-1*var(--a)));opacity:1}
.n21-ring button:hover,.n21-ring button:focus-visible{background:#7c5cff;outline:none}
.n21-ring::before{content:'';position:absolute;left:-70px;top:-70px;width:140px;height:140px;border-radius:50%;border:1px dashed #333;transform:scale(0);transition:transform .4s}
.n21-ring.open::before{transform:scale(1)}
.n21-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font:600 11px ui-monospace,monospace;color:#555}

.n22{display:flex;flex-direction:column;gap:12px;width:min(380px,92%);align-items:stretch}
.n22-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:32px}
.n22-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#1e293b;border:1px solid #334155;color:#e2e8f0;font:600 12px system-ui;cursor:pointer}
.n22-chip button{all:unset;cursor:pointer;color:#94a3b8;font-weight:800;padding:0 2px}
.n22-chip button:hover{color:#fff}
.n22 .dd{align-self:flex-start}
.n22 .tg{background:#121826;border:1px solid #2a3348;padding:10px 16px;border-radius:10px;color:#fff}
.n22 .pn{top:48px;left:0;width:280px;padding:8px;background:#0e121c;border:1px solid #1e2636;border-radius:14px;box-shadow:0 24px 50px -12px #000;display:grid;gap:2px}
.n22 [role=option]{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;color:#cbd5e1;font:500 14px system-ui;border:0;background:none;text-align:left;width:100%}
.n22 [role=option]:hover,.n22 [role=option]:focus-visible{background:#1a2234;outline:none;color:#fff}
.n22 [role=option][aria-selected=true]{color:#a5b4fc}
.n22 [role=option] i{width:16px;height:16px;border-radius:4px;border:1.5px solid #475569;display:grid;place-items:center;font-size:11px;font-style:normal;flex:none}
.n22 [role=option][aria-selected=true] i{background:#7c5cff;border-color:#7c5cff;color:#fff}

.n23{display:inline-flex;border-radius:10px;overflow:hidden;border:1px solid #2a3348;background:#121826;box-shadow:0 8px 24px -10px #000}
.n23 .act{appearance:none;border:0;background:transparent;color:#fff;padding:11px 18px;font:700 14px system-ui;cursor:pointer}
.n23 .act:hover{background:#1a2234}
.n23 .sep{width:1px;background:#2a3348}
.n23 .dd{position:relative}
.n23 .tg{appearance:none;border:0;background:transparent;color:#fff;padding:11px 12px;cursor:pointer;display:grid;place-items:center}
.n23 .tg:hover{background:#1a2234}
.n23 .tg .cv{margin:0;border-color:#94a3b8}
.n23 .pn{top:48px;right:0;width:200px;padding:6px;background:#0e121c;border:1px solid #1e2636;border-radius:12px;box-shadow:0 20px 40px -12px #000}
.n23 a{display:block;padding:10px 12px;border-radius:8px;color:#e2e8f0;font:500 13px system-ui}
.n23 a:hover,.n23 a:focus{background:#1a2234;outline:none}
.n23-status{margin-top:14px;font:600 12px ui-monospace,monospace;color:#64748b}

.n24 .tg{background:#111827;border:1px solid #2a3348;padding:11px 18px;border-radius:10px;color:#fff}
.n24 .pn{top:52px;left:50%;translate:-50% 0;width:220px;padding:6px;background:#0b0f18;border:1px solid #1e2636;border-radius:14px;box-shadow:0 28px 50px -16px #000}
.n24 .row{position:relative}
.n24 [role=menuitem]{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 12px;border-radius:9px;background:none;border:0;color:#e2e8f0;font:500 14px system-ui;cursor:pointer;text-align:left;text-decoration:none}
.n24 [role=menuitem]:hover,.n24 [role=menuitem]:focus{background:#1a2234;outline:none}
.n24 .sub{position:absolute;left:calc(100% + 6px);top:-6px;width:200px;padding:6px;background:#0b0f18;border:1px solid #1e2636;border-radius:14px;box-shadow:0 24px 40px -12px #000;opacity:0;transform:translateX(-8px) scale(.96);pointer-events:none;visibility:hidden;transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s}
.n24 .row.open>.sub,.n24 .row:focus-within>.sub{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1)}
.n24 .sub [role=menuitem]{opacity:0;transform:translateX(-6px);transition:opacity .25s ease calc(var(--i,0)*.05s),transform .25s ease calc(var(--i,0)*.05s)}
.n24 .row.open>.sub [role=menuitem],.n24 .row:focus-within>.sub [role=menuitem]{opacity:1;transform:none}
.n24 .chev{opacity:.5;font-size:12px}

.n25{position:relative;width:min(520px,94%);height:120px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.n25-dock{display:flex;align-items:flex-end;gap:8px;padding:10px 14px 12px;background:rgba(30,38,54,.72);backdrop-filter:blur(18px) saturate(160%);border:1px solid #2a3348;border-radius:22px;box-shadow:0 20px 40px -16px #000}
.n25-dock button{appearance:none;border:0;background:linear-gradient(160deg,var(--c1),var(--c2));width:52px;height:52px;border-radius:14px;font-size:22px;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.4,.4,1),margin .25s;transform-origin:bottom center;color:#fff;display:grid;place-items:center}
.n25-dock button:hover,.n25-dock button:focus-visible{transform:scale(1.45) translateY(-10px);outline:none;z-index:2}
.n25-tip{position:absolute;bottom:118px;left:50%;translate:-50% 0;padding:6px 10px;border-radius:8px;background:#0b0f18;border:1px solid #334155;color:#e2e8f0;font:700 12px system-ui;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap}
.n25-tip.on{opacity:1}
.n25-panel{position:absolute;bottom:140px;left:50%;translate:-50% 0;width:280px;padding:10px;background:#0e121c;border:1px solid #1e2636;border-radius:16px;box-shadow:0 24px 50px -12px #000;display:none}
.n25-panel.open{display:block;animation:n25in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes n25in{from{opacity:0;transform:translate(-50%,8px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.n25-panel h4{margin:0 0 8px;font:800 12px ui-monospace,monospace;letter-spacing:.12em;color:#7c5cff;text-transform:uppercase}
.n25-panel a{display:block;padding:9px 10px;border-radius:9px;color:#e2e8f0;font:500 13px system-ui}
.n25-panel a:hover,.n25-panel a:focus{background:#1a2234;outline:none}

/* ===== NEW 26–40 ===== */

.n26 .tg{background:#111827;border:1px solid #2a3348;padding:11px 18px;border-radius:10px;color:#fff}
.n26 .pn{top:52px;left:50%;translate:-50% 0;width:min(520px,92vw);padding:12px;background:#0b0f18;border:1px solid #1e2636;border-radius:16px;box-shadow:0 28px 60px -16px #000}
.n26-q{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px;border:1px solid #2a3348;background:#121826;color:#e2e8f0;font:500 14px system-ui;margin-bottom:10px}
.n26-q:focus{outline:2px solid #7c5cff;outline-offset:1px}
.n26-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.n26 .col h4{margin:0 0 6px;font:800 10px ui-monospace,monospace;letter-spacing:.14em;color:#7c5cff;text-transform:uppercase}
.n26 .col a{display:block;padding:8px 10px;border-radius:8px;color:#cbd5e1;font:500 13px system-ui}
.n26 .col a:hover,.n26 .col a:focus,.n26 .col a.on{background:#1a2234;outline:none;color:#fff}
.n26 .col a.dim{opacity:.25;pointer-events:none}
.n26 .feat{background:#121826;border-radius:12px;padding:8px}


.n27 .tg{background:#0f172a;border:1px solid #334155;padding:11px 18px;border-radius:10px;color:#e2e8f0}
.n27 .pn{top:52px;left:50%;translate:-50% 0;width:280px;padding:14px;background:#0b0f18;border:1px solid #1e2636;border-radius:16px;box-shadow:0 24px 50px -14px #000}
.n27-rail{display:flex;justify-content:space-between;position:relative;margin:8px 0 16px;padding:0 4px}
.n27-rail::before{content:'';position:absolute;left:8px;right:8px;top:50%;height:3px;background:#1e293b;border-radius:99px;translate:0 -50%}
.n27-rail button{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;border:2px solid #334155;background:#121826;color:#94a3b8;font:700 11px ui-monospace,monospace;cursor:pointer}
.n27-rail button[aria-selected=true]{background:#7c5cff;border-color:#a78bfa;color:#fff;box-shadow:0 0 0 4px #7c5cff33}
.n27-range{display:flex;align-items:center;justify-content:center;gap:10px;font:700 13px ui-monospace,monospace;color:#e2e8f0;margin-bottom:12px}
.n27-range i{width:24px;height:2px;background:#475569}
.n27-ok{width:100%;padding:10px;border:0;border-radius:10px;background:#22d3ee;color:#041018;font:800 13px system-ui;cursor:pointer}


.n28{display:inline-flex;align-items:center;gap:10px}
.n28 .tg{background:#18181b;border:1px solid #3f3f46;padding:10px 16px;border-radius:99px;color:#fff}
.n28 .pn{top:48px;left:50%;translate:-50% 0;display:flex;gap:4px;padding:8px;background:#0e0e12ee;backdrop-filter:blur(12px);border:1px solid #2a2a32;border-radius:99px;box-shadow:0 20px 40px -12px #000}
.n28 .pn button{width:42px;height:42px;border:0;border-radius:50%;background:transparent;font-size:22px;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.5,.4,1)}
.n28 .pn button:hover,.n28 .pn button:focus-visible{transform:scale(1.35) translateY(-6px);outline:none;background:#ffffff12}
.n28-out{margin-left:8px;font:700 20px system-ui;min-width:1.5em;display:inline-block}


.n29 .tg{display:inline-flex;align-items:center;gap:8px;background:#121826;border:1px solid #2a3348;padding:10px 16px;border-radius:10px;color:#e2e8f0}
.n29 .sw{width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:0 0 0 2px #0008}
.n29 .pn{top:50px;left:50%;translate:-50% 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;width:148px;background:#0b0f18;border:1px solid #1e2636;border-radius:14px;box-shadow:0 20px 40px -12px #000}
.n29 .pn button{aspect-ratio:1;border-radius:10px;border:2px solid #0000;background:var(--c);cursor:pointer}
.n29 .pn button[aria-checked=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.n29 .pn button:hover,.n29 .pn button:focus-visible{outline:none;transform:scale(1.08)}


.n30 .tg{background:#111827;border:1px solid #2a3348;padding:11px 18px;border-radius:10px;color:#fff}
.n30 .pn{top:52px;left:50%;translate:-50% 0;width:240px;padding:8px;background:#0b0f18;border:1px solid #1e2636;border-radius:14px;box-shadow:0 24px 48px -14px #000}
.n30-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#e2e8f0;font:500 13px system-ui;cursor:pointer}
.n30-row:hover{background:#1a2234}
.n30-row.nest{padding-left:22px}.n30-row.nest2{padding-left:36px;color:#94a3b8}
.n30-row input{accent-color:#7c5cff;width:15px;height:15px}


.n31 .tg{display:inline-flex;align-items:center;gap:8px;background:#0f172a;border:1px solid #334155;padding:10px 14px;border-radius:99px;color:#e2e8f0}
.n31 .pn{top:48px;left:50%;translate:-50% 0;width:200px;padding:6px;background:#0b0f18;border:1px solid #1e2636;border-radius:14px;box-shadow:0 20px 40px -12px #000}
.n31 .pn button{display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:9px;background:none;color:#e2e8f0;font:500 13px system-ui;cursor:pointer;text-align:left}
.n31 .pn button:hover,.n31 .pn button:focus-visible{background:#1a2234;outline:none}
.n31 .pn button[aria-checked=true]{color:#a5b4fc;background:#1a2234}


.n32 .tg{background:#7c5cff;border:0;padding:11px 20px;border-radius:10px;color:#fff;box-shadow:0 10px 24px -8px #7c5cff}
.n32 .pn{top:52px;left:50%;translate:-50% 0;width:260px;padding:14px;background:#0e121c;border:1px solid #1e2636;border-radius:18px;box-shadow:0 28px 50px -14px #000}
.n32-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.n32-grid button{display:grid;gap:6px;place-items:center;padding:12px 4px;border:0;border-radius:14px;background:#121826;color:#e2e8f0;font:700 18px system-ui;cursor:pointer}
.n32-grid button span{font:600 10px system-ui;letter-spacing:.04em;color:#94a3b8}
.n32-grid button:hover,.n32-grid button:focus-visible{background:#1a2234;outline:none;transform:translateY(-2px)}
.n32-status{margin:10px 0 0;min-height:1.2em;font:600 12px ui-monospace,monospace;color:#22d3ee;text-align:center}


.n33 .tg{background:#121826;border:1px solid #2a3348;padding:11px 18px;border-radius:10px;color:#fff}
.n33 .pn{top:52px;left:50%;translate:-50% 0;width:240px;padding:12px;background:#0b0f18;border:1px solid #1e2636;border-radius:14px;box-shadow:0 24px 48px -14px #000}
.n33 fieldset{border:1px solid #1e2636;border-radius:10px;margin:0 0 10px;padding:8px 10px 10px}
.n33 legend{padding:0 6px;font:800 10px ui-monospace,monospace;letter-spacing:.12em;color:#7c5cff;text-transform:uppercase}
.n33 label{display:flex;align-items:center;gap:8px;padding:6px 2px;color:#e2e8f0;font:500 13px system-ui;cursor:pointer}
.n33 input{accent-color:#7c5cff}
.n33-apply{width:100%;padding:10px;border:0;border-radius:10px;background:#22d3ee;color:#041018;font:800 13px system-ui;cursor:pointer}


.n34-tg{display:inline-flex;align-items:center;gap:8px;background:#121826;border:1px solid #2a3348;padding:6px 12px 6px 6px;border-radius:99px;color:#e2e8f0}
.n34-tg img{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#7c5cff,#00e5ff);display:block}
.n34 .pn{top:50px;right:0;left:auto;translate:0;width:220px;padding:8px;background:#0b0f18;border:1px solid #1e2636;border-radius:14px;box-shadow:0 24px 48px -14px #000}
.n34-head{padding:10px 12px 12px;border-bottom:1px solid #1e2636;margin-bottom:6px}
.n34-head strong{display:block;font:700 13px system-ui;color:#fff}
.n34-head small{color:#94a3b8;font:600 11px ui-monospace,monospace}
.n34 a{display:block;padding:9px 12px;border-radius:8px;color:#e2e8f0;font:500 13px system-ui}
.n34 a:hover,.n34 a:focus{background:#1a2234;outline:none}
.n34 hr{border:0;border-top:1px solid #1e2636;margin:6px 0}
.n34 .danger{color:#fb7185}


.n35-tg{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid #2a3348;background:#121826;font-size:18px;color:#fff;display:grid;place-items:center}
.n35-tg .badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#ef4444;color:#fff;font:800 10px/18px system-ui}
.n35 .pn{top:54px;right:0;left:auto;translate:0;width:280px;padding:0;background:#0b0f18;border:1px solid #1e2636;border-radius:16px;box-shadow:0 28px 50px -14px #000;overflow:hidden}
.n35 .pn header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #1e2636}
.n35 .pn header strong{font:800 12px ui-monospace,monospace;letter-spacing:.1em;color:#94a3b8;text-transform:uppercase}
.n35-clear{border:0;background:none;color:#7c5cff;font:700 12px system-ui;cursor:pointer}
.n35-item{display:grid;gap:2px;padding:12px 14px;border-bottom:1px solid #141a26;color:#e2e8f0;font:600 13px system-ui}
.n35-item span{font:500 11px system-ui;color:#64748b}
.n35-item.unread{background:#12182a}
.n35-item:hover,.n35-item:focus{background:#1a2234;outline:none}


.n36 .tg{background:#1e293b;border:1px solid #334155;padding:8px 14px;border-radius:8px;color:#cbd5e1;font:700 13px system-ui}
.n36 .pn{top:44px;left:0;width:200px;padding:6px;background:#0f172a;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 40px -12px #000}
.n36 a{display:block;padding:9px 12px;border-radius:8px;color:#e2e8f0;font:500 13px system-ui}
.n36 a:hover,.n36 a:focus{background:#1e293b;outline:none}
.n36 hr{border:0;border-top:1px solid #1e293b;margin:4px 0}
.n36 .warn{color:#fb923c}


.n37{position:relative;width:min(360px,92%);text-align:left}
.n37-editor{min-height:72px;padding:14px;border-radius:12px;border:1px solid #2a3348;background:#0b0f18;color:#e2e8f0;font:500 14px ui-monospace,monospace;outline:none}
.n37-editor:focus{border-color:#7c5cff;box-shadow:0 0 0 3px #7c5cff33}
.n37-menu{position:absolute;left:8px;bottom:calc(100% + 6px);width:240px;padding:6px;background:#0e121c;border:1px solid #1e2636;border-radius:12px;box-shadow:0 20px 40px -12px #000;z-index:5}
.n37-menu[hidden]{display:none}
.n37-menu button{display:flex;justify-content:space-between;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:#e2e8f0;font:600 13px ui-monospace,monospace;cursor:pointer;text-align:left}
.n37-menu button small{color:#64748b;font-weight:500}
.n37-menu button:hover,.n37-menu button[aria-selected=true]{background:#1a2234}


.n38-desk{position:relative;width:min(360px,92%);height:220px;border-radius:16px;border:1px dashed #334155;background:
  radial-gradient(circle at 20% 30%,#1e293b,#0a0d16 60%);display:grid;place-items:center;color:#64748b;font:600 12px ui-monospace,monospace;user-select:none;cursor:context-menu}
.n38-desk:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}
.n38-menu{position:fixed;z-index:90;min-width:180px;padding:6px;background:#0e121cee;backdrop-filter:blur(12px);border:1px solid #2a3348;border-radius:12px;box-shadow:0 20px 40px -10px #000}
.n38-menu[hidden]{display:none}
.n38-menu button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;border-radius:8px;background:none;color:#e2e8f0;font:500 13px system-ui;cursor:pointer}
.n38-menu button:hover,.n38-menu button:focus-visible{background:#1a2234;outline:none}
.n38-menu hr{border:0;border-top:1px solid #1e2636;margin:4px 0}


.n39{width:min(380px,92%);text-align:left}
.n39-tabs{display:flex;align-items:center;gap:2px;padding:4px;background:#0b0f18;border:1px solid #1e2636;border-radius:12px}
.n39-tabs > [role=tab]{appearance:none;border:0;background:transparent;color:#94a3b8;padding:8px 12px;border-radius:8px;font:600 12px system-ui;cursor:pointer}
.n39-tabs > [role=tab][aria-selected=true]{background:#1a2234;color:#fff}
.n39-more{margin-left:auto;position:relative}
.n39-more .tg{width:34px;height:34px;border-radius:8px;border:0;background:#121826;color:#e2e8f0;font-weight:800;cursor:pointer}
.n39-more .pn{top:40px;right:0;left:auto;translate:0;width:140px;padding:6px;background:#0e121c;border:1px solid #1e2636;border-radius:12px;box-shadow:0 16px 36px -10px #000}
.n39-more [role=menuitem]{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;color:#e2e8f0;font:500 13px system-ui;cursor:pointer}
.n39-more [role=menuitem]:hover,.n39-more [role=menuitem]:focus{background:#1a2234;outline:none}
.n39-panel{margin:12px 0 0;padding:14px;border-radius:12px;background:#121826;border:1px solid #1e2636;color:#cbd5e1;font:500 13px system-ui}


.n40{display:grid;justify-items:center;gap:12px;width:min(300px,90%)}
.n40-mic{width:64px;height:64px;border-radius:50%;border:2px solid #334155;background:#121826;font-size:26px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.n40-mic[aria-pressed=true]{border-color:#ef4444;box-shadow:0 0 0 6px #ef444433,0 0 30px #ef444466;transform:scale(1.06)}
.n40-wave{display:flex;align-items:end;gap:4px;height:28px;opacity:0;transition:opacity .2s}
.n40-mic[aria-pressed=true] ~ .n40-wave{opacity:1}
.n40-wave i{width:4px;height:8px;border-radius:2px;background:#22d3ee;animation:n40bar .8s ease-in-out infinite alternate}
.n40-wave i:nth-child(2){animation-delay:.1s}.n40-wave i:nth-child(3){animation-delay:.2s}.n40-wave i:nth-child(4){animation-delay:.15s}.n40-wave i:nth-child(5){animation-delay:.05s}
@keyframes n40bar{to{height:26px}}
.n40-menu{width:100%;padding:6px;background:#0e121c;border:1px solid #1e2636;border-radius:14px;box-shadow:0 20px 40px -12px #000}
.n40-menu[hidden]{display:none}
.n40-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:8px;background:none;color:#e2e8f0;font:500 13px system-ui;cursor:pointer}
.n40-menu button:hover,.n40-menu button:focus-visible{background:#1a2234;outline:none}
.n40-heard{margin:0;font:600 12px ui-monospace,monospace;color:#64748b;min-height:1.2em}

@media (prefers-reduced-motion:reduce){
  .n21-ring button,.n24 .sub,.n24 .sub [role=menuitem],.n25-dock button,.n25-panel.open{transition:none;animation:none}
  .n28 .pn button,.n40-wave i,.n40-mic{transition:none;animation:none}
}


/* === showcase-fit menus (Bobby 2026-10-21): small cards, menus open OVER what's below === */
#demo-root.menus{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;align-items:start;grid-auto-flow:dense}
#demo-root.menus > .item{overflow:visible;position:relative;z-index:1}
#demo-root.menus > .item:hover,#demo-root.menus > .item:focus-within{z-index:50}
#demo-root.menus > .item > .stage.menu-stage{min-height:0;height:var(--h,104px);padding:0;display:block;overflow:visible}
#demo-root.menus > .item > .stage.menu-stage > *{height:100%;overflow:visible;background:transparent}
#demo-root.menus > .item > .stage.menu-stage > * + *{height:auto}
#demo-root.menus > .item > .stage.menu-stage > .blobs{position:absolute;inset:0;height:auto;overflow:hidden;clip-path:inset(0);pointer-events:none}
#demo-root.menus > .item > .stage.menu-stage > .blobs + *{height:100%;position:relative}
#demo-root.menus > .item > .stage.menu-stage > .n28-out{position:absolute;left:0;right:0;bottom:8px;text-align:center}
#demo-root.menus > .item.fit-hm{--h:150px}
#demo-root.menus > .item.fit-area,#demo-root.menus > .item.fit-w2{grid-column:span 2}
#demo-root.menus > .item.fit-area > .stage.menu-stage{--h:260px;overflow:hidden}
/* phone-frame menus: shrink the phone, no empty space above it */
#demo-root.menus > .item > .stage.phone-stage{height:auto;min-height:0;padding:14px 0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
#demo-root.menus > .item > .stage.phone-stage > .phone{zoom:.6}
@media (max-width:700px){#demo-root.menus > .item.fit-area,#demo-root.menus > .item.fit-w2{grid-column:auto}}

#demo-root > .item[hidden]{display:none !important}
body:has(#demo-root.menus){overflow-x:clip}
#demo-root.menus.phones{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
#demo-root.menus.phones > .item > .stage.phone-stage > .phone{zoom:.72}

/* ===== 41-60 (2026-10-22): shared dropdown shell ===== */
.q{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:500 13px system-ui,-apple-system,"Segoe UI",sans-serif;color:#e8e6e1}
.q .q-tg{cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}
.q .q-tg:focus-visible,.q [role^=menuitem]:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.q .q-pn{position:absolute;top:calc(50% + 30px);left:50%;z-index:40;width:max-content;min-width:190px;max-width:min(270px,calc(100vw - 24px));
  transform:translateX(calc(-50% + var(--nx,0px)));visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility 0s .25s}
.q.open .q-pn{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s}
.q [role^=menuitem]{cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.q .q-cv{display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:8px;transition:transform .25s}
.q.open .q-cv{transform:rotate(-135deg) translateY(-1px)}

/* 41 Style Swatch Grid */
.q41 .q-tg{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:12px;border:1px solid #2c3442;background:#121722}
.q41 .sw{width:22px;height:22px;border-radius:6px;background:var(--bg);background-size:200% 200%;box-shadow:inset 0 0 0 1px #ffffff22;animation:q41a 4s linear infinite}
.q41 .q-pn{padding:10px;border-radius:14px;background:#0d1119f2;border:1px solid #2c3442;box-shadow:0 24px 50px -16px #000;display:grid;grid-template-columns:repeat(3,72px);gap:8px;
  transform:translateX(calc(-50% + var(--nx,0px))) translateY(-8px) scale(.96);transition:opacity .2s,transform .25s cubic-bezier(.2,1.3,.4,1),visibility 0s .25s}
.q41.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.q41 [role=menuitemradio]{display:grid;gap:5px;justify-items:center;padding:5px;border-radius:10px;border:1px solid transparent;background:none;font-size:10.5px;line-height:1.15;text-align:center}
.q41 [role=menuitemradio] .sw{width:58px;height:40px;border-radius:8px}
.q41 [role=menuitemradio]:hover,.q41 [role=menuitemradio]:focus-visible{background:#1a2232;border-color:#3a4a66}
.q41 [aria-checked=true]{border-color:#7dd3fc;background:#13273a}
@keyframes q41a{to{background-position:200% 200%}}

/* 42 Split-Flap Selector */
.q42 .q-tg{display:flex;gap:2px;padding:8px 10px;border-radius:8px;border:1px solid #2b2c31;background:#101113;perspective:300px}
.q42 .fl{display:inline-block;min-width:.9em;text-align:center;font:700 15px/1.6 ui-monospace,Menlo,monospace;color:#f2b632;background:linear-gradient(#2a2b30 0 48%,#050506 48% 52%,#1e1f23 52%);border-radius:3px;padding:0 1px}
.q42 .fl.go{animation:q42f .06s linear}
@keyframes q42f{50%{transform:rotateX(-85deg);filter:brightness(.6)}}
.q42 .q-pn{padding:6px;border-radius:10px;background:#101113;border:1px solid #2b2c31;box-shadow:0 20px 40px -14px #000}
.q42 [role=menuitemradio]{display:flex;justify-content:space-between;gap:16px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:none;font:600 12px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#d8d4c8}
.q42 [role=menuitemradio] small{color:#f2b632;font-size:10px}
.q42 [role=menuitemradio]:hover,.q42 [role=menuitemradio]:focus-visible{background:#1d1e22}

/* 43 Slot-Machine Reel */
.q43 .q-tg{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;border-radius:12px;border:2px solid #c9a227;background:linear-gradient(#7a1010,#4a0808);box-shadow:inset 0 2px 0 #ffffff22}
.q43 .win{position:relative;width:118px;height:30px;overflow:hidden;border-radius:6px;background:#fffaf0;box-shadow:inset 0 6px 8px -4px #0008,inset 0 -6px 8px -4px #0008}
.q43 .reel{position:absolute;left:0;right:0;top:0;transition:transform 1.4s cubic-bezier(.15,.9,.25,1.12)}
.q43 .reel b{display:block;height:30px;line-height:30px;text-align:center;font:800 13px system-ui;color:#2b0d0d}
.q43 .lever{width:8px;height:26px;border-radius:4px;background:linear-gradient(#ddd,#888);position:relative;transform-origin:bottom;transition:transform .25s}
.q43 .lever::before{content:"";position:absolute;left:-5px;top:-10px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff7070,#b00000)}
.q43.spin .lever{transform:rotate(28deg)}
.q43 .q-pn{padding:6px;border-radius:12px;background:#2b0d0d;border:2px solid #c9a227;box-shadow:0 20px 40px -14px #000}
.q43 [role=menuitemradio]{display:block;width:100%;padding:9px 12px;border:0;border-radius:8px;background:none;text-align:left;color:#ffe9b0;font-weight:700}
.q43 [role=menuitemradio]:hover,.q43 [role=menuitemradio]:focus-visible{background:#4a1414}

/* 44 Rolodex */
.q44 .q-tg{padding:9px 16px;border-radius:10px;border:1px solid #3a3226;background:#1d1812;color:#f3e7cf}
.q44 .q-pn{width:220px;height:168px;perspective:520px;padding:0;background:none}
.q44 .rx{position:absolute;inset:0;transform-style:preserve-3d}
.q44 [role=menuitemradio]{position:absolute;left:10px;right:10px;top:50%;height:64px;margin-top:-32px;border-radius:8px;border:1px solid #c8b896;background:repeating-linear-gradient(#fbf6ea 0 15px,#d9e6f2 15px 16px);color:#2a2116;
  display:flex;flex-direction:column;justify-content:center;padding:0 14px;text-align:left;box-shadow:0 8px 18px -8px #000;transform-origin:50% 50% -70px;transition:transform .5s cubic-bezier(.2,1,.3,1),opacity .5s;backface-visibility:hidden}
.q44 [role=menuitemradio] b{font:800 14px Georgia,serif}.q44 [role=menuitemradio] small{font-size:11px;color:#6b5a40}
.q44 .nav{position:absolute;right:-8px;top:50%;display:grid;gap:6px;transform:translate(100%,-50%)}
.q44 .nav button{width:28px;height:28px;border-radius:50%;border:1px solid #3a3226;background:#1d1812;color:#f3e7cf;cursor:pointer}

/* 45 Receipt Printer */
.q45 .q-tg{position:relative;width:150px;padding:10px 12px 14px;border-radius:10px 10px 4px 4px;border:1px solid #3b3f48;background:linear-gradient(#2b2f37,#1b1e24);color:#cfd5de;font:700 12px ui-monospace,monospace;letter-spacing:.06em;text-align:center}
.q45 .q-tg::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:4px;border-radius:2px;background:#050506}
.q45 .q-pn{top:calc(50% + 22px);width:136px;min-width:0;padding:10px 10px 18px;background:#fbf8f1;color:#1d1c1a;font:12px/1.5 ui-monospace,Menlo,monospace;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%;
  clip-path:inset(0 0 100% 0);transition:clip-path .9s steps(12),visibility 0s .9s;opacity:1}
.q45.open .q-pn{clip-path:inset(0 0 0 0);transition:clip-path .9s steps(12)}
.q45 [role=menuitem]{display:flex;width:100%;padding:3px 0;border:0;background:none;text-align:left;font:inherit}
.q45 [role=menuitem] span{flex:1;overflow:hidden;white-space:nowrap}
.q45 [role=menuitem] span::after{content:" ........................"}
.q45 [role=menuitem]:hover,.q45 [role=menuitem]:focus-visible{background:#1d1c1a;color:#fbf8f1}
.q45 .rc{border-top:1px dashed #9a968c;margin-top:6px;padding-top:6px;font-size:10px;color:#6b685f}

/* 46 CNC Tool Changer */
.q46 .q-tg{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid #2c3138;background:#16191d;color:#9fdcf5;font-family:ui-monospace,monospace}
.q46 .q-pn{width:220px;height:220px;min-width:0;border-radius:50%;background:radial-gradient(circle,#1d2126 0 34%,#101215 35% 100%);border:2px solid #343a42;box-shadow:0 24px 50px -16px #000,inset 0 0 0 10px #0c0d10}
.q46 .ring{position:absolute;inset:0;transition:transform .9s cubic-bezier(.3,1.2,.4,1)}
.q46 [role=menuitemradio]{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;border:2px solid #3a4048;background:radial-gradient(circle at 35% 35%,#e3e9ef,#7b8794 70%);
  transform:rotate(var(--a)) translateY(-78px) rotate(calc(var(--a) * -1 - var(--r,0deg)));transition:transform .9s cubic-bezier(.3,1.2,.4,1),box-shadow .2s;font:800 10px ui-monospace,monospace;color:#1b1e22}
.q46 [role=menuitemradio]:hover,.q46 [role=menuitemradio]:focus-visible{box-shadow:0 0 0 3px #3fd0ff}
.q46 [aria-checked=true]{box-shadow:0 0 0 3px #f2b632,0 0 18px #f2b632}
.q46 .spindle{position:absolute;left:50%;top:50%;width:64px;margin-left:-32px;margin-top:-10px;text-align:center;font:700 10px ui-monospace,monospace;color:#3fd0ff;pointer-events:none}

/* 47 Radar Scope */
.q47 .q-tg{padding:8px 14px;border-radius:8px;border:1px solid #1f6b3a;background:#021a0c;color:#7dffa8;font:700 12px ui-monospace,monospace;letter-spacing:.08em}
.q47 .q-pn{width:220px;height:220px;min-width:0;border-radius:50%;overflow:hidden;border:2px solid #1f6b3a;
  background:linear-gradient(#0000 calc(50% - .5px),#1f6b3a90 calc(50% - .5px) calc(50% + .5px),#0000 0),linear-gradient(90deg,#0000 calc(50% - .5px),#1f6b3a90 calc(50% - .5px) calc(50% + .5px),#0000 0),repeating-radial-gradient(circle,#0000 0 35px,#1f6b3a90 35px 36px),#010a05}
.q47 .q-pn::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,#4bff8a66,#0000 22%);animation:q47s 3s linear infinite;pointer-events:none}
@keyframes q47s{to{transform:rotate(360deg)}}
.q47 [role=menuitem]{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:4px 8px;border:1px solid #4bff8a;border-radius:999px;background:#021a0ccc;color:#c6ffd6;font:700 11px ui-monospace,monospace;white-space:nowrap}
.q47 [role=menuitem]::before{content:"";position:absolute;left:50%;top:-9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#4bff8a;box-shadow:0 0 8px #4bff8a}
.q47 [role=menuitem]:hover,.q47 [role=menuitem]:focus-visible{background:#4bff8a;color:#021a0c}

/* 48 Typewriter */
.q48 .q-tg{padding:9px 16px;border-radius:6px;border:1px solid #514636;background:#2a241b;color:#f3e7cf;font:700 13px "Courier New",monospace}
.q48 .q-pn{padding:12px 14px;background:#f6f0e1;color:#2a2116;border-radius:2px;box-shadow:0 18px 36px -12px #000;font:15px/1.6 "Courier New",monospace;min-width:200px}
.q48 [role=menuitem]{display:block;width:100%;padding:2px 4px;border:0;background:none;text-align:left;font:inherit;min-height:1.6em}
.q48 [role=menuitem]:hover,.q48 [role=menuitem]:focus-visible{background:#2a2116;color:#f6f0e1}
.q48 .car{display:inline-block;width:2px;height:1em;background:#2a2116;vertical-align:-2px;animation:q48c .8s steps(2) infinite}
@keyframes q48c{50%{opacity:0}}

/* 49 Elevator Panel */
.q49 .q-tg{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:8px;border:1px solid #6b7280;background:linear-gradient(90deg,#9ca3af,#e5e7eb 40%,#9ca3af);color:#111}
.q49 .disp{min-width:58px;padding:3px 8px;border-radius:4px;background:#120400;color:#ff7a1a;font:700 15px ui-monospace,monospace;text-shadow:0 0 6px #ff7a1a;text-align:center}
.q49 .q-pn{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px;border-radius:10px;background:repeating-linear-gradient(90deg,#b8bec6 0 1px,#cfd4da 1px 3px);border:1px solid #6b7280;box-shadow:0 20px 40px -14px #000}
.q49 [role=menuitemradio]{display:grid;justify-items:center;gap:4px;border:0;background:none;color:#1f2937;font:700 10px system-ui}
.q49 [role=menuitemradio] i{width:42px;height:42px;border-radius:50%;border:3px solid #6b7280;background:radial-gradient(circle at 40% 35%,#f3f4f6,#9ca3af);display:grid;place-items:center;font:800 14px system-ui;font-style:normal;box-shadow:0 2px 0 #4b5563;transition:all .15s}
.q49 [role=menuitemradio]:active i{transform:translateY(2px);box-shadow:none}
.q49 [aria-checked=true] i{border-color:#ff7a1a;box-shadow:0 0 0 2px #ff7a1a66,0 0 14px #ff7a1a;color:#ff7a1a}

/* 50 Vinyl Crate */
.q50 .q-tg{padding:9px 16px;border-radius:999px;border:1px solid #333;background:#111;color:#eee}
.q50 .q-pn{display:flex;gap:6px;padding:16px 12px 10px;border-radius:10px;background:linear-gradient(#5a3a22,#3b2414);border:1px solid #2a180c;box-shadow:0 20px 40px -14px #000}
.q50 [role=menuitem]{position:relative;width:46px;height:62px;border:0;border-radius:3px;background:var(--c);box-shadow:inset 0 0 0 1px #0004,2px 2px 0 #0005;transition:transform .3s cubic-bezier(.2,1.3,.4,1);display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font:800 8.5px/1.1 system-ui;color:#fff;text-shadow:0 1px 2px #000}
.q50 [role=menuitem]::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 1px,#222 1px 3px);box-shadow:0 0 0 1px #000;z-index:-1;transition:transform .35s}
.q50 [role=menuitem]:hover,.q50 [role=menuitem]:focus-visible{transform:translateY(-10px) rotate(-3deg)}
.q50 [role=menuitem]:hover::before,.q50 [role=menuitem]:focus-visible::before{transform:translateY(-14px)}

/* 51 Paint Fan Deck */
.q51 .q-tg{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1px solid #3a3f4a;background:#171a20}
.q51 .chip{width:16px;height:16px;border-radius:4px;background:var(--pick,#7a8b99)}
.q51 .q-pn{width:230px;height:170px;min-width:0;background:none}
.q51 [role=menuitemradio]{position:absolute;left:50%;bottom:4px;width:44px;height:150px;margin-left:-22px;border:0;border-radius:6px;background:var(--c);transform-origin:50% 95%;transform:rotate(0deg);
  transition:transform .55s cubic-bezier(.2,1.2,.3,1);box-shadow:0 4px 10px -4px #000;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font:800 9px/1.1 system-ui;color:#fff;text-shadow:0 1px 2px #0008;writing-mode:vertical-rl}
.q51.open [role=menuitemradio]{transform:rotate(var(--a))}
.q51 [role=menuitemradio]:hover,.q51 [role=menuitemradio]:focus-visible{z-index:5;transform:rotate(var(--a)) translateY(-10px)}

/* 52 Card Hand */
.q52 .q-tg{padding:9px 16px;border-radius:10px;border:1px solid #1f5136;background:#0f3d26;color:#f4efe2;font-weight:700}
.q52 .q-pn{width:240px;height:150px;min-width:0;background:none}
.q52 [role=menuitem]{position:absolute;left:50%;bottom:0;width:64px;height:92px;margin-left:-32px;border:1px solid #cfc8b8;border-radius:7px;background:#fffdf7;color:#b91c1c;transform-origin:50% 160%;
  transform:rotate(0);transition:transform .5s cubic-bezier(.2,1.2,.3,1);box-shadow:0 6px 14px -6px #000;display:flex;flex-direction:column;justify-content:space-between;padding:6px;font:800 10px/1.1 Georgia,serif;text-align:left}
.q52 [role=menuitem]:nth-child(even){color:#111}
.q52 [role=menuitem] b{font-size:18px;align-self:center}
.q52.open [role=menuitem]{transform:rotate(var(--a))}
.q52 [role=menuitem]:hover,.q52 [role=menuitem]:focus-visible{z-index:5;transform:rotate(var(--a)) translateY(-16px)}

/* 53 Neon Sign */
.q53 .q-tg{padding:8px 16px;border-radius:999px;border:2px solid #ff4fd8;background:#12060f;color:#ffd6f4;text-shadow:0 0 6px #ff4fd8;box-shadow:0 0 12px #ff4fd855,inset 0 0 10px #ff4fd833;font-weight:700}
.q53 .q-pn{padding:12px;border-radius:10px;background:#140b0b;border:1px solid #2a1717;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:30px 15px;box-shadow:0 20px 40px -14px #000}
.q53 [role=menuitem]{display:block;width:100%;padding:6px 10px;border:0;background:none;text-align:center;font:400 20px/1.2 "Brush Script MT","Segoe Script",cursive;color:#333;transition:color .1s,text-shadow .1s}
.q53.open [role=menuitem]{animation:q53on .9s steps(1) forwards;animation-delay:calc(var(--i) * .18s)}
@keyframes q53on{0%{color:#333;text-shadow:none}20%{color:var(--c);text-shadow:0 0 6px var(--c),0 0 18px var(--c)}30%{color:#333;text-shadow:none}45%,100%{color:var(--c);text-shadow:0 0 6px var(--c),0 0 18px var(--c)}}
.q53 [role=menuitem]:hover,.q53 [role=menuitem]:focus-visible{text-shadow:0 0 6px var(--c),0 0 26px var(--c),0 0 40px var(--c)}

/* 54 Blueprint Callouts */
.q54 .q-tg{padding:8px 14px;border:1.5px solid #cfe3ff;border-radius:2px;background:#123a6b;color:#eaf3ff;font:600 12px ui-monospace,monospace;letter-spacing:.06em}
.q54 .q-pn{padding:12px 14px;background:#123a6b;border:1.5px solid #cfe3ff;background-image:linear-gradient(#ffffff14 1px,#0000 1px),linear-gradient(90deg,#ffffff14 1px,#0000 1px);background-size:14px 14px;color:#eaf3ff;font:12px ui-monospace,monospace}
.q54 [role=menuitem]{position:relative;display:block;width:100%;padding:6px 0 6px 26px;border:0;background:none;text-align:left}
.q54 [role=menuitem]::before{content:"";position:absolute;left:0;top:50%;width:0;height:0;border-top:1.5px solid #cfe3ff;transition:width .4s;transition-delay:calc(var(--i) * .08s)}
.q54 [role=menuitem]::after{content:attr(data-d);position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:10px;color:#9ec2f5}
.q54.open [role=menuitem]::before{width:18px}
.q54 [role=menuitem]:hover,.q54 [role=menuitem]:focus-visible{color:#ffd166}

/* 55 Periodic Table */
.q55 .q-tg{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0}
.q55 .el{display:grid;place-items:center;width:30px;height:30px;border-radius:4px;background:var(--c,#475569);font:800 13px system-ui;color:#0b1020}
.q55 .q-pn{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;border-radius:10px;background:#0b1020;border:1px solid #334155;box-shadow:0 20px 40px -14px #000}
.q55 [role=menuitem]{display:grid;grid-template-rows:auto 1fr auto;width:64px;height:68px;padding:4px 5px;border:0;border-radius:6px;background:var(--c);color:#0b1020;text-align:left;transition:transform .2s}
.q55 [role=menuitem] small{font:700 9px ui-monospace,monospace}.q55 [role=menuitem] b{font:900 20px/1 system-ui;align-self:center}.q55 [role=menuitem] em{font:600 8.5px/1 system-ui;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q55 [role=menuitem]:hover,.q55 [role=menuitem]:focus-visible{transform:scale(1.08);box-shadow:0 0 0 2px #fff}

/* 56 Subway Line */
.q56 .q-tg{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:0;background:#f8fafc;color:#0f172a;font-weight:800}
.q56 .q-tg i{width:18px;height:18px;border-radius:50%;background:#e11d48;color:#fff;font:800 11px/18px system-ui;font-style:normal;text-align:center}
.q56 .q-pn{padding:12px 14px 12px 12px;border-radius:12px;background:#f8fafc;color:#0f172a;box-shadow:0 20px 40px -14px #000}
.q56 .ln{position:absolute;left:23px;top:24px;bottom:24px;width:6px;border-radius:3px;background:#e11d48}
.q56 .train{position:absolute;left:18px;top:var(--ty,18px);width:16px;height:16px;border-radius:4px;background:#0f172a;transition:top .6s cubic-bezier(.3,1.2,.4,1);z-index:2}
.q56 [role=menuitemradio]{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:7px 4px;border:0;background:none;text-align:left;font-weight:700;color:#0f172a}
.q56 [role=menuitemradio]::before{content:"";width:14px;height:14px;border-radius:50%;border:3px solid #e11d48;background:#fff;flex:none;position:relative;z-index:1;transition:transform .2s}
.q56 [role=menuitemradio]:hover::before,.q56 [role=menuitemradio]:focus-visible::before{transform:scale(1.3)}
.q56 [role=menuitemradio] small{margin-left:auto;font-weight:600;color:#64748b;font-size:11px}

/* 57 Keycaps */
.q57 .q-tg{padding:8px 14px;border-radius:8px;border:1px solid #3b3f48;background:#202329;color:#e5e7eb;box-shadow:0 4px 0 #0b0c0e}
.q57 .q-pn{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px;border-radius:12px;background:#15171b;border:1px solid #2a2d33;box-shadow:0 20px 40px -14px #000}
.q57 [role=menuitem]{position:relative;height:54px;border:0;border-radius:8px;background:linear-gradient(#f2efe8,#d8d3c8);color:#2b2b2b;box-shadow:0 5px 0 #8f897c,0 7px 10px -2px #000;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:6px 8px;font:700 11px system-ui;transition:transform .07s,box-shadow .07s}
.q57 [role=menuitem] kbd{font:800 14px ui-monospace,monospace}
.q57 [role=menuitem]:nth-child(1){background:linear-gradient(#ffb15c,#e8862b);box-shadow:0 5px 0 #9a5410,0 7px 10px -2px #000}
.q57 [role=menuitem]:active,.q57 [role=menuitem].dn{transform:translateY(4px);box-shadow:0 1px 0 #8f897c,0 2px 4px -1px #000}
.q57 [role=menuitem]:focus-visible{outline:2px solid #7dd3fc}

/* 58 Tape Measure */
.q58 .q-tg{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:14px;border:2px solid #111;background:#f5c518;color:#111;font-weight:800}
.q58 .q-tg .case{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#111 0 22%,#f5c518 24% 60%,#111 62% 66%,#f5c518 68%)}
.q58 .q-pn{top:calc(50% + 26px);left:0;transform:none;width:0;min-width:0;max-width:calc(100vw - 24px);overflow:hidden;padding:0;transition:width .7s cubic-bezier(.2,1.1,.3,1),visibility 0s .7s}
.q58.open .q-pn{width:min(260px,calc(100vw - 24px));transition:width .7s cubic-bezier(.2,1.1,.3,1)}
.q58 .tape{width:260px;height:46px;display:flex;background:#f5d74a;border:1px solid #b89a10;background-image:repeating-linear-gradient(90deg,#111 0 1px,#0000 1px 13px),repeating-linear-gradient(90deg,#111 0 1px,#0000 1px 52px);background-size:100% 10px,100% 18px;background-repeat:no-repeat}
.q58 [role=menuitem]{flex:1;border:0;border-left:1px solid #111;background:none;padding:18px 2px 0;font:800 10.5px system-ui;color:#111}
.q58 [role=menuitem]:first-child{border-left:0}
.q58 [role=menuitem]:hover,.q58 [role=menuitem]:focus-visible{background:#ffffff55}

/* 59 Combination Dial */
.q59 .q-tg{padding:8px 14px;border-radius:999px;border:1px solid #444;background:#1a1a1a;color:#ddd;font-weight:700}
.q59 .q-pn{width:220px;height:220px;min-width:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4a4a4a,#1a1a1a 70%);border:3px solid #777;box-shadow:0 20px 40px -14px #000,inset 0 0 0 12px #222}
.q59 .q-pn::before{content:"";position:absolute;left:50%;top:-4px;margin-left:-7px;border:7px solid transparent;border-top:12px solid #e11d48;z-index:3}
.q59 .dial{position:absolute;inset:16px;border-radius:50%;transition:transform .8s cubic-bezier(.3,1.1,.4,1);background:repeating-conic-gradient(#999 0 1deg,#0000 1deg 10deg);-webkit-mask:radial-gradient(circle,#0000 78%,#000 79%);mask:radial-gradient(circle,#0000 78%,#000 79%)}
.q59 .labels{position:absolute;inset:16px;transition:transform .8s cubic-bezier(.3,1.1,.4,1)}
.q59 [role=menuitemradio]{position:absolute;left:50%;top:50%;width:60px;margin-left:-30px;margin-top:-10px;border:0;background:none;color:#eee;font:700 11px system-ui;transform:rotate(var(--a)) translateY(-62px)}
.q59 [aria-checked=true]{color:#ffd166}
.q59 .knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#888,#222);box-shadow:0 4px 10px #000;display:grid;place-items:center;color:#ffd166;font:800 10px ui-monospace,monospace;pointer-events:none}

/* 60 Cabinet Drawer */
.q60 .q-tg{position:relative;width:150px;height:44px;border-radius:4px;border:1px solid #5b3a20;background:repeating-linear-gradient(178deg,#0000 0 6px,#00000012 6px 7px),linear-gradient(#a8743f,#8a5a2e);color:#2a1607;font:800 11px system-ui;letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 1px 0 #ffffff33}
.q60 .q-tg::after{content:"";position:absolute;left:50%;bottom:8px;width:34px;height:7px;margin-left:-17px;border-radius:4px;background:linear-gradient(#e6e6e6,#9a9a9a);box-shadow:0 2px 2px #0006}
.q60 .q-pn{top:calc(50% + 10px);width:190px;min-width:0;perspective:600px;padding:0;background:none;overflow:visible}
.q60 .box{transform-origin:top;transform:rotateX(-80deg);transition:transform .6s cubic-bezier(.2,1.2,.3,1);border-radius:0 0 6px 6px;border:1px solid #5b3a20;border-top:0;background:#d9b48a;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px;box-shadow:0 22px 34px -14px #000;
  background-image:repeating-linear-gradient(176deg,#0000 0 9px,#a8743f1c 9px 10px)}
.q60.open .box{transform:none}
.q60 [role=menuitem]{padding:10px 4px;border:1px solid #8a5a2e;border-radius:4px;background:#efd8b6;box-shadow:inset 0 2px 4px #8a5a2e66;color:#3b210c;font:700 11px system-ui}
.q60 [role=menuitem]:hover,.q60 [role=menuitem]:focus-visible{background:#fff0d6}

@media (prefers-reduced-motion:reduce){
  .q *{transition-duration:.01ms!important;animation:none!important}
  .q53 [role=menuitem]{color:var(--c);text-shadow:0 0 6px var(--c)}
}
/* 41-60: an open menu always sits above neighbor tiles (Safari doesn't focus tapped buttons) */
#demo-root.menus > .item:has(.q.open){z-index:60}

/* ===== 61-65 Flooring (2026-10-23) ===== */
/* 61 Sample Ring — chips hang from a store sample ring and swing open on springs; sweep the pointer through them and they jostle; the pick flies up onto the trigger */
.q61 .q-tg{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:12px;border:1px solid #3d3326;background:#17130e;color:#f1e6d4}
.q61 .chip{width:16px;height:26px;border-radius:3px;background:#3a2f22 var(--g) center/cover;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #ffffff22;position:relative}
.q61 .chip::before{content:"";position:absolute;left:50%;top:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#17130e;box-shadow:0 0 0 1px #aaa}
.q61 .q-pn{width:250px;min-width:0;height:200px;top:calc(50% + 24px)}
.q61 .hub{position:absolute;left:50%;top:4px;width:30px;height:30px;margin-left:-15px;border-radius:50%;border:3.5px solid #b9c0c7;box-shadow:0 0 0 1px #4b5259,inset 0 0 0 1px #4b5259,0 4px 8px #000a;z-index:9}
.q61 .hub::after{content:"";position:absolute;left:50%;top:-4px;width:7px;height:6px;margin-left:-3.5px;border-radius:2px;background:#8a929a}
.q61 [role=menuitemradio]{position:absolute;left:50%;top:15px;width:36px;height:140px;margin-left:-18px;padding:0 0 8px;border:0;border-radius:6px;transform-origin:50% 4px;
  background:#3a2f22 var(--g) center/cover;box-shadow:inset 0 0 0 1px #ffffff26,inset 0 -3px 0 #00000059,0 6px 10px -4px #000c;display:flex;align-items:flex-end;justify-content:center;
  font:800 8px/1 system-ui,sans-serif;letter-spacing:.06em;color:#1d1710;transform:rotate(var(--th,0deg)) translateY(var(--ly,0px));will-change:transform}
.q61 [role=menuitemradio]::before{content:"";position:absolute;left:50%;top:-1px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#0d0b08;box-shadow:0 0 0 2px #c3c9cf,inset 0 1px 2px #000}
.q61 [role=menuitemradio] span{writing-mode:vertical-rl;transform:rotate(180deg);background:#f6f1e7;padding:5px 2px;border-radius:2px;box-shadow:0 1px 2px #0007}
.q61 [role=menuitemradio]:hover,.q61 [role=menuitemradio]:focus-visible{--ly:6px;filter:brightness(1.12);z-index:8}
.q61 [aria-checked=true]{box-shadow:inset 0 0 0 2px #fcd34d,0 6px 10px -4px #000c}
.q61-fly{position:fixed;z-index:9999;border-radius:6px;pointer-events:none;background:var(--g) center/cover;box-shadow:0 10px 20px #000a}

/* 62 Plank Width Stack — options are real planks pulled from a lumber stack, each drawn at its true relative width; a tape rule brackets the hovered board */
.q62 .q-tg{display:flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:10px;border:1px solid #3d3326;background:#17130e;color:#f1e6d4}
.q62 .pl{width:30px;height:calc(var(--w,5) * 2px);border-radius:2px;background:#9a6b3e var(--g) 0 50%/60px auto;box-shadow:inset 0 1px 0 #ffffff40,0 0 0 1px #0006;transition:height .4s cubic-bezier(.3,1.6,.5,1)}
.q62 .q-pn{width:250px;min-width:0;top:calc(50% + 26px);padding:10px 10px 10px 34px;border-radius:12px;background:#120f0bf2;border:1px solid #3d3326;box-shadow:0 26px 50px -18px #000;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.q62 [role=menuitemradio]{position:relative;height:calc(10px + var(--w) * 3.4px);display:flex;align-items:center;gap:8px;padding:0 18px 0 10px;border:0;border-radius:2px;text-align:left;color:#21150a;
  background:var(--g) 0 50%/auto 140%;box-shadow:inset 0 1px 0 #ffffff4d,inset 0 -1px 0 #0000006b,0 3px 5px -2px #000c;transform:translateX(-125%) rotate(-2deg);
  transition:transform .55s cubic-bezier(.25,1.45,.45,1) var(--dl,0ms),filter .2s;text-shadow:0 1px 0 #ffffff4d}
.q62 [role=menuitemradio]::after{content:"";position:absolute;right:0;top:0;bottom:0;width:12px;border-radius:0 2px 2px 0;background:repeating-radial-gradient(circle at -40% 140%,#c49460 0 2px,#8a5d34 2px 3px);box-shadow:inset 1px 0 0 #0005}
.q62.open [role=menuitemradio]{transform:none}
.q62 [role=menuitemradio]:hover,.q62 [role=menuitemradio]:focus-visible{transform:translateX(9px)!important;filter:brightness(1.12);transition-delay:0s}
.q62 [role=menuitemradio] b{font:900 13px/1 ui-monospace,monospace;min-width:34px}
.q62 [role=menuitemradio] small{font:700 9.5px/1.1 system-ui,sans-serif;opacity:.82}
.q62 [aria-checked=true]{box-shadow:inset 0 0 0 2px #fcd34d,0 3px 5px -2px #000c}
.q62 .rule{position:absolute;left:6px;top:10px;bottom:10px;width:18px;border-radius:2px;background:#f2c94c repeating-linear-gradient(#0000 0 3.4px,#3b2a05 3.4px 4.4px) right/6px 100% no-repeat;box-shadow:inset 0 0 0 1px #0004}
.q62 .br{position:absolute;left:-2px;right:-3px;top:var(--bt,0);height:var(--bh,0);border:2px solid #fff;border-left:0;border-radius:0 3px 3px 0;opacity:0;transition:top .25s cubic-bezier(.3,1.4,.5,1),height .25s,opacity .2s;box-shadow:0 0 8px #fffa}
.q62 .q-pn:hover .br,.q62 .q-pn:focus-within .br{opacity:1}

/* 63 Room Picker Floorplan — the menu is a blueprint; hover a room and flooring is laid in from your pointer (planks, tile, carpet, sheet vinyl) with its size and why */
.q63 .q-tg{display:flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:10px;border:1px solid #23466d;background:#0d1d31;color:#dbeafe}
.q63 .ic{position:relative;width:22px;height:18px;border:1.5px solid #93c5fd;border-radius:2px}
.q63 .ic i{position:absolute;background:#93c5fd}
.q63 .ic i:nth-child(1){left:55%;top:0;bottom:0;width:1.5px}.q63 .ic i:nth-child(2){left:0;right:45%;top:55%;height:1.5px}.q63 .ic i:nth-child(3){left:55%;right:0;top:40%;height:1.5px}
.q63 .q-pn{width:262px;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:12px;background:#0b2240;border:1px solid #2c5a8f;box-shadow:0 26px 50px -18px #000;
  background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);background-size:12px 12px;transform:translateX(calc(-50% + var(--nx,0px))) scale(.96);transform-origin:50% 0;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.q63.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.q63 .plan{position:relative;height:150px;border:3px solid #e6f0ff;border-radius:2px;box-shadow:0 0 0 1px #0b2240,0 0 14px #93c5fd33}
.q63 [role=menuitemradio]{position:absolute;border:1.5px solid #e6f0ffcc;margin:-.75px;background:none;color:#cfe3ff;font:700 10px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;display:grid;place-items:center;overflow:hidden;padding:0}
.q63 [role=menuitemradio]::before{content:"";position:absolute;inset:0;background:var(--tex);clip-path:circle(0 at var(--ox,50%) var(--oy,50%));transition:clip-path .55s cubic-bezier(.3,.7,.3,1)}
.q63 [role=menuitemradio]:is(:hover,:focus-visible,[aria-checked=true])::before{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.q63 [role=menuitemradio]:is(:hover,:focus-visible,[aria-checked=true]){color:#fff;text-shadow:0 1px 3px #000,0 0 8px #000;z-index:2}
.q63 [role=menuitemradio]:focus-visible{outline:2px solid #fcd34d;outline-offset:-3px}
.q63 [role=menuitemradio] span{position:relative}
.q63 [aria-checked=true]{box-shadow:inset 0 0 0 2px #fcd34d}
.q63 [data-m=tl]{--tex:linear-gradient(#0000 0 calc(100% - 1.5px),#9aa3a8 0) 0 0/14px 14px,linear-gradient(90deg,#0000 0 calc(100% - 1.5px),#9aa3a8 0) 0 0/14px 14px,linear-gradient(135deg,#f2f2ee,#d9dbd8)}
.q63 [data-m=sv]{--tex:repeating-conic-gradient(#d7cfc0 0 25%,#c6bba8 0 50%) 0 0/20px 20px}
.q63 .info{display:grid;gap:2px;margin-top:8px;min-height:30px;color:#dbeafe}
.q63 .info b{font:800 11.5px/1.2 system-ui,sans-serif}.q63 .info span{font:600 10px/1.2 ui-monospace,monospace;color:#93c5fd}
.q63 .q-tg .sw{width:20px;height:16px;border-radius:2px;background:var(--tex);box-shadow:0 0 0 1px #0007}
.q63 .q-val{white-space:nowrap}

/* 64 Species Grain Menu — hover a species and a full board of its real grain pattern cross-fades in, with a light sweep and its Janka hardness bar */
.q64 .q-tg{display:flex;align-items:center;gap:9px;padding:9px 14px 9px 9px;border-radius:10px;border:1px solid #3d3326;background:#17130e;color:#f1e6d4}
.q64 .q-tg .sw{width:22px;height:22px;border-radius:5px;background:#5b4330 var(--g) center/cover;box-shadow:0 0 0 1px #0007,inset 0 0 0 1px #ffffff1f}
.q64 .q-pn{width:270px;min-width:0;top:calc(50% + 26px);padding:8px;border-radius:12px;background:#120f0bf5;border:1px solid #3d3326;box-shadow:0 26px 50px -18px #000;display:grid;grid-template-columns:1fr 128px;gap:8px;
  transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.q64.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.q64 .ls{display:flex;flex-direction:column;gap:2px}
.q64 [role=menuitemradio]{display:flex;align-items:center;gap:8px;padding:8px 8px;border:0;border-radius:8px;background:none;color:#d9cbb6;font:700 12px system-ui,sans-serif;text-align:left;transition:background .2s,color .2s,padding .25s}
.q64 [role=menuitemradio]::before{content:"";width:14px;height:14px;border-radius:4px;flex:none;background:var(--g) center/cover;box-shadow:0 0 0 1px #0008}
.q64 [role=menuitemradio]:is(:hover,:focus-visible,.cur){background:#2a2016;color:#fff;padding-left:12px}
.q64 [aria-checked=true]{color:#fcd34d}
.q64 .pv{margin:0;display:flex;flex-direction:column;gap:6px}
.q64 .bd{position:relative;height:118px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px #0008,0 8px 14px -6px #000;--mx:50%;--my:30%}
.q64 .bd i{position:absolute;inset:0;background:var(--g) center/cover;transition:opacity .45s}
.q64 .bd .l2{opacity:0}.q64 .bd.flip .l2{opacity:1}
.q64 .bd .gl{background:radial-gradient(70px 50px at var(--mx) var(--my),#fff4de59,#fff0 70%),linear-gradient(180deg,#ffffff1f,#0000 40%,#00000038);mix-blend-mode:soft-light;opacity:1}
.q64 .bd .gl::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#fff0 30%,#fff6 50%,#fff0 70%);background-size:300% 100%;background-position:150% 0}
.q64 .bd.sweep .gl::after{animation:q64s .7s ease-out}
.q64 figcaption{display:grid;gap:3px}
.q64 .nm{font:800 12px/1.1 system-ui,sans-serif;color:#f6ead6}.q64 .nt{font:600 9.5px/1.2 system-ui,sans-serif;color:#a8977f}
.q64 .jk{height:5px;border-radius:3px;background:#2a2016;overflow:hidden}.q64 .jk i{display:block;height:100%;width:var(--jw,50%);border-radius:3px;background:linear-gradient(90deg,#86efac,#fcd34d,#f97316);transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.q64 .jv{font:700 9px/1 ui-monospace,monospace;color:#d9cbb6;font-variant-numeric:tabular-nums}
@keyframes q64s{to{background-position:-50% 0}}

/* 65 Cascade Mega Menu — Type → Collection → Color: each column slides in when the last is chosen, a drawn connector links your path, and a full-width material preview follows the hover */
.q65 .q-tg{display:flex;align-items:center;gap:9px;padding:9px 14px 9px 9px;border-radius:10px;border:1px solid #34405a;background:#121826;color:#e8eefb;max-width:100%}
.q65 .q-tg .sw{width:22px;height:22px;flex:none;border-radius:5px;background:var(--sw,linear-gradient(135deg,#c49a6c,#7a5432));background-blend-mode:multiply;box-shadow:0 0 0 1px #0007}
.q65 .q-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.q65 .q-pn{width:min(430px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:14px;background:#0d1220f7;border:1px solid #2c3852;box-shadow:0 30px 60px -20px #000;
  display:grid;grid-template-columns:.9fr 1.15fr 1.25fr;gap:10px;transform:translateX(calc(-50% + var(--nx,0px))) translateY(-8px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.q65.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.q65 .ln{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.q65 .ln path{fill:none;stroke:#fcd34d;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--L,200);stroke-dashoffset:var(--L,200);opacity:.8}
.q65 .ln path.on{transition:stroke-dashoffset .45s ease-out;stroke-dashoffset:0}
.q65 .col{min-width:0;display:flex;flex-direction:column;gap:6px}
.q65 .col em{font:800 9px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#7d8aa8;font-style:normal;padding-left:4px}
.q65 .li{display:flex;flex-direction:column;gap:3px}
.q65 .c2 .li,.q65 .c3 .li{min-height:120px}
.q65 .c2,.q65 .c3{opacity:.25;transition:opacity .3s}.q65 .col.live{opacity:1}
.q65 .li [role=menuitem]{display:flex;align-items:center;gap:7px;padding:7px 7px;border:0;border-radius:8px;background:none;color:#c9d3e6;font:700 11.5px/1.15 system-ui,sans-serif;text-align:left;
  opacity:0;transform:translateX(-10px);animation:q65in .35s cubic-bezier(.3,1.3,.5,1) forwards;animation-delay:var(--dl,0ms)}
.q65 .li [role=menuitem]:is(:hover,:focus-visible){background:#1a2236;color:#fff}
.q65 .li [role=menuitem].sel{background:#24304a;color:#fcd34d;box-shadow:inset 2px 0 0 #fcd34d}
.q65 .c1 [role=menuitem] i{width:16px;height:16px;flex:none;border-radius:4px;background:var(--t);background-blend-mode:multiply;box-shadow:0 0 0 1px #0008}
.q65 .c2 [role=menuitem] small{display:block;font:600 9px/1.2 ui-monospace,monospace;color:#7d8aa8;margin-top:2px}
.q65 .c3 .li{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.q65 .c3 [role=menuitem]{flex-direction:column;align-items:stretch;gap:4px;padding:4px;font-size:9.5px}
.q65 .c3 [role=menuitem] i{height:30px;border-radius:5px;background:var(--t);background-blend-mode:multiply;box-shadow:inset 0 0 0 1px #ffffff1f,0 2px 4px #0008}
.q65 .pvw{grid-column:1/-1;position:relative;height:34px;border-radius:8px;overflow:hidden;background:#1a2236;display:flex;align-items:center}
.q65 .pvs{position:absolute;inset:0;background:var(--t,none);background-blend-mode:multiply;transition:opacity .3s;opacity:.95}
.q65 .pvt{position:relative;margin-left:auto;margin-right:8px;padding:3px 8px;border-radius:99px;background:#0d1220d9;color:#e8eefb;font:700 10px/1.2 ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%}
@keyframes q65in{to{opacity:1;transform:none}}
@media (max-width:480px){.q65 .q-pn{gap:6px;padding:8px}.q65 .li [role=menuitem]{font-size:10.5px;padding:6px 5px}}

/* open-over menu panels near the right edge (e.g. #24 submenu) must never widen the page */
html:has(#demo-root.menus){overflow-x:clip}

/* ===== 66-80 Cabinets · Closets · Selling (2026-10-26) ===== */
/* 66 Cabinet Door Mega Menu — every top item is a real cabinet box: hover a door and it swings open on its 35 mm hinges, the LED strip flickers on and the submenu sits on the shelves inside; pick and every door soft-closes */
.km66 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:10px;border:1px solid #3d362c;background:#17140f;color:#f3ece0}
.km66-knob{position:relative;width:20px;height:28px;border-radius:2px;background:#c9a77a var(--km66-g,none) center/cover;box-shadow:inset 0 0 0 3px #ffffff1c,inset 0 0 0 4px #0002,0 0 0 1px #0009}
.km66-knob::after{content:"";position:absolute;right:3px;top:9px;width:2px;height:10px;border-radius:2px;background:linear-gradient(90deg,#f4f4f4,#8b8b8b)}
.km66 .q-pn{box-sizing:border-box;width:min(356px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px 10px 8px;border-radius:8px;background:linear-gradient(#2b251d,#1a1611);border:1px solid #4a3e30;box-shadow:0 30px 60px -20px #000,inset 0 1px 0 #ffffff12;
  transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km66.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km66-run{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:3px;background:linear-gradient(#efe9dd,#d9d0bd);box-shadow:inset 0 0 0 1px #0002,0 8px 14px -8px #000}
.km66-box{position:relative;height:172px;perspective:520px;border-radius:2px;background:#f6f3ec;box-shadow:inset 0 0 0 1px #d2c9b6,inset 0 12px 16px -10px #0005,inset 6px 0 10px -8px #0003,inset -6px 0 10px -8px #0003}
.km66-box.km66-op{z-index:5}
.km66-in{position:absolute;inset:0;display:flex;flex-direction:column;padding:6px 5px 5px;overflow:hidden;border-radius:2px}
.km66-in::before{content:"";position:absolute;left:12%;right:12%;top:0;height:3px;border-radius:0 0 3px 3px;background:#fffaf0;box-shadow:0 0 8px 2px #fff1c9;opacity:0;z-index:2}
.km66-in::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0,#fff3d1b0,#fff0 62%);opacity:0;pointer-events:none;transition:opacity .4s .2s}
.km66-op .km66-in::before{animation:km66-led .5s steps(1) .15s forwards}
.km66-op .km66-in::after{opacity:1}
.km66-hd{position:relative;z-index:1;font:800 8px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8f846f;font-style:normal;padding:6px 3px 4px}
.km66-box [role=menuitem]{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:4px 4px 8px;border:0;border-radius:2px 2px 0 0;background:none;color:#2b241a;font:800 11px/1.1 system-ui,sans-serif;text-align:left;transition:background .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.km66-box [role=menuitem]::after{content:"";position:absolute;left:-5px;right:-5px;bottom:0;height:4px;background:linear-gradient(#fff,#d4ccba);box-shadow:0 3px 4px -1px #0003}
.km66-box [role=menuitem] small{font:700 8.5px/1 ui-monospace,monospace;color:#9a6d36;letter-spacing:.02em}
.km66-box [role=menuitem]:is(:hover,:focus-visible){background:#ffffffa0;transform:translateY(-2px)}
.km66-box [role=menuitem]:focus-visible{outline-offset:-2px}
.km66-door{position:absolute;inset:-1px;z-index:3;transform-style:preserve-3d;transform-origin:0 50%;transition:transform .85s cubic-bezier(.12,.85,.06,1);cursor:pointer}
.km66-box:nth-child(even) .km66-door{transform-origin:100% 50%}
.km66-op .km66-door{transform:rotateY(-100deg);pointer-events:none;transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.km66-box:nth-child(even).km66-op .km66-door{transform:rotateY(100deg)}
.km66-face,.km66-back{position:absolute;inset:0;border-radius:2px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.km66-face{background:#b8946a var(--km66-g,none) center/cover;box-shadow:inset 0 0 0 1px #ffffff30,inset 0 -2px 0 #0003,0 1px 2px #0006;transition:filter .5s}
.km66-face::before{content:"";position:absolute;inset:11px 9px;border-radius:1px;box-shadow:inset 2px 2px 3px #0006,inset -1px -1px 1px #ffffff40,0 0 0 1px #00000014}
.km66-face::after{content:"";position:absolute;right:5px;top:50%;width:3px;height:40px;margin-top:-20px;border-radius:2px;background:linear-gradient(90deg,#fafafa,#9c9c9c 60%,#6d6d6d);box-shadow:1px 2px 2px #0007}
.km66-box:nth-child(even) .km66-face::after{right:auto;left:5px}
.km66-face b{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);padding:2px 5px;border-radius:2px;background:#0000002e;color:#fffd;font:800 7.5px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 0 #0006}
.km66-op .km66-face{filter:brightness(.72)}
.km66-back{transform:rotateY(180deg);background:linear-gradient(90deg,#e6e1d6,#f8f6f1);box-shadow:inset 0 0 0 1px #cfc6b3}
.km66-back::before,.km66-back::after{content:"";position:absolute;right:5px;top:16px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle,#9aa0a6 0 3px,#6f757b 3.5px 5px,#c6cbd0 5.5px 7px,#0000 7.5px)}
.km66-back::after{top:auto;bottom:16px}
.km66-box:nth-child(even) .km66-back::before,.km66-box:nth-child(even) .km66-back::after{right:auto;left:5px}
.km66-tip{margin:8px 2px 0;font:700 9.5px/1.25 ui-monospace,monospace;color:#b7a88f;letter-spacing:.04em;text-align:center}
@keyframes km66-led{0%{opacity:.8}20%{opacity:.1}40%{opacity:1}55%{opacity:.3}70%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.km66-door,.km66-op .km66-door,.km66-box [role=menuitem]{transition:none}.km66-op .km66-in::before{animation:none;opacity:1}}

/* 67 Spice Pull-Out Colors — a narrow spice pull-out glides out of the cabinet and the glass jars rattle to a stop; each jar holds a thermofoil color, its lid twists on hover, and picking tips the jar to pour the color into the trigger */
.km67 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #3a3530;background:#161412;color:#f1ece4}
.km67-mj{position:relative;width:16px;height:22px;border-radius:3px 3px 5px 5px;background:linear-gradient(90deg,#ffffff30,#ffffff08 40%,#ffffff1c 85%);box-shadow:inset 0 0 0 1px #ffffff55;overflow:hidden}
.km67-mj::before{content:"";position:absolute;left:1px;right:1px;top:0;height:4px;border-radius:2px;background:linear-gradient(#e8e8e8,#8d8d8d);z-index:2}
.km67-lvl{position:absolute;left:1px;right:1px;bottom:1px;height:62%;border-radius:0 0 4px 4px;background:var(--km67-c,#ffffff22);transform-origin:50% 100%;box-shadow:inset 0 2px 0 #ffffff40}
.km67 .q-pn{box-sizing:border-box;width:min(250px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:8px;border-radius:10px;background:#1b1714;border:1px solid #3d342b;box-shadow:0 30px 60px -20px #000}
.km67-cab{position:relative;height:200px;overflow:hidden;border-radius:4px;background:radial-gradient(140% 90% at 0 50%,#3a3027,#1d1814 70%);box-shadow:inset 0 0 0 1px #00000080}
.km67-gable{position:absolute;left:0;top:0;bottom:0;width:14px;z-index:6;background:linear-gradient(90deg,#efe7d8,#cdbfa6 70%,#a7977d);box-shadow:4px 0 8px #000a}
.km67-rack{position:absolute;left:14px;top:6px;bottom:6px;width:186px;transform:translateX(-92%);transition:transform .8s cubic-bezier(.22,1.25,.4,1) .05s;
  background:linear-gradient(90deg,#c9ced3 0 2px,#0000 2px) 4px 0/100% 100% no-repeat,linear-gradient(#0000,#0000001f)}
.km67.open .km67-rack{transform:none}
.km67-front{position:absolute;right:0;top:-6px;bottom:-6px;width:16px;border-radius:2px;background:linear-gradient(90deg,#3c3d42,#55565c 40%,#3a3b40);box-shadow:inset 1px 0 0 #ffffff26,-3px 0 6px #0008}
.km67-front::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:46px;margin:-23px 0 0 -2px;border-radius:2px;background:linear-gradient(90deg,#f4f4f4,#9a9a9a 55%,#6a6a6a);box-shadow:1px 2px 3px #000a}
.km67-tier{position:relative;height:62px;display:flex;align-items:flex-end;gap:7px;padding:0 24px 5px 10px}
.km67-tier::before{content:"";position:absolute;left:4px;right:16px;bottom:0;height:4px;border-radius:2px;background:linear-gradient(#f1f3f5,#8e959b);box-shadow:0 2px 3px #0009}
.km67-tier::after{content:"";position:absolute;left:4px;right:16px;bottom:15px;height:2px;border-radius:1px;background:linear-gradient(#ffffff,#9aa1a7);box-shadow:0 1px 2px #0008;z-index:4;pointer-events:none}
.km67 [role=menuitemradio]{position:relative;width:46px;height:50px;flex:none;padding:0;border:0;border-radius:6px 6px 8px 8px;transform-origin:50% 100%;
  background:linear-gradient(90deg,#ffffff26,#ffffff08 30%,#ffffff00 60%,#ffffff1f 86%,#ffffff08);box-shadow:inset 0 0 0 1px #ffffff47,inset 0 -3px 5px #0003,0 4px 6px -3px #000c;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),filter .2s}
.km67 [role=menuitemradio]::after{content:"";position:absolute;left:6px;top:7px;width:4px;height:60%;border-radius:3px;background:linear-gradient(#ffffffa8,#fff0);pointer-events:none;z-index:3}
.km67-in{position:absolute;left:3px;right:3px;bottom:2px;height:64%;border-radius:2px 2px 6px 6px;background:radial-gradient(#ffffff4d .7px,#0000 1.2px) 0 0/4px 4px,radial-gradient(#00000026 .7px,#0000 1.2px) 2px 1px/5px 5px,var(--km67-c,#888)}
.km67-in::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;border-radius:50%;background:var(--km67-c,#888);box-shadow:inset 0 1px 1px #ffffff59}
.km67 [data-w] .km67-in{background:repeating-linear-gradient(104deg,#0000 0 3px,#00000024 3px 4px,#0000 4px 7px,#ffffff14 7px 8px),var(--km67-c,#888)}
.km67-lid{position:absolute;left:4px;right:4px;top:-7px;height:9px;border-radius:3px 3px 1px 1px;z-index:2;
  background:repeating-linear-gradient(90deg,#0000 0 2px,#0000002e 2px 3px),linear-gradient(#f2f2f2,#a3a3a3 60%,#7b7b7b);box-shadow:0 1px 2px #0008}
.km67 [role=menuitemradio] span{position:absolute;left:4px;right:4px;top:46%;z-index:2;padding:2px 1px;border-radius:1px;background:#f7f2e6;color:#2a2218;font:800 6px/1.05 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-align:center;box-shadow:0 1px 1px #0005}
.km67 [role=menuitemradio]:is(:hover,:focus-visible){transform:translateY(-10px) rotate(-3deg);z-index:5;filter:brightness(1.08)}
.km67 [aria-checked=true] .km67-lid{background:repeating-linear-gradient(90deg,#0000 0 2px,#0000002e 2px 3px),linear-gradient(#ffe9a8,#c9a14a 60%,#8a6a22)}
.km67-lab{display:grid;gap:2px;margin:8px 2px 0;min-height:30px}
.km67-lab b{font:800 12px/1.2 system-ui,sans-serif;color:#f6efe3}.km67-lab span{font:600 9.5px/1.2 ui-monospace,monospace;color:#b3a48c}
.km67-dust{position:fixed;z-index:9999;width:4px;height:4px;margin:-2px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 .5px #0005}
@media (prefers-reduced-motion:reduce){.km67-rack,.km67 [role=menuitemradio]{transition:none}}

/* 68 Pull Hardware Morph — a laminate drawer front whose pull morphs between bar, cup, edge tab, knob, arch and a routed J-groove as you hover; a red drill template and c-c dimension follow it, light glints off the metal, and the finish switches nickel, black or brass */
.km68 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:10px;border:1px solid #39352f;background:#161411;color:#f1ece4}
.km68-mini{position:relative;width:28px;height:18px;border-radius:2px;background:linear-gradient(#dcc39a,#c4a171);box-shadow:inset 0 0 0 2px #ffffff26,0 0 0 1px #0009}
.km68-mini i{position:absolute;left:50%;top:6px;width:16px;height:2px;margin-left:-8px;border-radius:2px;background:var(--km68-m,linear-gradient(#f4f5f6,#7d8186));box-shadow:0 1px 1px #0008;transition:all .4s cubic-bezier(.3,1.5,.5,1)}
.km68-mini[data-k=cup] i{width:12px;height:4px;margin-left:-6px;border-radius:1px 1px 4px 4px}
.km68-mini[data-k=tab] i{top:0;width:8px;height:3px;margin-left:-4px;border-radius:0 0 2px 2px}
.km68-mini[data-k=knob] i{top:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%}
.km68-mini[data-k=arch] i{width:20px;margin-left:-10px;height:3px;border-radius:6px 6px 1px 1px}
.km68-mini[data-k=groove] i{top:0;left:0;right:0;width:auto;margin:0;height:2px;border-radius:0;background:#2a1f15}
.km68 .q-pn{box-sizing:border-box;width:min(280px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:12px;background:#171411f7;border:1px solid #3c352c;box-shadow:0 30px 60px -20px #000;
  transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km68.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km68-front{position:relative;height:98px;border-radius:3px;overflow:hidden;background:#c9a77a var(--km68-g,none) center/cover;box-shadow:inset 0 0 0 1px #ffffff40,inset 0 -2px 0 #0002,0 10px 18px -10px #000;
  --km68-w:96px;--km68-h:7px;--km68-t:34px;--km68-r:4px;--km68-cc:84px}
.km68-front::before{content:"";position:absolute;inset:12px 14px;border-radius:1px;box-shadow:inset 2px 2px 3px #0005,inset -1px -1px 1px #ffffff4d}
.km68-pull{position:absolute;left:50%;top:var(--km68-t);width:var(--km68-w);height:var(--km68-h);border-radius:var(--km68-r);transform:translateX(-50%);z-index:2;
  background:var(--km68-m,linear-gradient(#f4f5f6,#b9bcc0 45%,#7d8186 55%,#d6d9dc));box-shadow:0 5px 5px -2px #0008,0 1px 0 #0006,inset 0 1px 0 #ffffff70;
  transition:width .6s cubic-bezier(.3,1.5,.5,1),height .6s cubic-bezier(.3,1.5,.5,1),top .55s cubic-bezier(.3,1.4,.5,1),border-radius .5s}
.km68-pull::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(26px 10px at var(--km68-sx,40%) 25%,#ffffffd9,#fff0 70%);mix-blend-mode:overlay;pointer-events:none}
.km68-front[data-k=cup] .km68-pull{box-shadow:0 5px 5px -2px #0008,inset 0 1px 0 #ffffff70,inset 0 -6px 6px -3px #000a}
.km68-front[data-k=cup] .km68-pull::before{content:"";position:absolute;left:7px;right:7px;bottom:3px;height:5px;border-radius:0 0 9px 9px;background:#0009}
.km68-front[data-k=knob] .km68-pull{background:radial-gradient(circle at 34% 30%,#fffc,#fff0 42%),var(--km68-m,linear-gradient(#f4f5f6,#7d8186));box-shadow:0 6px 6px -2px #0009,0 0 0 1px #0004}
.km68-front[data-k=groove] .km68-pull{background:linear-gradient(#0a0806,#3b2c1e 70%,#6b5238);box-shadow:inset 0 2px 3px #000,0 1px 0 #ffffff40}
.km68-front[data-k=groove] .km68-pull::after{display:none}
.km68-hole{position:absolute;left:calc(50% - var(--km68-cc) / 2);top:calc(var(--km68-t) + var(--km68-h) / 2);z-index:3;width:12px;height:12px;margin:-6px;border-radius:50%;opacity:0;pointer-events:none;
  background:linear-gradient(#ff5a36,#ff5a36) 50%/1px 100% no-repeat,linear-gradient(#ff5a36,#ff5a36) 50%/100% 1px no-repeat;box-shadow:0 0 0 1.5px #ff5a36 inset;
  transition:left .55s cubic-bezier(.3,1.4,.5,1),top .55s cubic-bezier(.3,1.4,.5,1),opacity .25s}
.km68-h2{left:calc(50% + var(--km68-cc) / 2)}
.km68-front.km68-pv .km68-hole{opacity:1}
.km68-front[data-k=knob] .km68-hole{left:50%}.km68-front[data-k=knob] .km68-h2,.km68-front[data-k=groove] .km68-hole{display:none}
.km68-hole.km68-drl{animation:km68-drill .6s ease-out}
.km68-dim{position:absolute;left:50%;top:calc(var(--km68-t) + var(--km68-h) + 9px);z-index:3;width:max(var(--km68-cc),2px);height:8px;transform:translateX(-50%);border-left:1px solid #ff5a36;border-right:1px solid #ff5a36;opacity:0;pointer-events:none;
  background:linear-gradient(#ff5a36,#ff5a36) 0 50%/100% 1px no-repeat;transition:width .55s cubic-bezier(.3,1.4,.5,1),top .55s cubic-bezier(.3,1.4,.5,1),opacity .25s}
.km68-dim b{position:absolute;left:50%;top:10px;transform:translateX(-50%);padding:2px 5px;border-radius:3px;background:#fffffff0;color:#c2361a;font:800 8.5px/1 ui-monospace,monospace;white-space:nowrap;box-shadow:0 1px 3px #0005}
.km68-front.km68-pv .km68-dim{opacity:1}
.km68-shine{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(120px 70px at var(--km68-sx,40%) 0,#fff6e04d,#fff0 70%);mix-blend-mode:soft-light}
.km68-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:8px}
.km68 [role=menuitemradio]{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 7px;border:1px solid #2f2a24;border-radius:8px;background:#201c18;color:#efe6d8;font:800 11.5px/1.1 system-ui,sans-serif;text-align:left;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.km68 [role=menuitemradio] small{font:600 8.5px/1.1 ui-monospace,monospace;color:#a8987f}
.km68 [role=menuitemradio]:is(:hover,:focus-visible){background:#2c2620;border-color:#5a4c3c;transform:translateY(-2px)}
.km68 [aria-checked=true]{border-color:#d9b46a;box-shadow:inset 0 0 0 1px #d9b46a55}
.km68-fin{display:flex;gap:6px;margin-top:8px}
.km68-fin button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 4px;border:1px solid #2f2a24;border-radius:99px;background:#1d1915;color:#cfc3b0;font:700 10px/1 system-ui,sans-serif;cursor:pointer}
.km68-fin button i{width:11px;height:11px;border-radius:50%;background:var(--km68-sw);box-shadow:inset 0 1px 0 #fff8,0 0 0 1px #0008}
.km68-fin [data-f="0"]{--km68-sw:linear-gradient(#f4f5f6,#7d8186)}.km68-fin [data-f="1"]{--km68-sw:linear-gradient(#5a5a5c,#0b0b0c)}.km68-fin [data-f="2"]{--km68-sw:linear-gradient(#fbe6a8,#8a6a22)}
.km68-fin [aria-pressed=true]{border-color:#d9b46a;color:#fff}
.km68-fin button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
@keyframes km68-drill{0%{transform:scale(2.2);opacity:0}40%{transform:scale(.7);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.km68-pull,.km68-hole,.km68-dim,.km68-mini i,.km68 [role=menuitemradio]{transition:none}.km68-hole.km68-drl{animation:none}}

/* 69 Door Profile Morph — the door elevation and its cut-away section spring-morph between Slab, Shaker, Raised, Beadboard and Cathedral as you hover; picking sends a CNC router bit along the new edge profile */
.km69 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #39352f;background:#161411;color:#f1ece4}
.km69-ico{width:18px;height:24px;overflow:visible}
.km69-ico rect{fill:#c69c66;stroke:#0009;stroke-width:5}
.km69-icp{fill:none;stroke:#3b2715;stroke-width:7;opacity:.7}
.km69 .q-pn{box-sizing:border-box;width:min(300px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:12px;background:#151310f7;border:1px solid #3a332a;box-shadow:0 30px 60px -20px #000;
  display:grid;grid-template-columns:116px minmax(0,1fr);gap:10px;align-items:start;transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km69.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km69-art{display:block;width:116px;height:auto;border-radius:6px;background:radial-gradient(120% 80% at 50% 0,#2b251e,#110f0c);box-shadow:inset 0 0 0 1px #ffffff12;overflow:visible}
.km69-door{filter:drop-shadow(0 2px 2px #0008)}
.km69-bev{fill:#00000026;fill-rule:evenodd}
.km69-dg{fill:none;stroke:#00000052;stroke-width:.7}
.km69-gv{fill:none;stroke:#3b2715;stroke-width:1;stroke-opacity:.55}
.km69-fi{fill:none;stroke:#2b1a0c;stroke-width:1.4;stroke-opacity:.75}
.km69-fl{fill:none;stroke:#fff3dc;stroke-width:1;stroke-opacity:.55;transform:translate(.9px,.9px)}
.km69-sp{fill:url(#km69-h);stroke:#5c4a30;stroke-width:.6}
.km69-st{fill:none;stroke:#e8c690;stroke-width:1.6;stroke-linejoin:round}
.km69-rt{fill:none;stroke:#ffd36b;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 2px #ffb020)}
.km69-bit{opacity:0;fill:#fff;stroke:#ff9f1c;stroke-width:1.2;filter:drop-shadow(0 0 3px #ffb020)}
.km69-cap{font:700 6px ui-monospace,monospace;letter-spacing:.14em;fill:#8d806b}
.km69-side{min-width:0;display:flex;flex-direction:column;gap:6px}
.km69-list{display:flex;flex-direction:column;gap:3px}
.km69 [role=menuitemradio]{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 9px;border:0;border-radius:8px;background:none;color:#e6dccd;font:750 12px/1 system-ui,sans-serif;text-align:left;transition:background .2s,padding .25s cubic-bezier(.3,1.5,.5,1),color .2s}
.km69 [role=menuitemradio] small{font:800 10.5px/1 ui-monospace,monospace;color:#e8c690}
.km69 [role=menuitemradio]:is(:hover,:focus-visible,.km69-cur){background:#2a241d;color:#fff;padding-left:13px}
.km69 [aria-checked=true]{box-shadow:inset 3px 0 0 #e8c690}
.km69-note{margin:2px 2px 0;font:600 9.5px/1.3 ui-monospace,monospace;color:#a9987f;min-height:26px}
@media (prefers-reduced-motion:reduce){.km69 [role=menuitemradio]{transition:none}}

/* 70 Kitchen Elevation Hotspots — the menu is a drawn kitchen wall; pulsing hotspots light up the uppers, drawers, sink base, dishwasher panel, end panels, crown and toe kick, dim everything else, draw a live dimension line and switch on the under-cabinet LEDs */
.km70 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #3a352e;background:#161411;color:#f1ece4}
.km70-ic{width:24px;height:20px;border-radius:2px;background:linear-gradient(#cdb48c,#cdb48c) 0 0/42% 40% no-repeat,linear-gradient(#cdb48c,#cdb48c) 100% 0/42% 40% no-repeat,linear-gradient(#f2efe8,#f2efe8) 0 58%/100% 8% no-repeat,linear-gradient(#cdb48c,#cdb48c) 0 100%/100% 38% no-repeat,#3a332b;box-shadow:0 0 0 1px #0008}
.km70 .q-pn{box-sizing:border-box;width:min(340px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:12px;background:#14120ff7;border:1px solid #3a332a;box-shadow:0 30px 60px -20px #000;
  transform:translateX(calc(-50% + var(--nx,0px))) scale(.97);transform-origin:50% 0;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km70.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km70-wall{position:relative;aspect-ratio:300/190;border-radius:6px;overflow:hidden;background:linear-gradient(#efe8db,#e3d9c6);box-shadow:inset 0 0 0 1px #0003,inset 0 -18px 24px -18px #0004}
.km70-wall>i{position:absolute;display:block}
.km70-win{background:linear-gradient(#bfe0f5,#e9f4fb 70%,#d4e6c8);box-shadow:inset 0 0 0 3px #fbfaf6,inset 0 0 0 4px #c9c1b0,0 2px 4px #0003}
.km70-win::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fbfaf6}
.km70-splash{background:linear-gradient(#0000 0 calc(100% - 1px),#c9c2b4 0) 0 0/100% 33.4%,linear-gradient(90deg,#0000 0 calc(100% - 1px),#c9c2b4 0) 0 0/9% 66.8%,linear-gradient(90deg,#0000 0 calc(100% - 1px),#c9c2b4 0) 4.5% 33.4%/9% 33.4% repeat-x,linear-gradient(#f7f5f0,#ece7dd)}
.km70-led{background:radial-gradient(60% 120% at 50% 0,#fff2c4d9,#fff2c400 70%);opacity:0;mix-blend-mode:screen;transition:opacity .35s;z-index:1}
.km70-wall[data-hi=up] .km70-led{opacity:1;animation:km70-flick .5s steps(1)}
.km70-ctr{z-index:2;background:linear-gradient(100deg,#0000 30%,#ffffff8c 45%,#0000 55%),linear-gradient(#fbfbf9,#dcdad4);box-shadow:0 2px 3px #0005,inset 0 -1px 0 #0002;border-radius:1px}
.km70-p{transition:filter .3s,box-shadow .3s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.km70-d{background:#c8a676 var(--km70-g,none) center/cover;box-shadow:inset 0 0 0 .5px #0004,inset 0 0 0 1px #ffffff33}
.km70-d::before{content:"";position:absolute;inset:14% 16%;box-shadow:inset 1px 1px 2px #0006,inset -1px -1px 0 #ffffff4d}
.km70-d::after{content:"";position:absolute;right:12%;top:12%;width:2px;height:22%;border-radius:2px;background:linear-gradient(90deg,#f4f4f4,#7d7d7d)}
.km70-d[data-p=sink]:last-of-type::after{right:auto;left:12%}
.km70-d[data-p=up]::after{top:auto;bottom:10%}
.km70-dr::before{inset:20% 9%}.km70-dr::after{left:50%;right:auto;top:18%;width:30%;height:2px;margin-left:-15%}
.km70-dw::after{left:15%;right:15%;top:10%;width:auto;height:2px}
.km70-crown{background:linear-gradient(#f1e7d6,#c7aa80 35%,#e9dcc6 55%,#9c7d55);box-shadow:0 2px 2px #0004}
.km70-end{background:#b28f62 var(--km70-g,none) center/cover;box-shadow:inset -1px 0 0 #0003,inset 1px 0 0 #ffffff26}
.km70-toe{background:linear-gradient(#2c2620,#1a1612)}
.km70-wall[data-hi] .km70-p:not(.km70-hi){filter:brightness(.55) saturate(.6)}
.km70-p.km70-hi{z-index:3;box-shadow:0 0 0 1.5px #fcd34d,0 0 12px 1px #fcd34d99;filter:brightness(1.08)}
.km70-p.km70-sel{box-shadow:0 0 0 1.5px #fcd34d}
.km70-hs{position:absolute;z-index:6;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle,#fff 0 3.5px,#fcd34d 4px 5.5px,#0000 6px);cursor:pointer;transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
.km70-hs::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1.5px solid #fcd34d;animation:km70-ping 2.2s ease-out infinite;animation-delay:var(--km70-dl,0s)}
.km70-hs:is(:hover,:focus-visible){transform:scale(1.35)}
.km70-hs[aria-checked=true]{background:radial-gradient(circle,#fcd34d 0 4px,#fff 4.5px 6px,#0000 6.5px)}
.km70-hs span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.km70-dim{z-index:5;height:9px;border-left:1px solid #fff;border-right:1px solid #fff;opacity:0;pointer-events:none;background:linear-gradient(#fff,#fff) 0 50%/100% 1px no-repeat;filter:drop-shadow(0 1px 1px #000c);
  transition:left .35s cubic-bezier(.3,1.3,.5,1),top .35s cubic-bezier(.3,1.3,.5,1),width .35s cubic-bezier(.3,1.3,.5,1),opacity .2s}
.km70-dim.km70-on{opacity:1}
.km70-dim b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:1px 4px;border-radius:3px;background:#111;color:#fcd34d;font:800 8px/1.2 ui-monospace,monospace;white-space:nowrap}
.km70-card{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:8px;min-height:32px;align-items:center}
.km70-card b{font:800 12px/1.2 system-ui,sans-serif;color:#f6efe3}.km70-card span{grid-column:1;font:600 9.5px/1.25 ui-monospace,monospace;color:#ab9c86}
.km70-card em{grid-column:2;grid-row:1/3;font:800 12px/1 ui-monospace,monospace;font-style:normal;color:#fcd34d;white-space:nowrap}
@keyframes km70-ping{0%{transform:scale(.6);opacity:1}70%,100%{transform:scale(2.1);opacity:0}}
@keyframes km70-flick{0%{opacity:.6}25%{opacity:.1}45%{opacity:1}60%{opacity:.4}75%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.km70-hs::before,.km70-wall[data-hi=up] .km70-led{animation:none}.km70-p,.km70-dim,.km70-hs{transition:none}}

/* 71 Garment Rod Menu — garments on wooden hangers ride a chrome closet rod; drag one and it shoves its neighbors along with swing physics, hover drops a hem line, and picking lifts the garment off the rod to size its hang section */
.km71 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #3a3631;background:#161412;color:#f1ece4}
.km71-ic{position:relative;width:22px;height:16px}
.km71-ic::before{content:"";position:absolute;left:50%;top:0;width:6px;height:6px;margin-left:-3px;border:2px solid #cfd4d8;border-bottom-color:#0000;border-left-color:#0000;border-radius:50%;transform:rotate(-45deg)}
.km71-ic::after{content:"";position:absolute;left:0;right:0;top:6px;height:9px;clip-path:polygon(50% 0,100% 85%,100% 100%,0 100%,0 85%);background:linear-gradient(#d9a868,#9c6a34)}
.km71 .q-pn{box-sizing:border-box;width:min(316px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:8px;border-radius:12px;background:#191714;border:1px solid #3b362f;box-shadow:0 30px 60px -20px #000}
.km71-cl{position:relative;height:206px;overflow:hidden;border-radius:6px;touch-action:pan-y;
  background:linear-gradient(90deg,#0000 0 49.6%,#00000010 49.6% 50.4%,#0000 50.4%),linear-gradient(#f3f0ea,#e2ddd3);box-shadow:inset 10px 0 14px -10px #0005,inset -10px 0 14px -10px #0005,inset 0 -30px 30px -30px #0004}
.km71-shelf{position:absolute;left:0;right:0;top:0;height:12px;background:linear-gradient(#fbfaf7,#e4dfd6);box-shadow:0 3px 5px #0003;border-bottom:2px solid #d3ccc0}
.km71-rod{position:absolute;left:6px;right:6px;top:25px;height:6px;border-radius:3px;z-index:1;background:linear-gradient(#ffffff,#c6ccd2 35%,#7f878f 60%,#d9dde1);box-shadow:0 2px 3px #0005}
.km71-rod::before,.km71-rod::after{content:"";position:absolute;top:-4px;width:6px;height:14px;border-radius:2px;background:linear-gradient(90deg,#9aa1a8,#e6e9ec,#8a9198)}
.km71-rod::before{left:-4px}.km71-rod::after{right:-4px}
.km71-hem{position:absolute;left:4px;right:4px;top:0;height:0;border-top:1px dashed #d6452a;opacity:0;z-index:4;pointer-events:none;transition:top .3s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.km71-hem b{position:absolute;right:2px;top:-15px;padding:1px 4px;border-radius:3px;background:#d6452a;color:#fff;font:800 8.5px/1.3 ui-monospace,monospace}
.km71-cl:hover .km71-hem,.km71-cl:focus-within .km71-hem{opacity:1}
.km71 [role=menuitemradio]{position:absolute;left:0;top:21px;width:48px;height:calc(var(--km71-h,60px) + 20px);padding:0;border:0;background:none;z-index:2;transform-origin:24px 6px;cursor:grab;touch-action:pan-y;filter:drop-shadow(0 5px 4px #0004)}
.km71 [role=menuitemradio]:active{cursor:grabbing}
.km71-hg{position:absolute;left:0;right:0;top:0;height:20px;pointer-events:none}
.km71-hg::before{content:"";position:absolute;left:50%;top:-2px;width:8px;height:8px;margin-left:-5px;border:2px solid #c3c9ce;border-bottom-color:#0000;border-left-color:#0000;border-radius:50%;transform:rotate(-45deg)}
.km71-hg::after{content:"";position:absolute;left:1px;right:1px;top:8px;height:11px;clip-path:polygon(50% 0,100% 82%,100% 100%,0 100%,0 82%);background:linear-gradient(#e2b273,#a26f37 70%,#7c5127)}
.km71-gm{position:absolute;left:50%;top:15px;width:var(--km71-w,44px);height:var(--km71-h,60px);transform:translateX(-50%);clip-path:var(--km71-cp);background:var(--km71-f);transition:filter .2s}
.km71 [data-g=shirt]{--km71-w:44px;--km71-h:66px;--km71-cp:polygon(30% 0,70% 0,100% 14%,100% 36%,86% 32%,86% 100%,14% 100%,14% 32%,0 36%,0 14%);--km71-f:linear-gradient(90deg,#0000 48%,#0002 48% 52%,#0000 52%),repeating-linear-gradient(90deg,#8fb6e3 0 2px,#f4f8fc 2px 5px)}
.km71 [data-g=dress]{--km71-w:46px;--km71-h:124px;--km71-cp:polygon(33% 0,67% 0,73% 9%,69% 32%,100% 100%,0 100%,31% 32%,27% 9%);--km71-f:radial-gradient(#f6c9d5 1.3px,#0000 1.8px) 0 0/8px 8px,radial-gradient(#ffe7a3 1px,#0000 1.5px) 4px 4px/8px 8px,linear-gradient(#a23556,#7d2240)}
.km71 [data-g=suit]{--km71-w:46px;--km71-h:82px;--km71-cp:polygon(28% 0,72% 0,100% 12%,100% 100%,0 100%,0 12%);--km71-f:linear-gradient(118deg,#0000 0 41%,#0005 41% 43%,#0000 43%),linear-gradient(242deg,#0000 0 41%,#0005 41% 43%,#0000 43%),repeating-linear-gradient(90deg,#3b3f47 0 4px,#565b65 4px 5px)}
.km71 [data-g=coat]{--km71-w:48px;--km71-h:114px;--km71-cp:polygon(26% 0,74% 0,100% 10%,95% 100%,5% 100%,0 10%);--km71-f:linear-gradient(90deg,#0000 49%,#5b3a1a66 49% 51%,#0000 51%),repeating-linear-gradient(45deg,#c0915a 0 2px,#a97a47 2px 4px)}
.km71 [data-g=pants]{--km71-w:34px;--km71-h:74px;--km71-cp:polygon(0 0,100% 0,100% 100%,56% 100%,50% 28%,44% 100%,0 100%);--km71-f:linear-gradient(#0000 0 8%,#c9a35a 8% 10%,#0000 10%),repeating-linear-gradient(135deg,#3f5d8b 0 2px,#2e4870 2px 4px)}
.km71 [data-g=kids]{--km71-w:34px;--km71-h:46px;--km71-cp:polygon(30% 0,70% 0,100% 18%,100% 40%,84% 36%,84% 100%,16% 100%,16% 36%,0 40%,0 18%);--km71-f:repeating-linear-gradient(#ffd34d 0 5px,#ff8f43 5px 8px)}
.km71 [role=menuitemradio] span{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(-4deg);padding:2px 4px;border-radius:2px;background:#fffaf0;color:#2b241c;font:800 7.5px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 2px #0006}
.km71 [role=menuitemradio]:is(:hover,:focus-visible) .km71-gm{filter:brightness(1.12)}
.km71 [role=menuitemradio]:focus-visible{outline-offset:-2px}
.km71 [aria-checked=true] span{background:#fcd34d}
.km71-lab{display:grid;gap:2px;margin:8px 2px 0;min-height:30px}
.km71-lab b{font:800 12px/1.2 system-ui,sans-serif;color:#f6efe3}.km71-lab span{font:600 9.5px/1.25 ui-monospace,monospace;color:#ab9c86}
@media (prefers-reduced-motion:reduce){.km71-hem{transition:none}}

/* 72 Shoe Wall Size Picker — a 4 × 4 shoe wall: hover a cubby and every cubby up to it lights its LED while shoes drop in, rippling out from the corner; it reads out pairs, size and price, and the pick sets your wall */
.km72 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #3a3631;background:#161412;color:#f1ece4}
.km72-ic{width:22px;height:18px;border-radius:2px;background:linear-gradient(90deg,#f1ede6 0 2px,#0000 2px) 0 0/7px 100%,linear-gradient(#f1ede6 0 2px,#0000 2px) 0 0/100% 6px,#3b3128;box-shadow:inset 0 0 0 2px #f1ede6}
.km72 .q-pn{box-sizing:border-box;width:min(264px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:12px;background:#191714;border:1px solid #3b362f;box-shadow:0 30px 60px -20px #000;
  transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km72.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km72-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px;border-radius:4px;background:linear-gradient(#f5f2ec,#e2dccf);box-shadow:inset 0 0 0 1px #0002,0 10px 18px -10px #000}
.km72 [role=menuitemradio]{position:relative;height:44px;padding:0;border:0;border-radius:2px;overflow:hidden;cursor:pointer;
  background:linear-gradient(#211c17,#2f2720);box-shadow:inset 0 6px 8px -3px #000c,inset 0 -1px 0 #ffffff14;transition:background .3s}
.km72 [role=menuitemradio]::before{content:"";position:absolute;left:10%;right:10%;top:0;height:2px;border-radius:0 0 2px 2px;background:#fff6dc;box-shadow:0 0 7px 2px #ffd98a;opacity:0;transition:opacity .2s var(--km72-d,0s)}
.km72 [role=menuitemradio]::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 0,#ffe3a64d,#0000 70%);opacity:0;transition:opacity .3s var(--km72-d,0s)}
.km72 .km72-on{background:linear-gradient(#4a3b2b,#3a2e23)}
.km72 .km72-on::before,.km72 .km72-on::after{opacity:1}
.km72-sh{position:absolute;left:10%;right:10%;bottom:3px;height:62%;z-index:1;opacity:0;transform:translateY(-18px) rotate(-6deg);transition:transform .45s cubic-bezier(.3,1.7,.5,1) var(--km72-d,0s),opacity .15s var(--km72-d,0s)}
.km72-sh svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 1px #000a)}
.km72 .km72-on .km72-sh{opacity:1;transform:none}
.km72 [role=menuitemradio] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.km72 [role=menuitemradio]:focus-visible{outline-offset:-2px}
.km72 .km72-sel{box-shadow:inset 0 0 0 2px #fcd34d,inset 0 6px 8px -3px #000c}
.km72-out{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:9px;align-items:center;min-height:32px}
.km72-sz{font:800 12.5px/1.2 system-ui,sans-serif;color:#f6efe3}.km72-dm{grid-column:1;font:600 9.5px/1.2 ui-monospace,monospace;color:#ab9c86}
.km72-pr{grid-column:2;grid-row:1/3;font:900 15px/1 ui-monospace,monospace;font-style:normal;color:#fcd34d;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.km72-sh,.km72 [role=menuitemradio]::before,.km72 [role=menuitemradio]::after{transition:none}}

/* 73 Buckle Finish Carousel — a 3D carousel of hanging belts you spin with a drag (inertia, then snap); every buckle is a closet hardware finish and light glints across the metal as it turns to face you */
.km73 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #3a3631;background:#161412;color:#f1ece4}
.km73-ic{width:20px;height:16px;border-radius:3px;background:var(--km73-m,linear-gradient(135deg,#fff,#c9ced3 30%,#7e868e 50%,#f1f3f5 70%,#9aa1a8));-webkit-mask:linear-gradient(#000 0 0) top/100% 3px no-repeat,linear-gradient(#000 0 0) bottom/100% 3px no-repeat,linear-gradient(#000 0 0) left/3px 100% no-repeat,linear-gradient(#000 0 0) right/3px 100% no-repeat,linear-gradient(#000 0 0) center/2px 100% no-repeat;mask:linear-gradient(#000 0 0) top/100% 3px no-repeat,linear-gradient(#000 0 0) bottom/100% 3px no-repeat,linear-gradient(#000 0 0) left/3px 100% no-repeat,linear-gradient(#000 0 0) right/3px 100% no-repeat,linear-gradient(#000 0 0) center/2px 100% no-repeat}
.km73 .q-pn{box-sizing:border-box;width:min(270px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:12px;background:radial-gradient(120% 70% at 50% 0,#2c2722,#141210);border:1px solid #3b362f;box-shadow:0 30px 60px -20px #000}
.km73-stage{position:relative;height:178px;perspective:560px;perspective-origin:50% 30%;touch-action:pan-y;cursor:grab;overflow:hidden;border-radius:8px}
.km73-stage:active{cursor:grabbing}
.km73-stage::before{content:"";position:absolute;left:50%;top:6px;width:170px;height:8px;margin-left:-85px;border-radius:50%;background:radial-gradient(#d9dde1,#6f777f 60%,#0000 72%);opacity:.7}
.km73-ring{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;transform:translateZ(-90px) rotateY(var(--km73-a,0deg))}
.km73 [role=menuitemradio]{position:absolute;left:50%;top:10px;width:38px;height:150px;margin-left:-19px;padding:0;border:0;background:none;transform:rotateY(var(--km73-t)) translateZ(90px);transform-style:preserve-3d;filter:brightness(var(--km73-b,1));cursor:pointer;pointer-events:auto}
.km73-st{position:absolute;left:8px;right:8px;top:24px;bottom:0;border-radius:1px 1px 10px 10px/1px 1px 14px 14px;
  background:radial-gradient(#ffffff14 .6px,#0000 1px) 0 0/3px 3px,linear-gradient(90deg,#0000003d,#0000 30%,#ffffff1f 50%,#0000 70%,#0000004d),var(--km73-l,#8a4b22);box-shadow:0 6px 8px -4px #000c}
.km73-st::before{content:"";position:absolute;inset:4px 2px 6px;border-left:1px dashed #ffffff4d;border-right:1px dashed #ffffff4d}
.km73-st::after{content:"";position:absolute;left:50%;bottom:16px;width:4px;height:44px;margin-left:-2px;background:radial-gradient(circle,#0b0806 1.4px,#0000 1.9px) 0 0/4px 9px}
.km73-bk{position:absolute;left:1px;right:1px;top:4px;height:30px;border-radius:5px;z-index:1;background:linear-gradient(105deg,#fff0 calc(var(--km73-gl,50%) - 18%),#ffffffd0 var(--km73-gl,50%),#fff0 calc(var(--km73-gl,50%) + 18%)),var(--km73-m);box-shadow:0 3px 4px #0009,inset 0 1px 0 #ffffff80}
.km73-bk::before{content:"";position:absolute;inset:5px 6px;border-radius:2px;background:var(--km73-l,#8a4b22);box-shadow:inset 0 2px 3px #000a}
.km73-bk::after{content:"";position:absolute;left:50%;top:3px;width:3px;height:22px;margin-left:-1.5px;border-radius:2px;background:var(--km73-m);box-shadow:0 1px 1px #0008}
.km73 [data-m="0"]{--km73-m:linear-gradient(135deg,#ffffff,#c9ced3 30%,#7e868e 50%,#f1f3f5 70%,#9aa1a8)}
.km73 [data-m="1"]{--km73-m:linear-gradient(135deg,#4a4a4d,#1d1d1f 50%,#2c2c2e)}
.km73 [data-m="2"]{--km73-m:repeating-linear-gradient(90deg,#ffffff1a 0 1px,#0000 1px 2px),linear-gradient(135deg,#e2e4e6,#a9adb2 50%,#cfd2d5)}
.km73 [data-m="3"]{--km73-m:linear-gradient(135deg,#f6e2a6,#c9a14a 45%,#8a6a22 60%,#e3c473)}
.km73 [data-m="4"]{--km73-m:linear-gradient(135deg,#9a6b48,#4a2f1f 45%,#2e1c12 60%,#7c5236)}
.km73 [data-m="5"]{--km73-m:linear-gradient(135deg,#fde1d5,#d79a86 45%,#a8695a 60%,#f0c2b0)}
.km73 [role=menuitemradio] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.km73 [role=menuitemradio]:focus-visible{outline-offset:2px}
.km73 [aria-checked=true] .km73-bk{box-shadow:0 0 0 2px #fcd34d,0 3px 4px #0009}
.km73-hook{position:absolute;left:50%;top:0;width:10px;height:16px;margin-left:-5px;border-radius:0 0 5px 5px;border:2px solid #fcd34d;border-top:0;opacity:.85;pointer-events:none}
.km73-cap{display:grid;gap:2px;margin:6px 2px 0;text-align:center}
.km73-cap b{font:800 13px/1.2 system-ui,sans-serif;color:#f6efe3}.km73-cap span{font:600 9.5px/1.25 ui-monospace,monospace;color:#ab9c86}
.km73-cap.km73-tk b{animation:km73-tick .3s cubic-bezier(.3,1.7,.5,1)}
@keyframes km73-tick{from{transform:translateY(5px);opacity:.3}}
@media (prefers-reduced-motion:reduce){.km73-cap.km73-tk b{animation:none}}

/* 74 Wardrobe Lift Menu — a pull-down wardrobe lift: the rod drops on gas-strut arms with the menu hanging from it, garment bags swing as it settles, and you can grab the wand to haul it up or down past the reach line */
.km74 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #3a3631;background:#161412;color:#f1ece4}
.km74-ic{position:relative;width:20px;height:20px;border-top:3px solid #c9ced3;border-radius:2px}
.km74-ic::before{content:"";position:absolute;left:50%;top:0;width:2px;height:13px;margin-left:-1px;background:#c9ced3}
.km74-ic::after{content:"";position:absolute;left:50%;top:12px;width:6px;height:6px;margin-left:-3px;border-radius:2px;background:#e14b2e}
.km74 .q-pn{box-sizing:border-box;width:min(268px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:8px;border-radius:12px;background:#191714;border:1px solid #3b362f;box-shadow:0 30px 60px -20px #000}
.km74-sec{position:relative;height:236px;overflow:hidden;border-radius:6px;background:linear-gradient(90deg,#d9d3c7 0 10px,#0000 10px calc(100% - 10px),#d9d3c7 0),linear-gradient(#ebe6dc,#f6f3ed 60%,#e3ddd1);box-shadow:inset 0 0 0 1px #0002}
.km74-shelf{position:absolute;left:0;right:0;top:0;height:12px;z-index:3;background:linear-gradient(#fbfaf7,#e1dbd0);box-shadow:0 3px 5px #0003}
.km74-hs{position:absolute;left:10px;top:12px;width:16px;height:34px;z-index:3;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#9aa1a8,#d9dde1 45%,#7e868e);box-shadow:2px 2px 4px #0005}
.km74-hs::after{content:"";position:absolute;left:6px;top:8px;width:4px;height:18px;border-radius:2px;background:linear-gradient(#333,#777)}
.km74-hr{left:auto;right:10px}
.km74-arm{position:absolute;left:16px;top:34px;width:5px;height:20px;margin-left:-2.5px;z-index:2;border-radius:3px;transform-origin:50% 0;background:linear-gradient(90deg,#7e868e,#e6e9ec,#8a9198);box-shadow:1px 1px 3px #0006}
.km74-ar{left:auto;right:16px;margin:0 -2.5px 0 0}
.km74-reach{position:absolute;left:10px;right:10px;top:132px;height:0;z-index:1;border-top:1.5px dashed #2f9e6a;pointer-events:none}
.km74-reach b{position:absolute;left:2px;top:2px;font:800 8px/1 ui-monospace,monospace;color:#2f9e6a;letter-spacing:.06em}
.km74-rig{position:absolute;left:0;right:0;top:30px;z-index:4;transform-origin:50% 0;transform:translateY(var(--km74-y,0px)) scale(var(--km74-s,1))}
.km74-rod{position:absolute;left:18px;right:18px;top:0;height:6px;border-radius:3px;background:linear-gradient(#fff,#c6ccd2 35%,#7f878f 60%,#d9dde1);box-shadow:0 2px 3px #0005}
.km74-row{position:absolute;left:24px;right:24px;top:-2px;display:flex;justify-content:space-between}
.km74 [role=menuitemradio]{position:relative;width:40px;height:96px;padding:0;border:0;background:none;transform-origin:50% 4px;transform:rotate(var(--km74-a,0deg));cursor:pointer;filter:drop-shadow(0 6px 5px #0005)}
.km74 [role=menuitemradio]::before{content:"";position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-5px;border:2px solid #c3c9ce;border-bottom-color:#0000;border-left-color:#0000;border-radius:50%;transform:rotate(-45deg)}
.km74-bag{position:absolute;left:2px;right:2px;top:9px;bottom:0;border-radius:14px 14px 6px 6px/10px 10px 6px 6px;background:linear-gradient(90deg,#0000 48%,#0004 48% 52%,#0000 52%),linear-gradient(90deg,#ffffff1a,#0000 40%,#0000002e),var(--km74-c,#4a5d7a)}
.km74-bag::after{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;margin-left:-1px;background:repeating-linear-gradient(#d8d8d8 0 1px,#0000 1px 3px)}
.km74 [role=menuitemradio]:nth-child(1){--km74-c:#4a5d7a}.km74 [role=menuitemradio]:nth-child(2){--km74-c:#7a4a5d}.km74 [role=menuitemradio]:nth-child(3){--km74-c:#5a6b4a}.km74 [role=menuitemradio]:nth-child(4){--km74-c:#8a6a3a}
.km74 [role=menuitemradio] span{position:absolute;left:50%;top:38px;transform:translateX(-50%) rotate(-3deg);width:38px;padding:3px 2px;border-radius:2px;background:#fffaf0;color:#2b241c;font:800 7px/1.15 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 1px 2px #0006}
.km74 [role=menuitemradio]:is(:hover,:focus-visible) .km74-bag{filter:brightness(1.2)}
.km74 [aria-checked=true] span{background:#fcd34d}
.km74-wand{position:absolute;left:50%;top:4px;z-index:2;width:14px;height:62px;margin-left:-7px;padding:0;border:0;background:none;cursor:grab;touch-action:none}
.km74-wand::before{content:"";position:absolute;left:50%;top:0;bottom:12px;width:3px;margin-left:-1.5px;background:linear-gradient(90deg,#8a9198,#eef0f2,#8a9198)}
.km74-wand i{position:absolute;left:50%;bottom:0;width:12px;height:16px;margin-left:-6px;border-radius:4px;background:linear-gradient(90deg,#b83a22,#ef6a4a,#a5321c);box-shadow:0 2px 3px #0007}
.km74-wand:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.km74-st{display:grid;gap:2px;margin:8px 2px 0}
.km74-st b{font:800 12px/1.2 system-ui,sans-serif;color:#f6efe3}.km74-st span{font:600 9.5px/1.25 ui-monospace,monospace;color:#ab9c86}
@media (prefers-reduced-motion:reduce){.km74 [role=menuitemradio]{transform:none}}

/* 75 Velvet Tray Drawer — a drawer glides out on full-extension rails to reveal a velvet accessory tray; brush it with your finger and the nap shades like real velvet; the compartments are the menu items and the velvet color switches live */
.km75 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #3a3631;background:#161412;color:#f1ece4}
.km75-ic{width:22px;height:16px;border-radius:3px;background:radial-gradient(circle at 30% 50%,#e8d6a0 0 2px,#0000 2.5px),radial-gradient(circle at 70% 50%,#cfd4d8 0 2px,#0000 2.5px),var(--km75-v,#4a2340);box-shadow:inset 0 0 0 2px #0004,0 0 0 1px #000a}
.km75 .q-pn{box-sizing:border-box;width:min(292px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:8px;border-radius:12px;background:#191714;border:1px solid #3b362f;box-shadow:0 30px 60px -20px #000}
.km75-cab{position:relative;height:196px;overflow:hidden;border-radius:6px;background:linear-gradient(#0f0d0b,#211c17)}
.km75-top{position:absolute;left:0;right:0;top:0;height:14px;z-index:5;background:linear-gradient(#efe9df,#cfc6b6);box-shadow:0 4px 8px #000a}
.km75-dr{position:absolute;left:8px;right:8px;top:0;bottom:0;transform:translateY(-68%);transition:transform .75s cubic-bezier(.2,1.15,.35,1) .05s}
.km75.open .km75-dr{transform:none}
.km75-rail{position:absolute;left:-6px;top:6px;bottom:24px;width:4px;border-radius:2px;background:linear-gradient(90deg,#8a9198,#eef0f2,#8a9198);box-shadow:1px 0 2px #0008}
.km75-r2{left:auto;right:-6px}
.km75-tray{position:absolute;left:0;right:0;top:6px;bottom:24px;display:grid;grid-template-columns:.9fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:5px;padding:6px;border-radius:3px;touch-action:none;
  background:#4a2340;box-shadow:inset 0 0 0 4px #e4dccd,inset 0 0 0 5px #0003,inset 0 6px 10px #0008}
.km75-vel{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:2px;pointer-events:none}
.km75 [role=menuitemradio]{position:relative;padding:0;border:0;border-radius:3px;background:none;cursor:pointer;box-shadow:inset 0 0 0 2px #0000004d,inset 0 2px 4px #0007,0 0 0 2px #ffffff12;transition:box-shadow .2s}
.km75-w{grid-row:1/3}.km75-g{grid-column:2}
.km75 [role=menuitemradio]:is(:hover,:focus-visible){box-shadow:inset 0 0 0 2px #fcd34d99,inset 0 2px 4px #0007,0 0 10px #fcd34d40}
.km75 [aria-checked=true]{box-shadow:inset 0 0 0 2px #fcd34d,inset 0 2px 4px #0007}
.km75-o{position:absolute;inset:6px;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.7,.5,1);filter:drop-shadow(0 2px 2px #000b)}
.km75 [role=menuitemradio]:is(:hover,:focus-visible) .km75-o{transform:translateY(-2px) scale(1.05)}
.km75-w .km75-o{background:radial-gradient(circle,#f7f3ea 0 6px,#c9a14a 6.5px 8.5px,#0000 9px) 50% 14%/100% 33% no-repeat,radial-gradient(circle,#1b2433 0 6px,#d9dde1 6.5px 8.5px,#0000 9px) 50% 50%/100% 33% no-repeat,radial-gradient(circle,#f3efe6 0 6px,#e9c7b9 6.5px 8.5px,#0000 9px) 50% 86%/100% 33% no-repeat,
  linear-gradient(90deg,#0000 30%,#d9cfbf 30% 70%,#0000 70%) 50% 0/100% 100% no-repeat;border-radius:10px;opacity:.97}
.km75-r .km75-o{background:radial-gradient(circle,#0000 0 2.5px,#e3c070 3px 4.5px,#0000 5px) 0 0/16px 50%,repeating-linear-gradient(#0000 0 calc(50% - 2px),#00000059 calc(50% - 2px) 50%)}
.km75-c .km75-o{background:radial-gradient(circle,#d9dde1 0 2.5px,#0000 3px) 0 0/12px 14px,radial-gradient(circle,#c9a14a 0 2px,#0000 2.5px) 6px 7px/12px 14px}
.km75-g .km75-o{background:radial-gradient(ellipse 9px 6px at 32% 50%,#1c2230 0 80%,#c9a14a 85% 100%,#0000 101%),radial-gradient(ellipse 9px 6px at 68% 50%,#1c2230 0 80%,#c9a14a 85% 100%,#0000 101%),linear-gradient(#c9a14a,#c9a14a) 50% 46%/10% 2px no-repeat}
.km75-e .km75-o{border-radius:50%;border:1.5px dotted #e3c070;inset:9px 12px;background:radial-gradient(circle at 50% 100%,#f4f1ea 0 2.5px,#0000 3px)}
.km75 [role=menuitemradio] span{position:absolute;left:4px;bottom:3px;padding:1px 4px;border-radius:2px;background:#0008;color:#f7efe2;font:800 7.5px/1.2 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.km75-front{position:absolute;left:-8px;right:-8px;bottom:0;height:26px;z-index:3;border-radius:2px;background:linear-gradient(#e8dccb,#cbb99e);box-shadow:inset 0 1px 0 #fff8,0 -3px 6px #0006}
.km75-front::after{content:"";position:absolute;left:50%;top:10px;width:64px;height:5px;margin-left:-32px;border-radius:3px;background:linear-gradient(#f4f5f6,#7d8186);box-shadow:0 2px 2px #0007}
.km75-fx{display:flex;gap:6px;margin-top:8px}
.km75-fx button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 4px;border:1px solid #2f2a24;border-radius:99px;background:#1d1915;color:#cfc3b0;font:700 10px/1 system-ui,sans-serif;cursor:pointer}
.km75-fx button i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 1px 1px #fff4,0 0 0 1px #000a}
.km75-fx [data-k="0"] i{background:#4a2340}.km75-fx [data-k="1"] i{background:#2e3034}.km75-fx [data-k="2"] i{background:#4f5f4a}
.km75-fx [aria-pressed=true]{border-color:#d9b46a;color:#fff}
.km75-fx button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.km75-lab{display:grid;gap:2px;margin:8px 2px 0}
.km75-lab b{font:800 12px/1.2 system-ui,sans-serif;color:#f6efe3}.km75-lab span{font:600 9.5px/1.25 ui-monospace,monospace;color:#ab9c86}
@media (prefers-reduced-motion:reduce){.km75-dr,.km75-o{transition:none}}

/* 76 Quote Builder Stepper — a three-step quote builder inside the dropdown: project, door count, finish; pages slide sideways, a rolling odometer runs the estimate and the savings, and the last step locks the price into the trigger */
.km76 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:10px;border:1px solid #1f4d3a;background:#0d1a14;color:#e8f6ee;max-width:100%}
.km76-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(#34d399,#059669);color:#04130c;font:900 13px/1 ui-monospace,monospace}
.km76 .q-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.km76 .q-pn{box-sizing:border-box;width:min(300px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:12px;border-radius:14px;background:#0b1511f7;border:1px solid #1f4d3a;box-shadow:0 30px 60px -20px #000,inset 0 1px 0 #ffffff0d;
  transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km76.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km76-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.km76-steps{position:relative;display:flex;gap:4px;margin:0;padding:0 0 8px;list-style:none;counter-reset:km76-s}
.km76-steps::before,.km76-steps::after{content:"";position:absolute;left:0;bottom:0;height:3px;border-radius:2px;background:#1c3a2d;width:100%}
.km76-steps::after{background:linear-gradient(90deg,#34d399,#a7f3d0);width:var(--km76-p,0%);transition:width .5s cubic-bezier(.3,1.3,.5,1)}
.km76-steps li{counter-increment:km76-s;display:flex;align-items:center;gap:3px;font:700 9px/1 ui-monospace,monospace;color:#5f8b77;letter-spacing:.04em;text-transform:uppercase;transition:color .3s}
.km76-steps li::before{content:counter(km76-s);display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#1c3a2d;color:#a7f3d0;font-size:8px;transition:background .3s,transform .3s cubic-bezier(.3,1.8,.5,1)}
.km76-steps .km76-on{color:#e8f6ee}.km76-steps .km76-on::before{background:#34d399;color:#04130c;transform:scale(1.15)}
.km76-steps .km76-dn::before{content:"✓";background:#065f46}
.km76-tot{text-align:right}
.km76-tot small{display:block;font:700 8.5px/1 ui-monospace,monospace;color:#5f8b77;letter-spacing:.08em;text-transform:uppercase}
.km76-od{display:inline-flex;height:24px;overflow:hidden;font:900 22px/24px ui-monospace,monospace;color:#a7f3d0;font-variant-numeric:tabular-nums}
.km76-dg{display:block;height:24px;overflow:hidden}
.km76-dg i{display:block;font-style:normal;transform:translateY(calc(var(--km76-d,0) * -24px));transition:transform .7s cubic-bezier(.25,1.3,.4,1) var(--km76-dl,0s)}
.km76-dg i b{display:block;height:24px;font:inherit}
.km76-vp{overflow:hidden;margin-top:10px;border-radius:10px}
.km76-tr{display:flex;transform:translateX(calc(var(--km76-s,0) * -100%));transition:transform .5s cubic-bezier(.3,1.15,.4,1)}
.km76-pg{flex:0 0 100%;min-width:0;box-sizing:border-box;padding:2px}
.km76-pg em{display:block;margin:0 0 7px;font:800 13px/1.2 system-ui,sans-serif;font-style:normal;color:#f1fbf6}
.km76-gr{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.km76-g3{grid-template-columns:1fr 1fr 1fr}.km76-g2{grid-template-columns:1.6fr 1fr}
.km76 [role=menuitem]{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 9px;border:1px solid #1f4d3a;border-radius:9px;background:#10221a;color:#e8f6ee;font:800 13px/1.1 system-ui,sans-serif;text-align:left;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.7,.5,1)}
.km76 [role=menuitem] small{font:600 9px/1.1 ui-monospace,monospace;color:#7fb39b}
.km76 [role=menuitem]:is(:hover,:focus-visible){background:#16302a;border-color:#34d399;transform:translateY(-2px)}
.km76 .km76-sel{border-color:#34d399;box-shadow:inset 0 0 0 1px #34d399}
.km76-sw{width:100%;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px #0004}
.km76-g3 [data-a="0"] .km76-sw{background:#ece9e2}.km76-g3 [data-a="4"] .km76-sw{background:repeating-linear-gradient(95deg,#c49a64 0 3px,#a87c4a 3px 4px,#cfa774 4px 7px)}.km76-g3 [data-a="9"] .km76-sw{background:linear-gradient(120deg,#1d2a44 40%,#7d8fb8 50%,#1d2a44 60%)}
.km76-sum{margin:0 0 8px;font:600 11px/1.45 ui-monospace,monospace;color:#bfe3d1}
.km76-sum b{color:#fff}
.km76 .km76-cta{align-items:center;justify-content:center;background:linear-gradient(#34d399,#059669);border-color:#34d399;color:#04130c;font-size:12px}
.km76 .km76-cta:is(:hover,:focus-visible){background:linear-gradient(#6ee7b7,#10b981)}
.km76 [data-k=back]{align-items:center;justify-content:center;font-size:11px;color:#9fc7b4}
.km76-save{margin:9px 2px 0;font:700 10px/1.3 ui-monospace,monospace;color:#7fb39b}
.km76-save b{color:#fcd34d}
@media (prefers-reduced-motion:reduce){.km76-tr,.km76-dg i,.km76-steps::after,.km76 [role=menuitem]{transition:none}}

/* 77 Who Are You Persona Menu — pick homeowner, builder, designer or flipper and the pitch rewrites itself: the headline scrambles into new copy, a marker stroke draws under the key phrase, bullets stagger in and the card's scene and accent morph */
.km77 .q-tg{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:99px;border:1px solid #3b3550;background:#131120;color:#efeafb}
.km77 .q-pn{box-sizing:border-box;width:min(310px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:16px;background:#100e1af7;border:1px solid #3b3550;box-shadow:0 30px 60px -20px #000;
  transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km77.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km77-av{position:relative;display:block;width:26px;height:26px;flex:none;border-radius:50%;background:var(--km77-ac,#f59e0b);box-shadow:inset 0 -3px 0 #0003,0 0 0 2px #fff2}
.km77-av::before,.km77-av::after{content:"";position:absolute}
.km77-av[data-p=home]{--km77-ac:#f59e0b}
.km77-av[data-p=home]::before{left:7px;top:11px;width:12px;height:9px;background:#fff}
.km77-av[data-p=home]::after{left:5px;top:5px;border:8px solid #0000;border-bottom:7px solid #fff;border-top:0}
.km77-av[data-p=build]{--km77-ac:#facc15}
.km77-av[data-p=build]::before{left:5px;top:9px;width:16px;height:8px;border-radius:8px 8px 1px 1px;background:#1f2937}
.km77-av[data-p=build]::after{left:3px;top:16px;width:20px;height:3px;border-radius:2px;background:#1f2937}
.km77-av[data-p=design]{--km77-ac:#ec4899}
.km77-av[data-p=design]::before{left:12px;top:5px;width:4px;height:16px;border-radius:2px;background:#fff;transform:rotate(-30deg);box-shadow:4px 2px 0 #fde68a,-4px 2px 0 #a7f3d0}
.km77-av[data-p=flip]{--km77-ac:#22c55e}
.km77-av[data-p=flip]::before{content:"$";left:0;right:0;top:4px;text-align:center;font:900 15px/18px ui-monospace,monospace;color:#052e16}
.km77-who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.km77 [role=menuitemradio]{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px 7px;border:1px solid #2a2540;border-radius:12px;background:#171428;color:#cfc8e6;font:750 10.5px/1 system-ui,sans-serif;transition:background .2s,border-color .2s,transform .3s cubic-bezier(.3,1.7,.5,1),color .2s}
.km77 [role=menuitemradio] .km77-av{transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
.km77 [role=menuitemradio]:is(:hover,:focus-visible,.km77-cur){background:#221d38;border-color:var(--km77-ac);color:#fff;transform:translateY(-2px)}
.km77 [role=menuitemradio]:is(:hover,:focus-visible,.km77-cur) .km77-av{transform:scale(1.14) rotate(-6deg)}
.km77 [role=menuitemradio][data-p=home]{--km77-ac:#f59e0b}.km77 [role=menuitemradio][data-p=build]{--km77-ac:#facc15}.km77 [role=menuitemradio][data-p=design]{--km77-ac:#ec4899}.km77 [role=menuitemradio][data-p=flip]{--km77-ac:#22c55e}
.km77 [aria-checked=true]{box-shadow:inset 0 0 0 1.5px var(--km77-ac)}
.km77-card{position:relative;margin-top:9px;padding:13px 13px 12px;border-radius:12px;overflow:hidden;background:#1a1630;min-height:150px;box-sizing:border-box;--km77-ac:#f59e0b;transition:background .4s}
.km77-card[data-p=build]{--km77-ac:#facc15;background:#141c2e}.km77-card[data-p=design]{--km77-ac:#ec4899;background:#2a1426}.km77-card[data-p=flip]{--km77-ac:#22c55e;background:#10231a}
.km77-scene{position:absolute;inset:0;opacity:.55;pointer-events:none;transition:opacity .3s}
.km77-card[data-p=home] .km77-scene{background:radial-gradient(120px 80px at 100% 0,#f59e0b40,#0000 70%),linear-gradient(135deg,#0000 70%,#f59e0b14 70%)}
.km77-card[data-p=build] .km77-scene{background:linear-gradient(#93c5fd14 1px,#0000 1px) 0 0/12px 12px,linear-gradient(90deg,#93c5fd14 1px,#0000 1px) 0 0/12px 12px,radial-gradient(120px 80px at 100% 0,#facc1533,#0000 70%)}
.km77-card[data-p=design] .km77-scene{background:radial-gradient(circle at 88% 18%,#f9a8d4 0 9px,#0000 10px),radial-gradient(circle at 80% 30%,#fde68a 0 9px,#0000 10px),radial-gradient(circle at 92% 36%,#a7f3d0 0 9px,#0000 10px),radial-gradient(140px 90px at 100% 0,#ec489933,#0000 70%)}
.km77-card[data-p=flip] .km77-scene{background:repeating-linear-gradient(-45deg,#22c55e0d 0 10px,#0000 10px 20px),radial-gradient(140px 90px at 100% 0,#22c55e38,#0000 70%)}
.km77-scene.km77-fl{animation:km77-in .45s ease-out}
.km77-h{position:relative;margin:0;max-width:92%;font:850 17px/1.15 system-ui,sans-serif;color:#fff;letter-spacing:-.01em;min-height:40px}
.km77-h mark{background:none;color:var(--km77-ac)}
.km77-mk{position:absolute;left:0;top:0;width:10px;height:9px;overflow:visible;pointer-events:none}
.km77-mk path{fill:none;stroke:var(--km77-ac);stroke-width:3;stroke-linecap:round;opacity:.85;stroke-dasharray:120;stroke-dashoffset:120;vector-effect:non-scaling-stroke}
.km77-mk.km77-go path{animation:km77-draw .55s cubic-bezier(.4,0,.2,1) .25s forwards}
.km77-ul{position:relative;margin:10px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.km77-ul li{position:relative;padding-left:16px;font:600 11px/1.3 system-ui,sans-serif;color:#ddd6f2}
.km77-ul li::before{content:"";position:absolute;left:2px;top:4px;width:7px;height:4px;border-left:2px solid var(--km77-ac);border-bottom:2px solid var(--km77-ac);transform:rotate(-45deg)}
.km77-ul.km77-go li{animation:km77-in .4s cubic-bezier(.3,1.4,.5,1) backwards}
.km77-ul.km77-go li:nth-child(2){animation-delay:.07s}.km77-ul.km77-go li:nth-child(3){animation-delay:.14s}
.km77-cta{position:relative;margin:10px 0 0;font:800 11.5px/1.2 system-ui,sans-serif;color:var(--km77-ac)}
@keyframes km77-draw{to{stroke-dashoffset:0}}
@keyframes km77-in{from{opacity:0;transform:translateX(-8px)}}
@media (prefers-reduced-motion:reduce){.km77-mk.km77-go path{animation:none;stroke-dashoffset:0}.km77-ul.km77-go li,.km77-scene.km77-fl{animation:none}.km77 [role=menuitemradio],.km77 [role=menuitemradio] .km77-av{transition:none}}

/* 78 Pricing Tier Stack — four order sizes from one door to a builder pallet; the per-door price rolls digit by digit, an isometric stack of laminate doors grows or shrinks to match, and a savings stamp slams on */
.km78 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border-radius:10px;border:1px solid #4a3a1c;background:#18130a;color:#fbf1dc}
.km78-ic{width:20px;height:20px;border-radius:3px;background:repeating-linear-gradient(#e6c48c 0 3px,#8a6a3a 3px 4px);box-shadow:0 0 0 1px #0009}
.km78 .q-pn{box-sizing:border-box;width:min(300px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:14px;background:#15110af7;border:1px solid #4a3a1c;box-shadow:0 30px 60px -20px #000;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km78.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km78-vis{position:relative;height:118px;border-radius:10px;overflow:hidden;background:radial-gradient(80% 60% at 50% 80%,#3a2c14,#16110a 75%)}
.km78-iso{position:absolute;left:50%;top:62%;width:0;height:0;perspective:600px}
.km78-stack{position:absolute;left:-34px;top:-24px;width:68px;height:48px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-40deg)}
.km78-sl{position:absolute;inset:0;border-radius:2px;transform:translateZ(calc(var(--km78-i) * 4px));background:linear-gradient(115deg,#ffffff26,#0000 40%),repeating-linear-gradient(90deg,#d9b27a 0 3px,#c49a64 3px 5px,#e0bb86 5px 8px);
  box-shadow:inset 0 0 0 1px #8a6a3a,inset 0 0 0 5px #00000014,0 0 0 1px #5a4322;animation:km78-drop .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--km78-dl,0s)}
.km78-sl.km78-out{animation:km78-lift .3s ease-in forwards}
.km78-qty{position:absolute;right:8px;top:7px;font:900 13px/1 ui-monospace,monospace;color:#fbf1dc;text-shadow:0 1px 0 #000}
.km78-stamp{position:absolute;left:6px;bottom:8px;padding:3px 6px;border:2px solid #ef4444;border-radius:4px;color:#ef4444;font:900 10px/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em;transform:rotate(-12deg);opacity:0}
.km78-stamp.km78-hit{animation:km78-stamp .45s cubic-bezier(.3,1.6,.5,1) forwards}
.km78-px{display:flex;flex-direction:column;justify-content:center;gap:3px}
.km78-px small{font:700 9px/1 ui-monospace,monospace;color:#a8916a;text-transform:uppercase;letter-spacing:.1em}
.km78-big{display:flex;height:44px;overflow:hidden;font:900 40px/44px system-ui,sans-serif;color:#fde68a;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.km78-dg{position:relative;display:block;height:44px;overflow:hidden;min-width:.6em}
.km78-dg i{position:absolute;left:0;top:0;font-style:normal;animation:km78-up .42s cubic-bezier(.3,1.3,.5,1) both}
.km78-dg i.km78-old{animation:km78-away .32s ease-in forwards}
.km78-tot{font:600 10px/1.3 ui-monospace,monospace;color:#d9c49c}
.km78-list{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.km78 [role=menuitemradio]{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 9px;border:1px solid #3a2e18;border-radius:9px;background:#1d170d;color:#fbf1dc;font:800 12px/1.1 system-ui,sans-serif;text-align:left;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.7,.5,1)}
.km78 [role=menuitemradio] small{font:600 9px/1.1 ui-monospace,monospace;color:#b39d74}
.km78 [role=menuitemradio]:is(:hover,:focus-visible){background:#2a2112;border-color:#fbbf24;transform:translateY(-2px)}
.km78 [aria-checked=true]{border-color:#fbbf24;box-shadow:inset 0 0 0 1px #fbbf24}
@keyframes km78-drop{from{transform:translateZ(calc(var(--km78-i) * 4px + 70px));opacity:0}}
@keyframes km78-lift{to{transform:translateZ(calc(var(--km78-i) * 4px + 50px));opacity:0}}
@keyframes km78-up{from{transform:translateY(100%);filter:blur(3px);opacity:0}}
@keyframes km78-away{to{transform:translateY(-100%);filter:blur(3px);opacity:0}}
@keyframes km78-stamp{0%{opacity:0;transform:rotate(-12deg) scale(2.4)}60%{opacity:1;transform:rotate(-12deg) scale(.9)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.km78-sl,.km78-sl.km78-out,.km78-dg i,.km78-dg i.km78-old,.km78-stamp.km78-hit{animation:none}.km78-stamp.km78-hit{opacity:1}.km78 [role=menuitemradio]{transition:none}}

/* 79 Testimonial Dial — a rotary dial of customer avatars you spin with a drag; whoever stops under the finger-stop takes the center, their stars fill and their quote types out, and picking puts their story in the trigger */
.km79 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:10px;border:1px solid #3d3552;background:#141120;color:#efeafb}
.km79-st{font:12px/1 system-ui;letter-spacing:1px;color:#fbbf24;text-shadow:0 0 6px #fbbf2466}
.km79 .q-pn{box-sizing:border-box;width:min(286px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:12px;border-radius:16px;background:#100d1af7;border:1px solid #3d3552;box-shadow:0 30px 60px -20px #000}
.km79-dial{position:relative;width:210px;height:210px;margin:0 auto;border-radius:50%;touch-action:none;cursor:grab;
  background:radial-gradient(circle,#0000 0 64px,#2a2342 65px 101px,#3b3358 102px 104px,#0000 105px),conic-gradient(from 0deg,#fff1 0 1deg,#0000 1deg 45deg) ;box-shadow:inset 0 0 0 1px #ffffff12}
.km79-dial:active{cursor:grabbing}
.km79-ring{position:absolute;inset:0;transform:rotate(var(--km79-a,0deg))}
.km79 [role=menuitemradio]{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;padding:0;border:0;border-radius:50%;cursor:pointer;
  transform:rotate(var(--km79-t)) translateY(-84px) rotate(calc(-1 * var(--km79-t) - var(--km79-a,0deg)));background:radial-gradient(circle at 35% 30%,#ffffff59,#0000 50%),var(--km79-c,#888);
  box-shadow:inset 0 -3px 0 #0003,0 3px 6px #000a,0 0 0 2px #100d1a;transition:box-shadow .2s}
.km79 [role=menuitemradio] b{font:900 11px/34px system-ui,sans-serif;color:#120f1c;letter-spacing:.02em}
.km79 [role=menuitemradio] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.km79 [role=menuitemradio]:is(:hover,:focus-visible){box-shadow:inset 0 -3px 0 #0003,0 0 0 2px #fff,0 0 14px var(--km79-c)}
.km79 .km79-top{box-shadow:inset 0 -3px 0 #0003,0 0 0 3px #fbbf24,0 0 16px #fbbf24aa}
.km79 [aria-checked=true] b{text-decoration:underline}
.km79-stop{position:absolute;left:50%;top:-4px;width:12px;height:30px;margin-left:-6px;border-radius:6px;background:linear-gradient(90deg,#9aa1a8,#f1f3f5,#8a9198);box-shadow:0 2px 4px #000a;pointer-events:none;transform:rotate(18deg);transform-origin:50% 105px}
.km79-hub{position:absolute;left:50%;top:50%;width:122px;height:122px;margin:-61px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;
  background:radial-gradient(circle at 40% 30%,#3b3358,#1a1528 70%);box-shadow:inset 0 2px 0 #ffffff14,0 6px 14px #000a}
.km79-ini{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--km79-c,#f59e0b);color:#120f1c;font:900 16px/1 system-ui,sans-serif;transition:background .3s;box-shadow:0 0 18px var(--km79-c,#f59e0b)}
.km79-ini.km79-pop{animation:km79-pop .4s cubic-bezier(.3,1.7,.5,1)}
.km79-stars{position:relative;font:13px/1 system-ui;letter-spacing:2px;color:#4a4360}
.km79-stars::before{content:"★★★★★"}
.km79-stars i{position:absolute;left:0;top:0;width:var(--km79-f,0%);overflow:hidden;white-space:nowrap;color:#fbbf24;transition:width .6s cubic-bezier(.3,1,.4,1) .1s}
.km79-stars i::before{content:"★★★★★"}
.km79-hub small{font:700 8.5px/1 ui-monospace,monospace;color:#9d93bd}
.km79-q{margin:12px 2px 0;min-height:66px}
.km79-q p{margin:0;font:600 12px/1.4 system-ui,sans-serif;color:#f0ecfa}
.km79-q p::before{content:"“";margin-right:2px;color:#fbbf24;font-weight:900}
.km79-q cite{display:block;margin-top:5px;font:700 9.5px/1.2 ui-monospace,monospace;font-style:normal;color:#9d93bd}
@keyframes km79-pop{from{transform:scale(.5)}}
@media (prefers-reduced-motion:reduce){.km79-ini.km79-pop{animation:none}.km79-stars i{transition:none}}

/* 80 Live Stock Urgency Menu — door colors with live stock badges that tick down while you watch, battery meters that drain, a ship-by countdown and a recent-order ticker; picking reserves the color with a 15-minute hold timer in the trigger */
.km80 .q-tg{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 11px;border-radius:10px;border:1px solid #4a2a22;background:#1a100d;color:#fbece6;font-variant-numeric:tabular-nums}
.km80-dot{position:relative;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.km80-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #22c55e;animation:km80-ping 1.6s ease-out infinite}
.km80.km80-held .km80-dot{background:#fbbf24;box-shadow:0 0 8px #fbbf24}.km80.km80-held .km80-dot::after{border-color:#fbbf24}
.km80 .q-pn{box-sizing:border-box;width:min(300px,calc(100vw - 24px));max-width:none;min-width:0;top:calc(50% + 26px);padding:10px;border-radius:14px;background:#140c0af7;border:1px solid #4a2a22;box-shadow:0 30px 60px -20px #000;
  transform:translateX(calc(-50% + var(--nx,0px))) translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .25s}
.km80.open .q-pn{transform:translateX(calc(-50% + var(--nx,0px)))}
.km80-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.km80-live{display:flex;align-items:center;gap:6px;font:800 9px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#f87171}
.km80-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ef4444;animation:km80-blink 1s steps(2) infinite}
.km80-cd{font:600 9.5px/1.2 ui-monospace,monospace;color:#d9b8ad;text-align:right}
.km80-cd b{color:#fff;font-variant-numeric:tabular-nums}
.km80-list{display:flex;flex-direction:column;gap:4px}
.km80 [role=menuitemradio]{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:9px;padding:7px 9px 7px 7px;border:1px solid #2d1a15;border-radius:10px;background:#1d1210;color:#fbece6;text-align:left;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.7,.5,1)}
.km80 [role=menuitemradio]:is(:hover,:focus-visible){background:#2a1915;border-color:#f97316;transform:translateX(3px)}
.km80 [aria-checked=true]{border-color:#fbbf24;box-shadow:inset 0 0 0 1px #fbbf24}
.km80 [aria-disabled=true]{opacity:.55;cursor:not-allowed}
.km80 [aria-disabled=true]:is(:hover,:focus-visible){transform:none;border-color:#4a2a22}
.km80-sw{width:22px;height:28px;border-radius:3px;background:var(--km80-c);box-shadow:inset 0 0 0 3px #ffffff1f,inset 0 0 0 4px #0002,0 0 0 1px #000a}
.km80-nm{display:flex;flex-direction:column;gap:2px;font:800 12px/1.1 system-ui,sans-serif;min-width:0}
.km80-nm small{font:600 9px/1 ui-monospace,monospace;color:#b99a8f}
.km80-bd{display:grid;justify-items:end;gap:4px;font:700 9.5px/1 ui-monospace,monospace;color:#d9b8ad;white-space:nowrap}
.km80-bd b{font:900 13px/1 ui-monospace,monospace;color:#86efac;font-variant-numeric:tabular-nums;display:inline-block}
.km80-low .km80-bd b{color:#fbbf24}.km80-crit .km80-bd b{color:#f87171;animation:km80-throb 1s ease-in-out infinite}
.km80 [aria-disabled=true] .km80-bd b{color:#9a7d73;font-size:10px}
.km80 [aria-disabled=true] .km80-bt i{width:0}
.km80-bd b.km80-tk{animation:km80-tick .5s cubic-bezier(.3,1.7,.5,1)}
.km80-bt{position:relative;display:block;width:34px;height:8px;border-radius:2px;box-shadow:inset 0 0 0 1px #6b4a40}
.km80-bt::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;border-radius:0 1px 1px 0;background:#6b4a40}
.km80-bt i{position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:calc((100% - 3px) * var(--km80-f,1));border-radius:1px;background:linear-gradient(90deg,#22c55e,#86efac);transition:width .6s cubic-bezier(.3,1.2,.5,1)}
.km80-low .km80-bt i{background:linear-gradient(90deg,#f59e0b,#fcd34d)}.km80-crit .km80-bt i{background:linear-gradient(90deg,#dc2626,#f87171)}
.km80-tick{display:flex;align-items:center;gap:7px;margin:9px 2px 0;min-height:16px;font:600 10px/1.25 ui-monospace,monospace;color:#d9b8ad}
.km80-tick span.km80-in{animation:km80-slide .4s cubic-bezier(.3,1.4,.5,1)}
.km80-eye{position:relative;flex:none;width:14px;height:9px;border-radius:50%/60%;border:1.5px solid #f97316}
.km80-eye::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#f97316}
@keyframes km80-ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes km80-blink{50%{opacity:.2}}
@keyframes km80-throb{50%{transform:scale(1.12)}}
@keyframes km80-tick{0%{transform:translateY(-8px) scale(1.4);color:#fff}}
@keyframes km80-slide{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.km80-dot::after,.km80-live::before,.km80-crit .km80-bd b,.km80-bd b.km80-tk,.km80-tick span.km80-in{animation:none}.km80-bt i,.km80 [role=menuitemradio]{transition:none}}