/* Distinct physical devices; proportional fitting is handled by evolution.js. */
#digital-systems .systems-stage{padding-bottom:88px}
#digital-systems .device-hardware{position:relative;flex:none;max-width:100%;width:820px;height:535px;--hardware-width:820px;--hardware-height:535px;--screen-height:465px;--hardware-scale:1}
#digital-systems .device-model{position:absolute;left:0;top:0;width:var(--hardware-width);height:var(--hardware-height);transform:scale(var(--hardware-scale));transform-origin:top left}
#digital-systems .device-model:before{content:'';position:absolute;z-index:25;top:7px;left:50%;translate:-50% 0;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7896b0,#10232e 55%,#071116);box-shadow:0 0 0 2px #17232a;pointer-events:none}
#digital-systems .device-hardware[data-device=mobile] .device-model:before{width:62px;height:13px;top:7px;border-radius:12px;background:radial-gradient(circle at 82% 50%,#4a697b 0 2px,#091216 3px 5px,transparent 6px),#0b1318;box-shadow:0 1px 0 #435057}
#digital-systems .device-hardware:not([data-device=desktop]) .device-model:after{content:'';position:absolute;z-index:25;bottom:9px;left:36%;right:36%;height:4px;border-radius:4px;background:#a8b7b2;pointer-events:none}
#digital-systems .responsive-device{position:relative;box-sizing:border-box;width:100%;min-width:0;max-width:none;height:var(--screen-height);padding:0;border:12px solid #202a30;border-top-width:20px;border-bottom-width:25px;border-radius:15px;overflow:clip;display:flex;flex-direction:column;background:#e9efeb;transform:none;transition:none;outline:1px solid #a0aeaf;box-shadow:0 0 0 3px #48565b,0 5px 0 3px #111c22,0 25px 40px -10px #0008;container-type:inline-size}
#digital-systems .monitor-stand{position:absolute;top:calc(var(--screen-height) + 3px);left:38%;width:24%;height:64px;transform-origin:top;z-index:-1;background:linear-gradient(90deg,#56666c,#b7c4c5 42%,#6d8086);clip-path:polygon(25% 0,75% 0,83% 75%,100% 88%,100% 100%,0 100%,0 88%,17% 75%);border-bottom:4px solid #49585e;box-shadow:inset 0 15px 15px #12222955}
#digital-systems .monitor-stand i{position:absolute;bottom:5px;left:5%;right:5%;height:1px;background:#d9e4e1aa}
#digital-systems .responsive-device[data-device=tablet]{border:17px solid #202a30;border-top-width:22px;border-bottom-width:22px;border-radius:30px}
#digital-systems .responsive-device[data-device=mobile]{border:8px solid #202a30;border-top-width:26px;border-bottom-width:23px;border-radius:38px}
#digital-systems .responsive-device:before,#digital-systems .responsive-device:after{display:none}
#digital-systems .responsive-chrome{padding:6px 12px;gap:8px;font:10px var(--ui);flex:none;min-height:30px;box-sizing:border-box}
#digital-systems .responsive-chrome>span:nth-child(2){padding:3px 8px}
#digital-systems .responsive-site{padding:12px 5% 16px;display:flex;flex-direction:column;flex:1;min-height:0;gap:0}
#digital-systems .responsive-nav{padding:0 0 10px;flex:none}
#digital-systems .responsive-nav b{font-size:28px}
#digital-systems .responsive-nav>span{font-size:10px;max-width:150px;text-align:right}
#digital-systems .responsive-hero{height:auto;min-height:0;flex:1;grid-template-columns:1.25fr 1fr;padding:12px 0;gap:15px}
#digital-systems .responsive-hero h3{font-size:42px;line-height:1.02;margin:10px 0}
#digital-systems .responsive-hero p{font:11px/1.5 var(--ui);margin:0;color:#58716f}
#digital-systems .responsive-hero .ui-kicker{font:9px var(--ui);letter-spacing:.07em}
#digital-systems .mesh-object{height:100%;max-height:220px;width:100%;aspect-ratio:1}
#digital-systems .responsive-projects{flex:none}
#digital-systems .responsive-projects>div:first-child{display:flex!important;align-items:center;padding-top:8px;margin:0 0 8px;gap:8px}
#digital-systems .responsive-projects h4{font:10px var(--ui);margin:0}
#digital-systems .responsive-projects button{font:10px var(--ui);padding:5px 9px;min-height:30px}
#digital-systems .mini-projects{gap:12px}
#digital-systems .mini-art{height:62px}
#digital-systems .mini-projects article>span{font:9px var(--ui);margin-top:5px}
#digital-systems .responsive-device[data-device=tablet] .responsive-hero{grid-template-columns:1.2fr 1fr}
#digital-systems .responsive-device[data-device=tablet] .responsive-hero h3{font-size:36px}
#digital-systems .responsive-device[data-device=tablet] .mini-art{height:100px}
#digital-systems .responsive-device[data-device=mobile] .responsive-site{padding:14px 14px 18px}
#digital-systems .responsive-device[data-device=mobile] .responsive-chrome{font-size:9px;padding:5px 8px}
#digital-systems .responsive-device[data-device=mobile] .responsive-nav b{font-size:29px}
#digital-systems .responsive-device[data-device=mobile] .responsive-nav>span{font-size:8px;max-width:96px}
#digital-systems .responsive-device[data-device=mobile] .responsive-hero{position:relative;display:block;padding:20px 0 12px}
#digital-systems .responsive-device[data-device=mobile] .responsive-hero h3{font-size:32px;margin:12px 0 10px;position:relative;z-index:1}
#digital-systems .responsive-device[data-device=mobile] .responsive-hero p{font-size:10px;max-width:145px}
#digital-systems .responsive-device[data-device=mobile] .mesh-object{position:absolute;right:0;bottom:5px;width:105px;height:110px;max-height:none}
#digital-systems .responsive-device[data-device=mobile] .responsive-projects>div:first-child{display:block!important}
#digital-systems .responsive-device[data-device=mobile] .responsive-projects h4{margin-bottom:8px}
#digital-systems .responsive-device[data-device=mobile] .responsive-projects button{min-height:34px;padding:6px 12px}
#digital-systems .responsive-device[data-device=mobile] .mini-art{height:72px}
#digital-systems .systems-caption{margin-top:18px;text-align:center;flex:none}
/* JavaScript interpolates the entire chassis each animation frame. CSS delays
   would keep restarting during a scroll and make the hardware lag behind. */
#digital-systems .device-hardware,#digital-systems .device-model,#digital-systems .responsive-device{transition:none}
@media(max-width:999px){#digital-systems .systems-stage{display:flex;flex-direction:column;align-items:stretch}#digital-systems .device-stage{min-height:0}#digital-systems .systems-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){#digital-systems .device-hardware,#digital-systems .device-model,#digital-systems .responsive-device{transition:none!important}}
@media(max-width:600px){#digital-systems .systems-caption{max-width:160px;line-height:1.4;margin-inline:auto}}