body {background:#191c21;color:#e6e6e6}
.skip-link{position:absolute;top:-80px;left:16px;z-index:100;padding:14px 20px;background:#3ddc84;color:#0d0f12;text-decoration:none}
.skip-link:focus{top:12px}
.script-note{padding:24px;font:14px system-ui}
.no-js .d01-project-controls{display:none}
body:has(.project-dialog[open]){overflow:hidden}
.design-01 .project-dialog{max-width:860px;overscroll-behavior:contain;scrollbar-gutter:stable}
.design-01 .modal-close{position:sticky;float:right;top:12px;right:auto;margin:12px 12px -56px 0;border:1px solid #56616d;border-radius:4px;cursor:pointer}
.design-01 .modal-header{padding:36px 80px 28px 36px}
.design-01 .modal-eyebrow,.design-01 .modal-platforms,.design-01 .case-label,.design-01 .case-evidence,.design-01 .modal-actions,.back-to-projects,.project-page-footer{font-family:"Fira Code Local",system-ui,monospace;font-variant-ligatures:none}
.design-01 .modal-eyebrow{font-size:12px;color:#a5b0ba}
.design-01 .modal-header :is(h1,h2){font-size:clamp(27px,4vw,38px);line-height:1.25;letter-spacing:-.04em;margin:16px 0;overflow-wrap:anywhere}
.design-01 .modal-header>p{font-size:16px;color:#c0c6cd}
.design-01 .modal-header>.platform-label{margin:20px 0 8px;font-size:12px;color:#a5b0ba}
.design-01 .modal-platforms{margin-top:0;margin-bottom:20px}
.design-01 .modal-platforms span{font-size:12px;color:#c0c6cd;background:#191c21;border:1px solid #38414b;border-radius:3px}
.design-01 .modal-actions{gap:10px}
.design-01 .modal-actions a{min-height:44px;font-size:12px;border:1px solid #56616d;background:#191c21;color:#e6e6e6;border-radius:3px}
.design-01 .modal-actions a:first-child{background:#3ddc84;color:#08130d;border-color:#3ddc84}
.design-01 .installation-note{padding:16px 18px;background:#191c21;border-left:3px solid #3ddc84}
.design-01 .installation-note strong{font-size:13px}
.design-01 .installation-note p{font-size:14px;line-height:1.75;margin:8px 0 0;color:#b9c1ca}
.design-01 .modal-art{margin:0;padding:0 36px 28px}
.design-01 .modal-art .product-art{height:260px;border-radius:4px;overflow:hidden}
.design-01 .modal-art figcaption{font-size:12px;line-height:1.6;color:#a5b0ba;padding-top:10px}
.design-01 .case-content{padding:0 36px 36px}
.design-01 .case-section{padding:30px 0;border-top:1px solid #303740;max-width:74ch}
.design-01 .case-label{font-size:12px;color:#3ddc84;margin:0 0 12px}
.design-01 .case-section h2{font-size:23px;line-height:1.4;letter-spacing:-.035em;margin:0 0 16px}
.design-01 .case-section h3{font-size:16px;line-height:1.5;margin:24px 0 8px}
.design-01 .case-section p:not(.case-label){font-size:16px;line-height:1.8;color:#b9c1ca;margin:10px 0}
.design-01 .case-section small{display:block;font-size:12px;line-height:1.8;color:#a5b0ba;margin-top:18px}
.design-01 .case-evidence{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.design-01 .case-evidence a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;color:#3ddc84;font-size:12px;border:1px solid #56616d;text-decoration:none;border-radius:3px}
.design-01 .case-evidence a:hover,.design-01 .modal-actions a:hover{border-color:#3ddc84}
.design-01 .case-next{display:flex;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid #303740}
.design-01 .case-next a{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 16px;border:1px solid #56616d;border-radius:3px;color:#e6e6e6;text-decoration:none;font-size:13px}
.design-01 .case-next a:first-child{color:#3ddc84;border-color:#3ddc84}
.design-01 #project-title:focus-visible{outline:2px solid #e8b34a;outline-offset:6px}
.project-page #project-content,.project-page-footer{width:min(100% - 48px,1160px);margin-inline:auto}
.project-page .d01-nav{grid-template-columns:1fr auto}
.project-page .project-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);margin:48px 0 24px;background:#0d0f12;border:1px solid #303740;border-radius:8px;overflow:hidden}
.project-page .modal-header{padding:40px}
.project-page .modal-art{padding:40px 40px 28px 0;align-self:start}
.project-page .case-content{grid-column:1/-1;padding:0 40px 20px}
.project-page .case-section{max-width:78ch}
.back-to-projects{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:#3ddc84;text-decoration:none}
.project-page-footer{font-size:12px;color:#a5b0ba;padding:36px 0 48px;line-height:1.8}
@media(max-width:800px){.project-page .project-detail{grid-template-columns:minmax(0,1fr);margin-top:28px}.project-page .modal-art{padding:0 28px 28px}.project-page .modal-header{padding:28px}.project-page .case-content{padding:0 28px 12px}}
@media(max-width:480px){.design-01 .modal-header{padding:28px 66px 24px 20px}.design-01 .modal-art{padding:0 20px 24px}.design-01 .case-content{padding:0 20px 20px}.design-01 .modal-actions a{width:100%;justify-content:space-between}.project-page .modal-header{padding:24px 20px}.project-page .d01-nav-links a{font-size:11px}.design-01 .modal-art .product-art{height:230px}}