.pen-lab .viewport{height:390px}.pen-lab .lab{grid-template-columns:minmax(0,1fr) 310px}.pen-lab .control-panel{padding:26px 23px 18px}.pen-lab .control-panel h2{font-size:21px}.pen-lab .control-lede{margin-bottom:21px}.press-action{width:100%;border:1px solid #e7c78b;border-radius:9px;background:linear-gradient(135deg,#efdaad,#caaa70);color:#18272f;font:inherit;min-height:108px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;cursor:pointer;box-shadow:inset 0 1px #fff5,0 5px 0 #887449,0 10px 20px #0003;transition:transform .15s,box-shadow .15s}.press-action .press-symbol{font-size:24px;line-height:1}.press-action>span:not(.press-symbol){font-size:15px;font-weight:600}.press-action small{font-size:10px;opacity:.65;letter-spacing:1px}.press-action:disabled{background:#ad956b;color:#28353a;box-shadow:inset 0 2px 6px #0003,0 1px 0 #887449;transform:translateY(4px);cursor:default}.speed-row{display:flex;justify-content:space-between;align-items:center;margin:23px 0 13px;gap:10px;color:#9bb0ba;font-size:11px}.speed-switch{display:flex;border:1px solid #394b53;padding:3px;border-radius:6px;gap:3px}.speed-switch button{font:inherit;font-size:11px;border:0;min-height:30px;padding:0 12px;color:#8ea6b1;background:transparent;border-radius:3px;cursor:pointer}.speed-switch button[aria-pressed=true]{color:#e9d3a4;background:#32403f}.transport{display:flex;gap:8px}.transport button{font-size:11px}.motion-steps{list-style:none;margin:23px 0 0;padding:0;display:flex;gap:7px;flex-direction:column}.motion-steps li{display:flex;align-items:center;gap:11px;padding:7px 10px;border:1px solid transparent;border-radius:6px;color:#748e9a;transition:background .2s}.motion-steps li>span{font-size:10px;letter-spacing:1px}.motion-steps strong{font-size:12px;font-weight:400;display:block}.motion-steps small{font-size:10px;display:block;margin-top:2px}.motion-steps li.active{background:#d0b47510;border-color:#8c795c66;color:#e2c78f}.motion-steps li.active small{color:#aabec4}.pen-lab .live-note{margin-top:17px;min-height:73px}.pen-lab .demo-action{margin-top:13px}.pen-legend{padding:0 22px 18px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;color:#8fa8b3;font-size:10px}.pen-legend span{display:flex;align-items:center;gap:6px}.pen-legend i{height:6px;width:6px;border-radius:50%}.pen-legend .blue{background:#6badd5}.pen-legend .silver{background:#c6d5df}.pen-legend .gold{background:#e8c477}.pen-legend .coral{background:#d48465}.camera-tools{position:absolute;right:18px;bottom:23px;display:flex;gap:7px;z-index:2}.camera-tools button{font:inherit;font-size:11px;color:#b1c5cc;background:#10232bd9;border:1px solid #4a606c;border-radius:24px;min-height:36px;padding:0 12px;cursor:pointer}.camera-tools button[aria-pressed=true]{border-color:#d6b97b;color:#e6ce9a}.pen-lab .viewer-bottom{font-size:10px}.pen-lab .detail-card p{min-height:96px}.pen-lab .telemetry{margin-top:auto}.pen-lab .viewer-column{display:flex;flex-direction:column}.pen-lab .viewport{flex:1;min-height:390px}.pen-lab .detail-card svg{stroke:#d6c39a}
@media(max-width:1000px){.pen-lab .lab{grid-template-columns:minmax(0,1fr) 270px}.pen-lab .control-panel{padding:23px 18px}.pen-lab .control-panel h2{font-size:19px}.pen-lab .viewer-bottom{flex-direction:column;gap:5px}.pen-lab .detail-card p{min-height:70px}.pen-legend{gap:12px}}
@media(max-width:760px){.pen-lab .lab{display:block}.pen-lab .viewport{height:320px;min-height:320px;flex:none}.pen-lab .control-panel{display:block;padding:22px 18px}.pen-lab .control-panel>.eyebrow{margin-bottom:6px}.pen-lab .control-panel h2{font-size:21px}.pen-lab .control-lede{margin:9px 0 18px}.press-action{min-height:79px;gap:4px;position:relative}.press-action .press-symbol{position:absolute;left:22px;top:25px;font-size:25px}.press-action>span:not(.press-symbol){font-size:14px}.press-action small{font-size:10px}.speed-row{margin-top:20px}.motion-steps{flex-direction:row;gap:5px;margin-top:18px}.motion-steps li{padding:9px 7px;gap:5px;flex:1;align-items:flex-start}.motion-steps small{display:none}.motion-steps strong{font-size:11px}.motion-steps li>span{font-size:9px;line-height:1.6}.pen-lab .live-note{min-height:55px}.pen-lab .viewer-bottom{flex-direction:column;gap:4px;font-size:9px}.pen-legend{padding:0 12px 13px;gap:12px;font-size:9px}.camera-tools{right:12px;bottom:18px;gap:5px}.camera-tools button{font-size:10px;min-height:34px;padding:0 9px}.pen-lab .model-id{bottom:20px}.pen-lab .telemetry{grid-template-columns:1fr 1.2fr .85fr}.pen-lab .telemetry .brake-value{font-size:13px}.pen-lab .detail-card p{min-height:113px}.pen-lab .lab-intro h1{font-size:35px}}
@media(max-width:360px){.pen-lab .lab-intro h1{font-size:30px}.pen-lab .viewport{height:285px;min-height:285px}.pen-lab .model-id{display:none}.pen-lab .detail-card p{min-height:140px}.pen-lab .telemetry .brake-value{font-size:11px}}
@media(max-width:760px){.pen-lab .lab{overflow:visible}.pen-lab .viewer-column{position:sticky;top:0;z-index:5;border-radius:12px 12px 0 0;box-shadow:0 8px 18px #07111755}.pen-lab .viewport{height:clamp(185px,28svh,250px);min-height:0}.pen-lab .viewer-bottom{padding-bottom:9px}.pen-lab .viewer-bottom>span+span{display:none}.pen-lab .telemetry{padding-top:10px;padding-bottom:10px}.pen-lab .telemetry>div{gap:3px}.pen-lab .control-panel{border-radius:0 0 12px 12px}.pen-lab .control-panel button{scroll-margin-top:calc(28svh + 180px)}.pen-lab .control-panel>.eyebrow,.pen-lab .control-panel>.control-lede{display:none}.pen-lab .control-panel>h2{font-size:16px;margin-bottom:15px}.pen-lab .press-action{min-height:67px}.pen-lab .press-action .press-symbol{top:19px}}