.scene{--k:1;height:calc(220px * var(--k));border:1px solid var(--color-line);background:var(--color-bg-2);color:var(--color-text-2);border-radius:14px;font-size:14px;position:relative;overflow:hidden}.scene-tag{z-index:3;font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;border:1px dashed var(--color-rail);background:var(--color-white);color:var(--color-text-3);border-radius:999px;padding:6px 10px;display:grid;position:absolute;top:10px;left:10px}.scene-tag>span{grid-area:1/1}.scene-tag>:last-child,[data-phase=after] .scene-tag>:first-child{visibility:hidden}[data-phase=after] .scene-tag{border:1px solid var(--color-terracotta);background:var(--color-terracotta);color:var(--color-white)}[data-phase=after] .scene-tag>:last-child{visibility:visible}.scene:after{content:"";background:var(--color-terracotta);opacity:.5;transform-origin:0 0;width:100%;height:2px;position:absolute;bottom:0;left:0;transform:scaleX(0)}[data-running] .scene:after{animation:scene-time var(--phase-ms) linear both}[data-running][data-phase=after] .scene:after{animation-name:scene-time-2}@keyframes scene-time{to{transform:scaleX(1)}}@keyframes scene-time-2{to{transform:scaleX(1)}}.scene-stage{top:0;left:calc(50% - 220px * var(--k));width:440px;height:220px;transform:scale(var(--k));transform-origin:0 0;position:absolute}.scene-before,.scene-after{transition:opacity .8s,transform .8s;position:absolute;inset:0}.scene-after{opacity:0;transform:translateY(10px)}[data-phase=after] .scene-before{opacity:0;transform:translateY(-10px)}[data-phase=after] .scene-after{opacity:1;transform:none}.scene-caption>span{grid-area:1/1;transition:opacity .6s}.scene-caption>:last-child,[data-phase=after] .scene-caption>:first-child{opacity:0}[data-phase=after] .scene-caption>:last-child{opacity:1}.note{border:1px dashed var(--color-rail);background:var(--color-white);white-space:nowrap;border-radius:10px;padding:7px 11px;position:absolute;box-shadow:0 6px 16px -12px #1c19174d}.box{background:var(--color-white);border:1px solid var(--color-line);border-radius:10px;position:absolute;box-shadow:0 8px 22px -16px #1c191759}.scene-before .box{border-style:dashed;border-color:var(--color-rail)}.is-ok{color:var(--color-terracotta);font-weight:600}.is-wrong{color:var(--color-terracotta-dark);font-weight:600}.pill{background:var(--color-terracotta);color:var(--color-white);white-space:nowrap;border-radius:999px;padding:7px 12px;font-weight:600;position:absolute}.pill-bad{background:var(--color-white);color:var(--color-terracotta-dark);border:1px dashed var(--color-terracotta-dark)}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .rise{animation:scene-rise .5s var(--t) both}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .pop{animation:scene-pop .45s var(--t) both}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .light-up{animation:scene-light-up .35s var(--t) both}@keyframes scene-rise{0%{opacity:0;transform:translateY(10px)}}@keyframes scene-pop{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.06)}}@keyframes scene-light-up{0%{background:0 0}}.bubble{left:var(--x);top:var(--y)}[data-running] .bubble{animation:bubble-arrive 5.4s var(--d,0s) ease-in-out infinite both}[data-running] .bubble-away{animation:5.4s ease-in 1.6s infinite both bubble-away}@keyframes bubble-arrive{0%{opacity:0;transform:translateY(12px)}12%,80%{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}@keyframes bubble-away{0%,10%{opacity:0;transform:none}20%,45%{opacity:1;transform:none}75%,to{opacity:0;transform:translate(180px)rotate(6deg)}}.orders{gap:8px;width:300px;margin-left:-150px;display:grid;position:absolute;top:34px;left:50%}.orders li{background:var(--color-white);border:1px solid var(--color-line);border-radius:10px;grid-template-columns:42px auto 1fr;align-items:center;gap:12px;padding:10px 14px;display:grid;box-shadow:0 8px 22px -16px #1c191759}.orders li>span{color:var(--color-text);font-weight:600}.orders em{text-align:right;font-style:normal}.order-steps{gap:5px;display:flex}.order-steps i{border:1.5px solid var(--color-terracotta);border-radius:50%;width:9px;height:9px}.order-steps i.light-up{background:var(--color-terracotta)}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .flash{animation:scene-flash 1.1s var(--t) both}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .ask{animation:scene-ask 1.7s var(--t) both}@keyframes scene-flash{0%,to{background:0 0}15%,55%{background:#c2410c24}}@keyframes scene-ask{0%{opacity:0;transform:translateY(10px)}14%,84%{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}.quote-form{width:210px;margin-left:-125px;padding:10px 14px;top:16px;left:50%}.scene p.quote-form-title{color:var(--color-text);margin-bottom:4px;font-size:14px;font-weight:600}.quote-field{border-top:1px solid var(--color-line);border-radius:4px;justify-content:space-between;margin:0 -6px;padding:5px 6px;display:flex}.quote-field em{color:var(--color-text);font-variant-numeric:tabular-nums;font-style:normal;font-weight:600}.scene-before .quote-field em{color:var(--color-text-3)}.quote-total em{color:var(--color-terracotta)}.quote-clock{width:30px;height:30px;color:var(--color-text-3);position:absolute;top:24px;left:calc(50% + 100px)}[data-running] .quote-clock-hand{transform-origin:12px 12px;animation:2.4s linear infinite quote-clock}@keyframes quote-clock{to{transform:rotate(360deg)}}.scene-before .ask{top:84px;left:calc(50% + 96px)}.scene-after .pill{left:calc(50% + 96px)}.quote-file{border-style:solid;border-color:var(--color-line);top:108px;left:calc(50% + 96px)}.month-columns{grid-template-columns:104px 22px 104px 22px 104px;align-items:center;display:grid;position:absolute;top:34px;left:50%;transform:translate(-50%)}.month-columns .box{text-align:center;padding:10px 6px;position:relative}.month-columns small{color:var(--color-text-3);margin-bottom:4px;font-size:12px;display:block}.month-columns b{font:800 19px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--color-text);font-variant-numeric:tabular-nums;display:block}.month-mark{margin-top:4px;font-size:13px;display:block}.month-sign{text-align:center;font:800 20px/1 var(--font-display)}.scene-before .month-sign{color:var(--color-terracotta-dark)}.scene-after .month-sign{color:var(--color-terracotta)}.month-columns+.pill{top:150px;left:50%;translate:-50%}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .leave-shelf{animation:stock-leave .9s var(--t) ease-in both}@keyframes stock-leave{to{opacity:0;transform:translate(80px,-14px)rotate(8deg)}}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .count span:not(:first-child){animation:count-in .35s var(--in) both}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .count span:not(:last-child){animation:count-out .35s var(--out) both}:is([data-running]:not([data-phase=after]) .scene-before,[data-phase=after] .scene-after) .count span:not(:first-child):not(:last-child){animation:count-in .35s var(--in) both, count-out .35s var(--out) forwards}.count{vertical-align:bottom;min-width:1ch;height:1.2em;display:inline-block;position:relative}.count span{position:absolute;top:0;left:0}.count span:not(:last-child){opacity:0}@keyframes count-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes count-out{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px)}}.stock-shelf{border-bottom:3px solid var(--color-text-3);width:130px;height:96px;position:absolute;top:38px;left:calc(50% - 160px)}.stock-shelf i{border:1.5px solid var(--color-text-3);background:var(--color-white);border-radius:4px;width:34px;height:34px;position:absolute;bottom:0}.stock-shelf i:first-child{left:4px}.stock-shelf i:nth-child(2){left:48px}.stock-shelf i:nth-child(3){left:92px}.stock-count{text-align:center;width:130px;color:var(--color-text-3);font-size:13px;position:absolute;top:146px;left:calc(50% - 160px)}.stock-count b,.stock-screen b{font:800 22px/1.2 var(--font-display);color:var(--color-text)}.stock-screen{width:140px;padding:12px 14px;top:38px;left:calc(50% + 20px)}.stock-screen small{color:var(--color-text-3);font-size:12px;display:block}.stock-screen b{height:40px;font-size:30px;display:block}.stock-screen .count{height:40px}.stock-mark{margin-top:2px;font-size:13px;display:block}.stock-screen~.pill{top:162px;left:calc(50% + 20px)}@media (prefers-reduced-motion:reduce){.scene *,.scene:after,.scene-caption>span{transition:none!important;animation:none!important}}
