@layer components{.iso-box{position:relative;width:100%;max-width:560px;aspect-ratio:6 / 4.6;margin-inline:auto}.iso-scene{position:absolute;left:50%;top:50%;width:600px;height:460px;transform-origin:center}.iso-floor{position:absolute;left:0;top:-70px;width:600px;height:600px;transform:rotateX(60deg) rotate(-45deg);transform-style:preserve-3d}.iso-grid{position:absolute;top:-120px;right:-120px;bottom:-120px;left:-120px;background-image:linear-gradient(to right,rgba(238,234,245,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(238,234,245,.07) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%)}.iso-cube{--top: #2b2042;--side-y: #1d1530;--side-x: #241a39;--edge: rgba(238, 234, 245, .14);--ink: #eeeaf5;position:absolute;left:0;top:0;width:var(--w);height:var(--d);transform-style:preserve-3d;transition:transform .9s var(--ease)}.iso-cube.is-instant{transition:none}.iso-body{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;animation:iso-drop 1s var(--ease) both}@keyframes iso-drop{0%{transform:translateZ(300px)}to{transform:translateZ(0)}}.iso-face{position:absolute;box-sizing:border-box;border:1px solid var(--edge);transition:background-color .8s var(--ease),border-color .8s var(--ease),opacity .6s var(--ease);animation:iso-fade .7s var(--ease) both;animation-delay:inherit}@keyframes iso-fade{0%{opacity:0}}.iso-body>*{animation-delay:inherit}.iso-cube.is-hidden .iso-face{opacity:0}.iso-top{top:0;right:0;bottom:0;left:0;transform:translateZ(var(--h));background:var(--top);color:var(--ink);display:grid;place-items:center}.iso-top:before{content:attr(data-label);font-family:var(--font-display);font-size:13px;line-height:1;transition:color .8s var(--ease)}.iso-y{left:0;top:var(--d);width:var(--w);height:var(--h);transform-origin:top;transform:rotateX(90deg);background:var(--side-y)}.iso-x{left:0;top:0;width:var(--h);height:var(--d);transform-origin:left;transform:rotateY(-90deg);background:var(--side-x)}.tone-accent{--top: #b794f4;--side-y: #6b46c1;--side-x: #7c58cf;--edge: rgba(201, 166, 107, .7);--ink: #170f26}.tone-warn{--top: #f08a5d;--side-y: #9c3d14;--side-x: #b4501f;--edge: rgba(240, 138, 93, .6);--ink: #2a0f04}.tone-ok{--top: #5bc48a;--side-y: #1f6b43;--side-x: #2a8052;--edge: rgba(91, 196, 138, .6);--ink: #062114}.tone-screen{--top: #eeeaf5;--side-y: #0b0712;--side-x: #151020;--edge: rgba(238, 234, 245, .25);--ink: #1b1430}.iso-scene.is-still .iso-body,.iso-scene.is-still .iso-face{animation:none}}