#factory { background: #2b3049; display: flex; flex-direction: column; }

/* ---------- Top panel ---------- */
.factory-panel { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #1f2338; color: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.25); z-index: 5; }
.fp-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fp-title b { display: block; font-size: 17px; white-space: nowrap; }
.fp-title code { background: none; color: #9aa0bd; padding: 0; display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-roof { width: 26px; height: 26px; border-radius: 6px; clip-path: polygon(0 100%, 0 30%, 33% 0, 33% 30%, 66% 0, 66% 30%, 100% 0, 100% 100%); flex: none; }
.fp-counters { display: flex; gap: 6px; margin-left: auto; }
.fp-count { background: rgba(255,255,255,.1); border-radius: 999px; padding: 4px 10px; font-size: 13px; white-space: nowrap; transition: opacity .2s; }
.fp-count.zero { opacity: .45; }
.fp-count.question:not(.zero) { background: rgba(255,200,61,.25); }
.fp-count.review:not(.zero) { background: rgba(165,147,245,.3); }
.fp-actions { display: flex; gap: 8px; }

/* ---------- Stage ---------- */
.stage-wrap { position: relative; flex: 1; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #3a4166, #23273d); }
.stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden; border-radius: 6px; }
.layer { position: absolute; inset: 0; width: var(--layer-w, 1600px); height: 900px; }
.stage-wrap.panning, .stage-wrap.panning * { cursor: grabbing !important; }

/* horizontal scroll HUD (only when the warehouse makes the floor wider than the screen) */
.pan-hud { position: absolute; right: 14px; top: 10px; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 999px;
  background: rgba(20,23,38,.72); box-shadow: 0 3px 10px rgba(0,0,0,.3); backdrop-filter: blur(4px); }
.pan-hud[hidden] { display: none; }
.pan-hud button { width: 28px; height: 28px; border: none; border-radius: 50%; background: #3b3f58; color: #fff; font-size: 12px; cursor: pointer; }
.pan-hud button:hover:not(:disabled) { background: #ffc83d; color: #23263a; }
.pan-hud button:disabled { opacity: .35; cursor: default; }
.pan-track { position: relative; width: min(220px, 28vw); height: 10px; border-radius: 5px; background: rgba(255,255,255,.14); cursor: pointer; touch-action: none; }
.pan-thumb { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: #ffc83d; min-width: 14px; }
svg.layer { pointer-events: none; overflow: visible; }
.layer.boxes, .layer.ui { pointer-events: none; }
.layer.bg .pallet-zone { pointer-events: auto; cursor: pointer; }
.layer.bg text { font-family: var(--font); }
.layer .puff { transform-box: fill-box; transform-origin: center; }

.win { fill: url(#skyGrad); stroke: #23263a; stroke-width: 6; }
.mullion { stroke: #23263a; stroke-width: 5; }
.win-shine { fill: #fff; opacity: .35; }
.truss path { fill: none; stroke: #3b4266; stroke-width: 4; }
.rail { fill: #5c6378; stroke: #23263a; stroke-width: 2; }
.stencil { font-size: 22px; font-weight: 900; letter-spacing: .12em; fill: #fff; opacity: .16; text-anchor: middle; }

.belt-frame { fill: #23263a; }
.belt-band { fill: #3b3f58; }
.belt-rail { fill: #ffc83d; stroke: #b88a12; stroke-width: 2; }
.belt .leg { fill: #5c6378; }
.belt .foot { fill: #23263a; }
.belt .tread { stroke: #6b7194; stroke-width: 4; stroke-dasharray: 14 12; stroke-linecap: round; }
.belt.running .tread { animation: tread .45s linear infinite; }
@keyframes tread { to { stroke-dashoffset: -26; } }
.roller circle { fill: #8b92b3; stroke: #23263a; stroke-width: 2; }
.roller path { stroke: #23263a; stroke-width: 2; }
.roller .spin { transform-box: fill-box; transform-origin: center; }
.belt.running .roller .spin { animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pipe-body, .pipe-mouth { fill: #8b92b3; stroke: #23263a; stroke-width: 4; }
.pipe-mouth { transform-box: fill-box; transform-origin: 50% 0; }
.pipe-shine { fill: #fff; opacity: .25; }
.pipe-joint, .pipe-lip { fill: #5c6378; stroke: #23263a; stroke-width: 3; }
.pipe-sign rect { fill: #ffc83d; stroke: #23263a; stroke-width: 3; }
.pipe-sign text { font-size: 14px; font-weight: 900; text-anchor: middle; fill: #23263a; font-family: var(--font); }

.shelf-board { fill: #a7704a; stroke: #6e4535; stroke-width: 3; }
.bracket { fill: #5c6378; }
.shelf-tag { fill: #ffc83d; }
.shelf-text { font-size: 12px; font-weight: 900; text-anchor: middle; fill: #23263a; }

.qa-table .t-top { fill: #c08a52; stroke: #7a4b2a; stroke-width: 3; }
.qa-table .t-apron { fill: #9c6a37; }
.qa-table .t-leg { fill: #7a4b2a; }
.qa-table .t-text { font-size: 12px; font-weight: 900; fill: #ffe2b8; text-anchor: middle; letter-spacing: .06em; }

/* ---------- Warehouse: one pallet per day ---------- */
.wh-bay { fill: #000; opacity: .1; }
.wh-pillar rect { fill: #3b4266; }
.wh-pillar .wh-pillar-cap { fill: #2a2f4a; }
.wh-legend-board { fill: #23263a; stroke: #ffc83d; stroke-width: 3; }
.wh-legend-title { font-size: 12px; font-weight: 900; fill: #ffc83d; text-anchor: middle; letter-spacing: .08em; }
.wh-legend-text { font-size: 12px; font-weight: 700; fill: #e6e9ff; }
.pallet-hit { fill: transparent; }
.pallet-sign rect { fill: rgba(0,0,0,.35); transition: fill .15s; }
.pallet-sign .ps-day { font-size: 14px; font-weight: 800; fill: #fff; text-anchor: middle; }
.pallet-sign .ps-stats { font-size: 13px; font-weight: 700; fill: #c3c9e0; text-anchor: middle; }
.pallet-zone.today .pallet-sign rect { fill: rgba(255,200,61,.28); }
.pallet-zone:hover .pallet-sign rect { fill: var(--green); }
.pallet-more rect { fill: #23263a; stroke: #ffc83d; stroke-width: 2; }
.pallet-more text { font-size: 13px; font-weight: 900; fill: #ffc83d; text-anchor: middle; }

/* ---------- Boxes ---------- */
.box { position: absolute; left: 0; top: 0; width: 84px; height: 72px; transform-origin: 50% 100%; pointer-events: auto; cursor: pointer;
  will-change: transform; user-select: none; touch-action: none; }
.box-body { position: absolute; inset: 0; border-radius: 6px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, var(--cardboard-light) 0, var(--cardboard) 22%, #c68a4d 100%);
  box-shadow: inset 0 -7px 0 rgba(90,50,10,.18), inset 0 2px 0 rgba(255,255,255,.35), inset 2px 0 0 rgba(255,255,255,.15), 0 0 0 2px rgba(60,35,10,.55); }
.box-flaps { position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: rgba(110,60,15,.4); }
.box-tape { position: absolute; left: 50%; width: 16px; margin-left: -8px; top: 0; height: 17px; background: rgba(245,222,170,.9); box-shadow: 0 0 0 1px rgba(150,100,40,.25); }
.box-seal { position: absolute; left: -2px; right: -2px; top: 6px; height: 12px; background: #e9d8b0; transform: scaleX(0); transform-origin: left; opacity: .95;
  box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.box.sealed .box-seal { transform: scaleX(1); }
.box-strap { position: absolute; left: 14px; top: 0; bottom: 0; width: 9px; background: var(--red); display: none; box-shadow: 0 0 0 1px rgba(120,20,10,.4); }
.box.flag-rejected .box-strap { display: block; }
.box-label { position: absolute; left: 8px; right: 8px; bottom: 9px; height: 32px; background: var(--paper); border-radius: 3px; padding: 3px 5px;
  font-size: 8.5px; line-height: 1.12; color: #3b3f58; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.box-label b { display: block; font-size: 10px; color: var(--primary-dark); }
.box-ribbon { position: absolute; top: -8px; right: -8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 900; padding: 2px 5px;
  border-radius: 5px; transform: rotate(10deg); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.box-ribbon:empty { display: none; }
.box-q { position: absolute; top: -14px; left: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #3d2e00;
  font-weight: 900; font-size: 16px; text-align: center; line-height: 26px; box-shadow: 0 0 0 2px #23263a, 0 0 14px rgba(255,200,61,.8); display: none; }
.box.flag-q .box-q { display: block; animation: qbob 1.1s ease-in-out infinite; }
@keyframes qbob { 50% { transform: translateY(-5px) rotate(-8deg); } }
.box-shadow { position: absolute; left: 2px; right: 2px; bottom: -6px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.4); filter: blur(3px); }
.box-confirm { display: none; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); white-space: nowrap; border: none; border-radius: 999px;
  background: var(--green); color: #fff; font: inherit; font-size: 11px; font-weight: 800; padding: 4px 9px; cursor: pointer; box-shadow: 0 3px 0 var(--green-dark); }
.box.draft .box-body { background: repeating-linear-gradient(-45deg, #e8d3b4 0 8px, #e1c8a4 8px 16px); box-shadow: 0 0 0 2px #85b8ff, inset 0 -6px 0 rgba(0,0,0,.08); }
.box.draft .box-label b { color: #0055cc; }
.box.draft:hover .box-confirm { display: block; }
.box:hover .box-body { filter: brightness(1.08); }
.box.dragging { cursor: grabbing; }
.box.dragging .box-body { transform: translateY(-16px) rotate(-4deg); transition: transform .15s; }
.box.dragging .box-shadow { transform: scale(.8); opacity: .6; }
.box.reviewing .box-label { box-shadow: 0 0 0 2px #a593f5; }
/* complexity color: tinted cardboard + a solid band + dots on the sticker */
.box.cx .box-body { background: linear-gradient(180deg, color-mix(in srgb, var(--cx) 40%, var(--cardboard-light)) 0, color-mix(in srgb, var(--cx) 52%, var(--cardboard)) 22%,
  color-mix(in srgb, var(--cx) 58%, #b07a45) 100%); }
.box-cx-band { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border-radius: 0 0 6px 6px; background: var(--cx); display: none; box-shadow: inset 0 1px 0 rgba(0,0,0,.25); }
.box.cx .box-cx-band { display: block; }
.box-cx { position: absolute; right: 4px; top: 3px; font-style: normal; font-size: 7.5px; letter-spacing: -.5px; color: color-mix(in srgb, var(--cx) 70%, #000); }
.box.cx .box-seal { background: color-mix(in srgb, var(--cx) 35%, #f3e6c6); }

@media (max-width: 1100px) { .fp-counters .fp-count b { font-size: 12px; } .fp-title code { display: none; } }
@media (max-width: 860px) { .fp-counters { display: none; } }

/* ---------- AI machine ---------- */
.machine { --eye: #6b7194; --glow: transparent; }
.machine.m-idle { --eye: #4fd8ff; --glow: rgba(79,216,255,.7); }
.machine.m-working { --eye: #ff9f43; --glow: rgba(255,159,67,.8); }
.machine.m-asking { --eye: #ffc83d; --glow: rgba(255,200,61,.9); }
.machine.m-paused { --eye: #8b92b3; }
.m-plinth { fill: #23263a; }
.hz { fill: #ffc83d; opacity: .85; }
.m-body { fill: #5b6aa3; stroke: #23263a; stroke-width: 4; transform-box: fill-box; transform-origin: 50% 100%; }
.m-off .m-body, .m-paused .m-body { fill: #4c5478; }
.m-body-shine { fill: #fff; opacity: .12; }
.m-dome { fill: #6f7fbd; stroke: #23263a; stroke-width: 4; }
.m-off .m-dome, .m-paused .m-dome { fill: #59618a; }
.m-antenna { fill: #23263a; }
.m-antenna-tip { fill: #6b7194; }
.m-idle .m-antenna-tip, .m-working .m-antenna-tip { fill: #ff5a4f; animation: blink 1.2s steps(2) infinite; }
.m-eye-ring { fill: #23263a; }
.m-eye { fill: var(--eye); filter: drop-shadow(0 0 10px var(--glow)); transition: fill .4s; }
.m-idle .m-eye { animation: eye-breathe 2.6s ease-in-out infinite; }
@keyframes eye-breathe { 50% { opacity: .65; } }
.m-iris { transform-box: fill-box; transform-origin: center; }
.m-iris-ring { fill: none; stroke: #23263a; stroke-width: 4; stroke-dasharray: 10 6; opacity: .6; }
.m-working .m-iris { animation: spin 1.4s linear infinite; }
.m-asking .m-iris { animation: spin .5s linear infinite; }
.m-eye-glint { fill: #fff; opacity: .7; }
.m-beacon-light { fill: #6b7194; transform-box: fill-box; transform-origin: 50% 100%; }
.m-asking .m-beacon-light { fill: #ffc83d; animation: beacon .35s steps(2) infinite; filter: drop-shadow(0 0 12px #ffc83d); }
@keyframes beacon { 50% { fill: #ff9f1c; transform: scaleX(-1); } }
.m-vent { fill: #5c6378; stroke: #23263a; stroke-width: 3; }
.m-vent-cap { fill: #23263a; }
.m-bezel { fill: #23263a; }
.m-glass { fill: #0c1a14; stroke: #2d4a3b; stroke-width: 2; }
.m-off .m-glass { fill: #121420; }
.m-gearbay { fill: #2f3552; stroke: #23263a; stroke-width: 3; }
.gear { transform-box: fill-box; transform-origin: center; fill: #c3c9e0; }
.gear.g2 { fill: #ffc83d; }
.gear.g3 { fill: #8b92b3; }
.gear-hub { fill: #23263a; }
.m-working .gear { animation: spin 2.4s linear infinite; }
.m-working .gear.g2 { animation-direction: reverse; animation-duration: 1.4s; }
.m-idle .gear { animation: spin 14s linear infinite; }
.m-idle .gear.g2 { animation-direction: reverse; animation-duration: 9s; }
.m-window-frame { fill: none; stroke: #23263a; stroke-width: 8; }
.m-window { fill: rgba(150,220,255,.12); stroke: #8b92b3; stroke-width: 3; }
.m-window-shine { fill: #fff; opacity: .18; }
.m-interior { fill: #151827; }
.m-scan { fill: #ff9f43; opacity: 0; filter: drop-shadow(0 0 6px #ff9f43); }
.m-working .m-scan { opacity: .9; animation: scan 1.3s ease-in-out infinite alternate; }
@keyframes scan { to { transform: translateY(78px); } }
.m-gate-frame { fill: #23263a; }
.m-slat { fill: #ffc83d; stroke: #b88a12; stroke-width: 1.5; }
.m-ramp { fill: #8b92b3; stroke: #23263a; stroke-width: 3; }
.m-console { fill: #2f3552; stroke: #23263a; stroke-width: 3; }
.m-brand { font-family: var(--mono); font-size: 10px; font-weight: 700; fill: #8b92b3; text-anchor: middle; letter-spacing: .2em; }

.m-screen { position: absolute; left: 944px; top: 330px; width: 192px; height: 88px; padding: 4px 6px; font-family: var(--mono); font-size: 9.5px;
  line-height: 1.25; color: #4dff9a; display: flex; flex-direction: column; overflow: hidden; text-shadow: 0 0 4px rgba(77,255,154,.6); }
.m-screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); pointer-events: none; }
.m-lines { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.m-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-line.typing { animation: type .5s steps(24) both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.m-line.k-tool { color: #7fd3ff; }
.m-line.k-commit { color: #ffd34d; }
.m-line.k-question { color: #ffc83d; }
.m-line.k-ok { color: #a6ffcb; font-weight: 700; }
.m-line.k-sys { color: #8b92b3; }
.m-line.k-out { color: #e6e9ff; }
.m-status { flex: none; border-top: 1px solid rgba(77,255,154,.35); margin-top: 2px; padding-top: 2px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-screen.s-off { color: #6b7194; text-shadow: none; }
.m-screen.s-off .m-status { border-color: #3b3f58; }
.m-screen.s-asking .m-status { color: #ffc83d; animation: blink .6s steps(2) infinite; }
.m-screen.s-working .m-status::after { content: '▌'; animation: blink .8s steps(2) infinite; }
.box.processing .box-body { animation: rumble .18s linear infinite; }
@keyframes rumble { 25% { transform: translate(1px, -1px) rotate(.5deg); } 75% { transform: translate(-1px, 0) rotate(-.5deg); } }

/* ---------- Machine console ---------- */
.m-panel { position: absolute; left: 942px; top: 646px; width: 196px; height: 88px; display: flex; flex-direction: column; gap: 5px; pointer-events: auto; }
.mp-row { display: flex; gap: 5px; align-items: center; }
.mp-run { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#3ee07f, #1fae5c); color: #fff; font: inherit; font-weight: 900; font-size: 14px; box-shadow: 0 4px 0 #157a40, inset 0 2px 0 rgba(255,255,255,.4);
  transition: transform .1s, box-shadow .1s; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.mp-run:active { transform: translateY(3px); box-shadow: 0 1px 0 #157a40; }
.mp-run.stop { background: linear-gradient(#ff6b5f, #d93a2f); box-shadow: 0 4px 0 #9c2119, inset 0 2px 0 rgba(255,255,255,.4); }
.mp-run:disabled { filter: grayscale(.6); cursor: default; }
.mp-ico { font-size: 16px; }
.mp-leds { display: flex; flex-direction: column; gap: 3px; }
.mp-leds label { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: #c3c9e0; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.led { width: 9px; height: 9px; border-radius: 50%; background: #23263a; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
#ledTerm.on { background: #3ee07f; box-shadow: 0 0 8px #3ee07f; }
#ledHead.on { background: #ff9f43; box-shadow: 0 0 8px #ff9f43; animation: blink 1s steps(2) infinite; }
.mp-agent, .mp-hist, .mp-auto, .mp-sel { height: 22px; border: none; border-radius: 7px; background: #23263a; color: #e6e9ff; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.mp-agent { flex: 1; min-width: 0; text-align: left; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-hist { width: 28px; flex: none; }
.mp-sel { flex: 1; min-width: 0; width: auto; padding: 0 7px; margin: 0; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; }
.mp-sel option { color: #23263a; background: #fff; }
.mp-auto { flex: none; padding: 0 7px; color: #a6ffcb; white-space: nowrap; }
.mp-auto.single { color: #ffc83d; box-shadow: inset 0 0 0 1.5px #ffc83d; }
.mp-agent:hover, .mp-hist:hover, .mp-auto:hover, .mp-sel:hover { background: #3b3f58; }
.mp-sel:focus-visible, .mp-auto:focus-visible { outline: 2px solid #ffc83d; outline-offset: 1px; }

.runs { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.run { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: #fff; }
.run summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.run .comment-body { margin-top: 8px; font-size: 13px; }
.run-state { font-weight: 800; }
.run-done .run-state { color: var(--green-dark); }
.run-failed .run-state { color: var(--red); }
.run-running .run-state { color: var(--primary-dark); }
.run-error { white-space: pre-wrap; background: var(--red-bg); border-radius: 6px; padding: 8px; font-size: 11px; max-height: 200px; overflow: auto; }

/* ---------- Robot arm ---------- */
.layer.carry { pointer-events: none; }
.arm { transition: opacity .25s; }
.arm-trolley rect { fill: #23263a; stroke: #ffc83d; stroke-width: 3; }
.arm-trolley circle { fill: #5c6378; stroke: #23263a; stroke-width: 3; }
.arm-seg { stroke-linecap: round; }
.arm-seg.upper, .arm-seg.fore { stroke: #23263a; stroke-width: 26; }
.arm-seg.upper-core, .arm-seg.fore-core { stroke: #ffc83d; stroke-width: 18; }
.arm-seg.fore-core { stroke: #ff9f1c; }
.arm-joint { fill: #3b3f58; stroke: #23263a; stroke-width: 4; }
.arm-joint.wrist { fill: #ffc83d; }
.arm-hand { fill: #5c6378; stroke: #23263a; stroke-width: 3; }
.finger path { fill: none; stroke: #23263a; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }

/* layer stacking (walker can drop behind the review belt) */
.stage > .layer.bg { z-index: 1; }
.stage > .layer.walker-layer.behind { z-index: 2; }
.stage > .layer.boxes { z-index: 3; }
.stage > .layer.walker-layer { z-index: 4; }
.stage > .layer.fg { z-index: 5; }
.stage > .layer.visitor-layer { z-index: 6; }
.stage > .layer.ui { z-index: 6; }
.stage > .layer.carry { z-index: 7; }
.stage > .layer.arm { z-index: 8; }

/* «Підключи Slack» banner: big, top-centre, bouncing until Slack is connected */
.slack-nag { position: absolute; left: 50%; top: 74px; z-index: 12; transform: translate(-50%, 0); width: min(640px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 16px; border-radius: 18px; background: #4a154b; color: #fff; border: 3px solid #23263a;
  box-shadow: 0 6px 0 rgba(35, 38, 58, .35), 0 14px 30px rgba(0, 0, 0, .3); animation: sn-bounce 1.6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.sn-icon { font-size: 34px; line-height: 1; flex: none; animation: sn-wiggle 1.6s ease-in-out infinite; }
.sn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-text b { font-size: 19px; }
.sn-text small { font-size: 13px; line-height: 1.35; color: #f2dcf3; }
.sn-go { flex: none; font-size: 15px; padding: 10px 16px; }
.sn-close { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.sn-close:hover { background: rgba(255, 255, 255, .3); }
.slack-nag:hover { animation-play-state: paused; }
.slack-nag:hover .sn-icon { animation-play-state: paused; }
@keyframes sn-bounce { 0%, 55%, 100% { transform: translate(-50%, 0); } 20% { transform: translate(-50%, 12px); } 35% { transform: translate(-50%, -4px); } }
@keyframes sn-wiggle { 0%, 55%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg) scale(1.15); } 35% { transform: rotate(10deg); } }
@media (max-width: 640px) {
  .slack-nag { flex-wrap: wrap; top: 64px; }
  .sn-go { width: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) { .slack-nag, .sn-icon { animation: none; } }