*{box-sizing:border-box}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#eeeeea;-webkit-font-smoothing:antialiased;background:#050607;margin:0;font-family:Arial,Helvetica,sans-serif}a{color:inherit;-webkit-tap-highlight-color:transparent;text-decoration:none}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,canvas:focus-visible{outline-offset:5px;outline:1px solid #bac9df}canvas:focus-visible{outline-offset:-5px}p,h1{margin:0}.composition{isolation:isolate;min-height:max(100svh,480px);position:relative;overflow:hidden}.phase-field{z-index:0;position:absolute;inset:0}.phase-field canvas{opacity:0;cursor:grab;touch-action:none;width:100%;height:100%;transition:opacity 1.2s;display:block}.phase-field canvas.is-dragging{cursor:grabbing}.phase-field.is-ready canvas{opacity:1}.phase-fallback{stroke:#454d61;stroke-width:.6px;opacity:.65;pointer-events:none;width:min(90vw,750px);height:min(90vw,750px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.phase-field.is-ready .phase-fallback{display:none}.space-haze{z-index:1;pointer-events:none;background:radial-gradient(at 20% 22%,#29333e12,#0000 48%),radial-gradient(at 83% 70%,#28303d0c,#0000 45%),radial-gradient(#0000 35%,#05060766 100%);position:absolute;inset:0}.identity{z-index:2;text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;padding:50px 4.5vw;position:absolute;top:50%;left:0;transform:translateY(-50%)}.identity:before{content:"";z-index:-1;background:radial-gradient(#020308a6,#0000 70%);position:absolute;inset:17% 5% 8%}h1{letter-spacing:-.075em;text-shadow:0 2px 32px #0009;font-family:Syncopate,sans-serif;font-size:clamp(38px,8.8vw,135px);font-weight:700;line-height:1}.genres{color:#c0c5cc;letter-spacing:.17em;text-transform:uppercase;text-shadow:0 1px 8px #000;justify-content:center;align-items:center;gap:20px;margin:28px auto 0;padding:0;font:700 9px/1.5 Syncopate,sans-serif;list-style:none;display:flex}.genres li{align-items:center;gap:20px;display:flex}.genres li+li:before{content:"";opacity:.65;background:linear-gradient(90deg,#747d87 0 1px,#0000 1px 4px,#a6afb9 4px 6px,#0000 6px 9px,#747d87 9px);width:10px;height:9px;transform:skew(-18deg)}.socials{z-index:3;bottom:max(40px, env(safe-area-inset-bottom));white-space:nowrap;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(510px,100% - 40px);display:grid;position:absolute;left:50%;transform:translate(-50%)}.socials a{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#c0c7ce;letter-spacing:.09em;text-transform:uppercase;background:#0a0d10b8;border:1px solid #a7b2bf30;justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:0 17px;font:700 8px/1 Syncopate,sans-serif;transition:border-color .25s,background .25s,color .25s;display:flex;position:relative}.socials a:before{content:"";opacity:.7;border-top:1px solid #b7c1cc;border-left:1px solid #b7c1cc;width:5px;height:5px;position:absolute;top:-1px;left:-1px}.socials a:after{content:"";transform-origin:0;background:#d0d9e3;height:1px;transition:transform .3s;position:absolute;bottom:-1px;left:16px;right:16px;transform:scaleX(0)}.socials a:hover,.socials a:focus-visible{color:#fff;background:#b4bfcc18;border-color:#a7b2bf70}.socials a:hover:after,.socials a:focus-visible:after{transform:scaleX(1)}.link-arrow{stroke:currentColor;stroke-width:1px;opacity:.6;flex:none;width:13px;height:13px;transition:transform .25s,opacity .25s}.socials a:hover .link-arrow,.socials a:focus-visible .link-arrow{opacity:1;transform:translate(2px,-2px)}.with-preview .identity{top:44%}.with-preview .socials{bottom:176px}.visual-lab{z-index:4;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#070a12d9;border:1px solid #bac9eb20;width:min(760px,100% - 40px);padding:16px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.lab-caption{letter-spacing:1px;color:#8390a7;justify-content:space-between;gap:12px;margin-bottom:13px;font:9px Courier New,monospace;display:flex}.visual-picker{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.visual-picker button{color:#b2bdce;background:#101522;border:1px solid #35415766;justify-content:center;align-items:center;gap:12px;min-height:42px;padding:10px;font:11px Arial,sans-serif;display:flex}.visual-picker button span{opacity:.6;font:9px Courier New,monospace}.visual-picker button[aria-pressed=true]{color:#111622;background:#d9e1ec;border-color:#d9e1ec}.lab-description{color:#939fb3;text-align:center;margin-top:13px;font:10px/1.6 Courier New,monospace}@media (max-width:700px){.identity{padding:30px 22px}h1{font-size:9.8vw}.genres{letter-spacing:.07em;gap:10px;margin-top:22px;font-size:7px}.genres li{gap:10px}.genres li+li:before{background:linear-gradient(90deg,#747d87 0 1px,#0000 1px 3px,#a6afb9 3px 4px,#0000 4px 5px,#747d87 5px);width:6px;height:7px}.socials{bottom:max(24px, env(safe-area-inset-bottom));gap:5px;width:calc(100% - 32px)}.socials a{letter-spacing:.03em;gap:5px;min-height:48px;padding:0 10px;font-size:7px}.link-arrow{width:10px;height:10px}.with-preview .socials{bottom:192px}.visual-lab{width:calc(100% - 24px);padding:12px;bottom:12px}.lab-caption{flex-direction:column;gap:6px;margin-bottom:10px;font-size:8px}.visual-picker button{gap:5px;padding:8px 3px;font-size:10px}.visual-picker button span{font-size:8px}.lab-description{min-height:29px;font-size:9px}}@media (max-width:360px){.socials a{justify-content:center;padding:0 8px}.socials .link-arrow{display:none}}@media (max-height:600px){.with-preview .identity{top:32%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important}}