.km .browser{border:1px solid var(--ink-3);background:#1d1b17;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -40px #000c}.km .b-bar{border-bottom:1px solid var(--ink-3);align-items:center;gap:8px;padding:10px 12px;display:flex}.km .b-bar>i{background:#3a352e;border-radius:50%;flex:none;width:10px;height:10px}.km .b-url{background:var(--ink);font-family:var(--f-mono), monospace;color:var(--mute);text-overflow:ellipsis;white-space:nowrap;border-radius:7px;flex:1;min-width:0;margin:0 10px;padding:5px 10px;font-size:11px;overflow:hidden}.km .b-modes{background:var(--ink);border-radius:8px;gap:2px;margin-left:auto;padding:2px;display:flex}.km .b-modes button{font-family:var(--f-mono), monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);white-space:nowrap;border-radius:6px;padding:4px 9px;font-size:10px}.km .b-modes button[aria-pressed=true]{background:var(--ink-3);color:var(--bone)}.km .b-view{aspect-ratio:16/11;-webkit-user-select:none;user-select:none;touch-action:pan-y;position:relative;overflow:hidden}.km .msite{position:absolute;inset:0;container-type:inline-size}.km .msite.wire{background:#f3f1ec}.km .msite.design{clip-path:inset(0 0 0 var(--split,50%));background:#170e10}.km .handle{top:0;bottom:0;left:var(--split,50%);background:var(--gold);z-index:5;cursor:ew-resize;touch-action:none;width:2px;position:absolute;transform:translate(-1px)}.km .handle:before{content:"⇆";background:var(--gold);width:36px;height:36px;color:var(--ink);border-radius:50%;place-items:center;font-size:14px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 20px #0006}.km .tagl{z-index:4;font-family:var(--f-mono), monospace;letter-spacing:.08em;text-transform:uppercase;border-radius:5px;padding:4px 8px;font-size:9.5px;position:absolute;top:10px}.km .tagl.l{color:#fff;background:#1b1915;left:10px}.km .tagl.r{background:var(--gold);color:var(--ink);right:10px}.km .browser .code{z-index:6;font-family:var(--f-mono), monospace;color:#cfc9bd;opacity:0;pointer-events:none;white-space:pre;background:#12110f;margin:0;padding:18px 20px;font-size:12px;line-height:1.75;transition:opacity .3s;position:absolute;inset:0;overflow:hidden}.km .browser .code.on{opacity:1;pointer-events:auto}.km .code .k{color:#e3c98f}.km .code .s{color:#9fc9a8}.km .code .c{color:#6b665d}.km .code .t{color:#9fb3c8}.km .code .tcaret{animation:1s steps(2,end) infinite km-caret}@keyframes km-caret{50%{opacity:0}}.km .ms{flex-direction:column;gap:3cqw;height:100%;padding:4.5cqw 5cqw;display:flex}.km .ms-nav{justify-content:space-between;align-items:center;font-size:2cqw;display:flex}.km .ms-nav .lg{letter-spacing:.1em;font-weight:700}.km .ms-nav .lk{gap:3cqw;display:flex}.km .ms-hero{flex:1;grid-template-columns:1.1fr 1fr;gap:4cqw;min-height:0;display:grid}.km .ms-hero h4{letter-spacing:-.04em;font-size:6.4cqw;font-weight:600;line-height:.95}.km .ms-hero p{margin-top:2.4cqw;font-size:1.9cqw;line-height:1.5}.km .ms-btn{border-radius:99px;margin-top:3cqw;padding:1.4cqw 2.6cqw;font-size:1.8cqw;font-weight:600;display:inline-block}.km .ms-img{border-radius:1.6cqw;position:relative;overflow:hidden}.km .ms-cards{grid-template-columns:repeat(3,1fr);gap:2cqw;height:16cqw;display:grid}.km .ms-cards div{border-radius:1.4cqw;padding:2cqw;font-size:1.7cqw}.km .ms-cards b{margin-bottom:.6cqw;font-size:2.4cqw;display:block}.km .wire .ms{color:#9a958b;font-family:var(--f-mono), monospace}.km .wire .ms-hero h4{color:#0000;background:linear-gradient(#cfcac0 0 72%,#0000 72%) 0 .1em/100% .95em repeat-y}.km .wire .ms-hero p{color:#0000;background:linear-gradient(#dcd8cf 0 55%,#0000 55%) 0 .3em/100% 1.5em repeat-y}.km .wire .ms-btn{color:#9a958b;border:1.5px dashed #b5afa3}.km .wire .ms-img{background:linear-gradient(to top right,#0000 calc(50% - 1px),#c9c4b9 50%,#0000 calc(50% + 1px)),linear-gradient(to top left,#0000 calc(50% - 1px),#c9c4b9 50%,#0000 calc(50% + 1px));border:1.5px dashed #b5afa3}.km .wire .ms-img img{display:none}.km .wire .ms-cards div{border:1.5px dashed #b5afa3}.km .wire .ms-nav .lg,.km .wire .ms-nav .lk span{color:#0000;background:#d6d1c7;border-radius:3px}.km .design .ms{color:#f2efe8}.km .design .ms-nav .lk span{opacity:.75}.km .design .ms-hero h4 em{font-family:var(--f-serif), Georgia, serif;color:#e8574a;font-weight:400}.km .design .ms-btn{color:#170e10;background:#e8574a}.km .design .ms-cards div{background:#ffffff0f;border:1px solid #ffffff1a}.km .design .ms-cards div:first-child{color:#170e10;background:#e8574a}.km .ms-cards .vid{position:relative;overflow:hidden}.km .ms-cards .vid:after{content:"";background:linear-gradient(#170e1040,#170e10d9);position:absolute;inset:0}.km .ms-cards .vid>span{z-index:1;display:block;position:relative}.km .wire .ms-cards .vid img,.km .wire .ms-cards .vid:after{display:none}@container (max-width:380px){.km .ms-hero{grid-template-columns:1fr}.km .ms-hero h4{font-size:11cqw}.km .ms-hero p{font-size:3.6cqw}.km .ms-btn{padding:2.4cqw 4.6cqw;font-size:3.4cqw}.km .ms-nav{font-size:3.6cqw}.km .ms-nav .lk span:not(:last-child){display:none}.km .ms-cards{grid-template-columns:1fr;height:auto}.km .ms-cards div{padding:3.4cqw;font-size:3.4cqw}.km .ms-cards b{font-size:4.4cqw}.km .ms-cards div:nth-child(n+2){display:none}.km .ms-img{min-height:40cqw}}.km .perf{grid-template-columns:1fr 1.2fr;align-items:center;gap:clamp(32px,5vw,80px);display:grid}.km .perf>*{min-width:0}.km .perf-p{color:var(--mute-dark);max-width:44ch;line-height:1.6}.km .perf .vitals{margin-top:32px}.km .lh{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.km .lh>div{text-align:center}.km .lh .ring{aspect-ratio:1;width:100%;max-width:120px;margin:0 auto;position:relative}.km .lh svg{width:100%;height:100%;transform:rotate(-90deg)}.km .lh circle{fill:none;stroke-width:7px}.km .lh .bg{stroke:#2f8f5b26}.km .lh .fg{stroke:#2f8f5b;stroke-linecap:round}.km .lh .ring b{font-variation-settings:"wdth" 62;color:#1f6b42;font-variant-numeric:tabular-nums;place-items:center;font-size:clamp(30px,3vw,44px);font-weight:400;display:grid;position:absolute;inset:0}.km .lh span{color:var(--mute-dark);margin-top:10px;font-size:13px;display:block}.km .vitals{border-top:1px solid #0e0d0b33}.km .vitals>div{border-bottom:1px solid #0e0d0b33;grid-template-columns:160px 1fr 80px;align-items:center;gap:16px;padding:14px 0;font-size:14px;display:grid}.km .vitals .tr{background:#0e0d0b1a;border-radius:99px;height:6px;overflow:hidden}.km .vitals .tr i{background:#2f8f5b;border-radius:99px;height:100%;display:block}.km .vitals b{font-family:var(--f-mono), monospace;text-align:right;font-size:13px;font-weight:500}@media (max-width:900px){.km .perf{grid-template-columns:1fr}.km .lh{grid-template-columns:repeat(2,1fr)}.km .vitals>div{grid-template-columns:110px 1fr 60px}}.km .resp-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;display:flex}.km .devs{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;gap:4px;width:max-content;margin:0 0 24px auto;padding:4px;display:flex}.km .devs button{color:var(--mute);border-radius:9px;padding:9px 16px;font-size:13px;font-weight:500}.km .devs button[aria-pressed=true]{background:var(--bone);color:var(--ink)}.km .resp-stage{align-content:center;place-items:center;gap:18px;min-height:min(72vh,640px);display:grid}.km .dev-frame{border:1px solid var(--ink-3);background:#1d1b17;border-radius:18px;width:1000px;max-width:100%;padding:10px;box-shadow:0 40px 80px -40px #000c}.km .dev-frame .scr{background:#1b1b1b;border-radius:10px;height:540px;position:relative;overflow:hidden}.km .dev-frame .scr img{opacity:0;transition:opacity .6s var(--ease)}.km .dev-frame .scr img.on{opacity:1}.km .dev-cap{color:var(--mute);text-align:center}.km .tech{flex-wrap:wrap;gap:10px;margin-top:32px;display:flex}.km .tech span{border:1px solid var(--ink-3);border-radius:99px;padding:12px 20px;font-size:15px;font-weight:500;transition:background .3s,color .3s,transform .3s}.km .tech span:hover{background:var(--gold);color:var(--ink);transform:translateY(-3px)}.km .tech small{font-family:var(--f-mono), monospace;color:var(--mute);margin-left:8px;font-size:10px}.km .tech span:hover small{color:var(--ink)}.km .demos{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px;display:grid}.km .demo{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:14px;flex-direction:column;justify-content:space-between;min-height:210px;padding:18px;display:flex;position:relative;overflow:hidden}.km .demo .mono{color:var(--mute)}.km .demo .stage{flex:1;place-items:center;display:grid}.km .d-mag{background:var(--gold);width:96px;height:96px;color:var(--ink);border-radius:50%;place-items:center;font-size:13px;font-weight:600;display:grid}.km .d-toggle{background:var(--ink-3);border-radius:99px;width:78px;height:42px;transition:background .4s;position:relative}.km .d-toggle i{background:var(--bone);border-radius:50%;width:34px;height:34px;transition:transform .5s cubic-bezier(.5,1.8,.4,.8);position:absolute;top:4px;left:4px}.km .d-toggle[aria-checked=true]{background:#2f8f5b}.km .d-toggle[aria-checked=true] i{transform:translate(36px)}.km .d-scr{font-family:var(--f-mono), monospace;letter-spacing:.06em;color:var(--gold-soft);font-size:20px}.km .d-tilt{width:110px;height:140px;transform-style:preserve-3d;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 20px 40px -10px #0009}@media (max-width:900px){.km .demos{grid-template-columns:1fr 1fr}}@media (max-width:600px){.km .b-view{aspect-ratio:3/4}.km .b-url{display:none}.km .b-modes button{padding:4px 7px;font-size:9px}.km .devs{display:none}}@media (prefers-reduced-motion:reduce){.km .code .tcaret{animation:none}}
