/* UX162 — selected concept 04: interface layers. */
html{scroll-padding-top:160px}
body.skr-ux162{background:#090b0e!important;background-image:none!important}
body.skr-ux162::before{content:""!important;position:fixed!important;inset:0!important;background:url('interface-layers.png') center center / cover no-repeat!important;opacity:.48!important;filter:none!important;animation:none!important;z-index:0!important;pointer-events:none!important}
body.skr-ux162::after{display:none!important}
body.skr-ux162 .hero{background:transparent!important}
body.skr-ux162 .hero::after{background:linear-gradient(90deg,#090b0ed9,#090b0e44 65%,transparent)!important}
body.skr-ux162 .halo,body.skr-ux162 .hero-symbol{display:none!important}
body.skr-ux162 > header{position:sticky!important;top:0!important;left:auto!important;right:auto!important;z-index:10000!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:12px 24px!important;padding:12px 5%!important;background:#0b0d10f5!important;border-bottom:1px solid #ffffff26;backdrop-filter:blur(14px);isolation:isolate}
body.skr-ux162 header .brand{padding-right:0!important;flex-shrink:0}
body.skr-ux162 header .brand img{width:48px!important;height:48px!important}
body.skr-ux162 header .nav{display:flex!important;flex:1;justify-content:flex-end;align-items:center;gap:12px 20px!important;padding:0!important;margin-right:52px;flex-wrap:wrap}
body.skr-ux162 header .nav a{display:inline-flex!important;min-height:36px;align-items:center;font-size:11px}
html body.skr-ux162 header #skr-i18n.skr-language-control{position:absolute!important;top:16px!important;right:calc(5% - 4px)!important}
body.skr-ux162 .hero{padding-top:70px!important;min-height:650px;height:calc(100svh - 74px)}
body.skr-ux162 #portfolio h2{max-width:30ch!important}
.skr-work-summary,.skr-connected{position:relative;z-index:2}
.skr-work-summary{padding:48px 0!important}
.skr-work-summary h2{font:700 clamp(24px,3vw,38px)/1.2 Arial,sans-serif!important;text-transform:none!important}
.skr-work-table{width:100%;border-collapse:collapse;background:#101317df;font-size:14px}
.skr-work-table th,.skr-work-table td{text-align:left;padding:16px;border:1px solid #ffffff26;vertical-align:top}
.skr-work-table thead{background:#ffffff08}
.skr-work-table tbody th{color:#f2f0ea}
.skr-work-table td:nth-child(2){white-space:nowrap;font-weight:700}
.skr-work-summary .note{font-size:13px;line-height:1.6}
.skr-connected-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.skr-connected h2{font-size:clamp(32px,4vw,58px)!important;line-height:1.08!important}
.skr-connected p{font-size:18px;line-height:1.7;color:#c4c6c8}
.skr-beacons{border:1px solid #ffffff30;padding:32px;background:#ffffff04}
@media(max-width:1000px){body.skr-ux162 header .nav{flex-basis:100%;justify-content:flex-start;margin-right:0;gap:6px 16px!important}body.skr-ux162 header .brand{padding-right:40px!important}body.skr-ux162 > header{gap:4px!important}html{scroll-padding-top:190px}}
@media(max-width:600px){body.skr-ux162::before{background-position:65% center!important;opacity:.28!important}body.skr-ux162 header .brand img{width:40px!important;height:40px!important}body.skr-ux162 header .nav{gap:2px 14px!important}body.skr-ux162 header .nav a{font-size:10px;min-height:30px}body.skr-ux162 .hero{padding-top:45px!important;height:auto;min-height:620px}.skr-connected-grid{grid-template-columns:1fr;gap:28px}.skr-beacons{padding:24px}.skr-work-table th,.skr-work-table td{padding:10px 8px;font-size:12px}.skr-work-table td:last-child{line-height:1.5}.skr-connected{padding:60px 0!important}}
@media(forced-colors:active){body.skr-ux162::before{display:none!important}}