:root{--surface-motion:.35;--surface-duration:.36s;--surface-texture-ink:#6941a5;--surface-texture-mask:#000}.dark{--surface-texture-ink:#cdaaff}html[data-motion=full]{--surface-motion:1}.loom-surface{--surface-tint:var(--foreground);--surface-emphasis:0;isolation:isolate;border:1px solid var(--border);background:linear-gradient(165deg, var(--raised), var(--panel) 72%);color:var(--foreground);box-shadow:inset 0 1px 0 var(--material-highlight), inset 0 -1px 2px color-mix(in oklab, var(--foreground) 5%, transparent);border-radius:8px;position:relative}.loom-surface[data-surface-accent=purple]{--surface-tint:var(--brand-purple)}.loom-surface[data-surface-accent=aqua]{--surface-tint:var(--brand-aqua)}.loom-surface[data-surface-variant=raised]{background:linear-gradient(165deg, var(--raised), var(--surface) 72%);box-shadow:var(--loom-shadow)}.loom-surface[data-surface-variant=inset]{background:var(--inset);box-shadow:inset 3px 3px calc(8px * var(--material-depth)) color-mix(in oklab, var(--foreground) 12%, transparent), inset -3px -3px calc(8px * var(--material-depth)) var(--material-highlight)}.loom-surface[data-surface-variant=glass]{background:color-mix(in oklab, var(--panel) calc(var(--material-glass) * 100%), transparent);-webkit-backdrop-filter:blur(16px)saturate(118%);backdrop-filter:blur(16px)saturate(118%);box-shadow:inset 0 1px 0 var(--material-highlight), 0 8px 24px var(--material-shadow)}.loom-surface[data-surface-variant=instrument]{background:linear-gradient(165deg, color-mix(in oklab, var(--instrument) 84%, var(--brand-purple)), var(--instrument));color:var(--editor-foreground);border-color:var(--editor-border);box-shadow:inset 0 1px 0 color-mix(in oklab, var(--editor-foreground) 12%, transparent), 0 10px 28px color-mix(in oklab, var(--instrument) 60%, transparent)}.loom-surface:before,.loom-surface:after{content:none}.loom-surface[data-surface-texture=waves]{--surface-texture-image:var(--surface-ss-waves)}.loom-surface[data-surface-texture=bubbles]{--surface-texture-image:var(--surface-ss-bubbles)}.loom-surface[data-surface-texture=hex]{--surface-texture-image:var(--surface-ss-hex)}.loom-surface:is([data-surface-texture=waves],[data-surface-texture=bubbles],[data-surface-texture=hex]):before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;background-image:var(--surface-texture-image);opacity:calc(var(--material-subsurface) * .4);-webkit-mask-image:radial-gradient(farthest-side at 0% 0%, var(--surface-texture-mask), transparent 70%), radial-gradient(farthest-side at 100% 100%, var(--surface-texture-mask), transparent 70%);-webkit-mask-image:radial-gradient(farthest-side at 0% 0%, var(--surface-texture-mask), transparent 70%), radial-gradient(farthest-side at 100% 100%, var(--surface-texture-mask), transparent 70%);mask-image:radial-gradient(farthest-side at 0% 0%, var(--surface-texture-mask), transparent 70%), radial-gradient(farthest-side at 100% 100%, var(--surface-texture-mask), transparent 70%);transition:opacity var(--surface-duration) ease;background-size:240px 140px;position:absolute;inset:0;-webkit-mask-position:0 0,100% 100%;mask-position:0 0,100% 100%;-webkit-mask-size:60% 80%,60% 80%;mask-size:60% 80%,60% 80%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (hover:hover) and (pointer:fine){.loom-surface[data-surface-texture]:hover:before{opacity:calc(var(--material-subsurface) * .65)}}.loom-surface[data-surface-active=true],.loom-surface[data-surface-interactive=true]:focus-within{--surface-emphasis:1}@media (hover:hover) and (pointer:fine){.loom-surface[data-surface-interactive=true]:hover:not(:disabled):not([aria-disabled=true]){--surface-emphasis:1}}.loom-surface:is(:disabled,[aria-disabled=true]){--surface-emphasis:0}.loom-surface.loom-composer{background:var(--composer-bg);transition:none}.loom-surface.loom-composer:focus-within{box-shadow:var(--loom-shadow)}html[data-motion=reduced] .loom-surface:before,html[data-motion=reduced] .loom-surface:after{transition:none!important;transform:none!important}@media (prefers-reduced-motion:reduce){.loom-surface:before,.loom-surface:after{transition:none!important;transform:none!important}}.loom-surface:is(button,a,[role=button]):active:not(:disabled){transform:none}