:root{color-scheme:light}
*,:before,:after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#696968;font-family:Arial,sans-serif}
#metal-surface{
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;height:100vh;height:100dvh;min-height:260px;
  background-color:#777;
  background-image:url('assets/metal-patina-original.png');background-position:50% 50%;background-size:cover;
  background-repeat:no-repeat;
}
#metal-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .16s ease;touch-action:manipulation}
body.webgl-ready #metal-canvas{opacity:1}
#metal-fallback-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .16s ease}
body.canvas-ready #metal-fallback-canvas{opacity:1}
#logo-fallback{
  position:absolute;pointer-events:none;overflow:visible;
  filter:drop-shadow(0 1px 0 rgba(245,245,245,.48)) drop-shadow(0 -1px 1px rgba(6,9,11,.6));
  opacity:.82;transition:opacity .16s ease;
}
#logo-fallback svg{width:100%;height:100%;display:block;overflow:visible;fill:#797b7c}
#logo-fallback svg path{fill:#7f8284;fill-opacity:.34;stroke:#24282b;stroke-opacity:.72;stroke-width:1.05}
body.webgl-ready #metal-fallback-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .16s ease}
body.canvas-ready #metal-fallback-canvas{opacity:1}
body.webgl-ready #logo-fallback,body.canvas-ready #logo-fallback{opacity:0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#control-panel{position:absolute;z-index:10;right:20px;top:20px;width:min(320px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;padding:20px;border-radius:9px;background:rgba(18,20,22,.92);color:#f1f1f1;backdrop-filter:blur(12px);box-shadow:0 12px 50px #0007;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace}
#control-panel header{display:flex;flex-direction:column;border-bottom:1px solid #7776;padding-bottom:12px;margin-bottom:15px;gap:4px}
#control-panel header strong{letter-spacing:.09em;font-size:14px}
#control-panel header span{font-size:10px;color:#adb1b6;letter-spacing:.08em}
#control-panel label{display:grid;grid-template-columns:1fr auto;gap:4px;margin-bottom:13px}
#control-panel label>span{grid-column:1}
#control-panel select{grid-column:1/-1;width:100%;background:#404448;color:#f6f6f6;border:1px solid #777;padding:7px}
#control-panel input[type=range]{grid-column:1/-1;width:100%;accent-color:#d7d8d8;cursor:pointer}
#control-panel output{text-align:right;color:#e8e8e8;font-variant-numeric:tabular-nums}
#control-panel p{margin:11px 0 0;color:#c2c6c9;line-height:1.5}
@media(prefers-reduced-motion:reduce){#metal-canvas,#metal-fallback-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .16s ease}
body.canvas-ready #metal-fallback-canvas{opacity:1}
#logo-fallback{transition:none}}