.usb {
  --usb-blue: #13314d;
  --usb-deep: #00101f;
  --usb-mid: #315d80;
  --usb-pale: #e9f1f7;
  --usb-line: #ced9e1;
  --usb-paper: #f5f7f9;
  color: #08131f;
}
.usb * { box-sizing: border-box; }
.usb button, .usb input, .usb textarea { font: inherit; }
.usb button { color: inherit; }
.usb__intro { display: grid; grid-template-columns: .45fr 1.55fr; gap: clamp(28px, 7vw, 110px); align-items: start; margin-bottom: clamp(64px, 8vw, 112px); }
.usb__intro > div { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 5vw, 80px); align-items: end; }
.usb__intro h2 { margin: 0; font-size: clamp(46px, 6vw, 84px); line-height: .98; }
.usb__intro p { margin: 0; color: #627080; font-size: 17px; }
.usb__eyebrow { color: var(--usb-mid) !important; font-size: 15px !important; font-weight: 650; }
.usb__step-number { display: flex; align-items: center; gap: 12px; color: var(--usb-mid); font-size: 14px; font-weight: 650; }
.usb__step-number span { color: #08131f; font-size: 26px; font-weight: 500; }

.usb__model-step { padding-block: 38px 70px; border-top: 1px solid var(--usb-line); }
.usb__step-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: baseline; margin: 26px 0 34px; }
.usb__step-copy h3 { margin: 0; font-size: clamp(32px, 4vw, 54px); }
.usb__step-copy p { margin: 0; color: #627080; }
.usb__model-options { display: grid; border-top: 1px solid var(--usb-line); }
.usb__model-options button { display: grid; grid-template-columns: 130px 1fr auto; gap: 28px; align-items: center; min-height: 138px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--usb-line); background: transparent; text-align: left; cursor: pointer; transition: padding .25s, color .2s, background .2s; }
.usb__model-options button:hover, .usb__model-options button:focus-visible { padding-inline: 14px; background: var(--usb-paper); }
.usb__model-options button.is-active { padding-inline: 14px; background: var(--usb-deep); color: #fff; }
.usb__model-preview { width: 130px; height: 96px; display: grid; place-items: center; overflow: hidden; background: var(--usb-pale); }
.usb__model-preview img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.usb__model-preview i { position: relative; width: 74px; height: 38px; border: 2px solid var(--usb-blue); background: #94b1c6; }
.usb__model-preview i::before { position: absolute; inset: 4px 4px auto; height: 8px; background: var(--usb-blue); content: ""; }
.usb__model-copy { display: grid; gap: 8px; }
.usb__model-copy strong { font-size: clamp(25px, 2.4vw, 36px); font-weight: 560; letter-spacing: -.035em; }
.usb__model-copy small { color: #627080; font-size: 13px; }
.usb__model-options button.is-active small { color: #b9cad6; }
.usb__model-select { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 650; }
.usb__model-select i { font-style: normal; transition: transform .2s; }
.usb__model-options button:hover .usb__model-select i { transform: translateX(5px); }

.usb__builder { padding-top: 50px; }
.usb__builder[hidden] { display: none; }
.usb__builder-heading { display: grid; grid-template-columns: .42fr 1.58fr; gap: clamp(28px, 7vw, 110px); align-items: start; margin-bottom: 34px; }
.usb__builder-heading h3 { margin: 0 0 10px; font-size: clamp(34px, 4vw, 56px); }
.usb__builder-heading p { margin: 0; color: #627080; }
.usb__first-hint { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 30px min(22vw, 300px); padding: 15px 0; border-block: 1px solid var(--usb-line); color: #526273; font-size: 14px; }
.usb__first-hint[hidden] { display: none; }
.usb__first-hint button { width: 34px; height: 34px; flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; font-size: 22px; }

.usb__layout { display: grid; grid-template-columns: minmax(190px, .56fr) minmax(500px, 1.7fr) minmax(220px, .68fr); border-top: 1px solid var(--usb-line); border-bottom: 1px solid var(--usb-line); }
.usb__layout > * { min-width: 0; }
.usb__palette, .usb__summary { padding: 24px 22px; background: #fff; }
.usb__palette { border-right: 1px solid var(--usb-line); }
.usb__summary { border-left: 1px solid var(--usb-line); }
.usb__panel-heading, .usb__workspace-heading { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--usb-line); }
.usb__workspace-heading { grid-template-columns: auto 1fr auto; align-items: center; }
.usb__panel-heading > span, .usb__workspace-heading > span { color: var(--usb-mid); font-size: 12px; }
.usb__panel-heading h3, .usb__workspace-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.usb__panel-heading small { grid-column: 2; color: #71808d; font-size: 11px; }
.usb__module-list { display: grid; }
.usb__module-option { display: grid; grid-template-columns: 48px 1fr 24px; gap: 10px; align-items: center; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--usb-line); background: transparent; text-align: left; cursor: pointer; }
.usb__module-option:hover, .usb__module-option:focus-visible { color: var(--usb-mid); }
.usb__module-option > span:nth-child(2) { display: grid; min-width: 0; }
.usb__module-option strong { font-size: 13px; line-height: 1.25; }
.usb__module-option small { color: #71808d; font-size: 10px; }
.usb__plus { justify-self: end; font-size: 20px; }
.usb__module-icon { position: relative; width: 42px; height: 36px; overflow: hidden; border: 1px solid #315d80; border-radius: 6px 6px 10px 10px; background: linear-gradient(145deg, #dce8f0, #9db9cc); box-shadow: inset 0 -3px 6px rgba(19,49,77,.12); }
.usb__module-icon::before { position: absolute; inset: 3px 3px auto; height: 7px; border: 1px solid rgba(19,49,77,.2); border-radius: 4px; background: #6387a2; content: ""; }
.usb__module-icon::after { position: absolute; left: 8%; right: 8%; bottom: 4px; height: 1px; background: rgba(19,49,77,.35); content: ""; }
.usb__module-icon--double { width: 46px; }
.usb__module-icon--corner::after { left: 3px; right: auto; top: 3px; bottom: auto; width: 7px; height: 26px; border-radius: 4px; background: #6387a2; }
.usb__module-icon--chaise-left, .usb__module-icon--chaise-right { width: 27px; height: 44px; }
.usb__module-icon--arm-left, .usb__module-icon--arm-right { width: 12px; border-radius: 6px; background: linear-gradient(90deg, #7799b1, #c7d9e5); }
.usb__module-icon--pouf::before { display: none; }

.usb__workspace { min-width: 0; background: var(--usb-pale); }
.usb__workspace-heading { padding: 24px 24px 18px; background: #fff; }
.usb__view-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--usb-line); border-radius: 999px; background: #f2f5f7; }
.usb__view-switch button { min-height: 30px; padding: 5px 10px; border: 0; border-radius: 999px; background: transparent; color: #5f6e7a; font-size: 10px; font-weight: 670; cursor: pointer; }
.usb__view-switch button small { margin-left: 3px; color: inherit; font-size: 8px; font-weight: 550; opacity: .72; }
.usb__view-switch button.is-active { background: var(--usb-blue); color: #fff; box-shadow: 0 2px 7px rgba(19,49,77,.18); }
.usb__view-switch button:disabled { cursor: not-allowed; opacity: .38; }
.usb__stage-wrap { padding: 18px; }
.usb__stage { position: relative; width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 7 / 5; min-height: 420px; overflow: hidden; touch-action: none; border: 1px solid #bfcdd7; background-color: #f8fafb; background-image: linear-gradient(rgba(19,49,77,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(19,49,77,.09) 1px, transparent 1px); background-size: calc(100% / 70) calc(100% / 50); }
.usb__stage.is-volume { touch-action: pan-y; background-color: #e8e4df; background-image: radial-gradient(circle at 50% 18%, rgba(255,255,255,.98), rgba(250,248,245,.72) 38%, transparent 70%), linear-gradient(168deg, transparent 0 61%, rgba(92,78,66,.08) 61.2%, transparent 61.7%), linear-gradient(180deg, #f4f2ef 0 61%, #d8d1ca 61% 100%); background-repeat: no-repeat; background-size: 100% 100%; }
.usb__stage:focus-visible { outline: 3px solid #4a8fc2; outline-offset: 2px; }
.usb__stage-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: #72818d; pointer-events: none; }
.usb__stage-empty span { font-size: 42px; font-weight: 300; }
.usb__stage-empty strong { font-size: 18px; }
.usb__stage-empty small { margin-top: 4px; }
.usb__volume-scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.usb__iso-shadow { fill: rgba(61,49,40,.2); filter: blur(10px); }
.usb__iso-module { cursor: pointer; filter: url(#usb3d-shadow); transition: filter .18s ease, opacity .18s ease; }
.usb__iso-module:hover, .usb__iso-module:focus-visible { filter: url(#usb3d-shadow) brightness(1.05); outline: none; }
.usb__iso-module.is-selected { filter: url(#usb3d-shadow) drop-shadow(0 0 5px rgba(14,111,172,.85)); }
.usb__iso-face { fill: url(#usb3d-fabric); stroke: rgba(73,60,51,.28); stroke-width: .8; stroke-linejoin: round; }
.usb__iso-face--top { filter: brightness(1.02) saturate(.84); }
.usb__iso-face--front { filter: brightness(.82) saturate(.84); }
.usb__iso-face--side { filter: brightness(.7) saturate(.8); }
.usb__iso-back.usb__iso-face--top { filter: brightness(1.08) saturate(.8); }
.usb__iso-back.usb__iso-face--front { filter: brightness(.98) saturate(.84); }
.usb__iso-back.usb__iso-face--side { filter: brightness(.78) saturate(.8); }
.usb__iso-cushion.usb__iso-face--top { filter: brightness(1.12) saturate(.82) drop-shadow(0 2px 1px rgba(57,45,37,.2)); }
.usb__iso-cushion.usb__iso-face--front { filter: brightness(.93) saturate(.82); }
.usb__iso-cushion.usb__iso-face--side { filter: brightness(.81) saturate(.8); }
.usb__iso-back-panel { fill: url(#usb3d-fabric); stroke: rgba(78,63,53,.28); stroke-width: .7; filter: brightness(1.08) saturate(.82) drop-shadow(0 1px 1px rgba(56,44,36,.14)); }
.usb__iso-seam { stroke: rgba(81,66,56,.68); stroke-width: 1.05; stroke-linecap: round; }
.usb__iso-tuft { fill: rgba(74,58,48,.74); stroke: rgba(240,231,222,.35); stroke-width: .65; }
.usb__volume-note { position: absolute; left: 18px; bottom: 16px; display: grid; max-width: 310px; gap: 2px; padding: 9px 11px; border: 1px solid rgba(19,49,77,.15); border-radius: 5px; background: rgba(250,252,253,.86); backdrop-filter: blur(8px); pointer-events: none; }
.usb__volume-note strong { color: var(--usb-blue); font-size: 11px; }
.usb__volume-note span { color: #5d6972; font-size: 9px; line-height: 1.35; }
.usb__stage-hint, .usb__connection-status { margin: 9px 0 0; color: #6a7885; font-size: 11px; }
.usb__connection-status { min-height: 20px; font-size: 12px; font-weight: 620; }
.usb__connection-status.is-warning { color: #9a5d27; }
.usb__connection-status.is-connected { color: #266348; }

.usb__toolbar { display: grid; gap: 10px; padding: 15px 18px 18px; border-top: 1px solid var(--usb-line); background: #fff; }
.usb__selection { display: flex; gap: 8px; color: #647380; font-size: 12px; }
.usb__selection strong { color: #08131f; }
.usb__toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.usb__toolbar-actions button, .usb__exports button { min-height: 36px; padding: 7px 10px; border: 1px solid var(--usb-line); border-radius: 3px; background: #fff; font-size: 11px; font-weight: 620; cursor: pointer; }
.usb__toolbar-actions button:hover, .usb__exports button:hover { border-color: var(--usb-blue); color: var(--usb-blue); }
.usb__toolbar-actions button:disabled, .usb__exports button:disabled { opacity: .38; cursor: not-allowed; }

.usb__placed-module { position: absolute; z-index: 2; display: grid; place-items: center; overflow: visible; padding: 18px 4px 8px; border: 1px solid #315d80; border-radius: 8px 8px 15px 15px; background: linear-gradient(145deg, #dbe7ef 0%, #b8cedd 48%, #91afc3 100%); color: var(--usb-deep); cursor: grab; user-select: none; box-shadow: inset 0 -7px 13px rgba(19,49,77,.12), 0 6px 15px rgba(19,49,77,.12); }
.usb__placed-module.is-selected { z-index: 5; border-color: #0876bb; box-shadow: 0 0 0 3px rgba(42,125,178,.24), inset 0 -7px 13px rgba(19,49,77,.12), 0 10px 24px rgba(19,49,77,.2); }
.usb__placed-module.is-dragging { z-index: 8; cursor: grabbing; opacity: .93; }
.usb__placed-module strong { position: relative; z-index: 4; max-width: 84%; overflow: hidden; padding: 3px 6px; border-radius: 3px; background: rgba(248,251,253,.72); font-size: clamp(7px, .72vw, 11px); line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 1px 4px rgba(19,49,77,.08); }
.usb__placed-module small { position: relative; z-index: 4; margin-top: 2px; color: #36556d; font-size: clamp(6px, .58vw, 9px); }
.usb__backrest { position: absolute; z-index: 3; inset: 4px 5px auto; height: 16%; min-height: 7px; border: 1px solid rgba(19,49,77,.26); border-radius: 5px; background: linear-gradient(180deg, #789bb3, #517895); box-shadow: inset 0 -3px 5px rgba(0,16,31,.16), 0 1px 2px rgba(255,255,255,.5); }
.usb__seat-pad { position: absolute; z-index: 1; inset: 23% 8% 10%; border: 1px solid rgba(19,49,77,.25); border-radius: 7px 7px 11px 11px; background: linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.12)); box-shadow: inset 0 0 10px rgba(19,49,77,.08); }
.usb__seat-seam { position: absolute; z-index: 2; left: 50%; top: 25%; bottom: 12%; width: 1px; background: rgba(19,49,77,.26); box-shadow: 1px 0 rgba(255,255,255,.35); }
.usb__front { position: absolute; z-index: 3; left: 18%; right: 18%; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(19,49,77,.52); font-style: normal; }
.usb__placed-module.is-selected .usb__front::after { position: absolute; left: 50%; top: 3px; padding: 1px 4px; border-radius: 6px; background: rgba(248,251,253,.85); color: #315d80; content: "перед"; font-size: 7px; font-style: normal; line-height: 1.1; transform: translateX(-50%); }

.usb__placed-module--corner .usb__seat-pad { border-radius: 7px 7px 11px 11px; }
.usb__placed-module--corner .usb__seat-seam { left: 29%; top: 31%; bottom: 13%; transform: rotate(-36deg); transform-origin: bottom center; }
.usb__placed-module--corner::after { position: absolute; z-index: 3; left: 4px; top: 5px; width: 16%; height: 48%; border: 1px solid rgba(19,49,77,.26); border-radius: 5px; background: linear-gradient(90deg, #789bb3, #517895); box-shadow: inset -3px 0 5px rgba(0,16,31,.16); content: ""; }
.usb__placed-module--chaise-left .usb__seat-pad, .usb__placed-module--chaise-right .usb__seat-pad { bottom: 5%; }
.usb__placed-module--arm-left, .usb__placed-module--arm-right { border-radius: 8px; background: linear-gradient(90deg, #6e91aa, #b9cfdd 50%, #6e91aa); }
.usb__placed-module--arm-left .usb__backrest, .usb__placed-module--arm-right .usb__backrest, .usb__placed-module--arm-left .usb__seat-pad, .usb__placed-module--arm-right .usb__seat-pad, .usb__placed-module--arm-left .usb__front, .usb__placed-module--arm-right .usb__front { display: none; }
.usb__placed-module--arm-left strong, .usb__placed-module--arm-right strong, .usb__placed-module--arm-left small, .usb__placed-module--arm-right small { display: none; }
.usb__placed-module--pouf { border-radius: 12px; }
.usb__placed-module--pouf .usb__backrest { display: none; }
.usb__placed-module--pouf .usb__seat-pad { inset: 8%; border-radius: 10px; }
.usb__placed-module--pouf .usb__front { display: none; }

.usb__rotation-90 { border-radius: 15px 8px 8px 15px; }
.usb__rotation-90 .usb__backrest { inset: 5px 4px 5px auto; width: 16%; height: auto; }
.usb__rotation-90 .usb__seat-pad { inset: 8% 23% 8% 10%; border-radius: 11px 7px 7px 11px; }
.usb__rotation-90 .usb__seat-seam { left: 12%; right: 25%; top: 50%; bottom: auto; width: auto; height: 1px; }
.usb__rotation-90 .usb__front { left: 4px; right: auto; top: 18%; bottom: 18%; width: 2px; height: auto; }
.usb__rotation-90.is-selected .usb__front::after { left: 3px; top: 50%; transform: translate(-42%, -50%) rotate(-90deg); }
.usb__rotation-180 { border-radius: 15px 15px 8px 8px; }
.usb__rotation-180 .usb__backrest { inset: auto 5px 4px; }
.usb__rotation-180 .usb__seat-pad { inset: 10% 8% 23%; border-radius: 11px 11px 7px 7px; }
.usb__rotation-180 .usb__seat-seam { top: 12%; bottom: 25%; }
.usb__rotation-180 .usb__front { top: 4px; bottom: auto; }
.usb__rotation-180.is-selected .usb__front::after { top: auto; bottom: 3px; transform: translateX(-50%) rotate(180deg); }
.usb__rotation-270 { border-radius: 8px 15px 15px 8px; }
.usb__rotation-270 .usb__backrest { inset: 5px auto 5px 4px; width: 16%; height: auto; }
.usb__rotation-270 .usb__seat-pad { inset: 8% 10% 8% 23%; border-radius: 7px 11px 11px 7px; }
.usb__rotation-270 .usb__seat-seam { left: 25%; right: 12%; top: 50%; bottom: auto; width: auto; height: 1px; }
.usb__rotation-270 .usb__front { left: auto; right: 4px; top: 18%; bottom: 18%; width: 2px; height: auto; }
.usb__rotation-270.is-selected .usb__front::after { left: auto; right: 3px; top: 50%; transform: translate(42%, -50%) rotate(90deg); }

.usb__rotation-90.usb__placed-module--corner::after { left: auto; right: 5px; top: 4px; width: 48%; height: 16%; background: linear-gradient(180deg, #789bb3, #517895); }
.usb__rotation-180.usb__placed-module--corner::after { left: auto; right: 4px; top: auto; bottom: 5px; width: 16%; height: 48%; background: linear-gradient(270deg, #789bb3, #517895); }
.usb__rotation-270.usb__placed-module--corner::after { left: 5px; right: auto; top: auto; bottom: 4px; width: 48%; height: 16%; background: linear-gradient(0deg, #789bb3, #517895); }
.usb__port { position: absolute; z-index: 10; display: none; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #2a7db2; box-shadow: 0 0 0 1px #14577f; }
.usb__placed-module.is-selected .usb__port, .usb__placed-module.is-dragging .usb__port { display: block; }
.usb__port--top { left: 50%; top: 0; transform: translate(-50%, -50%); }
.usb__port--right { right: 0; top: 50%; transform: translate(50%, -50%); }
.usb__port--bottom { left: 50%; bottom: 0; transform: translate(-50%, 50%); }
.usb__port--left { left: 0; top: 50%; transform: translate(-50%, -50%); }
.usb__port.is-connected { display: none !important; }
.usb__port.is-target { display: block !important; width: 16px; height: 16px; background: #38a571; box-shadow: 0 0 0 6px rgba(56,165,113,.22); }

.usb__summary { min-width: 0; }
.usb__dimensions { display: grid; gap: 5px; padding: 24px 0; border-bottom: 1px solid var(--usb-line); }
.usb__dimensions span { color: #6c7a86; font-size: 11px; }
.usb__dimensions strong { font-size: 23px; font-weight: 560; letter-spacing: -.035em; }
.usb__summary ul { margin: 0; padding: 8px 0 18px; list-style: none; }
.usb__summary li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--usb-line); font-size: 12px; }
.usb__summary li span { min-width: 0; }
.usb__empty { color: #71808d; }
.usb__exports { display: grid; gap: 7px; }

.usb__form { display: grid; grid-template-columns: 1.15fr .7fr .7fr; gap: 22px; align-items: end; margin-top: 54px; padding: 46px 0; border-block: 1px solid var(--usb-line); }
.usb__form-intro { grid-row: span 2; align-self: start; padding-right: 30px; }
.usb__form-intro h3 { margin: 26px 0 12px; font-size: clamp(30px, 3vw, 44px); }
.usb__form-intro > p:last-child { color: #627080; }
.usb__form label { display: grid; gap: 7px; font-size: 12px; font-weight: 620; }
.usb__form input, .usb__form textarea { width: 100%; min-height: 50px; padding: 12px; border: 1px solid #b9c7d1; border-radius: 3px; background: #fff; }
.usb__form textarea { resize: vertical; }
.usb__wide { grid-column: 2 / -1; }
.usb__honeypot { position: absolute !important; left: -9999px !important; }
.usb__consent { grid-template-columns: 20px 1fr !important; align-items: start; color: #627080; font-weight: 400 !important; }
.usb__consent input { min-height: 18px; }
.usb__submit { min-height: 50px; border: 1px solid var(--usb-blue); border-radius: 3px; background: var(--usb-blue); color: #fff !important; font-weight: 680; cursor: pointer; }
.usb__submit:hover { background: var(--usb-deep); }
.usb__submit:disabled { opacity: .55; }
.usb__status { min-height: 22px; margin: 0; color: var(--usb-mid); font-size: 12px; }

@media (max-width: 1180px) {
  .usb__layout { grid-template-columns: 220px minmax(0, 1fr); }
  .usb__summary { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; border-top: 1px solid var(--usb-line); border-left: 0; }
  .usb__summary .usb__panel-heading { align-content: start; }
  .usb__summary ul { border-inline: 1px solid var(--usb-line); padding-inline: 20px; }
  .usb__stage { min-height: 390px; }
}

@media (max-width: 900px) {
  .usb__intro, .usb__builder-heading { grid-template-columns: 1fr; gap: 28px; }
  .usb__intro > div { grid-template-columns: 1fr; }
  .usb__first-hint { margin-left: 0; }
  .usb__model-options button { grid-template-columns: 110px 1fr auto; }
  .usb__model-preview { width: 110px; }
  .usb__layout { grid-template-columns: 1fr; }
  .usb__palette { min-width: 0; border-right: 0; border-bottom: 1px solid var(--usb-line); }
  .usb__module-list { grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
  .usb__summary { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .usb__summary ul { border-right: 0; }
  .usb__form { grid-template-columns: 1fr 1fr; }
  .usb__form-intro { grid-column: 1 / -1; grid-row: auto; padding: 0; }
  .usb__wide { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .usb__intro { margin-bottom: 64px; }
  .usb__intro h2 { font-size: 46px; }
  .usb__step-copy { grid-template-columns: 1fr; }
  .usb__model-options { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
  .usb__model-options button { min-width: 82%; grid-template-columns: 86px 1fr; grid-template-rows: auto auto; gap: 14px; padding: 14px; border: 1px solid var(--usb-line); scroll-snap-align: start; }
  .usb__model-preview { width: 86px; height: 76px; grid-row: span 2; }
  .usb__model-select { grid-column: 2; }
  .usb__builder-heading h3 { font-size: 38px; }
  .usb__first-hint { align-items: start; }
  .usb__palette { padding-inline: 0; }
  .usb__palette .usb__panel-heading { margin-inline: 16px; }
  .usb__module-list { display: flex; min-width: 0; max-width: 100%; gap: 8px; overflow-x: auto; padding: 14px 16px 2px; scroll-snap-type: x mandatory; }
  .usb__module-option { min-width: 164px; padding: 12px; border: 1px solid var(--usb-line); scroll-snap-align: start; }
  .usb__workspace-heading { grid-template-columns: auto minmax(0, 1fr); padding-inline: 16px; }
  .usb__view-switch { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
  .usb__view-switch button { flex: 1; min-width: 0; }
  .usb__stage-wrap { padding: 10px; }
  .usb__stage { min-height: 330px; aspect-ratio: 7 / 6; }
  .usb__volume-note { right: 10px; bottom: 10px; left: 10px; max-width: none; }
  .usb__iso-label { font-size: 11px; }
  .usb__toolbar { padding-inline: 10px; }
  .usb__toolbar-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  .usb__toolbar-actions button { min-height: 44px; }
  .usb__summary { grid-template-columns: 1fr; }
  .usb__summary ul { border: 0; padding-inline: 0; }
  .usb__form { grid-template-columns: 1fr; }
  .usb__form label, .usb__wide { grid-column: 1; }
  .usb__placed-module strong { font-size: 8px; }
  .usb__placed-module small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .usb *, .usb *::before, .usb *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
.usb .usb__intro { padding: 24px 0; gap: 20px; }
.usb .usb__intro h2 { font-size: clamp(28px,3vw,44px); line-height:1.1; }
.usb .usb__stage.is-volume { min-height:480px; aspect-ratio:auto; height:540px; background:#eeeae3; overflow:hidden; border-radius:16px; }
.usb-live3d { position:relative; width:100%; height:100%; }
.usb-live3d canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.usb-live3d canvas:active { cursor:grabbing; }
.usb-live3d-tools { position:absolute; top:16px; right:16px; display:flex; gap:6px; }
.usb-live3d-tools button { min-width:44px; min-height:44px; padding:8px 14px; border:1px solid #d8d3c9; background:#fffcf7; border-radius:10px; color:#333b34; font-size:13px; cursor:pointer; }
.usb-live3d-caption { position:absolute; bottom:14px; left:18px; right:18px; font-size:12px; color:#555d52; pointer-events:none; margin:0; }
.usb-live3d-palette { position:absolute; left:18px; bottom:56px; display:flex; gap:10px; padding:10px; background:#fff9; border-radius:30px; }
.usb-live3d-palette button { width:44px; height:44px; min-height:44px; padding:0; border:3px solid #fff; border-radius:50%; cursor:pointer; box-shadow:0 0 0 1px #ccc; }
.usb-live3d-palette button[aria-pressed=true] { box-shadow:0 0 0 2px #334836; }
.usb-live3d button:focus-visible,.usb-live3d canvas:focus-visible { outline:3px solid #445c43; outline-offset:3px; }
@media(max-width:767px) { .usb .usb__stage.is-volume { min-height:400px; height:430px; } .usb-live3d-tools { top:10px; right:10px; } .usb-live3d-caption { font-size:11px; } }
