@import "https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=VT323&display=swap";
:root{--bezel:#cdbfa3;--bezel-dark:#a8997c;--bezel-light:#e4d8bf;--screen-blue:#c9d4e0;--panel:#e9ecf1;--chrome:#b9c0cc;--chrome-dark:#7e8693;--ink:#10121a;--btn-blue:#2b2bd6;--btn-blue-lit:#4d4dff}*{box-sizing:border-box}html,body{-webkit-font-smoothing:none;background:#b9a888 radial-gradient(circle at 30% 20%,#c6b694 0%,#9c8c6c 70%);min-height:100%;margin:0;padding:0;font-family:Oswald,Arial Narrow,sans-serif;overflow-x:hidden}.leopard{background-color:#d8ae71;background-image:radial-gradient(18px 14px at 16px 20px,#c98f3d 0 60%,#0000 70%),radial-gradient(16px 20px at 60px 52px,#c98f3d 0 60%,#0000 70%),radial-gradient(20px 15px at 40px 84px,#c98f3d 0 60%,#0000 70%),radial-gradient(15px 17px at 92px 28px,#c98f3d 0 60%,#0000 70%),radial-gradient(circle at 16px 20px,#0000 0 5px,#3a2208 6px 9px,#0000 10px),radial-gradient(circle at 60px 52px,#0000 0 6px,#3a2208 7px 10px,#0000 11px),radial-gradient(circle at 40px 84px,#0000 0 5px,#3a2208 6px 9px,#0000 10px),radial-gradient(circle at 92px 28px,#0000 0 6px,#3a2208 7px 10px,#0000 11px),radial-gradient(circle at 80px 78px,#3a2208 0 4px,#0000 5px),radial-gradient(circle at 6px 64px,#3a2208 0 3.5px,#0000 4.5px),radial-gradient(circle at 110px 64px,#3a2208 0 4px,#0000 5px),radial-gradient(circle at 34px 46px,#3a2208 0 3px,#0000 4px);background-size:120px 104px}.room{place-items:center;min-height:100dvh;padding:clamp(8px,3vw,40px);display:grid}.monitor{aspect-ratio:4/3;background:linear-gradient(145deg, var(--bezel-light), var(--bezel) 40%, var(--bezel-dark));border-radius:34px;width:min(96vw,1040px);padding:clamp(14px,3.2vw,40px);position:relative;box-shadow:inset 0 2px 6px #ffffff80,inset 0 -6px 14px #00000059,0 30px 60px #00000073}.screen{background:var(--screen-blue);border-radius:16px/22px;grid-template-rows:auto 1fr auto;width:100%;height:100%;display:grid;position:relative;overflow:hidden;transform:perspective(1400px);box-shadow:inset 0 0 0 3px #2a2d34,inset 0 0 22px #0000008c,inset 0 0 90px #00000040}.screen:after{content:"";pointer-events:none;mix-blend-mode:multiply;z-index:40;background:repeating-linear-gradient(#0000001f 0 1px,#0000 2px 3px);position:absolute;inset:0}.screen:before{content:"";pointer-events:none;z-index:41;background:radial-gradient(#0000 55%,#00000059 100%);position:absolute;inset:0}.titlebar{color:#eef1ff;letter-spacing:2px;text-transform:uppercase;z-index:30;background:#0a0d18;justify-content:space-between;align-items:center;padding:6px clamp(8px,2vw,20px);font-size:clamp(11px,2.1vw,22px);font-weight:700;display:flex}.titlebar .tag{border:2px solid #aeb6ff;border-radius:3px;padding:1px 10px}.menubar{color:#cfd6ff;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;z-index:30;background:#0a0d18;align-items:center;gap:clamp(6px,1.6vw,20px);padding:5px clamp(8px,2vw,18px);font-size:clamp(9px,1.7vw,18px);display:flex;overflow:hidden}.menubar .spacer{flex:1}.menubar .more{border:2px solid #aeb6ff;padding:0 8px}.menuItem{font:inherit;text-transform:uppercase;letter-spacing:1px;color:#cfd6ff;cursor:pointer;background:0 0;border:2px solid #0000;padding:0 6px}.menuItem:hover:not(:disabled){color:#fff}.menuItem.active{color:#fff;background:#232a55;border-color:#aeb6ff;border-radius:3px}.menuItem:disabled{opacity:.3;cursor:default}.body{grid-template-columns:1fr minmax(0,1.25fr) 1fr;min-height:0;display:grid;position:relative}.stage{background:var(--panel);border:3px solid #2a2d34;min-height:0;margin:clamp(4px,1vw,12px) 0;display:grid;position:relative}.figure{place-items:center;padding:clamp(6px,1.6vw,18px);display:grid;position:relative;overflow:hidden}.figureInner{flex-direction:column;justify-content:center;align-items:center;gap:0;width:100%;height:100%;display:flex;position:relative}.garment{object-fit:contain;filter:saturate(1.05)contrast(1.05)drop-shadow(0 4px 3px #0003);max-width:78%;max-height:48%}.garment.top{z-index:2;margin-bottom:-6%}.garment.bottom{z-index:1;margin-top:-6%}.look{object-fit:contain;filter:saturate(1.05)contrast(1.04)drop-shadow(0 6px 6px #00000040);max-width:92%;max-height:96%}.dressing .look,.dressing .garment.top{animation:.6s cubic-bezier(.2,1.4,.4,1) both dropTop}.dressing .garment.bottom{animation:.6s cubic-bezier(.2,1.4,.4,1) .12s both riseBottom}@keyframes dropTop{0%{opacity:0;transform:translateY(-160%)rotate(-8deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes riseBottom{0%{opacity:0;transform:translateY(160%)rotate(8deg)}to{opacity:1;transform:translateY(0)rotate(0)}}.flash{z-index:20;background:#f4f6ff;place-items:center;animation:.7s steps(6,end) forwards flashOut;display:grid;position:absolute;inset:0}.flash span{color:#1a1f44;letter-spacing:4px;font-family:VT323,monospace;font-size:clamp(22px,5vw,60px);animation:.18s step-end infinite blink}@keyframes flashOut{0%,60%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes blink{50%{opacity:.2}}.actions{pointer-events:none;z-index:25;place-items:end center;padding-bottom:clamp(8px,2vw,22px);display:grid;position:absolute;inset:0}.bigbtn{pointer-events:auto;text-transform:uppercase;letter-spacing:1px;text-align:center;color:#f3f5ff;background:linear-gradient(var(--btn-blue-lit), var(--btn-blue));cursor:pointer;border:3px solid #0a0d2a;border-radius:5px;padding:clamp(6px,1.4vw,14px) clamp(12px,3vw,30px);font-family:Oswald,sans-serif;font-size:clamp(16px,3vw,34px);font-weight:700;line-height:.95;box-shadow:inset 0 2px #fff6,inset 0 -4px #0006,0 4px 8px #0000004d}.bigbtn:active{transform:translateY(2px)}.badge{z-index:45;color:#1a1f44;background:#fff9;border-radius:3px;padding:1px 6px;font-family:VT323,monospace;font-size:13px;position:absolute;top:6px;right:8px}.boot{color:#1a1f44;place-items:center;height:100%;font-family:VT323,monospace;font-size:clamp(20px,4vw,40px);display:grid}
