.experiments .demo{--species-0:#a74523;--species-1:#296fa5;--species-2:#39834b;--species-3:#8255a8;--species-4:#ab3e78;font-size:15px;line-height:1.65}.dark .experiments .demo{--species-0:#f3ac85;--species-1:#8ebee3;--species-2:#94cba3;--species-3:#c0a1e0;--species-4:#e3a0c3}.experiments .demo [hidden]{display:none!important}.experiments .demo :is(h2,h3,p){margin:0}.experiments .demo h2{font:27px/1.25 Georgia,serif;letter-spacing:-.02em;margin-bottom:18px}.experiments .demo h3{font-size:14px;margin:20px 0 8px}.experiments .demo p{margin-bottom:14px}.experiments .demo-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:16px 0;border-block:1px solid var(--exp-line);margin-bottom:24px;font-size:12px;color:var(--exp-muted)}.experiments .demo-toolbar>div{display:flex;flex-wrap:wrap;gap:8px}.experiments .demo button{font-family:inherit;font-weight:500;font-size:13px;line-height:1.5;min-height:44px;padding:10px 14px;color:var(--primary);border:1px solid var(--exp-line);background:var(--theme);border-radius:5px;cursor:pointer}.experiments .demo button:disabled{opacity:.5;cursor:default}.experiments .demo :is(.demo-primary,.primary,button[aria-pressed=true]){background:var(--primary);color:var(--theme);border-color:var(--primary)}.experiments .demo button:hover:not(:disabled){border-color:var(--exp-accent)}.experiments .demo :is(button,input,select,canvas,summary):focus-visible{outline:2px solid var(--exp-accent);outline-offset:4px}.experiments .demo-workspace{display:grid;grid-template-columns:minmax(0,1fr)310px;gap:28px;align-items:start}.experiments .demo-visual{min-width:0}.experiments .demo-panel{background:var(--exp-soft);border:1px solid var(--exp-line);border-radius:8px;padding:24px;min-width:0}.experiments .demo-artboard{display:grid;place-items:center;padding:20px;background:var(--exp-soft);border:1px solid var(--exp-line);border-radius:8px;min-width:0;margin-bottom:18px}.experiments .demo-artboard canvas{display:block;width:100%;height:auto;max-height:580px;object-fit:contain}.experiments .demo-artboard .easel{width:100%}.experiments .demo-artboard .drop-caption{font-size:12px;color:var(--exp-muted);margin-top:14px;text-align:center}.experiments .demo :is(.demo-viewbar,.canvas-toolbar,.view-switch,.surface-views,.transport-buttons,.seg){display:flex;flex-wrap:wrap;gap:8px;align-items:center}.experiments .demo :is(.demo-viewbar,.canvas-toolbar){margin-bottom:18px;justify-content:space-between}.experiments .demo .demo-viewbar{justify-content:flex-start}.experiments .demo .canvas-label{font-size:12px;color:var(--exp-muted)}.experiments .demo .canvas-label span+span{margin-left:10px;font-family:ui-monospace,monospace}.experiments .demo :is(.demo-transport,.transport){display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:18px}.experiments .demo .demo-scrub{flex:1;min-width:150px}.experiments .demo :is(.demo-field,.ctl){margin:22px 0}.experiments .demo :is(.demo-field>label,.ctl-head){display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:8px}.experiments .demo label{font-size:13px;color:var(--primary)}.experiments .demo output{font:12px/1.5 ui-monospace,monospace;color:var(--exp-accent)}.experiments .demo input[type=range]{display:block;width:100%;accent-color:var(--exp-accent);min-height:28px;margin:0;padding:0;background:0 0;border:0;border-radius:0}.experiments .demo :is(.demo-hint,.hint,.section-note,.summary-hint,.privacy-note,.shortcut){display:block;font-size:12px;color:var(--exp-muted);line-height:1.6;margin:8px 0 0}.experiments .demo .demo-status{font-size:13px;margin:14px 0 6px}.experiments .demo :is(.demo-notice,.app-notice,.pending-changes){font-size:13px;padding:14px;border-left:2px solid var(--exp-accent);background:var(--exp-soft);margin-bottom:18px}.experiments .demo .app-notice:empty{display:none}.experiments .demo progress{display:block;width:100%;height:8px;accent-color:var(--exp-accent);margin:16px 0}.experiments .demo details{border-top:1px solid var(--exp-line);margin-top:24px;padding-top:18px}.experiments .demo summary{cursor:pointer;font-weight:500;font-size:14px}.experiments .demo details>p:first-of-type{margin-top:16px}.experiments .demo .demo-explainer{max-width:760px;margin-top:30px}.experiments .demo-upload-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.experiments .demo-upload{display:block;position:relative;cursor:pointer;min-width:0;border:1px solid var(--exp-line);border-radius:5px;overflow:hidden;background:var(--theme)}.experiments .demo-upload:focus-within{outline:2px solid var(--exp-accent);outline-offset:3px}.experiments .demo-upload img{width:100%;aspect-ratio:1;display:block;object-fit:cover}.experiments .demo-upload>span{display:flex;justify-content:space-between;padding:8px 9px 0;font-size:12px}.experiments .demo-upload small{display:block;font-size:10px;padding:4px 9px 10px;overflow-wrap:anywhere;color:var(--exp-muted)}.experiments .demo-upload input[type=file]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.experiments .demo .section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.experiments .demo .section-title :is(h2,h3){margin:0;font-size:17px}.experiments .demo .source-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px}.experiments .demo .source-card img{width:60px;height:60px;object-fit:cover;border-radius:3px}.experiments .demo .source-info{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}.experiments .demo .source-info span{font-size:11px;color:var(--exp-muted)}.experiments .demo .basic-settings{margin-top:24px}.experiments .demo .disclosure summary>span{display:inline}.experiments .demo .disclosure-body{padding-top:18px}.experiments .demo .painting-state{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;margin-bottom:12px}.experiments .demo .painting-state b{font-family:ui-monospace,monospace}.experiments .demo .prog{height:5px;background:var(--exp-line);position:relative;margin:14px 0 20px;overflow:hidden}.experiments .demo .prog>b{display:block;height:100%;background:var(--exp-accent)}.experiments .demo .prog>i{display:none}.experiments .demo .speed-control{display:flex;align-items:center;gap:12px;flex:1;min-width:190px;font-size:12px}.experiments .demo .speed-control input{min-width:70px;flex:1}.experiments .demo .speed-control output{min-width:55px}.experiments .demo .k{font-size:10px;opacity:.7;margin-left:5px}.experiments .demo .swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:14px 0}.experiments .demo .sw{aspect-ratio:1;border-radius:2px}.experiments .demo .sw.cur{outline:2px solid var(--primary);outline-offset:2px}.experiments .demo .stats{display:grid;gap:10px;font-size:12px}.experiments .demo .stat{display:flex;justify-content:space-between;gap:15px}.experiments .demo .stat output{text-align:right}.experiments .demo small{margin-left:2px}.experiments .demo .bar{display:grid;grid-template-columns:64px 1fr 35px;gap:8px;align-items:center;font-size:11px}.experiments .demo .bar .tr{display:block;height:5px;background:var(--exp-line)}.experiments .demo .bar .tr b{display:block;background:var(--exp-accent);height:100%}.experiments .demo .bar .c{text-align:right}.experiments .demo dialog{width:min(500px,calc(100vw - 32px));max-height:85vh;overflow:auto;color:var(--primary);background:var(--theme);border:1px solid var(--exp-line);border-radius:10px;padding:28px;margin:auto}.experiments .demo dialog::backdrop{background:rgba(0,0,0,.5)}.experiments .demo .dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:20px}.experiments .demo .export-preview{display:flex;align-items:center;gap:16px;margin:20px 0}.experiments .demo .export-preview img{width:70px;height:70px;object-fit:cover}.experiments .demo .export-preview>div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}.experiments .demo .export-preview span,.experiments .demo .status{font-size:12px;color:var(--exp-muted)}.experiments .demo .status{margin-top:14px}.experiments .demo .demo-game{background:#000}.experiments .demo .demo-game canvas{max-width:512px;image-rendering:pixelated}.experiments .demo-direction-pad{display:flex;justify-content:center;gap:12px;margin:20px 0}.experiments .demo-direction-pad button{width:54px;height:48px;font-size:22px;touch-action:none;user-select:none}.experiments #pl-canvas{touch-action:none}.experiments .demo-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;margin-top:20px}.experiments .demo-legend span{display:flex;align-items:center;gap:7px}.experiments .demo-legend i{width:9px;height:9px;border-radius:50%}.experiments .demo-rules{display:grid;grid-template-columns:minmax(0,1fr)minmax(0,1fr);gap:40px;margin-top:38px;border-top:1px solid var(--exp-line);padding-top:30px}.experiments .demo-rules p{color:var(--exp-muted);max-width:420px}.experiments .demo-matrix-wrap{min-width:0}.experiments .demo table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}.experiments .demo table caption{text-align:left;color:var(--exp-muted);margin-bottom:12px}.experiments .demo th{font-weight:500;padding:5px}.experiments .demo td{padding:3px}.experiments .demo input[type=number]{padding:8px 3px;min-height:44px;font-size:14px;text-align:center;margin:0;width:100%}@media(max-width:850px){.experiments .demo-workspace{grid-template-columns:minmax(0,1fr)}.experiments .demo-panel{padding:22px}.experiments .demo-upload-pair{max-width:400px}.experiments .demo-artboard{padding:14px}.experiments .demo .demo-game canvas{max-width:420px}.experiments .demo-rules{grid-template-columns:1fr;gap:20px}}@media(max-width:400px){.experiments .demo-toolbar>div{width:100%}.experiments .demo-toolbar button{flex:1}.experiments .demo .canvas-toolbar{align-items:flex-start}.experiments .demo .canvas-label{width:100%}.experiments .demo-direction-pad{gap:8px}.experiments .demo-direction-pad button{width:48px}.experiments .demo dialog{padding:20px}}.experiments .demo table{display:table}.experiments .demo th:first-child{width:28px}.experiments .demo input[type=number]{appearance:textfield}.experiments .demo input[type=number]::-webkit-inner-spin-button,.experiments .demo input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}