@font-face{font-family:DM Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/clave/assets/dm-mono-400-mu0k-7m0.ttf) format("truetype")}@font-face{font-family:DM Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/clave/assets/dm-mono-500-BzMgDRs4.ttf) format("truetype")}@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url(/clave/assets/manrope-300-DIagOGV4.ttf) format("truetype")}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/clave/assets/manrope-400-BEIO-tX3.ttf) format("truetype")}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/clave/assets/manrope-500-C3q1kWH5.ttf) format("truetype")}:root{--bg:#08090b;--fg:#e9e6df;--muted:#92929c;--mono:"DM Mono",monospace;--sans:"Manrope",sans-serif;font-family:var(--sans);color:var(--fg);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg)}#canvas{display:block;position:fixed;left:0;top:0;width:var(--clave-width,100vw);height:var(--clave-height,100dvh);outline:none;touch-action:none;cursor:crosshair}.brand{position:fixed;left:calc(27px + env(safe-area-inset-left,0px));top:calc(11px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:12px;pointer-events:none}.brand-logo{display:block;width:150px;height:50px;object-fit:contain;filter:invert(1);opacity:.9}.brand span{font:10px var(--mono);color:#777;white-space:nowrap;letter-spacing:.04em}.toolbar{position:fixed;z-index:3;display:flex;align-items:center;gap:5px}.scene-toolbar{right:calc(26px + env(safe-area-inset-right,0px));top:calc(20px + env(safe-area-inset-top,0px));gap:10px}.view-toolbar{left:24px;bottom:14px}.info-toolbar{right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px))}button{position:relative;font:10px var(--mono);color:var(--muted);background:transparent;border:0;cursor:pointer;white-space:nowrap;transition:color .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.action{display:grid;place-items:center;min-width:35px;width:35px;height:34px;padding:0;border-radius:0}.action svg{pointer-events:none}button:hover:not(:disabled){color:#c7c7d0}button[aria-pressed=true]{color:#fff}button:disabled{opacity:.28;cursor:default}button:focus-visible{outline:1px solid #92929a;outline-offset:2px;border-radius:3px}.action:focus-visible{outline:none}.action:focus-visible:after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;border:1px solid #92929a;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.action:before{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);padding:7px 10px;border:1px solid #ffffff24;border-radius:6px;background:#101114f5;color:#eee;font:10px/1.45 var(--mono);pointer-events:none;opacity:0;white-space:nowrap;z-index:10;transition:opacity .15s}.view-toolbar .action:before,.info-toolbar .action:before{top:auto;bottom:calc(100% + 8px)}.info-toolbar .action:before{left:auto;right:0;transform:none}@media(hover:hover){.action:hover:before{opacity:1}}.action:focus-visible:before{opacity:1}#context,#menu,#help{position:fixed;z-index:4;padding:8px;background:#101114f5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:0;border-radius:4px;max-width:calc(100vw - 24px);color:#aaa;font:10px/1.7 var(--mono)}#context{display:flex;gap:3px;align-items:center}#menu{min-width:225px;padding:12px}#menu button{display:block;text-align:left;width:100%;padding:9px 4px;min-height:34px}#menu button:hover{background:#ffffff0c;color:#fff}#help{right:24px;bottom:64px;width:320px;padding:16px 18px;border:1px solid #ffffff18}#help h2{font:500 12px var(--mono);color:#eee;margin:0 0 12px}#help p{margin:8px 0}#help .close-help{position:absolute;top:5px;right:5px;font-size:17px;width:30px;height:30px}#status{position:fixed;bottom:20px;left:50%;transform:translate(-50%);font:10px var(--mono);color:#85858d;background:#08090be6;padding:8px 14px;pointer-events:none;max-width:calc(100vw - 120px);text-align:center;z-index:4}#status:empty{display:none}#exit{position:fixed;left:calc(24px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5}body.contemplate .brand,body.contemplate .toolbar,body.contemplate #menu,body.contemplate #help,body.contemplate #status{visibility:hidden;pointer-events:none}body.contemplate #exit{display:grid!important}@media(max-width:600px),(pointer:coarse){.brand{left:calc(12px + env(safe-area-inset-left));top:calc(5px + env(safe-area-inset-top));gap:8px}.brand-logo{width:100px;height:40px}.brand span{font-size:9px}.scene-toolbar{right:calc(8px + env(safe-area-inset-right,0px));top:calc(54px + env(safe-area-inset-top,0px));flex-direction:column;gap:4px}.view-toolbar{left:calc(8px + env(safe-area-inset-left,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:0}.info-toolbar{right:calc(8px + env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px))}.action{width:44px;min-width:44px;height:44px}#context{padding:4px;gap:0}#menu button{min-height:44px}#help{right:12px;bottom:64px;max-height:calc(100dvh - 130px);overflow:auto}#exit{left:calc(8px + env(safe-area-inset-left,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px))}.action:before{display:none}#status{bottom:20px;font-size:9px}}@media(prefers-reduced-motion:reduce){button,.action:before{transition:none}}#color-panel{position:fixed;z-index:6;right:24px;top:68px;width:220px;padding:12px;background:#101114f5;border:0;border-radius:4px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:10px var(--mono);color:#aaa}#color-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:9px;color:#83848d}.close-color{width:24px;height:24px;font-size:17px}.color-picker-panel{margin-bottom:10px}@media(max-width:600px),(pointer:coarse){#color-panel{top:70px;right:62px;width:min(244px,calc(100vw - 78px));padding:12px}.close-color{min-height:44px}}.action{font:13px var(--mono)}.info-toolbar .action{font-size:10px}.action.active{color:#fff}#context{padding:2px 4px;background:#08090b55;border:0;border-radius:3px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);gap:0}#context .action{width:32px;min-width:32px;height:36px}#color-panel{left:50%;right:auto;top:auto;bottom:calc(62px + env(safe-area-inset-bottom));transform:translate(-50%);width:min(360px,calc(100vw - 32px));padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}#color-panel header{height:0;margin:0;overflow:visible}#color-target{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#color-panel .close-color{position:absolute;right:-2px;bottom:-44px;width:44px;height:44px}#menu{width:160px;min-width:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:auto}#menu button{height:44px;min-height:44px;padding:0 8px;text-align:right;font:10px var(--mono);background:transparent}#menu button:hover{background:transparent;color:#fff}#menu:after{content:"";position:absolute;right:0;top:22px;width:8px;height:1px;background:#ffffff38;pointer-events:none}body.contemplate #context,body.contemplate #color-panel{visibility:visible;pointer-events:auto}@media(max-width:600px),(pointer:coarse){#context .action{width:44px;min-width:44px;height:44px}#context{max-width:calc(100vw - 24px)}#color-panel{left:50%;right:auto;top:auto;bottom:calc(64px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 32px));padding:0}#menu{max-height:calc(100dvh - 136px)}}#trash-target{position:fixed;z-index:9;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));width:64px;height:64px;display:grid;place-items:center;border:1px solid #ffffff30;border-radius:50%;background:#17191cb0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#aaa;pointer-events:none;transition:background .15s,color .15s}#trash-target svg{width:23px;height:23px}#trash-target.active{color:#fff;background:#a64242c0;border-color:#f99}#menu [data-global-play]{font-size:16px}#rhythm-control{position:fixed;left:50%;bottom:calc(62px + env(safe-area-inset-bottom));transform:translate(-50%);width:min(360px,calc(100vw - 32px));display:flex;align-items:center;gap:8px;z-index:6;font:10px var(--mono);color:#92929c;pointer-events:auto}#rhythm-control input{flex:1;width:100%;min-width:0;height:44px}#rhythm-control .rhythm-side{flex:0 0 auto}#menu button{display:flex;align-items:center;justify-content:flex-end;gap:10px}#menu button svg{flex:0 0 16px}#menu button span{min-width:76px;text-align:left}#menu:after{top:17px}#menu .menu-icon{display:inline-grid;place-items:center;flex:0 0 16px;min-width:16px;width:16px;font:15px var(--mono);text-align:center}#menu .menu-label{min-width:76px}@media(max-width:600px),(pointer:coarse){.scene-toolbar{flex-direction:row;gap:0;right:calc(8px + env(safe-area-inset-right));top:calc(54px + env(safe-area-inset-top))}#menu button{justify-content:flex-end}#menu .menu-label{text-align:right}#menu:after{display:none}}:root{color-scheme:dark;--hover:#c7c7d0;--active:#fff;--panel:#101114f5;--panel-ink:#aaa;--border:#ffffff24;--selection-bg:#08090b55;--track:#505159;--thumb:#aaa;--status-bg:#08090be6;--trash-bg:#17191cb0;--trash-ink:#aaa;--logo-filter:invert(1)}:root[data-theme=light]{color-scheme:light;--bg:#fff;--fg:#202329;--muted:#626570;--hover:#202329;--active:#101218;--panel:#fffffff5;--panel-ink:#525660;--border:#20232930;--selection-bg:#ffffff88;--track:#a3a6af;--thumb:#626570;--status-bg:#ffffffe6;--trash-bg:#ffffffb0;--trash-ink:#525660;--logo-filter:none}.brand-logo{filter:var(--logo-filter)}button:hover:not(:disabled){color:var(--hover)}button[aria-pressed=true],.action.active,.color-choice[aria-pressed=true],.automatic-color[aria-pressed=true]{color:var(--active)}#context{background:var(--selection-bg);color:var(--panel-ink)}#help{background:var(--panel);color:var(--panel-ink);border-color:var(--border)}#help h2{color:var(--fg)}#menu{color:var(--muted)}#menu button:hover{color:var(--active)}#menu:after{background:var(--border)}#color-panel,.color-choice,.automatic-color,.color-state,.luminosity-row{color:var(--muted)}.action:before{background:var(--panel);color:var(--fg);border-color:var(--border)}#status{color:var(--muted);background:var(--status-bg)}#trash-target{background:var(--trash-bg);color:var(--trash-ink);border-color:var(--border)}#trash-target.active{background:#a64242c0;color:#fff;border-color:#f99}.adjustment-slider::-webkit-slider-runnable-track{background:var(--track)}.adjustment-slider::-webkit-slider-thumb{background:var(--thumb)}.adjustment-slider::-moz-range-track{background:var(--track)}.adjustment-slider::-moz-range-thumb{background:var(--thumb)}:root[data-theme=light] .color-choice:hover{color:var(--hover)}:root[data-theme=light] .color-choice[aria-pressed=true],:root[data-theme=light] .automatic-color[aria-pressed=true]{color:var(--active)}#menu .menu-label{text-align:right}#menu:after{display:none}@media(max-width:600px),(pointer:coarse){.scene-toolbar{flex-direction:column}}#menu button{gap:6px}#menu .menu-label{min-width:0;text-align:right}#menu .menu-icon{min-width:16px}[aria-controls=menu] svg{transition:transform .15s}[aria-controls=menu][aria-expanded=true] svg{transform:rotate(180deg)}@media(max-width:600px),(pointer:coarse){.brand-logo{width:118px;height:44px}.scene-toolbar{top:calc(5px + env(safe-area-inset-top))}}@media(prefers-reduced-motion:reduce){[aria-controls=menu] svg{transition:none}}[aria-controls=menu]:before{display:none!important}@media(max-width:600px),(pointer:coarse){.action svg,#menu button svg{width:19px;height:19px}#menu button svg,#menu .menu-icon{flex-basis:19px}#menu .menu-icon{width:19px;min-width:19px;font-size:17px}.scene-toolbar .action,.view-toolbar .action,#exit{font-size:16px}}#context{z-index:7}#help{width:340px;font:11px/1.55 var(--mono);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;padding:16px 18px}#help h2{padding-right:26px}#help h3{margin:16px 0 10px;font:10px var(--mono);color:var(--muted)}#help ul{list-style:none;margin:0;padding:0}#help .help-row{margin:0 0 12px}#help .help-label{display:flex;align-items:center;gap:6px;color:var(--fg);margin-bottom:2px}#help strong{font-weight:500}#help .help-label svg{width:16px;height:16px;flex:0 0 16px}#help .help-instruction span{color:var(--muted)}#help details{border-top:1px solid var(--border);padding-top:4px;margin-top:4px}#help summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;color:var(--fg)}#help .help-extra li{margin:0 0 10px}#help .close-help{width:44px;height:44px;top:0;right:0}#help summary:focus-visible{outline:1px solid var(--muted);outline-offset:2px}@media(max-width:600px),(pointer:coarse){#help{right:12px;bottom:60px;max-height:calc(100dvh - 88px);width:340px;max-width:calc(100vw - 24px)}}#context{flex-wrap:wrap;max-width:calc(100vw - 24px)}.brand-home{display:block;pointer-events:auto;border-radius:2px}.brand-home:focus-visible{outline:1px solid var(--muted);outline-offset:4px}.representation{display:flex;gap:2px;align-items:center}.representation-option{min-height:34px;border:0;border-radius:3px;padding:0 7px;background:transparent;color:var(--muted);font:10px var(--mono);cursor:pointer}.representation-option[aria-pressed=true]{color:var(--active);background:var(--selection-bg)}.representation-option:focus-visible{outline:1px solid var(--muted)}#context{flex-wrap:wrap;max-width:min(340px,calc(100vw - 24px))}@media(pointer:coarse),(max-width:600px){.representation-option{min-height:44px;min-width:44px}}#export-menu{position:fixed;z-index:8;overflow:auto;color:var(--panel-ink);font:10px var(--mono);padding:0;background:transparent;border:0;max-width:calc(100vw - 16px)}#export-menu button{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%;height:44px;min-height:44px;padding:0 8px;color:inherit;background:transparent;border:0;text-align:right;font:10px var(--mono);cursor:pointer;white-space:nowrap}#export-menu button svg{flex:0 0 16px}#export-menu button .menu-label{min-width:76px;text-align:left}#export-menu button:hover{color:var(--hover)}#export-menu button:focus-visible{outline:1px solid var(--muted);outline-offset:-2px}#export-menu button:disabled{opacity:.4;cursor:default}#export-menu [data-section] button{font-size:9px;color:var(--muted)}#recording-controls{position:fixed;z-index:15;right:calc(20px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:16px;color:var(--fg);font:10px var(--mono)}#recording-controls button{border:0;background:transparent;color:inherit;font:inherit;min-height:44px;padding:0 8px;cursor:pointer}#recording-controls button:focus-visible{outline:1px solid var(--muted)}body.recording #exit,body.recording #context,body.recording #color-panel{visibility:hidden!important;pointer-events:none!important}#export-menu button span,#export-menu button .menu-label{text-align:right;min-width:0}#export-menu [data-action=close]{font-size:20px;justify-content:flex-end}:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}#context,#help,#color-panel{max-width:calc(var(--clave-width,100vw) - var(--safe-left) - var(--safe-right) - 24px)}#color-panel{left:calc(50% + (var(--safe-left) - var(--safe-right))/2)}#help{right:calc(24px + var(--safe-right));bottom:calc(64px + var(--safe-bottom));max-height:calc(var(--clave-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 100px)}#status{bottom:calc(20px + var(--safe-bottom));max-width:calc(var(--clave-width,100vw) - var(--safe-left) - var(--safe-right) - 120px)}@media(max-width:600px),(pointer:coarse){#help{right:calc(12px + var(--safe-right));bottom:calc(60px + var(--safe-bottom));max-height:calc(var(--clave-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 88px)}}#context{max-height:calc(var(--clave-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 80px);overflow-y:auto;overscroll-behavior:contain}#context{left:50%!important;top:auto!important;transform:translate(-50%);justify-content:center;flex-wrap:nowrap;width:max-content;max-width:calc(var(--clave-width,100vw) - var(--safe-left) - var(--safe-right) - 32px);padding:4px 8px;gap:8px;background:var(--panel);max-height:96px}#status{margin:0;min-height:30px;max-width:calc(var(--clave-width,100vw) - var(--safe-left) - var(--safe-right) - 96px);width:max-content;font:10px/1.6 var(--mono);padding:4px 8px;background:transparent;color:var(--muted)}body.contemplate #context,body.contemplate #status{visibility:hidden;pointer-events:none}@media(max-width:600px),(pointer:coarse){#context{gap:8px}#status{font-size:10px;max-width:calc(var(--clave-width,100vw) - var(--safe-left) - var(--safe-right) - 96px)}}#context .action:before{top:auto;bottom:calc(100% + 8px)}#context{overflow:visible;max-height:none;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}#status{height:48px;min-height:48px;display:grid;place-items:center;overflow:visible}#color-panel{top:auto;max-height:calc(var(--clave-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 160px);overflow-y:auto;overscroll-behavior:contain}body.contemplate #color-panel{visibility:hidden;pointer-events:none}#status{width:min(480px,calc(var(--clave-width,100vw) - var(--safe-left) - var(--safe-right) - 96px))}#status{display:block;align-content:center;font-size:11px;line-height:1.7}#status .guide-arrow{font:500 20px/1 var(--sans);vertical-align:-2px;color:var(--fg);padding:0 3px}#status .guide-text{font-size:11px}.adjustment-slider::-webkit-slider-runnable-track{height:2px;background:#505159;border-radius:2px}.adjustment-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:#aaa;border:0}.adjustment-slider::-moz-range-track{height:2px;background:#505159}.adjustment-slider::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#aaa}.automatic-color{height:44px;background:none;border:0;color:#92929c;font:10px var(--mono);cursor:pointer}.automatic-color[aria-pressed=true]{color:#fff}.automatic-color:hover{color:#c7c7d0}.color-field{position:relative;height:96px;width:100%;touch-action:none;cursor:crosshair;background:linear-gradient(to top,hsl(0 0% var(--light)),transparent),linear-gradient(to right,hsl(0 100% var(--light)),hsl(60 100% var(--light)),hsl(120 100% var(--light)),hsl(180 100% var(--light)),hsl(240 100% var(--light)),hsl(300 100% var(--light)),hsl(360 100% var(--light)))}.color-marker{position:absolute;width:8px;height:8px;border:1px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0008;pointer-events:none}.color-field:focus-within{outline:1px solid #92929a;outline-offset:3px}.luminosity-row,.color-mode{display:flex;align-items:center;gap:8px;min-height:44px;font:10px var(--mono)}.luminosity-row input{flex:1;min-width:0;margin:0;height:44px}.color-mode{justify-content:center}.automatic-color:focus-visible{outline:1px solid #92929a;outline-offset:2px}.adjustment-slider:focus,.adjustment-slider:focus-visible{outline:none}.color-picker-panel[hidden]{display:none!important}.color-mode{gap:12px;justify-content:center}.color-choice{display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0;background:none;border:0;color:#92929c;font:10px var(--mono);cursor:pointer}.color-choice[aria-pressed=true]{color:#fff}.color-choice:hover{color:#c7c7d0}.color-choice:focus-visible{outline:1px solid #92929a;outline-offset:2px}.aura-sample,.custom-sample{display:block;flex:0 0 12px;width:12px;height:12px;border-radius:50%}.aura-sample{background:conic-gradient(#ef7081,#e6ce70,#64bba5,#68a9d1,#8288db,#c77abb,#ef7081)}.adjustment-slider{appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:none;height:44px;min-width:0;margin:0;accent-color:#a7a8ca;font:10px var(--mono)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%)}