/* Small SVG/CSS interactions. The WebGL preview remains lazy and on demand. */
.home-page { --filament-color: #eeeae2; }
.preview-layer-note { position: absolute; bottom: 48px; left: 13px; padding: 6px 10px; color: #ffe2b3; background: #19241deb; border: 1px solid #f0b96f66; border-radius: 7px; font-size: .74rem; pointer-events: none; }
.preview-layer-note[hidden] { display: none; }
.model-preview.top-view .preview-tools .preview-btn:not(#pvTop) { display: none; }
.hero-type-3d { transform: perspective(850px) rotateX(var(--hero-rx,0deg)) rotateY(var(--hero-ry,0deg)); transform-origin: 45% 55%; text-shadow: 0 1px 0 #9fa99b,0 2px 0 #9fa99b,0 3px 0 #96a191,0 4px 0 #8e9b88,2px 7px 16px #20392b20; transition: transform .18s ease-out; }
.hero-type-3d .accent { text-shadow: 0 1px 0 #824d29,0 2px 0 #824d29,0 3px 0 #754323,0 4px 0 #683a20,2px 7px 20px #a94e1726; }
.hero-type-3d.is-tilting { will-change: transform; transition: none; }
:root[data-theme="dark"] .hero-type-3d { text-shadow: 0 1px 0 #53625b,0 2px 0 #53625b,0 3px 0 #3c4c42,0 4px 0 #2e3c32,2px 8px 18px #0006; }
.print-boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none; background: color-mix(in srgb,var(--c-bg) 94%,transparent); opacity: 0; transition: opacity .2s; }
.print-boot[hidden] { display: none; }
.print-boot.is-visible { opacity: 1; }
.print-boot-card { width: 246px; text-align: center; --filament-color: #f5a248; }
.print-boot-card > div { width: 200px; margin: auto; }
.print-boot-card > span { font: .64rem var(--font-mono); letter-spacing: .12em; color: var(--c-orange); }
.print-boot-card > p { margin: 8px 0; font-size: .86rem; color: var(--c-text2); }
.printer-picture { width: 100%; height: auto; overflow: visible; display: block; }
.printer-layer { opacity: 0; }
.printer-layer.is-built { opacity: 1; }
.printer-front { fill: var(--filament-color); }
.printer-top { fill: var(--filament-color); filter: brightness(1.14); }
.printer-side { fill: var(--filament-color); filter: brightness(.72); }
.printer-elevation { transform: translateY(calc(30px + var(--print-level,0)*-54px)); transition: transform .15s linear; }
.printer-moving .printer-sweep { animation: nozzle-sweep .8s ease-in-out infinite alternate; }
.printer-paused .printer-sweep,.printer-paused .printer-layer { animation-play-state: paused; }
@keyframes nozzle-sweep { from { transform: translateX(-18px); } to { transform: translateX(28px); } }
.file-print-loader { display: flex; align-items: center; gap: 16px; color: var(--c-text2); font-size: .85rem; }
.file-print-loader[hidden] { display: none; }
.file-print-loader > div { width: 90px; flex: 0 0 90px; }
.filament-label { display: block; font-weight: 600; margin-bottom: 14px; color: var(--c-text); }
.filament-spools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.home-page .filament-spool { min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 9px; padding: 15px 5px 10px; border: 1px solid var(--c-border); border-radius: 13px; background: var(--c-card); color: var(--c-text); cursor: pointer; touch-action: pan-y; }
.filament-spool[aria-pressed="true"] { border-color: var(--c-orange); box-shadow: inset 0 0 0 1px var(--c-orange),0 6px 18px #ad682017; background: var(--c-card2); }
.filament-spool:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }
.home-page .filament-spool:disabled { opacity: .55; cursor: not-allowed; }
.spool-body { display: block; width: clamp(48px,5.5vw,74px); aspect-ratio: 1; position: relative; border-radius: 50%; background: #303637; border: 3px solid #47504e; box-shadow: -5px 3px 0 #202929,0 7px 10px #0002,inset 0 0 0 2px #74847b; transform: perspective(230px) rotateY(-17deg) rotateX(6deg); }
.spool-winding { position: absolute; inset: 5px; border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 2px,#ffffff24 2px 3px),var(--spool-color); border: 1px solid #ffffff35; box-shadow: inset 0 0 0 3px #0002; }
.spool-face { position: absolute; inset: -1px; border: 6px solid #353e3a; border-radius: 50%; transform: rotate(var(--spool-turn,0deg)); transition: transform .65s cubic-bezier(.2,.7,.2,1); background: conic-gradient(from 12deg,transparent 0 22deg,#35403b 22deg 34deg,transparent 34deg 82deg,#35403b 82deg 94deg,transparent 94deg 142deg,#35403b 142deg 154deg,transparent 154deg 202deg,#35403b 202deg 214deg,transparent 214deg 262deg,#35403b 262deg 274deg,transparent 274deg 322deg,#35403b 322deg 334deg,transparent 334deg); }
.spool-body::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: #e3e6dc; border: 5px solid #4d5b51; box-shadow: inset 2px 2px 3px #0004; }
.filament-spool.is-dragging .spool-face { transition: none; }
.filament-spool > strong { font-size: .81rem; line-height: 1.5; }
.filament-spool > small { color: var(--c-text2); font-size: .68rem; }
.filament-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; font-size: .85rem; color: var(--c-text2); }
.filament-selection strong { color: var(--c-text); }
.filament-selection > span { margin-left: auto; font-size: .74rem; }
.filament-enhanced #colorSelect { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.model-preview-group[hidden] { display: none; }
.model-preview-group .model-preview { margin-top: 14px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.print-simulation { border: 1px solid var(--c-border); border-top: 0; background: var(--c-card); border-radius: 0 0 13px 13px; padding: 12px 15px; --print-level: 1; }
.simulation-heading { display: flex; align-items: center; gap: 13px; }
.simulation-title { display: flex; flex-direction: column; gap: 3px; font-size: .88rem; color: var(--c-text); }
.simulation-tag { color: var(--c-orange); font-size: .68rem; }
.print-clock { position: relative; width: 65px; flex: 0 0 65px; }
.print-clock svg { display: block; width: 100%; }
.clock-track { stroke: var(--c-border); stroke-width: 3; fill: none; }
.clock-progress { stroke: var(--c-orange); stroke-width: 4; fill: none; stroke-dasharray: 276.46; stroke-dashoffset: calc(276.46*(1 - var(--print-level))); transform: rotate(-90deg); transform-origin: 50px 50px; }
.clock-hand { stroke: var(--c-orange); stroke-width: 2; stroke-linecap: round; transform: rotate(calc(var(--print-level)*360deg)); transform-origin: 50px 50px; }
.clock-hub { fill: var(--c-orange); }
.print-clock > strong { position: absolute; top: 55%; width: 100%; text-align: center; font: 600 .72rem var(--font-mono); color: var(--c-text); }
.simulation-caption { font-size: .8rem; color: var(--c-text); margin: 5px 0 0; }
.simulation-caption > span { display: block; color: var(--c-text2); font-size: .72rem; margin-top: 2px; }
.home-page .simulation-slide-label { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 0; font-size: .78rem; color: var(--c-text); }
.simulation-slide-label > span { color: var(--c-text2); font: .7rem var(--font-mono); }
#simulationRange { width: 100%; height: 40px; margin: 0; padding: 0; accent-color: var(--c-orange); cursor: ew-resize; touch-action: pan-y; }
#simulationRange:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; border-radius: 4px; }
.simulation-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.simulation-controls button { border: 1px solid var(--c-border); border-radius: 7px; padding: 8px 10px; min-height: 40px; background: var(--c-card2); color: var(--c-text); font-size: .79rem; }
.simulation-controls button:first-child { background: var(--c-orange); border-color: var(--c-orange); color: white; }
.simulation-controls button:disabled { opacity: .5; cursor: default; }
.simulation-time { color: var(--c-text); font-size: .74rem; margin-top: 8px; }
.simulation-note { font-size: .66rem; color: var(--c-text2); margin-top: 5px; line-height: 1.55; }
.slice-print-picture { width: 94px; float: left; margin: -2px 12px 0 -4px; }
.slice-progress { display: flow-root; }
.slice-progress-heading { min-height: 26px; }
.slice-progress progress { width: calc(100% - 104px); }
@media (max-width: 550px) {
  .filament-spools { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .spool-body { width: 70px; }
  .filament-spool > strong { font-size: .86rem; }
  .hero-type-3d { text-shadow: 0 1px 0 #9fa99b,0 2px 0 #96a191,0 3px 0 #8e9b88,1px 5px 12px #20392b20; }
  .slice-print-picture { width: 66px; margin-right: 8px; }
  .slice-progress progress { width: calc(100% - 74px); }
  .slice-progress-heading { flex-wrap: wrap; gap: 3px; font-size: .8rem; }
  .print-simulation { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-type-3d { transform: none !important; transition: none; }
  .print-boot { display: none; }
  .printer-elevation,.spool-face { transition: none; }
  .printer-moving .printer-sweep,.printer-moving .printer-layer { animation: none; }
}