:root { --ink:#080a0d; --panel:rgba(18,21,25,.72); --line:rgba(255,255,255,.1); --line-hot:rgba(187,255,82,.4); --text:#f0f3ed; --muted:#8d9690; --acid:#baff50; --cyan:#63dfdf; --orange:#ff9d5c; --font-display:Arial,Helvetica,sans-serif; --font-code:Consolas,"Courier New",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),var(--ink); background-size:42px 42px; color:var(--text); font-family:var(--font-display); min-width:320px; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
a { color:inherit; } button,input,select { font:inherit; } button,a,input,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--acid); outline-offset:4px; }
input:focus-visible,select:focus-visible { outline:2px solid var(--acid); outline-offset:-3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
main { position:relative; min-height:100vh; isolation:isolate; overflow:hidden; }
.ambient { position:absolute; z-index:-1; border-radius:999px; filter:blur(120px); pointer-events:none; opacity:.12; }
.ambient--one { width:420px; height:420px; top:100px; left:-220px; background:var(--acid); }
.ambient--two { width:480px; height:480px; top:560px; right:-300px; background:#45a6ff; opacity:.08; }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:13px; color:#dfe4dd; text-decoration:none; font-size:14px; font-weight:620; letter-spacing:-.02em; }
.brand b { color:#4b534d; margin:0 4px; font-weight:400; }
.brand-mark { width:24px; height:24px; display:grid; grid-template-columns:1fr 1fr; gap:2px; transform:rotate(45deg) scale(.72); }
.brand-mark i { display:block; border:1px solid #758078; } .brand-mark i:first-child { background:var(--acid); border-color:var(--acid); }
.experiment-badge { display:inline-flex; gap:8px; align-items:center; border:1px solid rgba(186,255,80,.34); border-radius:999px; padding:7px 11px; color:var(--acid); font:600 10px/1 var(--font-code); letter-spacing:.12em; text-transform:uppercase; background:rgba(186,255,80,.05); }
.experiment-badge i,.footer-dot { width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); }
.hero { padding:68px 0 76px; border-bottom:1px solid var(--line); }
.eyebrow { display:flex; justify-content:space-between; color:#687169; font:500 10px/1 var(--font-code); letter-spacing:.15em; margin-bottom:42px; }
.eyebrow span:first-child { color:var(--acid); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.75fr); align-items:end; gap:56px; }
h1 { margin:0; max-width:760px; font-size:clamp(3.4rem,7.1vw,6.9rem); line-height:.88; letter-spacing:-.072em; font-weight:670; }
h1 em { color:transparent; -webkit-text-stroke:1px #707970; font-style:normal; }
.lead { margin:32px 0 0; color:#a8b0aa; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.55; max-width:560px; }
.warning-panel { display:flex; gap:16px; align-items:flex-start; border-top:1px solid var(--line-hot); background:linear-gradient(180deg,rgba(186,255,80,.055),rgba(186,255,80,.012)); padding:20px; }
.warning-icon { flex:0 0 auto; display:grid; place-items:center; width:25px; height:25px; border:1px solid var(--acid); border-radius:50%; color:var(--acid); font:700 12px/1 var(--font-code); }
.warning-panel strong { display:block; color:var(--acid); text-transform:uppercase; letter-spacing:.1em; font:650 10px/1.4 var(--font-code); }
.warning-panel p { margin:7px 0 0; color:#919a93; font-size:12px; line-height:1.55; }
.launcher { padding:66px 0 86px; }
.lab-status { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:66px; border:1px solid var(--line); background:rgba(13,15,18,.74); backdrop-filter:blur(14px); }
.lab-status>div { min-width:0; padding:16px 18px; }
.lab-status>div+div { border-left:1px solid var(--line); }
.lab-status span { display:block; margin-bottom:9px; color:#58605b; font:500 8px/1 var(--font-code); letter-spacing:.12em; text-transform:uppercase; }
.lab-status strong { display:flex; align-items:center; gap:8px; color:#c8cec8; font:600 10px/1.2 var(--font-code); letter-spacing:.07em; text-transform:uppercase; overflow-wrap:anywhere; }
.lab-status strong i { width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 10px var(--acid); }
.lab-status .critical { color:var(--orange); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:27px; }
.section-heading>div { display:flex; align-items:baseline; gap:17px; }
.section-index { color:var(--acid); font:500 10px/1 var(--font-code); }
h2 { margin:0; font-size:clamp(1.65rem,3vw,2.3rem); letter-spacing:-.045em; font-weight:620; }
.section-heading>p { color:#68716a; font:500 10px/1 var(--font-code); text-transform:uppercase; letter-spacing:.1em; }
.section-heading>p span { color:var(--acid); }
.controls { display:grid; grid-template-columns:1fr 190px 190px; border:1px solid var(--line); background:rgba(13,15,18,.74); backdrop-filter:blur(14px); }
.search-control { min-width:0; display:flex; align-items:center; gap:13px; padding:0 17px; border-right:1px solid var(--line); }
.search-control>span:not(.sr-only) { color:#6f7871; font-size:22px; transform:rotate(-15deg); }
.search-control input { width:100%; height:55px; border:0; outline:0; color:#eef1ec; background:transparent; min-width:0; }
.search-control input::placeholder { color:#5d655f; }
kbd { color:#565e58; border:1px solid #323733; border-radius:3px; padding:3px 6px; font:500 9px/1 var(--font-code); white-space:nowrap; }
.select-control { display:flex; align-items:center; position:relative; }
.select-control+.select-control { border-left:1px solid var(--line); }
.select-control>span { position:absolute; left:15px; top:9px; color:#58605b; pointer-events:none; text-transform:uppercase; letter-spacing:.12em; font:500 8px/1 var(--font-code); }
.select-control select { appearance:none; width:100%; height:55px; padding:17px 36px 0 15px; color:#cad0cb; background:transparent; border:0; outline:0; cursor:pointer; font-size:12px; }
.select-control::after { content:"⌄"; position:absolute; right:15px; top:19px; color:#737c75; pointer-events:none; }
.select-control option { color:#e8ebe6; background:#111418; }
.search-control input:focus-visible,.select-control select:focus-visible { outline:2px solid var(--acid); outline-offset:-3px; }
.summary { min-height:48px; display:flex; align-items:center; border-bottom:1px solid var(--line); color:#626b64; font:500 9px/1 var(--font-code); text-transform:uppercase; letter-spacing:.08em; }
.summary span { padding-right:22px; } .summary span+span { padding-left:22px; border-left:1px solid var(--line); } .summary b { color:#abb3ad; font-weight:500; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:26px; }
.project-card { min-width:0; display:flex; flex-direction:column; padding:23px; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(12px); transition:border-color .2s ease,transform .2s ease,background .2s ease; }
.project-card:hover { transform:translateY(-3px); border-color:rgba(186,255,80,.32); background:rgba(22,26,29,.9); }
.card-topline { display:flex; justify-content:space-between; color:#5d665f; text-transform:uppercase; letter-spacing:.1em; font:500 8px/1 var(--font-code); }
.project-card h3 { margin:28px 0 9px; overflow-wrap:anywhere; font-size:1.35rem; letter-spacing:-.035em; }
.project-card>p { margin:0; min-height:62px; color:#8e9790; line-height:1.55; font-size:13px; overflow-wrap:anywhere; }
.card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:22px 0; }
.type-badge,.status { border:1px solid #343a35; border-radius:2px; padding:6px 7px; color:#9ca49e; text-transform:uppercase; letter-spacing:.09em; font:600 8px/1 var(--font-code); }
.status { border-color:rgba(99,223,223,.28); color:var(--cyan); background:rgba(99,223,223,.05); }
.status--needs-fix,.status--broken { border-color:rgba(255,111,99,.35); color:#ff7c70; background:rgba(255,111,99,.05); }
.status--needs-mobile-qa,.status--testing { border-color:rgba(255,157,92,.32); color:var(--orange); background:rgba(255,157,92,.05); }
.status--candidate,.status--ready-to-promote,.status--ready-to-graduate { border-color:rgba(186,255,80,.32); color:var(--acid); background:rgba(186,255,80,.05); }
.status--archived { color:#7b837d; border-color:#353a36; background:rgba(255,255,255,.02); }
.project-card dl { margin:auto 0 22px; border-top:1px solid var(--line); }
.project-card dl div { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font:500 9px/1.3 var(--font-code); }
.project-card dt { color:#545d56; text-transform:uppercase; } .project-card dd { margin:0; color:#929b94; text-align:right; }
.launch-button { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:0 14px; background:#dfe5dc; color:#0b0d0c; text-decoration:none; font:620 11px/1 var(--font-code); transition:background .18s ease,color .18s ease; }
.launch-button:hover { background:var(--acid); } .launch-button span { font-size:15px; }
.empty-state { min-height:350px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; margin-top:26px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)); }
.empty-symbol { display:grid; place-items:center; width:55px; height:55px; margin-bottom:25px; border:1px solid #343a35; color:#737c75; font:500 17px/1 var(--font-code); transform:rotate(45deg); }
.empty-symbol>i { width:18px; height:18px; display:block; border:1px solid #667068; box-shadow:inset 0 0 0 4px var(--ink); background:#667068; }
.empty-state h3 { max-width:calc(100% - 32px); margin:0; color:#d4d9d3; font-size:1.08rem; font-weight:560; letter-spacing:-.025em; overflow-wrap:anywhere; }
.empty-state p { margin:10px 24px 0; color:#69716b; font-size:13px; }
.empty-state button { margin-top:22px; border:1px solid #3c443d; background:transparent; color:#d7dcd6; padding:10px 16px; cursor:pointer; }
.empty-state button:hover { border-color:var(--acid); color:var(--acid); }
.clear-filters { display:block; margin:18px auto 0; border:1px solid #3c443d; background:transparent; color:#d7dcd6; padding:10px 16px; cursor:pointer; }
.clear-filters:hover { border-color:var(--acid); color:var(--acid); }
.manifest-hint { margin-top:27px; color:#4c554e; font:500 8px/1 var(--font-code); letter-spacing:.15em; }
.empty-state--error { border-color:rgba(255,124,112,.2); } .empty-state--error .empty-symbol { border-color:rgba(255,124,112,.4); color:#ff7c70; }
.loading-symbol { border-radius:50%; border-color:#313832; border-top-color:var(--acid); animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(405deg); } }
.lifecycle { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; padding:18px 20px; border:1px solid var(--line); color:#606861; font:500 8px/1.3 var(--font-code); letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.lifecycle i { color:#424943; font-style:normal; }
.lifecycle span { max-width:100%; overflow-wrap:anywhere; }
.lifecycle-current { color:var(--acid); }
.site-footer { min-height:92px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:#59615b; font:500 9px/1 var(--font-code); text-transform:uppercase; letter-spacing:.09em; }
.site-footer p:first-child { display:flex; align-items:center; gap:10px; color:#7a837c; } .site-footer i { padding:0 7px; color:#3d443f; font-style:normal; }
.site-footer>div { min-width:0; text-align:right; overflow-wrap:anywhere; }
.site-footer>div p { margin:0 0 8px; }
.site-footer small { display:block; color:#454c47; font:500 8px/1.4 var(--font-code); letter-spacing:.04em; text-transform:none; }
.experiment-shell { height:100vh; display:grid; grid-template-rows:50px minmax(0,1fr); background:#050607; }
.experiment-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:0 18px; border-bottom:1px solid var(--line); background:#0b0d0f; font:600 9px/1 var(--font-code); text-transform:uppercase; letter-spacing:.1em; }
.experiment-bar a { color:var(--acid); text-decoration:none; }
.experiment-bar>span:nth-child(2) { color:#6f7871; }
.experiment-state { justify-self:end; display:flex; align-items:center; gap:8px; color:#6f7871; }
.experiment-state i { width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 10px var(--acid); }
.experiment-frame { width:100%; height:100%; border:0; background:#fff; }
@media (max-width:860px) { .hero-grid { grid-template-columns:1fr; gap:48px; } .warning-panel { max-width:500px; } .lab-status { grid-template-columns:repeat(2,minmax(0,1fr)); } .lab-status>div:nth-child(3) { border-left:0; border-top:1px solid var(--line); } .lab-status>div:nth-child(4) { border-top:1px solid var(--line); } .controls { grid-template-columns:1fr 160px 160px; } .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .lifecycle { flex-wrap:wrap; } }
@media (max-width:640px) { .shell { width:min(100% - 32px,1180px); } .site-header { min-height:72px; } .brand { font-size:12px; } .brand b,.brand span:last-child { font-size:0; } .brand span:last-child::after { content:"Digital Opus / Lab"; font-size:12px; } .hero { padding:50px 0 56px; } .eyebrow { margin-bottom:34px; } .eyebrow span:last-child { display:none; } h1 { font-size:clamp(3.25rem,16vw,5rem); } .lead { margin-top:25px; } .launcher { padding:52px 0 65px; } .lab-status { margin-bottom:52px; } .lab-status>div { padding:14px; } .section-heading { align-items:center; } .section-heading>p { display:none; } .controls { grid-template-columns:1fr 1fr; } .search-control { grid-column:1/-1; border-right:0; border-bottom:1px solid var(--line); } .select-control+.select-control { border-left:1px solid var(--line); } .summary { flex-wrap:wrap; padding:11px 0; gap:8px 0; } .summary span { width:50%; padding:5px 10px; } .summary span+span { padding-left:10px; } .project-grid { grid-template-columns:1fr; } .empty-state { min-height:330px; } .lifecycle { gap:10px; } .lifecycle i { transform:rotate(-90deg); } .site-footer { padding:28px 0; flex-direction:column; align-items:flex-start; gap:12px; } .site-footer>div { text-align:left; } }
@media (max-width:370px) { .shell { width:calc(100% - 24px); } .experiment-badge { padding:7px 9px; font-size:8px; } .brand-mark { width:20px; height:20px; } h1 { font-size:3.15rem; } .warning-panel { padding:16px; } .section-heading>div { gap:10px; } .summary span { font-size:8px; } kbd { display:none; } }
@media (max-width:520px) { .experiment-bar { grid-template-columns:1fr auto; } .experiment-bar>span:nth-child(2) { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }