.scp-demo, .scp-data-path { --scp-blue:#006bff; --scp-lime:#62ff00; --scp-navy:#071425; }
.scp-demo { padding-block: clamp(5rem,10vw,10rem); color:#fff; background:#050e1b; }
.scp-demo__heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(18rem,.55fr); gap:2rem 6rem; align-items:end; margin-bottom:clamp(2.5rem,5vw,5rem); }
.scp-demo__heading h2 { max-width:15ch; margin:0; color:#fff; font-size:clamp(2.5rem,5.3vw,5.6rem); line-height:.93; letter-spacing:-.06em; text-wrap:balance; }
.scp-demo__heading > p { margin:0; color:rgba(255,255,255,.62); line-height:1.7; }
.scp-demo .slp-kicker { color:var(--scp-lime); }
.scp-window { min-height:42rem; display:grid; grid-template-columns:14rem minmax(0,1fr); overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:clamp(1rem,2vw,2rem); background:#f4f7fa; box-shadow:0 3rem 8rem rgba(0,0,0,.5); }
.scp-window__rail { display:flex; flex-direction:column; padding:1.25rem; color:#fff; background:#071425; }
.scp-window__brand { display:flex; gap:.8rem; align-items:center; min-height:4rem; color:#fff; text-decoration:none; }
.scp-window__brand > span { width:2.7rem; aspect-ratio:1; display:grid; place-items:center; border-radius:.8rem; color:#071425; background:var(--scp-lime); font-weight:950; }
.scp-window__brand strong { font-size:.82rem; line-height:1.15; letter-spacing:.05em; text-transform:uppercase; }
.scp-tabs { display:grid; gap:.45rem; margin-top:3rem; }
.scp-tabs button { min-height:3rem; display:flex; gap:.75rem; align-items:center; border:1px solid transparent; border-radius:.7rem; padding:.65rem .75rem; color:rgba(255,255,255,.63); background:transparent; font:inherit; font-size:.82rem; font-weight:800; text-align:left; cursor:pointer; }
.scp-tabs button span { color:rgba(255,255,255,.3); font-variant-numeric:tabular-nums; }
.scp-tabs button[aria-selected="true"] { color:#fff; border-color:rgba(255,255,255,.15); background:rgba(0,107,255,.22); }
.scp-tabs button[aria-selected="true"] span { color:var(--scp-lime); }
.scp-window__rail > small { margin-top:auto; color:rgba(255,255,255,.38); font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; }
.scp-window__content { min-width:0; color:#071425; }
.scp-window__topbar { min-height:4.6rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem clamp(1.2rem,3vw,2.4rem); border-bottom:1px solid #dce4ec; background:#fff; font-size:.78rem; font-weight:850; }
.scp-status { display:inline-flex; align-items:center; gap:.5rem; color:#44566b; }
.scp-status i { width:.55rem; aspect-ratio:1; border-radius:50%; background:#38b86b; box-shadow:0 0 0 .25rem rgba(56,184,107,.13); }
.scp-panel { padding:clamp(1.4rem,3.5vw,3.2rem); }
[data-portal-tabs-ready="true"] .scp-panel:not(.is-active) { display:none; }
.scp-panel > header p { margin:0 0 .45rem; color:#006bff; font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.scp-panel > header h3 { margin:0; color:#071425; font-size:clamp(1.8rem,3.2vw,3.3rem); line-height:1; letter-spacing:-.045em; }
.scp-panel > header > span { display:block; margin-top:.8rem; color:#647286; }
.scp-panel__grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(16rem,.7fr); gap:1rem; margin-top:2.3rem; }
.scp-object-card, .scp-activity, .scp-mini-doc { border:1px solid #d8e1ea; border-radius:1rem; padding:1.35rem; background:#fff; }
.scp-object-card { min-height:15rem; display:flex; flex-direction:column; background:linear-gradient(145deg,#fff,#eef5ff); }
.scp-label { color:#718096; font-size:.65rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.scp-object-card strong { max-width:11ch; margin-top:auto; font-size:clamp(1.4rem,2.2vw,2.1rem); line-height:1.05; }
.scp-object-card p { color:#627185; line-height:1.55; }
.scp-object-card a { color:#0056d6; font-size:.82rem; font-weight:900; text-decoration:none; }
.scp-activity { grid-row:span 2; }
.scp-activity ol { display:grid; gap:0; margin:1.2rem 0 0; padding:0; list-style:none; }
.scp-activity li { position:relative; min-height:5.3rem; padding:0 0 1.2rem 2rem; border-left:1px solid #cbd6e2; }
.scp-activity li::before { content:""; position:absolute; left:-.36rem; top:.1rem; width:.65rem; aspect-ratio:1; border:2px solid #9eacba; border-radius:50%; background:#fff; }
.scp-activity li.is-done::before { border-color:#006bff; background:#006bff; }
.scp-activity li.is-current::before { border-color:#62ff00; background:#071425; box-shadow:0 0 0 .25rem rgba(98,255,0,.22); }
.scp-activity li:last-child { border-left-color:transparent; }
.scp-activity strong, .scp-activity small { display:block; }
.scp-activity strong { font-size:.86rem; }
.scp-activity small { margin-top:.25rem; color:#748296; line-height:1.45; }
.scp-mini-doc strong, .scp-mini-doc p { display:block; }
.scp-mini-doc strong { margin-top:1rem; }
.scp-mini-doc p { margin:.3rem 0 1rem; color:#6a788a; font-size:.8rem; }
.scp-file { display:flex; justify-content:space-between; border-top:1px solid #dbe3eb; padding-top:.75rem; color:#006bff; font-size:.72rem; font-weight:900; }
.scp-file i { color:#398356; font-style:normal; }
.scp-table { display:grid; margin-top:2.3rem; border:1px solid #d7e0e9; border-radius:1rem; overflow:hidden; background:#fff; }
.scp-table [role="row"] { display:grid; grid-template-columns:1.1fr 1fr .6fr; gap:1rem; padding:1rem 1.2rem; border-top:1px solid #e1e7ed; align-items:center; }
.scp-table [role="row"].is-head { border:0; color:#788596; background:#eef3f7; font-size:.67rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.scp-table strong { font-size:.85rem; }
.scp-table span { color:#667589; font-size:.8rem; }
.scp-table em { width:max-content; border-radius:99px; padding:.35rem .55rem; color:#135f36; background:#e6f7eb; font-size:.68rem; font-style:normal; font-weight:850; }
.scp-doc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:2.3rem; }
.scp-doc-grid article { min-height:12rem; display:flex; flex-direction:column; border:1px solid #d7e0e9; border-radius:1rem; padding:1.2rem; background:#fff; }
.scp-doc-grid article > span { width:max-content; border-radius:.35rem; padding:.3rem .45rem; color:#0056d6; background:#eaf2ff; font-size:.62rem; font-weight:950; }
.scp-doc-grid strong { margin-top:auto; }
.scp-doc-grid small { margin-top:.35rem; color:#748296; line-height:1.45; }
.scp-data-path { padding-block:clamp(5rem,10vw,10rem); background:#f7f4ee; }
.scp-data-path__grid { display:grid; grid-template-columns:minmax(18rem,.65fr) minmax(0,1.35fr); gap:clamp(3rem,8vw,9rem); }
.scp-data-path h2 { margin:0; color:#071425; font-size:clamp(2.4rem,4.7vw,4.9rem); line-height:.95; letter-spacing:-.055em; }
.scp-data-path header > p:last-child { color:#5d6d80; line-height:1.7; }
.scp-data-path ol { margin:0; padding:0; list-style:none; border-top:1px solid #bac7d4; }
.scp-data-path li { display:grid; grid-template-columns:4rem 1fr; gap:1.3rem; padding-block:1.4rem; border-bottom:1px solid #bac7d4; }
.scp-data-path li > span { color:#006bff; font-weight:950; font-variant-numeric:tabular-nums; }
.scp-data-path strong { font-size:1.15rem; }
.scp-data-path li p { margin:.25rem 0 0; color:#657487; line-height:1.55; }
@media (max-width:900px) { .scp-demo__heading,.scp-data-path__grid { grid-template-columns:1fr; } .scp-window { grid-template-columns:1fr; } .scp-window__rail { display:block; } .scp-window__brand { width:max-content; } .scp-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:1.2rem; } .scp-tabs button { justify-content:center; } .scp-window__rail > small { display:none; } }
@media (max-width:650px) { .scp-window { min-height:0; } .scp-tabs { display:flex; overflow-x:auto; padding-bottom:.25rem; } .scp-tabs button { flex:0 0 auto; } .scp-panel__grid,.scp-doc-grid { grid-template-columns:1fr; } .scp-activity { grid-row:auto; } .scp-table { overflow-x:auto; } .scp-table [role="row"] { min-width:38rem; } .scp-window__topbar { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .scp-demo *, .scp-data-path * { scroll-behavior:auto !important; transition-duration:.01ms !important; } }
