Something went wrong. Try again.
atproto Thingiverse but good
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164/* Standalone demo viewer route + the retained WebGL model-viewer surface. Sits inside the shell content region (flex height, not `min-height: 100vh`). */
.viewer-route-page { flex: 1; min-height: 0; padding: clamp(1rem, 4vw, 3rem); background: var(--color-base); color: var(--color-text);}
.model-viewer-shell { display: grid; gap: 1rem; max-width: 72rem; margin: 0 auto;}
.model-viewer-header,.model-viewer-boundary,.viewer-demo-controls { border: 1px solid var(--color-border); background: var(--color-surface);}
.model-viewer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 3vw, 1.5rem);}
.model-viewer-header h1,.model-viewer-header p { margin: 0;}
.viewer-eyebrow { font-family: var(--font-mono); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem;}
.viewer-status-pill { white-space: nowrap; border: 1px solid var(--color-primary); color: var(--color-primary); padding: 0.35rem 0.55rem; font-family: var(--font-mono); font-size: 0.75rem;}
.viewer-demo-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem;}
.viewer-demo-button { border: 1px solid var(--color-border); background: var(--color-base); color: var(--color-text); padding: 0.45rem 0.65rem; cursor: pointer;}
.viewer-demo-button:hover,.viewer-demo-button.is-active { border-color: var(--color-primary); color: var(--color-primary);}
.viewer-demo-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 25%, transparent); outline-offset: 1px;}
.viewer-demo-button:disabled { cursor: wait; opacity: 0.58;}
.viewer-step-conversion-button { border-color: var(--color-action); color: var(--color-tertiary);}
.viewer-step-conversion-panel { border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); padding: 0.75rem;}
.viewer-step-conversion-panel p { margin: 0;}
.viewer-step-conversion-label { margin-bottom: 0.25rem; color: var(--color-primary); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;}
.viewer-step-conversion-panel[data-step-status="STEP blocked"] { border-color: var(--color-error);}
.model-viewer-boundary { position: relative; overflow: hidden; min-height: min(72vh, 42rem);}
.model-viewer-stage { position: relative; min-height: min(72vh, 42rem); display: grid; grid-template-rows: minmax(24rem, min(56vh, 34rem)) auto; background: linear-gradient(135deg, var(--overlay-highlight-soft), transparent 30%), radial-gradient(circle at 50% 35%, var(--overlay-highlight), transparent 24%), var(--color-base);}
.model-viewer-canvas { display: block; width: 100%; min-height: 0; height: 100%; grid-row: 1; grid-column: 1; touch-action: none; cursor: grab;}
.model-viewer-preview { grid-row: 1; grid-column: 1; align-self: stretch; justify-self: stretch; width: 100%; height: 100%; padding: 2rem; box-sizing: border-box;}
.model-preview-shadow { fill: var(--overlay-shadow); }.model-preview-body { fill: color-mix(in srgb, var(--color-primary) 38%, transparent); stroke: var(--color-primary); stroke-width: 4; }.model-preview-cut { fill: color-mix(in srgb, var(--color-base) 80%, transparent); stroke: var(--color-border); stroke-width: 3; }.model-preview-line { fill: none; stroke: color-mix(in srgb, var(--color-primary) 70%, var(--color-text)); stroke-width: 3; }.model-preview-label { fill: var(--color-muted); font-family: var(--font-mono); font-size: 18px; }
.viewer-lifecycle-note { color: var(--color-subtle); font-size: 0.85rem;}