*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:#f8f9fa;color:#333;font-size:24px}#main{position:relative;width:100vw;height:100vh;overflow:hidden}.title{position:fixed;top:2rem;left:2rem;z-index:100;letter-spacing:-.02em;padding:.5rem 1rem;border-radius:12px;background:#ffffffe6;border:1px solid rgba(255,255,255,.3);color:#073b4c;line-height:1}.title h1{margin:0;font-weight:300;font-size:1rem}.visualization-container{width:100vw;height:100vh;position:relative;-webkit-user-select:none;user-select:none;background-image:radial-gradient(circle,#ddd 1px,transparent 1px);background-size:30px 30px;background-position:0 0,15px 15px}.visualization-container:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(17,138,178,.1) 1px,transparent 1px);background-size:60px 60px;background-position:15px 15px,45px 45px;animation:grid-float 20s infinite linear;pointer-events:none}@keyframes grid-float{0%{transform:translate(0)}to{transform:translate(30px,30px)}}.screen-rectangle{border-radius:12px;box-shadow:0 4px 20px #00000014,0 1px 3px #0000001a;opacity:1;transition:.2s ease}.screen-rectangle .equipment-labels{opacity:1;transition:opacity .3s ease}.screen-rectangle[style*="width: "] .equipment-labels{opacity:var(--label-opacity, 1)}.screen-rectangle.current.current{box-shadow:0 8px 40px #00000026,0 0 0 3px #ff6b354d;animation:screen-appear 1.2s cubic-bezier(.34,1.56,.64,1) forwards,pulse-current 3s infinite;border:10px solid black}.screen-rectangle:hover{filter:brightness(1.1)}.screen-rectangle.animate-in{opacity:0;animation:screen-appear 1.2s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes screen-appear{0%{transform:translate(-50%,-50%) scale(0);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes pulse-current{0%,to{filter:brightness(1) saturate(1)}50%{filter:brightness(1.2) saturate(1.2) hue-rotate(10deg)}}.equipment-labels{position:absolute;inset:0;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,Consolas,monospace;color:#000;text-shadow:0 0 4px rgb(255,255,255),0 0 8px rgba(255,255,255,.8),0 1px 2px rgba(255,255,255,.9);-webkit-user-select:none;user-select:none;pointer-events:none}.equipment-labels .label-top{position:absolute;top:2%;left:3%;right:3%;display:flex;justify-content:space-between;align-items:center}.equipment-labels .label-top .device-id{font-size:calc(.8rem * var(--zoom-factor, 1));font-weight:800;letter-spacing:.5px}.equipment-labels .label-top .dimensions{font-size:calc(.75rem * var(--zoom-factor, 1));font-weight:700;letter-spacing:.25px;opacity:.95}.equipment-labels .label-right{position:absolute;top:15%;right:2%;display:flex;flex-direction:column;gap:2%;align-items:flex-end}.equipment-labels .label-right .info-block{display:flex;flex-direction:column;align-items:flex-end;gap:1px}.equipment-labels .label-right .info-block .label{font-size:calc(.6rem * var(--zoom-factor, 1));font-weight:600;opacity:.8;letter-spacing:.3px}.equipment-labels .label-right .info-block .value{font-size:calc(.7rem * var(--zoom-factor, 1));font-weight:800;letter-spacing:.25px}.equipment-labels .label-right .info-block .sub{font-size:calc(.55rem * var(--zoom-factor, 1));font-weight:600;opacity:.9;letter-spacing:.2px}.equipment-labels .label-bottom{position:absolute;bottom:2%;left:3%;right:3%;display:flex;justify-content:space-between}.equipment-labels .label-bottom .stat{font-size:calc(.65rem * var(--zoom-factor, 1));font-weight:700;letter-spacing:.3px;font-variant-numeric:tabular-nums}.equipment-labels .label-left{position:absolute;top:15%;left:2%;display:flex;flex-direction:column;gap:2%}.equipment-labels .label-left .info-block{display:flex;flex-direction:column;gap:1px}.equipment-labels .label-left .info-block .label{font-size:calc(.6rem * var(--zoom-factor, 1));font-weight:600;opacity:.8;letter-spacing:.3px}.equipment-labels .label-left .info-block .value{font-size:calc(.7rem * var(--zoom-factor, 1));font-weight:800;letter-spacing:.25px}.equipment-labels .label-left .info-block .sub{font-size:calc(.55rem * var(--zoom-factor, 1));font-weight:600;opacity:.9;letter-spacing:.2px}@media(max-width:768px){.equipment-labels{top:4px;left:4px;right:4px}.equipment-labels .equipment-header{margin-bottom:4px}.equipment-labels .equipment-header .model-id{font-size:.75rem}.equipment-labels .equipment-header .dimensions{font-size:.7rem}.equipment-labels .equipment-stats{gap:1px}.equipment-labels .equipment-stats .stat-row{font-size:.6rem}}.floating-controls{position:fixed;bottom:2rem;right:2rem;z-index:100;display:flex;flex-direction:column;gap:1rem;align-items:flex-end}.info-chips{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}.chip{background:#fffffff2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:.5rem .875rem;border-radius:20px;font-size:.6rem;font-weight:500;box-shadow:0 4px 20px #00000014,0 1px 3px #0000000d;border:1px solid rgba(255,255,255,.3);white-space:nowrap}.chip.current-size{color:#118ab2;font-weight:600}.chip.current-size .resize-dot{color:#ef476f;animation:pulse-dot 1s infinite;margin-left:.5rem}.chip.size-count{color:#073b4c}.chip.zoom-level{color:#a23b72;font-weight:600}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.control-buttons{display:flex;gap:.5rem}.control-buttons button{background:#fffffff2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(17,138,178,.2);color:#118ab2;padding:.6rem 1rem;border-radius:8px;font-size:.6rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px #00000014,0 1px 3px #0000000d}.control-buttons button:hover:not(:disabled){background:#118ab2;color:#fff;transform:translateY(-1px);box-shadow:0 6px 25px #118ab233}.control-buttons button:disabled{opacity:.5;cursor:not-allowed;color:#999;border-color:#9993}.resize-status{background:#ef476ff2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.8rem;font-weight:500;text-align:center;box-shadow:0 4px 20px #ef476f4d;animation:pulse-resize 1.5s infinite}@keyframes pulse-resize{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:768px){body{font-size:16px}.title{top:.5rem;left:.5rem;padding:.3rem .5rem;font-size:.8rem;border-radius:8px}.floating-controls{bottom:.5rem;right:.5rem;gap:.5rem;max-width:calc(100vw - 1rem)}.info-chips{gap:.25rem;flex-wrap:wrap;max-width:100%}.chip{font-size:.5rem;padding:.25rem .4rem;border-radius:12px}.chip.current-size .resize-dot{margin-left:.25rem}.control-buttons{gap:.25rem}.control-buttons button{font-size:.5rem;padding:.35rem .5rem;border-radius:6px}.resize-status{font-size:.5rem;padding:.3rem .5rem;border-radius:12px}.equipment-labels .label-top{top:1%;left:2%;right:2%}.equipment-labels .label-top .device-id{font-size:calc(.8rem * var(--zoom-factor, 1));font-weight:900}.equipment-labels .label-top .dimensions{font-size:calc(.7rem * var(--zoom-factor, 1));font-weight:800}.equipment-labels .label-right,.equipment-labels .label-left{top:8%}.equipment-labels .label-right .info-block,.equipment-labels .label-left .info-block{gap:2px}.equipment-labels .label-right .info-block .label,.equipment-labels .label-left .info-block .label{font-size:calc(.6rem * var(--zoom-factor, 1));font-weight:700}.equipment-labels .label-right .info-block .value,.equipment-labels .label-left .info-block .value{font-size:calc(.7rem * var(--zoom-factor, 1));font-weight:900}.equipment-labels .label-right .info-block .sub,.equipment-labels .label-left .info-block .sub{font-size:calc(.55rem * var(--zoom-factor, 1));font-weight:700}.equipment-labels .label-bottom{bottom:1%;left:2%;right:2%}.equipment-labels .label-bottom .stat{font-size:calc(.6rem * var(--zoom-factor, 1));font-weight:800}}.intro-rectangle{display:flex;flex-direction:column;justify-content:space-between;padding:1rem}.intro-content-inside{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}.intro-content-inside p,.intro-content-inside ol{font-size:.8rem;line-height:1.4;margin-bottom:0}.intro-content-inside ol{margin-bottom:1rem}.continue-button{background:#ffffffe6;color:#118ab2;border:none;padding:.6rem 1.2rem;border-radius:25px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.continue-button:hover{transform:translateY(-1px);box-shadow:0 4px 15px #0000004d;background:#fff}.continue-button:active{transform:translateY(0)}@keyframes intro-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(max-width:768px){.intro-content-inside p{font-size:.7rem}.detail-item{font-size:.6rem;gap:.4rem}.detail-item .icon{font-size:.7rem;width:.8rem}.continue-button{font-size:.7rem;padding:.5rem 1rem}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.visualization-container{background-image:radial-gradient(circle,#ccc .5px,transparent .5px)}}