/* Adds the hardware finish and mascot choreography to the Tailwind layout. */
:root { color-scheme: dark; --orange: #ff9d45; --cream: #f7e8cc; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: #171815; color: #f7f3e9; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; }
::selection { background: #ff9d45; color: #171815; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.12' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .2; }
.rack { background: radial-gradient(ellipse at 50% 46%, #34362d 0%, #242620 42%, #20211d 76%); box-shadow: 0 32px 70px #0005, inset 0 1px #ffffff14; }
.rack::before, .rack::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #4f5149, #20211d); box-shadow: inset 0 0 0 1px #ffffff10; top: 20px; }
.rack::before { left: 20px; } .rack::after { right: 20px; }
.rack-glow { background: radial-gradient(ellipse, #ff9d451a, transparent 65%); }
.led { box-shadow: 0 0 12px #ffa14c55; }
.mode-button { transition: background .2s, color .2s, box-shadow .2s; }
.mode-button[aria-pressed='true'] { background: #41433c; color: #f7f3e9; box-shadow: inset 0 1px #ffffff0c, 0 2px 5px #0003; }
.demo-rack .compress-props { display: none; }
.demo-rack[data-mode='compress'] .compress-props { display: block; }
.demo-rack[data-mode='compress'] .extract-props { display: none; }
.bull-breath { animation: breathe 4s ease-in-out infinite; }
.bull-head { transform-origin: 160px 149px; }
.throwing-arm { transform-origin: 54px 224px; }
.flying-paper { opacity: 0; }
.paper-spin { transform-origin: 142px 240px; }
.is-working .throwing-arm { animation: throw-arm 1.8s ease-in-out 2; }
.is-working .held-paper { animation: held-paper 1.8s linear 2; }
.is-working .flying-paper { animation: fly-paper 1.8s linear 2; }
.is-working .paper-spin { animation: spin-paper 1.8s linear 2; }
.is-working .bull-head { animation: head-nod .9s ease-in-out 4; }
.is-working .packing-arms { animation: pack-arms .9s ease-in-out 4; }
.is-working .packing-box { transform-origin: 160px 293px; animation: pack-box .9s ease-in-out 4; }
.is-working .packing-paper { animation: pack-paper 1.8s ease-in 2; }
.demo-meter { transform: scaleX(0); transform-origin: left; }
.is-working .demo-meter { animation: demo-progress 3.6s linear forwards; }
.preview-note { transform: rotate(-7deg); }
.feature-line + .feature-line { border-top: 1px solid #ffffff0d; }
.packing-choice { transition: background .2s, border-color .2s; }
.packing-choice[aria-pressed='true'] { border-color: #ff9d4570; background: #ff9d450b; }
.packing-choice[aria-pressed='true'] .packing-dot { border-color: #ff9d45; background: #ff9d45; box-shadow: inset 0 0 0 4px #252820; }
.packing-choice[aria-pressed='true'] .packing-name { color: #ffc080; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary .faq-plus { transition: transform .2s; }
details[open] .faq-plus { transform: rotate(45deg); }
.cta { background: #f1dfbc; color: #23251e; }
.cta ::selection { background: #22241e; color: #f7e8cc; }
@keyframes breathe { 50% { transform: translateY(-2px); } }
@keyframes head-nod { 50% { transform: rotate(2deg); } }
@keyframes throw-arm { 0%, 90%, 100% { transform: rotate(0); } 46% { transform: rotate(-105deg); } }
@keyframes held-paper { 0%, 45%, 90%, 100% { opacity: 1; } 46%, 89% { opacity: 0; } }
@keyframes fly-paper { 0%, 45% { opacity: 0; transform: translate(0,0); } 46% { opacity: 1; transform: translate(0,0); } 78% { opacity: 1; transform: translate(-17px,5px); } 100% { opacity: 0; transform: translate(-35px,55px); } }
@keyframes spin-paper { 0%, 46% { transform: rotate(0); } 100% { transform: rotate(-130deg); } }
@keyframes pack-arms { 50% { transform: translateY(5px); } }
@keyframes pack-box { 50% { transform: scale(1.025,.96); } }
@keyframes pack-paper { 0% { transform: translateY(-18px); opacity: 0; } 15%, 65% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
@keyframes demo-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .is-working .demo-meter { transform: scaleX(1); }
}