:root{--red: 218 100% 50%;--green: 280 100% 46%;--yellow: 144 100% 53%;--blue: 320 100% 60%;--recording: 0;--bg: hsl(var(--hue, 0) calc(var(--saturation, 0) * 1%) calc(var(--lightness, 10) * 1%));--adaptive: hsl(0 0% calc((100 - var(--lightness)) * 1%));--shell: hsl(0 0% 20%)}*,*:after,*:before{box-sizing:border-box;transform-style:preserve-3d}canvas{transform:translateZ(200vmin)}body{display:grid;place-items:center;min-height:100vh;background:#ccc;color:#fafafa;transition:background .2s,color .2s;margin:0}.phil{--depth: 10vmin;width:var(--depth);aspect-ratio:1 / 2;color:var(--shell);transition:transform .2s ease-out;transform:translateZ(100vmin) rotateX(-24deg) rotateY(-32deg) translate(calc(var(--slide, 0) * 100%))}.miami{background:linear-gradient(75deg,orange,purple);color:transparent;-webkit-background-clip:text}[data-lights=on] body{background:#fafafa;color:#1a1a1a}.transcript{font-weight:700;font-size:4rem;font-family:Impact,sans-serif;text-transform:uppercase;max-width:30ch}.awesome{background:red;padding:1rem}.record{width:44px;aspect-ratio:1;position:fixed;bottom:1.5rem;right:1.5rem;background:transparent;border:0}.record:after{content:"";position:absolute;inset:10%;background:red;border-radius:50%}[data-recording=true] .record:after{animation:pulse 1.25s infinite ease-in-out}.help{width:36px;aspect-ratio:1;position:fixed;bottom:1.5rem;left:1.5rem;border-radius:50%;border:0;outline:none;background:#333;color:#fafafa;font-size:1rem;font-weight:700;cursor:pointer}.help-modal{border:0;outline:none;border-radius:12px;padding:2rem;max-width:40ch;background:#fafafa;color:#1a1a1a;font-family:sans-serif,system-ui}.help-modal::backdrop{background:#00000080}.help-modal dl{display:grid;gap:.25rem 1rem}.help-modal dt{font-weight:700}.help-modal dd{margin:0 0 .75rem;opacity:.8}.help-close{margin-top:1rem;border:0;border-radius:6px;padding:.5rem 1rem;cursor:pointer}@keyframes pulse{50%{opacity:.1;scale:.9}}.cuboid{height:100%;width:100%;position:relative}.cuboid__side{background-color:currentColor;position:absolute;height:100%;width:100%;transition:background-color .2s;filter:brightness(var(--brightness, 1));border-bottom:calc(var(--depth) * .1) solid hsl(var(--side-color) / .25)}[data-command=true] .indicator{--active: 1}.indicator{display:inline-block;position:absolute;height:calc(var(--depth) * .1);background:hsl(var(--side-color));transform-origin:0 50%;transition:transform .2s ease-out;bottom:0;width:100%;left:0;transform:translateY(calc(var(--depth) * .1)) scaleX(var(--active, 0))}.cuboid__side:nth-of-type(1) .indicator{width:calc(var(--depth) * .9);left:50%;top:50%;transform:translateY(-50%) rotate(var(--r,0deg)) translate(-50%) translateY(calc(var(--depth)*.45)) translate(calc(var(--depth)*.05)) scaleX(var(--active, 0))}.cuboid__side:nth-of-type(1) .indicator:nth-of-type(1){--r: 0deg;--side-color: var(--green)}.cuboid__side:nth-of-type(1) .indicator:nth-of-type(2){--r: 90deg;--side-color: var(--blue)}.cuboid__side:nth-of-type(1) .indicator:nth-of-type(3){--r: 180deg;--side-color: var(--red)}.cuboid__side:nth-of-type(1) .indicator:nth-of-type(4){--r: 270deg;--side-color: var(--yellow)}.cuboid__side:nth-of-type(1){--brightness: .8;top:0;height:var(--depth, 50vmin);transform:translateY(-50%) rotateX(-90deg)}.cuboid__side:nth-of-type(2){--brightness: .6;--side-color: var(--yellow);top:50%;right:0;width:var(--depth, 50vmin);transform:translate(50%,-50%) rotateY(-90deg)}.cuboid__side:nth-of-type(3){--brightness: 1.3;bottom:0;height:var(--depth, 50vmin);transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(4){--brightness: .6;--side-color: var(--green);top:50%;width:var(--depth, 50vmin);transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){--brightness: .75;--side-color: var(--blue);transform:translateZ(calc(var(--depth, 50vmin) / -2))}.cuboid__side:nth-of-type(6){--side-color: var(--red);--brightness: 1;transform:translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(180deg)}