@layer components{.mk-try{--try-check:repeating-conic-gradient(var(--mk-check-b) 0 25%, var(--mk-check-a) 0 50%);color:var(--mk-text)}.mk-try-btn{height:32px;color:var(--mk-text);background:var(--mk-field);border-radius:var(--mk-r-sm);cursor:pointer;transition:background-color var(--mk-dur-micro) var(--mk-ease-out);border:0;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:500;display:inline-flex}.mk-try-btn:hover:not(:disabled){background:var(--mk-line)}.mk-try-btn:disabled{color:var(--mk-text-muted);cursor:default}.mk-try-btn[aria-pressed=true]{color:var(--mk-brand-ink);background:var(--mk-brand)}.mk-try-btn>svg{flex:none;width:16px;height:16px}.mk-try-icon{width:36px;padding:0}.mk-try :is(button,input,select,a,canvas,[tabindex]):focus-visible{outline:2px solid var(--mk-focus);outline-offset:2px}@media (pointer:coarse){.mk-try-btn{height:44px}.mk-try-icon{width:44px}}.mk-try-seg{background:var(--mk-deep);border-radius:var(--mk-r-md);border:0;flex-wrap:wrap;gap:2px;margin:0;padding:2px;display:inline-flex}.mk-try-seg>legend{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.mk-try-seg label{display:inline-flex;position:relative}.mk-try-seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.mk-try-seg span{height:28px;color:var(--mk-text-dim);border-radius:var(--mk-r-sm);white-space:nowrap;align-items:center;padding:0 10px;font-size:13px;display:inline-flex}.mk-try-seg input:checked+span{color:var(--mk-brand-ink);background:var(--mk-brand)}.mk-try-seg input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--mk-focus)}@media (pointer:coarse){.mk-try-seg span{height:40px}}.mk-try-field{flex-direction:column;gap:6px;min-width:0;display:flex}.mk-try-field-label{letter-spacing:.02em;color:var(--mk-text-dim);font-size:12px;font-weight:500}.mk-try-num{width:64px;height:32px;font:500 13px/1 var(--font-pxm-mono), ui-monospace, monospace;color:var(--mk-text);background:var(--mk-field);border-radius:var(--mk-r-sm);border:0;padding:0 8px}.mk-try-nudge{margin:0;font-size:15px}.mk-try-nudge a{color:var(--mk-link);text-decoration:underline;-webkit-text-decoration-color:var(--mk-line-strong);text-decoration-color:var(--mk-line-strong);text-underline-offset:3px;font-weight:500}.mk-try-nudge a:hover{text-decoration-thickness:2px}.mk-try-art{width:calc(var(--art-w) * var(--cell));height:calc(var(--art-h) * var(--cell));background:var(--try-check) 0 0 / calc(var(--cell) * 2) calc(var(--cell) * 2);touch-action:none;-webkit-user-select:none;user-select:none;flex:none;position:relative}.mk-try-art>canvas,.mk-try-art>.mk-try-seed{width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}.mk-try-art>canvas{cursor:crosshair}.mk-try-art[data-ready]>.mk-try-seed{visibility:hidden}.mk-try-grid{pointer-events:none;background-image:linear-gradient(90deg,#ffffff1f 1px,#0000 1px),linear-gradient(#ffffff1f 1px,#0000 1px);background-size:var(--cell) var(--cell);mix-blend-mode:difference;position:absolute;inset:0}.mk-try-focus{width:var(--cell);height:var(--cell);pointer-events:none;box-shadow:inset 0 0 0 2px var(--mk-focus), 0 0 0 1px #000;transform:translate(calc(var(--fx) * var(--cell)), calc(var(--fy) * var(--cell)));display:none;position:absolute;top:0;left:0}.mk-try-art:has(canvas:focus-visible)>.mk-try-focus{display:block}.mk-try-kai{gap:32px;display:grid}@media (min-width:1024px){.mk-try-kai{grid-template-columns:5fr 7fr;align-items:start;gap:48px}}.mk-try-kai-text{flex-direction:column;order:2;gap:24px;display:flex}@media (min-width:1024px){.mk-try-kai-text{order:0}}.mk-try-window{--cell:9px;--art-w:32;--art-h:32;background:var(--mk-card);border-radius:var(--mk-r-xl);min-width:0;box-shadow:var(--mk-sh-window);overflow:hidden}@media (min-width:640px){.mk-try-window{--cell:12px}}@media (min-width:1280px){.mk-try-window{--cell:14px}}.mk-try-head{border-bottom:1px solid var(--mk-line);flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;display:flex}.mk-try-title{margin-right:auto;font-size:13px;font-weight:600}.mk-try-avatars{display:flex}.mk-try-avatar{color:#0b0b0f;background:var(--c);width:26px;height:26px;box-shadow:0 0 0 2px var(--mk-card);border-radius:3px;place-items:center;margin-left:-4px;font-size:11px;font-weight:700;display:grid}.mk-try-avatar[data-person=kai]{box-shadow:0 0 0 2px var(--mk-card), 0 0 0 4px var(--mk-kai)}.mk-try-switch{color:var(--mk-text-dim);cursor:pointer;align-items:center;gap:8px;font-size:13px;display:inline-flex}.mk-try-switch>span:first-child{background:var(--mk-field);width:28px;height:16px;transition:background-color var(--mk-dur-micro) var(--mk-ease-out);border-radius:8px;position:relative}.mk-try-switch>span:first-child:after{content:"";background:var(--mk-text);width:12px;height:12px;transition:translate var(--mk-dur-micro) var(--mk-ease-out);border-radius:50%;position:absolute;top:2px;left:2px}.mk-try-switch[aria-checked=true]>span:first-child{background:var(--mk-brand)}.mk-try-switch[aria-checked=true]>span:first-child:after{background:var(--mk-brand-ink);translate:12px}.mk-try-switch:focus-visible{outline:2px solid var(--mk-focus);outline-offset:2px;border-radius:var(--mk-r-sm)}.mk-try-body{flex-wrap:wrap;gap:12px;padding:12px;display:flex}.mk-try-rail{flex-direction:column;gap:4px;display:flex}.mk-try-stage{flex-direction:column;gap:8px;display:flex;position:relative}.mk-try-opts{flex-wrap:wrap;gap:4px;display:flex}.mk-try-side{flex-direction:column;flex:180px;gap:12px;min-width:0;display:flex}.mk-try-swatches{align-items:center;gap:8px;display:flex}.mk-try-fgbg{width:44px;height:44px;position:relative}.mk-try-fgbg>span{border-radius:var(--mk-r-xs);width:28px;height:28px;position:absolute;box-shadow:0 0 0 1px #00000080,inset 0 0 0 1px #fff3}.mk-try-fgbg>span:first-child{z-index:1;top:0;left:0}.mk-try-fgbg>span:last-child{bottom:0;right:0}.mk-try-tabs{flex-wrap:wrap;gap:4px;display:flex}.mk-try-tab{height:26px;color:var(--mk-text-dim);border-radius:var(--mk-r-sm);cursor:pointer;background:0 0;border:0;padding:0 8px;font-size:12px}.mk-try-tab[aria-pressed=true]{color:var(--mk-brand-ink);background:var(--mk-brand)}.mk-try-grid-swatches{grid-template-columns:repeat(8,20px);gap:2px;display:grid}.mk-try-swatch{background:var(--c);cursor:pointer;border:0;border-radius:2px;width:20px;height:20px;padding:0}.mk-try-swatch[data-fg]{box-shadow:0 0 0 2px #eeebe5,0 0 0 3px #0e0e12}@media (pointer:coarse){.mk-try-grid-swatches{grid-template-columns:repeat(8,28px)}.mk-try-swatch{width:28px;height:28px}}.mk-try-caption{color:var(--mk-text-muted);margin:0;font-size:12px}.mk-try-axis{border-left:2px dashed var(--mk-brand);filter:drop-shadow(0 0 1px #0e0e12e6);pointer-events:none;width:0;position:absolute;top:0;bottom:0;left:50%}.mk-try-cursor{z-index:2;pointer-events:none;transform:translate(calc((var(--kx) + .5) * var(--cell)), calc((var(--ky) + .5) * var(--cell)));transition:transform var(--kd,.6s) var(--mk-ease-travel);position:absolute;top:0;left:0}.mk-try-cursor>svg{width:18px;height:18px;display:block}.mk-try-cursor>span{color:#0b0b0f;white-space:nowrap;background:var(--mk-kai);border-radius:3px;padding:1px 6px;font-size:11px;font-weight:600;position:absolute;top:14px;left:14px}@media (prefers-reduced-motion:reduce){.mk-try-cursor{transition:none}}.mk-try-toast{z-index:3;width:max-content;max-width:calc(100% - 16px);color:var(--mk-text);background:var(--mk-ui-menu);border-radius:var(--mk-r-md);box-shadow:var(--mk-sh-float);animation:mk-try-toast .2s var(--mk-ease-out);padding:8px 12px;font-size:13px;position:absolute;top:8px;left:50%;translate:-50%}@keyframes mk-try-toast{0%{opacity:0;translate:-50% -8px}}.mk-try-hints{counter-reset:hint;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.mk-try-hints>li{color:var(--mk-text-muted);counter-increment:hint;transition:color var(--mk-dur-ui) var(--mk-ease-out);align-items:baseline;gap:12px;font-size:16px;line-height:24px;display:flex}.mk-try-hints>li:before{content:counter(hint);width:24px;height:24px;font:500 12px/1 var(--font-pxm-mono), monospace;color:var(--mk-text-muted);background:color-mix(in srgb, var(--mk-text) 8%, transparent);border-radius:3px;flex:none;place-items:center;display:inline-grid}.mk-try-hints>li[data-state=current]{color:var(--mk-text)}.mk-try-hints>li[data-state=current]:before{color:var(--mk-on-acc,#0b0b0f);background:var(--mk-acc,var(--mk-kai))}.mk-try-hints>li[data-state=done]{color:var(--mk-text-dim)}.mk-try-hints>li[data-state=done]:before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%230c936b' d='M6 1h1v1H6zM5 2h1v1H5zM4 3h1v1H4zM1 3h1v1H1zM2 4h1v1H2zM3 4h1v1H3z'/%3E%3C/svg%3E") 50%/16px no-repeat,#15cb6f29}.mk-try-coarse{display:none}@media (pointer:coarse){.mk-try-coarse{display:block}}.mk-try-pp{--cell:6px;--art-w:24;--art-h:24;flex-direction:column;align-items:center;gap:20px;display:flex}@media (min-width:640px){.mk-try-pp{--cell:10px}}.mk-try-pp-pair{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.mk-try-pp-side{flex-direction:column;align-items:center;gap:10px;margin:0;display:flex}.mk-try-pp-side figcaption{align-items:center;gap:10px;font-size:14px;font-weight:500;display:flex}.mk-try-pp-mark{width:var(--cell);height:var(--cell);pointer-events:none;outline:2px dashed var(--mk-ui-danger);outline-offset:1px;transform:translate(calc(var(--mx) * var(--cell)), calc(var(--my) * var(--cell)));position:absolute;top:0;left:0}.mk-try-annot{font:500 11.5px/1 var(--font-pxm-mono), monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-text);background:var(--mk-annot);border-radius:2px;padding:3px 6px}.mk-try-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.mk-try-play{--cell:8px;--art-w:24;--art-h:24;background:var(--mk-card);border-radius:var(--mk-r-xl);box-shadow:var(--mk-sh-window);gap:24px;padding:20px;display:grid}@media (min-width:640px){.mk-try-play{--cell:10px}}@media (min-width:1024px){.mk-try-play{grid-template-columns:auto 1fr;gap:40px;padding:28px}}.mk-try-play-view{flex-direction:column;align-items:center;gap:12px;display:flex}.mk-try-strip{grid-template-columns:repeat(var(--n), 1fr);width:calc(var(--art-w) * var(--cell));font:500 12px/1 var(--font-pxm-mono), monospace;display:grid}.mk-try-strip-tag{color:#0b0b0f;background:#15cb6f;border-radius:2px 2px 0 0;grid-column:1/-1;margin-bottom:2px;padding:3px 6px;font-size:11px}.mk-try-strip>span[data-cell]{height:26px;color:var(--mk-text-dim);border:1px solid var(--mk-line);place-items:center;margin-left:-1px;display:grid;position:relative}.mk-try-strip>span[data-current]{color:var(--mk-brand-ink);background:var(--mk-brand);border-color:var(--mk-brand);z-index:1}.mk-try-strip>span[data-long]:after{content:"";background:var(--mk-ui-duration-dot);width:4px;height:4px;position:absolute;top:3px;right:3px}.mk-try-controls{flex-direction:column;gap:16px;min-width:0;display:flex}.mk-try-stepper{color:var(--mk-text-dim);align-items:center;gap:4px;font-size:13px;display:inline-flex}.mk-try-stepper output{text-align:center;min-width:16px;font:500 13px/1 var(--font-pxm-mono), monospace;color:var(--mk-text)}.mk-try-hint-pulse{animation:mk-try-pulse 1.2s var(--mk-ease-inout) 2}@keyframes mk-try-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--mk-focus) 35%, transparent)}}.mk-try-sheet{background:var(--mk-card);border-radius:var(--mk-r-xl);box-shadow:var(--mk-sh-window);gap:20px;padding:20px;display:grid}@media (min-width:1024px){.mk-try-sheet{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;padding:28px}}.mk-try-sheet-out{flex-direction:column;gap:12px;min-width:0;display:flex}.mk-try-sheet-view{background:var(--mk-deep);border-radius:var(--mk-r-md);place-items:center;min-height:120px;max-height:360px;padding:12px;display:grid;overflow:auto}.mk-try-sheet-view>*{grid-area:1/1}.mk-try-sheet-seed{width:var(--w);height:var(--h)}.mk-try-sheet-view[data-ready]>.mk-try-sheet-seed{display:none}.mk-try-sheet-view>canvas{image-rendering:pixelated;background:var(--try-check) 0 0 / 16px 16px}.mk-try-json{height:523.2px;max-height:60vh;color:var(--mk-text-dim);background:var(--mk-deep);border-radius:var(--mk-r-md);white-space:pre;margin:0;padding:12px 14px;overflow:auto}.mk-try-keys-tools{top:calc(var(--mk-header-h) + 8px);z-index:2;background:color-mix(in srgb, var(--mk-canvas) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--mk-r-lg);box-shadow:var(--mk-sh-card);flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px;padding:12px;display:flex;position:sticky}.mk-try-capture{min-height:44px;color:var(--mk-text-dim);background:var(--mk-card);border-radius:var(--mk-r-md);box-shadow:inset 0 0 0 1px var(--mk-line-strong);cursor:text;flex-direction:column;flex:260px;justify-content:center;gap:4px;padding:6px 12px;font-size:13px;display:flex}.mk-try-capture:focus-visible{box-shadow:inset 0 0 0 1px var(--mk-focus), 0 0 0 1px var(--mk-focus);outline:none}.mk-try-capture-keys{color:var(--mk-text);flex-wrap:wrap;align-items:center;gap:4px;display:flex}.mk-try-keys-note{color:var(--mk-text-muted);flex-basis:100%;margin:0;font-size:12px}.mk-lock{--lock-k:8px;flex-direction:column;align-items:center;gap:24px;display:flex}@media (min-width:640px){.mk-lock{--lock-k:10px}}.mk-lock-panes{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.mk-lock-pane{flex-direction:column;align-items:center;gap:10px;margin:0;display:flex}.mk-lock-label{color:var(--mk-text-dim);font-size:13px;font-weight:500}.mk-lock-box{width:calc(var(--lock-w) * var(--lock-k));height:calc(var(--lock-h) * var(--lock-k));border-radius:var(--mk-r-md);box-shadow:0 0 0 1px var(--mk-line-strong);position:relative;overflow:hidden}.mk-lock-source{background:var(--mk-check-a)}.mk-lock-source>img{width:100%;height:100%}.mk-lock-artboard{background:repeating-conic-gradient(var(--mk-check-b) 0 25%, var(--mk-check-a) 0 50%) 0 0 / calc(var(--lock-k) * 2) calc(var(--lock-k) * 2);border-radius:0}.mk-lock-render{width:100%;height:100%;image-rendering:pixelated;animation:.32s steps(4,end) both mk-lock-in;display:none;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.mk-lock-render{animation:none}}@supports not selector(:has(*)){.mk-lock-render[data-render=db32]{display:block}}.mk-lock-strips{width:calc(var(--lock-w) * var(--lock-k))}.mk-lock-strip{border-radius:2px;flex-wrap:wrap;height:12px;display:none;overflow:hidden}.mk-lock-strip>span{flex:1 1 0;min-width:2px;height:12px}.mk-lock-strip>.mk-lock-free{height:auto;color:var(--mk-text-muted);text-align:center;font-size:12px;line-height:12px}.mk-lock-controls{flex-direction:column;align-items:center;gap:12px;display:flex}.mk-lock-chips{border:0;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;display:flex}.mk-lock-chips>legend{text-align:center;width:100%;margin-bottom:8px}.mk-lock-chip{display:inline-flex;position:relative}.mk-lock-chip>input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.mk-lock-chip>span{height:32px;color:var(--mk-text-dim);white-space:nowrap;background:color-mix(in srgb, var(--mk-text) 6%, transparent);align-items:center;padding:0 12px;font-size:13px;font-weight:500;display:inline-flex}.mk-lock-chip>input:checked+span{color:var(--mk-on-acc,#0b0b0f);background:var(--mk-acc,var(--mk-brand))}.mk-lock-chip>input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--mk-focus)}.mk-lock-check>span:before{content:"";width:10px;height:10px;margin-right:8px;box-shadow:inset 0 0 0 2px}.mk-lock-check>input:checked+span:before{background:currentColor}@media (pointer:coarse){.mk-lock-chip>span{height:44px}}}@keyframes mk-lock-in{0%{opacity:0}}