@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#16283b;background:#07131c;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #64eac1;outline-offset:3px}button[hidden],[hidden]{display:none!important}
.demo-app{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100vh}
.sidebar{background:#f8fbfd;border-right:1px solid #d8e3ee;display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh;z-index:4;box-shadow:8px 0 30px #0002}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 10px 14px}
.brand-mark{display:block;width:36px;height:36px;object-fit:contain;border-radius:9px;box-shadow:0 5px 14px #3986ba55;flex-shrink:0}
.sidebar-brand strong{display:block;color:#1c3554;font-size:15px}.sidebar-brand small{display:block;color:#8091a4;font-size:10px;margin-top:2px}.side-divider{height:1px;background:#dfe6ee;margin:0 6px 14px}
.side-label{font-size:9px;letter-spacing:1.4px;font-weight:900;color:#74859d;margin:18px 10px 8px}.side-item{width:100%;display:flex;align-items:center;gap:10px;background:#f3f7fb;color:#344862;border:1px solid #e0e8f1;border-radius:10px;padding:10px 11px;min-height:44px;font-size:12px;font-weight:800;text-align:left;margin:0 0 7px;transition:.2s}.side-item:hover{background:#e7f0f9}.side-item.active{background:#fff;border-color:#bed8ef;color:#1f5f9d;box-shadow:0 4px 12px #1e78be17}.side-item small{margin-left:auto;font-size:9px;color:#93a5b8}.side-icon{font-size:17px;color:#3a8cc5;width:20px;text-align:center}.sidebar-spacer{flex:1}.sidebar-bottom{padding:13px 10px;border-radius:10px;background:#e8f5ef;color:#286c52;font-size:12px;font-weight:800}.sidebar-bottom small{display:block;margin-top:5px;color:#5a806e;font-size:10px;font-weight:500}.status-dot{width:7px;height:7px;border-radius:100%;display:inline-block;background:#45ad7c;margin-right:5px}
.workplace{min-width:0;background:radial-gradient(circle at 38% 32%,#355774 0,#213b53 24%,transparent 52%),radial-gradient(circle at 85% 20%,#1b3553,transparent 50%),linear-gradient(130deg,#203c5d,#111c2c 64%,#101a29);color:#ecf6ff;min-height:100vh;position:relative;overflow:hidden}.workplace:before{content:"";position:absolute;top:110px;left:28%;width:65vw;height:65vw;border:60px solid #ffffff05;border-radius:50%;pointer-events:none}.workplace:after{content:"RollMetric";position:absolute;right:-46px;top:280px;transform:rotate(-90deg) translateX(0);transform-origin:center;letter-spacing:-8px;font-size:clamp(90px,11vw,195px);font-weight:900;color:#2d7ac41b;pointer-events:none}
.topbar{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:23px clamp(20px,3vw,48px) 16px;min-height:90px}.backlink{color:#c8ebe1;text-decoration:none;letter-spacing:1.8px;font:10px 'Space Mono',monospace;white-space:nowrap}.backlink:hover{color:#fff}.topbar-center{display:flex;gap:10px;align-items:center;margin-right:auto}.topbar-center strong{display:block;font-size:18px}.topbar-center small{display:block;font-size:10px;color:#8fa5b8}.mini-mark{display:block;object-fit:contain;width:42px;height:42px;flex-shrink:0;border-radius:10px}.topbar-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.context-pill{background:#f5fbff;border-radius:999px;padding:9px 12px;color:#1f3550;font-size:10px;font-weight:800;white-space:nowrap}.context-pill b{font-weight:900}.context-pill.cloud{color:#246e54}.reset-btn{background:#dff8e9;border:1px solid #adefcf;color:#1c614a;padding:9px 12px;border-radius:999px;font-weight:800;font-size:10px}.reset-btn:hover{background:#fff}
.demo-banner{display:flex;justify-content:space-between;align-items:center;gap:15px;position:relative;z-index:2;margin:0 clamp(20px,3vw,48px) 17px;border:1px solid #96d7c34a;border-radius:9px;background:#092922af;padding:9px 15px}.demo-banner>span{color:#8cf0c8;letter-spacing:1.3px;font:10px 'Space Mono',monospace;white-space:nowrap}.demo-banner p{margin:0;color:#bad7ce;font-size:11px;line-height:1.4}.demo-banner button{display:none;color:white;border:1px solid #83d3b487;background:#204d47;border-radius:6px;padding:7px 10px;font-size:11px;white-space:nowrap}
.home-view{position:relative;z-index:1;max-width:1190px;padding:0 clamp(20px,3vw,48px) 52px;margin:auto}.welcome{display:flex;justify-content:space-between;gap:30px;background:linear-gradient(120deg,#132d48,#173c61);box-shadow:0 16px 35px #0004;border:1px solid #5081a53d;border-radius:18px;padding:35px 38px;align-items:center}.welcome>div:first-child{max-width:670px}.eyebrow{color:#94d0f5;letter-spacing:2px;font:10px 'Space Mono',monospace}.welcome h1{font-size:clamp(28px,3.7vw,53px);line-height:1.07;letter-spacing:-1.8px;margin:15px 0}.welcome h1 em{color:#abe6da;font-style:normal}.welcome p{max-width:560px;color:#b6cde0;line-height:1.65;font-size:13px;margin:0}.welcome-status{background:#ffffff12;border:1px solid #ffffff27;border-radius:14px;padding:18px;min-width:255px}.welcome-status>span{display:block;color:#acc3d9;font:9px 'Space Mono',monospace;letter-spacing:1px}.welcome-status>strong{display:block;padding:11px 0 14px;font-size:14px;border-bottom:1px solid #ffffff26}.welcome-status>div{display:flex;gap:10px;justify-content:space-between;padding:10px 0 0;font-size:10px}.welcome-status>div span{color:#acc4d7}.welcome-status>div b{color:#e2f7ed;text-align:right}
.program-heading{display:flex;justify-content:space-between;align-items:center;margin:27px 2px 11px}.program-heading h2{font-size:11px;font-weight:900;letter-spacing:.7px;margin:0}.program-heading span{font-size:10px;font-weight:900;color:#bccbd7}.program-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.program-card{min-height:170px;border:1px solid #c5d9e6aa;border-radius:14px;text-align:left;background:linear-gradient(115deg,#f8fbffea,#dcecf7d6),radial-gradient(circle at 100% 0%,#91c4df55,transparent 50%);padding:22px;color:#1d4166;display:flex;align-items:flex-start;flex-direction:column;transition:transform .18s,box-shadow .18s}.program-card:hover{transform:translateY(-4px);box-shadow:0 15px 27px #0005}.card-icon{background:#183b5e;color:#b8f7e4;border-radius:9px;display:grid;place-items:center;width:36px;height:36px;font-size:20px;margin-bottom:11px}.program-card strong{font-size:16px}.program-card p{font-size:11px;color:#57728d;max-width:390px;line-height:1.55;margin:6px 0 14px}.open-label{color:#2266a4;font-size:11px;font-weight:900;margin-top:auto}.program-grid.single{max-width:calc(50% - 7px)}.home-footer{display:flex;justify-content:space-between;gap:12px;color:#9eb9cb;font:10px 'Space Mono',monospace;letter-spacing:1px;margin-top:30px}
.program-stage{position:relative;z-index:2;margin:0 clamp(12px,1.5vw,22px) 18px;min-height:calc(100vh - 165px);background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 15px 35px #0004;display:flex;flex-direction:column}.stage-head{display:flex;justify-content:space-between;gap:15px;align-items:center;background:#eaf2f7;color:#183b55;border-bottom:1px solid #bfd3e1;padding:10px 15px;font-size:11px;font-weight:800}.stage-head>div{display:flex;gap:14px;align-items:center}.stage-head>span{color:#7a92a4;font-size:10px}.stage-back{background:white;border:1px solid #c7d8e4;color:#245b81;padding:7px 10px;border-radius:8px;font-weight:800;font-size:11px}.stage-demo{background:#d8f2e7;color:#20674e;border-radius:999px;padding:4px 8px;font:9px 'Space Mono',monospace}.program-stage iframe{display:block;flex:1;width:100%;min-height:calc(100vh - 213px);border:0;background:#f4f7fb}
@media(max-width:1200px){.topbar-actions .context-pill:not(.cloud){display:none}.welcome{padding:24px}.welcome-status{min-width:230px}}@media(max-width:850px){.demo-app{grid-template-columns:1fr}.sidebar{position:fixed;transform:translateX(-105%);transition:transform .2s;width:250px;box-shadow:15px 0 40px #0007}.menu-open .sidebar{transform:translateX(0)}.workplace{min-height:100vh}.demo-banner button{display:block}.topbar{padding:17px 18px}.backlink span{display:none}.topbar-center strong{font-size:14px}.topbar-actions .cloud{display:none}.home-view{padding:0 18px 25px}.welcome{flex-direction:column;align-items:stretch}.welcome-status{min-width:0}.program-stage{margin:0 8px 8px}.program-stage iframe{min-height:calc(100vh - 204px)}.stage-head>span{display:none}}
@media(max-width:540px){.program-grid{grid-template-columns:1fr}.program-grid.single{max-width:none}.welcome h1{font-size:33px}.program-card{min-height:140px}.demo-banner{margin:0 12px 12px;padding:8px}.demo-banner p{display:none}.reset-btn{font-size:0}.reset-btn::after{content:'Återställ';font-size:10px}.stage-head{flex-wrap:wrap}.context-pill{display:none}.home-footer{flex-direction:column}}