.sc { --sc-w: #ffffff; --sc-g: #2ee08a; --sc-y: #ffc61a; --sc-b: #3d8bff; --sc-r: #ff3b30;
  margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.sc__screen { position: relative; border-radius: var(--radius, 1rem); overflow: hidden; background: #0b0b0c; box-shadow: 0 1.5rem 3rem rgba(11,11,12,.14); }
.sc__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e4e6e9; }
.sc__punch { position: absolute; inset: 0; transform-origin: 50% 50%; }
.sc__world { position: absolute; left: 0; top: 0; width: 1600px; height: 1200px; transform-origin: 0 0; }
.sc__cam { position: absolute; left: 0; top: 0; width: 1600px; height: 1200px; transform-origin: 0 0; transition: transform 1.3s cubic-bezier(.65,0,.35,1); }
.sc.is-cut .sc__cam { transition: none; }
.sc__bg { position: absolute; left: 0; top: 0; width: 1600px; height: 1200px; display: block; }
.sc__cam > span, .sc__cam > img { position: absolute; display: block; pointer-events: none; }

.sc__mon { overflow: hidden; background: #fff; }
.sc__scr { position: absolute; inset: 0; }
.sc__mon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%); }

.sc__ln i, .sc__glow i, .sc__tint i { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.sc__ln i { border-radius: 3px; }
.sc__ln i[data-c="w"] { background: #fff; box-shadow: 0 0 5px 2px rgba(255,255,255,.95), 0 0 20px 6px rgba(255,255,255,.6); }
.sc__ln i[data-c="g"] { background: #b6ffd9; box-shadow: 0 0 5px 2px var(--sc-g), 0 0 24px 8px rgba(46,224,138,.65); }
.sc__ln i[data-c="y"] { background: #fff1b8; box-shadow: 0 0 5px 2px var(--sc-y), 0 0 24px 8px rgba(255,198,26,.65); }
.sc__ln i[data-c="b"] { background: #cfe3ff; box-shadow: 0 0 5px 2px var(--sc-b), 0 0 24px 8px rgba(61,139,255,.65); }
.sc__ln i[data-c="r"] { background: #ffc9c4; box-shadow: 0 0 5px 2px var(--sc-r), 0 0 26px 9px rgba(255,59,48,.7); }
.sc__glow i { border-radius: 50%; }
.sc__glow i[data-c="w"] { background: radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0)); }
.sc__glow i[data-c="g"] { background: radial-gradient(closest-side, rgba(46,224,138,.34), rgba(46,224,138,0)); }
.sc__glow i[data-c="y"] { background: radial-gradient(closest-side, rgba(255,198,26,.34), rgba(255,198,26,0)); }
.sc__glow i[data-c="b"] { background: radial-gradient(closest-side, rgba(61,139,255,.34), rgba(61,139,255,0)); }
.sc__glow i[data-c="r"] { background: radial-gradient(closest-side, rgba(255,59,48,.38), rgba(255,59,48,0)); }
.sc__tint i[data-c="g"] { background: radial-gradient(55% 90% at 50% 0, rgba(46,224,138,.1), rgba(46,224,138,0)); }
.sc__tint i[data-c="y"] { background: radial-gradient(55% 90% at 50% 0, rgba(255,198,26,.11), rgba(255,198,26,0)); }
.sc__tint i[data-c="b"] { background: radial-gradient(55% 90% at 50% 0, rgba(61,139,255,.09), rgba(61,139,255,0)); }
.sc__tint i[data-c="r"] { background: radial-gradient(55% 90% at 50% 0, rgba(255,59,48,.13), rgba(255,59,48,0)); }
.sc[data-lt="w"] .sc__ln i[data-c="w"], .sc[data-lt="w"] .sc__glow i[data-c="w"],
.sc[data-lt="g"] .sc__ln i[data-c="g"], .sc[data-lt="g"] .sc__glow i[data-c="g"], .sc[data-lt="g"] .sc__tint i[data-c="g"],
.sc[data-lt="y"] .sc__ln i[data-c="y"], .sc[data-lt="y"] .sc__glow i[data-c="y"], .sc[data-lt="y"] .sc__tint i[data-c="y"],
.sc[data-lt="b"] .sc__ln i[data-c="b"], .sc[data-lt="b"] .sc__glow i[data-c="b"], .sc[data-lt="b"] .sc__tint i[data-c="b"],
.sc[data-lt="r"] .sc__ln i[data-c="r"], .sc[data-lt="r"] .sc__glow i[data-c="r"], .sc[data-lt="r"] .sc__tint i[data-c="r"] { opacity: 1; }
.sc[data-lt="r"] .sc__ln i[data-c="r"], .sc[data-lt="r"] .sc__glow i[data-c="r"] { animation: scBlink .5s ease-in-out infinite alternate; }
@keyframes scBlink { from { opacity: 1; } to { opacity: .3; } }
@keyframes scBreath { 50% { opacity: .35; } }

.sc__rd i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid; opacity: 0; transition: opacity .3s ease; }
.sc__rd i[data-c="w"] { border-color: rgba(255,255,255,.8); box-shadow: 0 0 6px rgba(255,255,255,.55); }
.sc__rd i[data-c="b"] { border-color: #8cc0ff; box-shadow: 0 0 10px 2px rgba(61,139,255,.9), inset 0 0 6px rgba(61,139,255,.7); }
.sc__rd i[data-c="g"] { border-color: #7af5b6; box-shadow: 0 0 10px 2px rgba(46,224,138,.9), inset 0 0 6px rgba(46,224,138,.7); }
.sc[data-rd=""] .sc__rd i[data-c="w"], .sc[data-rd="g"] .sc__rd i[data-c="g"] { opacity: 1; }
.sc[data-rd="b"] .sc__rd i[data-c="b"] { opacity: 1; animation: scBreath 1.3s ease-in-out infinite; }

.sc__hl { transform-origin: 50% 50%; }
.sc__hl i { position: absolute; inset: 0; border-radius: 7px; border: 3px solid; opacity: 0; transition: opacity .25s ease; }
.sc__hl .g { border-color: #4cf0a2; box-shadow: 0 0 14px 3px rgba(46,224,138,.75), inset 0 0 10px rgba(46,224,138,.4); }
.sc__hl .r { border-color: #ff6a60; box-shadow: 0 0 16px 4px rgba(255,59,48,.8), inset 0 0 12px rgba(255,59,48,.45); }
.sc__hl[data-s="go"] .g { opacity: 1; animation: scBreath 1.1s ease-in-out infinite; }
.sc__hl[data-s="ok"] .g, .sc__hl[data-s="ng"] .r { opacity: 1; }

.sc__pl { width: 0; height: 0; opacity: 0; transition: opacity .3s ease; }
.sc__pl::before { content: ""; position: absolute; }
.sc__pl--b::before { left: -8px; top: -9px; width: 16px; height: 9px; border-radius: 50%; background: radial-gradient(60% 60% at 40% 35%, #e3e6ea, #8b9098 70%, #5c6168); box-shadow: 0 2px 0 #3a3e44; }
.sc__pl--w::before { left: -9px; top: -6px; width: 18px; height: 8px; border-radius: 50%; border: 3px solid #d9dde2; box-shadow: 0 1px 0 #6a6f77, inset 0 1px 0 #6a6f77; }
.sc[data-placed*="b"] .sc__pl--b, .sc[data-placed*="w"] .sc__pl--w { opacity: 1; }

.sc__cal { width: 159px; height: 116px; max-width: none; transform-origin: 24px 74px; transform: rotate(-6deg) scale(1.02, .5); transition: opacity .15s ease; }
.sc__cal.is-off { opacity: 0; }

.sc__scan { left: 760px; top: 205px; width: 200px; height: 330px; opacity: 0; transition: opacity .3s ease; }
.sc.is-scan .sc__scan { opacity: 1; }
.sc__cone { position: absolute; inset: 0; clip-path: polygon(30px 8px, 50px 8px, 166px 252px, 74px 252px); background: linear-gradient(180deg, rgba(150,195,255,.62), rgba(120,175,255,.14)); }
.sc__sweep { position: absolute; left: 86px; top: 254px; width: 68px; height: 3px; border-radius: 2px; background: #cfe6ff; box-shadow: 0 0 8px 2px rgba(61,139,255,.85); animation: scSweep .7s ease-in-out infinite alternate; }
@keyframes scSweep { from { transform: translateY(0); } to { transform: translateY(64px); } }

.sc__hand { left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.sc__hand img { position: absolute; display: none; max-width: none; height: auto; filter: drop-shadow(0 12px 12px rgba(0,0,0,.24)); }
.sc__hand .h-pinch { left: -14px; top: -20px; width: 437px; }
.sc__hand .h-card { left: -68px; top: -50px; width: 474px; }
.sc__hand .h-qr { left: -64px; top: -78px; width: 410px; }
.sc__hand .h-caliper { left: -22px; top: -81px; width: 490px; }
.sc__hand[data-item="pinch"] .h-pinch, .sc__hand[data-item="card"] .h-card, .sc__hand[data-item="qr"] .h-qr, .sc__hand[data-item="caliper"] .h-caliper { display: block; }
.sc__lcd { position: absolute; display: none; left: 69px; top: -44px; transform: translate(-50%, -50%); font: 700 11px/1 Consolas, "DejaVu Sans Mono", monospace; color: #1f2c18; letter-spacing: 0; }
.sc__hand[data-item="caliper"] .sc__lcd { display: block; }

.sc__part { position: absolute; display: none; background: center / contain no-repeat; }
.sc__part[data-p="bolt"] { left: -10px; top: -6px; width: 20px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'%3E%3Crect x='1' y='1' width='16' height='8' rx='2' fill='%23d3d7dc' stroke='%235d626a'/%3E%3Crect x='5.5' y='9' width='7' height='16' fill='%23b4b9c0' stroke='%235d626a'/%3E%3Cpath d='M5.5 13h7M5.5 16h7M5.5 19h7M5.5 22h7' stroke='%235d626a'/%3E%3C/svg%3E"); }
.sc__part[data-p="washer"] { left: -13px; top: -4px; width: 26px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cellipse cx='11' cy='6' rx='10' ry='5' fill='%23dfe2e6' stroke='%23656a72'/%3E%3Cellipse cx='11' cy='6' rx='4' ry='2' fill='%23555a62'/%3E%3C/svg%3E"); }
.sc__part[data-p="bracket"] { left: -12px; top: -6px; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h7v13h13v7H2z' fill='%23d3d7dc' stroke='%235d626a'/%3E%3C/svg%3E"); }
.sc__hand[data-part="bolt"] .sc__part[data-p="bolt"], .sc__hand[data-part="washer"] .sc__part[data-p="washer"], .sc__hand[data-part="bracket"] .sc__part[data-p="bracket"] { display: block; }

.sc__fx { left: 0; top: 0; }
.sc__pop, .sc__ring, .sc__wave i { opacity: 0; }
.sc__pop { width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: #17a65f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat; box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 8px 20px rgba(0,0,0,.28); }
.sc__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 4px solid var(--sc-g); }
.sc__ring[data-c="r"] { border-color: var(--sc-r); }
.sc__wave i { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--sc-b); }
.sc__vig { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(135% 105% at 50% 50%, rgba(212,45,36,0) 55%, rgba(212,45,36,.34) 100%); box-shadow: inset 0 0 0 3px rgba(212,45,36,.6); }
.sc.is-red .sc__vig { opacity: .8; }

.sc__ctl { position: relative; color: #fff; padding: .55rem 1rem .9rem; }
.sc__seg { display: flex; gap: 4px; margin: 0 0 .5rem; }
.sc__seg i { position: relative; flex: 1 1 0; height: 14px; cursor: pointer; }
.sc__seg i::before, .sc__seg b { position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 2px; }
.sc__seg i::before { content: ""; background: #fff; opacity: .2; transition: opacity .3s; }
.sc__seg i:hover::before { opacity: .36; }
.sc__seg b { background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }
.sc__seg i.is-on::before { opacity: .3; }
.sc__row { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.sc__play { flex: none; display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .8125rem; font-weight: 700; line-height: 1.4; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); border-radius: 100vh; padding: .35rem .9rem; cursor: pointer; }
.sc__play:hover { background: rgba(255,255,255,.18); }
.sc__ic { width: .6rem; height: .7rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.sc.is-paused .sc__ic { width: 0; height: 0; border: 0; border-left: .6rem solid currentColor; border-top: .36rem solid transparent; border-bottom: .36rem solid transparent; }
.sc__now { display: flex; align-items: center; gap: .6rem; min-width: 0; margin: 0; }
.sc__now em { flex: none; font-style: normal; font-family: var(--font-num); font-weight: 600; font-size: .9375rem; line-height: 1.5; background: var(--orange-deep, #d95500); color: #fff; padding: 0 .5rem; border-radius: 4px; }
.sc__now b { font-size: 1.0625rem; font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc__lamp { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: .7rem 0 0; padding-top: .65rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .75rem; line-height: 1.5; }
.sc__lamp-h { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.66); }
.sc__eye { width: 28px; height: 14px; flex: none; color: var(--sc-w); }
.sc[data-lt="g"] .sc__eye { color: var(--sc-g); } .sc[data-lt="y"] .sc__eye { color: var(--sc-y); } .sc[data-lt="b"] .sc__eye { color: var(--sc-b); } .sc[data-lt="r"] .sc__eye { color: var(--sc-r); }
.sc__lamp span[data-c] { position: relative; display: inline-flex; align-items: center; gap: .4rem; opacity: .55; transition: opacity .35s ease; }
.sc__lamp span[data-c] i { position: relative; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); }
.sc__lamp span[data-c] i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 10px 3px var(--c); opacity: 0; transition: opacity .35s ease; }
.sc__lamp span[data-c="w"] { --c: var(--sc-w); } .sc__lamp span[data-c="g"] { --c: var(--sc-g); } .sc__lamp span[data-c="y"] { --c: var(--sc-y); } .sc__lamp span[data-c="b"] { --c: var(--sc-b); } .sc__lamp span[data-c="r"] { --c: var(--sc-r); }
.sc[data-lt="w"] .sc__lamp span[data-c="w"], .sc[data-lt="g"] .sc__lamp span[data-c="g"], .sc[data-lt="y"] .sc__lamp span[data-c="y"],
.sc[data-lt="b"] .sc__lamp span[data-c="b"], .sc[data-lt="r"] .sc__lamp span[data-c="r"] { opacity: 1; font-weight: 700; }
.sc[data-lt="w"] .sc__lamp span[data-c="w"] i::after, .sc[data-lt="g"] .sc__lamp span[data-c="g"] i::after, .sc[data-lt="y"] .sc__lamp span[data-c="y"] i::after,
.sc[data-lt="b"] .sc__lamp span[data-c="b"] i::after, .sc[data-lt="r"] .sc__lamp span[data-c="r"] i::after { opacity: 1; }

.sc__ch { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.sc__ch button { position: relative; isolation: isolate; width: 100%; text-align: left; font: inherit; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-sm, .5rem); padding: .7rem 1rem .8rem 1.1rem; display: grid; grid-template-columns: 2rem 1fr; gap: .1rem .6rem; cursor: pointer; overflow: hidden; }
.sc__ch button::before { content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange); transform: scaleY(0); transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.sc__ch button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); opacity: 0; transition: opacity .35s ease; }
.sc__ch li.is-on button::after { opacity: 1; }
.sc__ch button:hover { color: var(--text); }
.sc__ch em { grid-row: span 3; font-style: normal; font-family: var(--font-num); font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: #c9c9ce; }
.sc__ch b { font-size: .9375rem; line-height: 1.5; }
.sc__txt, .sc__uc { display: none; }
.sc__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }
.sc__ch li.is-on button { color: var(--text); }
.sc__ch li.is-on button::before { transform: scaleY(1); }
.sc__ch li.is-on em { color: var(--orange-deep); }
.sc__ch li.is-on .sc__txt { display: block; font-size: .8125rem; line-height: 1.75; color: var(--text-sub); margin-top: .2rem; animation: scTxt .55s cubic-bezier(.2,.7,.3,1) both; }
.sc__ch li.is-on .sc__uc { display: inline-block; justify-self: start; margin-top: .45rem; font-size: .75rem; font-weight: 700; padding: .05rem .6rem; border-radius: 100vh; background: var(--black); color: #fff; animation: scTxt .55s cubic-bezier(.2,.7,.3,1) .12s both; }
.sc__ch li.is-done em { color: var(--text); }
@keyframes scTxt { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.as { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform: scale(.375); transform-origin: 0 0; background: #eef0f2; font-family: var(--font); color: #16181b; display: flex; flex-direction: column; }
.as.is-new { animation: asIn .4s ease both; }
@keyframes asIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes asPop { from { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes asRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.as p, .as h3, .as dl, .as dd { margin: 0; }
.as--white { background: #fff; } .as--gray { background: #eef0f2; } .as--red { background: #d42d24; color: #fff; flex-direction: row; }
.as-h { flex: none; display: flex; justify-content: space-between; padding: 8px 16px; font-size: 17px; font-weight: 700; color: #fff; }
.as-h--g { background: #138a52; } .as-h--y { background: #f2b705; color: #16181b; } .as-h--b { background: #1f66c1; }
.as-body { flex: 1; display: grid; grid-template-columns: 400px 230px 1fr; gap: 10px; padding: 10px; min-height: 0; }
.as-card { background: #fff; border-radius: 8px; padding: 12px 14px; }
.as-left { display: flex; flex-direction: column; gap: 4px; }
.as-step { align-self: flex-start; font-size: 12px; font-weight: 700; background: #eef0f2; border-radius: 99px; padding: 2px 10px; }
.as h3 { font-size: 25px; line-height: 1.3; margin: 2px 0; font-weight: 700; }
.as-sub { font-size: 14px; color: #5b6068; }
.as-got { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.as-got i { width: 14px; height: 14px; border: 2px solid #138a52; border-radius: 50%; }
.as-got i.is-on { background: #138a52; }
.as.is-new .as-got i.is-on { animation: asPop .5s cubic-bezier(.2,.7,.3,1.3) both; }
.as-sm { font-size: 12px; color: #5b6068; }
.as-tiny { font-size: 12px; line-height: 1.6; }
.as-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.as-bin { position: relative; border: 1px solid #d5d9de; border-radius: 6px; padding: 5px 8px; min-height: 52px; background: #fff; }
.as-bin b { display: block; font-size: 15px; } .as-bin span { font-size: 11px; color: #5b6068; line-height: 1.3; display: block; }
.as-bin i { position: absolute; right: 6px; top: 5px; font-style: normal; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 99px; background: #fff; color: #138a52; }
.as-bin.is-ok { background: #138a52; border-color: #138a52; color: #fff; } .as-bin.is-ok span { color: #e1f3e9; }
.as-bin.is-ng { background: #8d1610; border-color: #8d1610; color: #fff; } .as-bin.is-ng span { color: #fbd5d2; } .as-bin.is-ng i { color: #d42d24; }
.as-next { margin-top: auto; background: #f1f3f5; border-left: 4px solid #c9cdd2; border-radius: 4px; padding: 6px 10px; } .as-next b { font-size: 15px; }
.as-cams { background: #1d1f22; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; color: #e6e8eb; }
.as-cams p { font-size: 12px; }
.as-cam { position: relative; flex: 1; background: #4a4e54; border-radius: 4px; min-height: 120px; overflow: hidden; }
.as-cam--top::before { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; bottom: 8px; border: 1px solid #8f959d; border-radius: 2px; }
.as-roi { position: absolute; width: 34px; height: 28px; border: 1px solid #bcc2c9; border-radius: 2px; }
.as-roi.is-go { border: 2px dashed #2ee08a; }
.as-roi.is-ok { border: 3px solid #2ee08a; background: rgba(46,224,138,.28); }
.as-roi.is-ng { border: 3px solid #ff5248; background: rgba(255,82,72,.32); }
.as-work { position: absolute; left: 58px; right: 58px; top: 24px; bottom: 30px; background: rgba(215,218,222,.3); border: 1px solid #c3c8ce; }
.as-qr { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; background: conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 15px 15px; border: 6px solid #fff; }
.as-qr.is-ok { outline: 4px solid #2ee08a; outline-offset: 4px; }
.as-aim { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 2px dashed rgba(255,255,255,.6); border-radius: 6px; }
.as-read { position: absolute; left: 8px; right: 8px; bottom: 8px; font-style: normal; font-size: 14px; font-weight: 700; background: #138a52; color: #fff; border-radius: 4px; padding: 4px 8px; text-align: center; }
.as-right { display: flex; flex-direction: column; gap: 10px; }
.as-meas { flex: 1; } .as-meas.is-wait { outline: 3px solid #f2b705; }
.as-nom { font-size: 14px; color: #5b6068; margin-top: 4px; }
.as-val { font-family: var(--font-num); font-size: 44px; font-weight: 700; line-height: 1.2; }
.as-chip { display: inline-block; font-size: 15px; font-weight: 700; padding: 1px 12px; border-radius: 99px; }
.as-chip.is-ok { background: #e3f3ea; color: #138a52; } .as-chip.is-ng { background: #fbe6e5; color: #d42d24; }
.as.is-new .as-chip { animation: asPop .55s cubic-bezier(.2,.7,.3,1.3) .1s both; }
.as-tl { flex: none; display: flex; gap: 5px; padding: 0 10px 10px; }
.as-tl span { flex: 1; font-size: 11px; font-weight: 700; text-align: center; background: #fff; border: 1px solid #d5d9de; border-radius: 4px; padding: 6px 0; white-space: nowrap; }
.as-tl .is-cur { background: #16181b; color: #fff; border-color: #16181b; } .as-tl .is-done { background: #e3f3ea; border-color: #b9e0c9; }
.as-login { flex: 1; display: grid; grid-template-columns: 1fr 360px; gap: 18px; padding: 22px 28px 26px; min-height: 0; }
.as-login h3 { font-size: 30px; }
.as-chk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.as-chk span { font-size: 14px; font-weight: 700; background: #f1f3f5; border-radius: 6px; padding: 7px 10px; }
.as-chk span::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: #138a52; color: #fff; font-size: 12px; }
.as-cams--one { height: 100%; } .as-cam--big { min-height: 300px; }
.as-ng { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.as-ng h3 { font-size: 34px; } .as-ng p { font-size: 19px; line-height: 1.5; } .as-ng .as-big { font-size: 24px; font-weight: 700; }
.as.is-new .as-ng h3 { animation: asPop .5s cubic-bezier(.2,.7,.3,1.2) both; transform-origin: 0 50%; }
.as-ng .as-bin { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; } .as-ng .as-bin span { color: #ffd9d6; }
.as-ng .as-bin.is-ok { background: #138a52; border-color: #138a52; } .as-ng .as-bin.is-ng { background: #8d1610; border-color: #fff; }
.as-bar { margin-top: auto; background: #9e1d16; border-left: 6px solid #fff; border-radius: 4px; padding: 10px 14px; font-size: 20px !important; font-weight: 700; }
.as--red .as-cams { flex: none; width: 230px; margin: 14px 14px 14px 0; }
.as-done { margin: auto; width: 640px; background: #fff; border-radius: 10px; border-top: 6px solid #138a52; padding: 26px 32px; }
.as-done h3 { color: #138a52; font-size: 30px; }
.as-done dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; margin: 16px 0; font-size: 17px; } .as-done dt { color: #5b6068; } .as-done dd { font-weight: 700; }
.as.is-new .as-done dt, .as.is-new .as-done dd { animation: asRow .45s ease both; }
.as.is-new .as-done dt:nth-of-type(2), .as.is-new .as-done dd:nth-of-type(2) { animation-delay: .25s; }
.as.is-new .as-done dt:nth-of-type(3), .as.is-new .as-done dd:nth-of-type(3) { animation-delay: .5s; }
.as.is-new .as-done dt:nth-of-type(4), .as.is-new .as-done dd:nth-of-type(4) { animation-delay: .75s; }
.as-saved { display: inline-block; font-size: 17px; font-weight: 700; color: #138a52; background: #e3f3ea; padding: 3px 14px; border-radius: 99px; }
.as.is-new .as-saved { animation: asPop .55s cubic-bezier(.2,.7,.3,1.3) 1.15s both; }

@media (max-width: 900px) {
  .sc { grid-template-columns: 1fr; gap: 1rem; }
  .sc__ch button { padding: .55rem .75rem .65rem .9rem; }
}
@media (max-width: 640px) {
  .sc { margin-top: 2rem; }
  .sc__ctl { padding: .45rem .7rem .75rem; }
  .sc__row { gap: .6rem; }
  .sc__play { padding: .3rem .7rem; font-size: .75rem; }
  .sc__now { gap: .45rem; }
  .sc__now em { font-size: .8125rem; padding: 0 .4rem; }
  .sc__now b { font-size: .875rem; }
  .sc__lamp { gap: .2rem .55rem; font-size: .6875rem; margin-top: .55rem; padding-top: .5rem; letter-spacing: 0; }
  .sc__lamp span[data-c] { gap: .28rem; }
  .sc__lamp span[data-c] i { width: .5rem; height: .5rem; }
  .sc__lamp-h { flex-basis: 100%; }
}
.sc.is-rm .sc__play { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sc *, .sc *::before, .sc *::after { animation: none !important; transition: none !important; }
}