* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #171719; color: #fff; font: 13px/1.6 'Segoe UI', Tahoma, sans-serif; }
#canvasContainer { position: fixed; inset: 0; overflow: hidden; }
body[data-scene-loading="true"] #canvasContainer { visibility: hidden; }
#canvasContainer canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#dlssWebGpuOutput { pointer-events: none; opacity: 0; }
#dlssWebGpuOutput.visible { opacity: 1; }
#dlssResizeHold { pointer-events: none; opacity: 0; }
#dlssResizeHold.visible { opacity: 1; }
#info { position: fixed; top: 20px; left: 20px; max-width: calc(100vw - 410px); pointer-events: none; text-shadow: 0 1px 5px #000, 0 0 16px #0008; }
#info a { color: inherit; text-decoration: none; pointer-events: auto; }
#info a:hover { text-decoration: underline; }
.title-wrapper { display: flex; align-items: baseline; gap: 20px; margin-bottom: 4px; }
.title-wrapper > .brand { font-weight: 700; font-size: 16px; }
h1 { margin: 0; font-size: 15px; font-weight: 400; }
#info small { font-size: 12px; }
#demoHint, #dlssWebGpuStatus { position: fixed; bottom: 18px; margin: 0; pointer-events: none; color: #fff; text-shadow: 0 1px 5px #000, 0 0 12px #0009; font-size: 12px; }
#demoHint { left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
kbd { font: inherit; }
#dlssWebGpuStatus { left: 20px; bottom: 46px; max-width: min(660px, calc(100vw - 40px)); overflow-wrap: anywhere; }
#dlssWebGpuStatus[data-state="ready"] { opacity: 0; }
body[data-dlss-ready="true"] #dlssWebGpuStatus:not([data-state="error"]) { display: none; }
#dlssWebGpuStatus[data-state="error"] { pointer-events: auto; color: #ffc0b8; padding: 10px 14px; border-radius: 5px; background: #241c20ef; max-height: 30vh; overflow: auto; }
#dlssPresentedIndicator { position: fixed; left: 20px; bottom: 18px; z-index: 4; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: #fff; text-shadow: 0 1px 5px #000, 0 0 12px #0009; font: 700 12px/1.1 'Segoe UI', sans-serif; letter-spacing: .06em; cursor: pointer; }
#dlssPresentedIndicator:focus-visible { outline: 2px solid #00aaff; outline-offset: 5px; }
.dlss-indicator-dot { width: 8px; height: 8px; border-radius: 50%; }
#dlssPresentedIndicator[data-state="on"] .dlss-indicator-dot { background: #64f5a5; box-shadow: 0 0 8px #64f5a5; }
#dlssPresentedIndicator[data-state="off"] .dlss-indicator-dot { background: #ff625f; box-shadow: 0 0 8px #ff625f; }
.three-inspector .param-control[data-disabled="true"] { opacity: .4; pointer-events: none; }
.three-inspector .custom-checkbox input { display: block; position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.three-inspector .custom-checkbox:focus-within .checkmark { outline: 2px solid #00aaff; outline-offset: 3px; }
.three-inspector input:focus-visible, .three-inspector select:focus-visible, .three-inspector button:focus-visible { outline: 2px solid #00aaff; outline-offset: 2px; }
.three-inspector .profiler-mini-panel { max-height: calc(100dvh - 84px); overflow-y: auto; }
.three-inspector input[readonly] { pointer-events: none; }
.three-inspector .demo-status { color: #9a9aab; font: 12px/1.5 'Segoe UI', sans-serif; padding: 12px; overflow-wrap: anywhere; }
#demoLoading { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: #17171960; }
#demoLoading[hidden], #demoLoading [hidden] { display: none; }
body:has(#demoLoading:not([hidden])) #dlssWebGpuStatus { display: none; }
.loading-card { width: min(360px, calc(100vw - 40px)); max-height: calc(100dvh - 80px); overflow: auto; padding: 28px; border: 1px solid #ffffff18; border-radius: 8px; background: #222226f5; box-shadow: 0 8px 40px #0003; }
.loading-card h2 { margin: 16px 0 5px; font-size: 16px; font-weight: 500; }
.loading-card p { margin: 0; color: #b4b4bd; font-size: 12px; overflow-wrap: anywhere; }
.loading-spinner { display: block; width: 22px; height: 22px; border: 2px solid #ffffff25; border-top-color: #fff; border-radius: 50%; animation: loading-spin 1s linear infinite; }
#loadingProgress { display: block; width: 100%; height: 4px; border: 0; margin: 22px 0 8px; border-radius: 4px; overflow: hidden; background: #ffffff18; accent-color: #8bcfff; }
#loadingProgress::-webkit-progress-bar { background: #ffffff18; }
#loadingProgress::-webkit-progress-value { background: #8bcfff; }
#loadingProgress:indeterminate { background: linear-gradient(90deg, #ffffff10 30%, #8bcfff 50%, #ffffff10 70%); background-size: 200% 100%; animation: loading-progress 1.5s linear infinite; }
#loadingProgress:indeterminate::-webkit-progress-bar { background: transparent; }
#loadingRetry { margin-top: 18px; padding: 6px 16px; border: 1px solid #ffffff30; border-radius: 4px; background: #ffffff10; color: white; cursor: pointer; }
#demoLoading[data-state="error"] .loading-spinner { display: none; }
#demoLoading[data-state="error"] h2 { margin-top: 0; }
#demoLoading[data-state="error"] #loadingDetail { color: #ffc0b8; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-progress { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .loading-spinner, #loadingProgress:indeterminate { animation: none; } }
@media (max-width: 700px) {
  #info { top: 14px; left: 14px; padding-left: 0; max-width: calc(100vw - 185px); }
  #info small { display: block; font-size: 10px; width: calc(100vw - 28px); margin-top: 8px; }
  .title-wrapper { flex-direction: column; gap: 0; }
  .title-wrapper > .brand { font-size: 14px; }
  h1 { font-size: 12px; }
  #demoHint { width: calc(100vw - 28px); white-space: normal; font-size: 11px; bottom: 12px; }
  #dlssWebGpuStatus { left: 14px; bottom: 56px; }
  #dlssPresentedIndicator { left: 14px; bottom: 14px; }
  .three-inspector .profiler-mini-panel { max-width: calc(100vw - 28px); }
}
@media (max-height: 550px) { #demoHint { display: none; } }