/* software step: the phone screen and the controls */
.os-stage { position: absolute; inset: 0; z-index: 8; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 46px 0 58px; background: radial-gradient(60% 55% at 50% 46%, rgba(255, 240, 220, .12), rgba(255, 240, 220, 0) 70%); }
#os-scene-host { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.os-stage .bx-ctl .btn.sel { border-color: var(--acc, #e0864f); background: rgba(224, 134, 79, .18); }
.os-phone { width: 214px; height: 440px; flex: none; transform: scale(var(--s, 1)); transform-origin: center; border: 6px solid #e879a0; border-radius: 38px; background: #000; box-shadow: 0 24px 40px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .6); overflow: hidden; position: relative; }
.os-screen { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--fg); background-size: cover; overflow: hidden; font-size: 11px; }
.os-hole { position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #05060a; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .15); z-index: 5; }
.os-st { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 2px; font-size: 11px; font-weight: 700; height: 26px; flex: none; } .os-st b { font-weight: 700; } .os-sti { display: inline-flex; gap: 5px; font-size: 10px; }
.os-st-c { justify-content: space-between; } .os-st-m { padding-top: 10px; font-size: 9px; opacity: .85; }
.os-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 4px; }
.os-card { background: var(--card); color: var(--cardfg); backdrop-filter: blur(8px); border-radius: 14px; }
.os-search { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 11px; opacity: .95; }
.os-w { margin: 2px 0; } .os-w-cw { display: flex; flex-direction: column; gap: 1px; } .os-w-cw b { font-size: 34px; line-height: 1; font-weight: 300; } .os-w-cw span { font-size: 11px; opacity: .85; } .os-w-cw em { font-style: normal; font-size: 12px; margin-top: 2px; }
.os-w-big { text-align: center; } .os-w-big b { font-size: 52px; line-height: .95; font-weight: 700; letter-spacing: -.02em; } .os-w-an { display: flex; justify-content: center; }
.os-w-cal { padding: 8px 12px; display: flex; flex-direction: column; } .os-w-cal b { font-size: 28px; line-height: 1; } .os-w-cal small { font-weight: 700; letter-spacing: .1em; font-size: 9px; } .os-w-cal span { font-size: 10px; opacity: .8; }
.os-w-mu { padding: 8px 10px; display: flex; align-items: center; gap: 9px; } .os-art { width: 34px; height: 34px; border-radius: 8px; flex: none; } .os-w-mu div { flex: 1; min-width: 0; } .os-w-mu b { display: block; font-size: 11px; } .os-w-mu small { font-size: 9.5px; opacity: .7; }
.os-grid { display: grid; gap: 10px 4px; align-content: start; } .os-app { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; } .os-app small { font-size: 8.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); white-space: nowrap; }
.os-ic { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 15px; } .os-fill { flex: 1; }
.os-dock { display: flex; justify-content: space-around; align-items: center; margin: 0 8px 4px; padding: 8px 6px; flex: none; }
.os-dock-bar { margin: 0; padding: 9px 14px 8px; background: var(--card); backdrop-filter: blur(10px); border-radius: 0; } .os-dock-pill { background: var(--card); backdrop-filter: blur(10px); border-radius: 26px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } .os-dock-floating .os-ic { box-shadow: 0 5px 10px rgba(0, 0, 0, .35); }
.os-nav { height: 22px; display: flex; align-items: center; justify-content: center; gap: 36px; flex: none; font-size: 10px; opacity: .85; } .os-nav-g i { width: 70px; height: 4px; border-radius: 3px; background: var(--fg); opacity: .8; display: block; }
.os-orb { position: absolute; right: 12px; bottom: 96px; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 18px rgba(255, 255, 255, .55); animation: osorb 3s ease-in-out infinite; } @keyframes osorb { 50% { transform: scale(1.12); } }
.os-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; opacity: .95; filter: blur(.5px); }
.os-lock { padding: 40px 16px 0; display: flex; flex-direction: column; } .os-lock b { font-size: 64px; line-height: 1; font-weight: 300; } .os-lock span { font-size: 12px; opacity: .9; margin-top: 4px; }
.os-lock-center { align-items: center; text-align: center; } .os-lock-top { align-items: center; text-align: center; padding-top: 12px; } .os-lock-top b { font-size: 46px; } .os-lock-left { align-items: flex-start; } .os-lock-left b { font-size: 70px; line-height: .9; }
.os-notes { margin-top: auto; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 7px; } .os-note { display: flex; gap: 9px; align-items: center; padding: 8px 10px; } .os-note b { display: block; font-size: 11px; } .os-note small { font-size: 10px; opacity: .75; }
.os-short { display: flex; justify-content: space-between; padding: 0 22px 6px; } .os-short span { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.os-boot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; } .os-bl { font-size: 54px; } .os-boot b { font-size: 18px; letter-spacing: .12em; text-transform: uppercase; opacity: 0; animation: osfade 1.2s .5s forwards; }
.os-boot-fade .os-bl { opacity: 0; animation: osfade 1.4s forwards; } .os-boot-pulse .os-bl { animation: ospulse 1.6s ease-in-out infinite; } .os-boot-spin .os-bl { animation: osspin 2.2s cubic-bezier(.4, 0, .2, 1) infinite; } .os-boot-lines .os-bl { opacity: 0; animation: osfade 1.4s .6s forwards; }
.os-bln { width: 120px; height: 20px; } .os-bln path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: osdraw 1.4s forwards; }
@keyframes osfade { to { opacity: 1; } } @keyframes ospulse { 0%, 100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.1); opacity: 1; } } @keyframes osspin { to { transform: rotate(360deg); } } @keyframes osdraw { to { stroke-dashoffset: 0; } }
.os-sum { margin: 8px 14px 4px; padding: 9px 11px; border-radius: 9px; background: rgba(143, 209, 138, .09); border: 1px solid rgba(143, 209, 138, .25); font-size: 12.5px; line-height: 1.4; }
.os-walls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 14px 8px; } .osw { height: 52px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; } .osw span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 10.5px; background: rgba(0, 0, 0, .5); color: #fff; text-align: left; } .osw.active { border-color: var(--acc, #e0864f); }
.osb b { display: block; } .osb small { display: block; font-size: 10.5px; color: var(--mut, #a89a86); font-weight: 400; line-height: 1.25; } .osb.locked { opacity: .45; cursor: not-allowed; }
.os-name { padding: 4px 14px 14px; } .os-name input { width: 100%; } .os-name small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--mut, #a89a86); }
/* sub-tabs in the design steps */
.subtabs { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; padding: 10px 12px; background: var(--panel, #1c1814); border-bottom: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.subtabs button { min-height: 42px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line, rgba(255, 255, 255, .16)); background: rgba(255, 255, 255, .05); color: inherit; font: 600 14px 'Source Sans 3', system-ui, sans-serif; line-height: 1.15; cursor: pointer; text-align: center; white-space: normal; overflow: visible; }
.subtabs button:hover { border-color: var(--acc, #e0864f); }
.subtabs button.on { background: var(--acc, #e0864f); border-color: var(--acc, #e0864f); color: #2a160c; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.sub-hide { display: none !important; }
@media (max-height: 520px) and (orientation: landscape) { .os-stage { padding: 40px 0 56px; } .subtabs { padding: 6px 8px; gap: 5px; } .subtabs button { min-height: 38px; font-size: 13px; padding: 5px 6px; } }

/* sub-tabs: two readable tiles per row; guide buttons are quiet links, not shouting buttons */
.subtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px 10px; }
.subtabs button { min-height: 38px; padding: 6px 8px; font-size: 13.5px; }
.subtabs button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lab-guide-btn { background: transparent !important; border: 1px solid var(--line, rgba(255, 255, 255, .2)) !important; color: var(--acc2, #e0b05a) !important; box-shadow: none !important; font-size: 12.5px !important; min-height: 38px; margin: 8px 10px 4px !important; width: calc(100% - 20px) !important; text-align: left; }
#panel-hardware #open-rd-cpu, #panel-hardware #open-rd-battery { display: none; }

/* more room for the choices: tabs scroll away with the list, are slimmer, and the side panel is wider */
:root { --lp: clamp(250px, 34vw, 340px); }
.subtabs { position: static; gap: 5px; padding: 6px 10px 4px; border-bottom: 0; }
.subtabs button { min-height: 32px; padding: 3px 6px; font-size: 13px; border-radius: 8px; }
.lab-guide-btn { min-height: 32px !important; margin: 4px 10px 0 !important; padding: 4px 10px !important; }
@media (max-height: 520px) and (orientation: landscape) { .subtabs { padding: 4px 8px 2px; } .subtabs button { min-height: 32px; font-size: 12.5px; } }
@media (max-height: 520px) and (orientation: landscape) {
  .subtabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 8px 2px; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs button { flex: 0 0 auto; min-height: 34px; padding: 3px 14px; white-space: nowrap; }
  .subtabs button:last-child:nth-child(odd) { grid-column: auto; }
  .lab-guide-btn { display: none !important; }
}

/* Box and Software stages: the picture gets the room, the buttons stand beside it */
.box-stage, .os-stage { flex-direction: row; align-items: stretch; justify-content: center; gap: 12px; padding: 54px 14px 14px; }
#box-scene-host, #os-scene-host { flex: 1 1 auto; min-width: 0; align-self: stretch; }
.box-stage .bx-ctl, .os-stage .bx-ctl { flex: 0 0 auto; width: 128px; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 8px; align-self: center; }
.box-stage .bx-ctl .btn, .os-stage .bx-ctl .btn { width: 100%; justify-content: center; text-align: center; min-height: 42px; }
.box-stage .bx-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; margin: 0; pointer-events: none; }
@media (max-height: 520px) and (orientation: landscape) { .box-stage, .os-stage { padding: 40px 8px 8px; gap: 8px; } .box-stage .bx-ctl, .os-stage .bx-ctl { width: 108px; gap: 6px; } .box-stage .bx-ctl .btn, .os-stage .bx-ctl .btn { min-height: 38px; padding: 4px 6px; font-size: 13px; } }

/* the step rail (Body, Camera, ...) scrolls when the screen is short */
#screen-studio .left-panel > .panel-tabs { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; }
#screen-studio .left-panel > .panel-tabs::-webkit-scrollbar { display: none; }
#screen-studio .left-panel > .panel-tabs .panel-tab { flex: 0 0 auto; }
@media (max-height: 520px) and (orientation: landscape) { #screen-studio .left-panel .panel-tab { min-height: 40px; padding-top: 4px; padding-bottom: 4px; } #screen-studio .left-panel > .panel-tabs { gap: 2px; padding: 4px 3px 24px; } }