:root { color-scheme: dark; --bg:#090f16; --panel:#101a25; --panel2:#142233; --line:#294258; --ink:#e8f0f5; --muted:#91a6b7; --cyan:#66d9ef; --yellow:#f2c14e; --red:#ff7373; --green:#8dce8a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-size:13px; } button,input { font:inherit; } button { color:var(--ink); background:#182b3d; border:1px solid var(--line); border-radius:3px; cursor:pointer; min-height:34px; padding:7px 9px; } button:hover:not(:disabled) { border-color:var(--cyan); background:#1b344b; } button:focus-visible,input:focus-visible,a:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; } button:disabled { opacity:.45; cursor:not-allowed; } a { color:var(--cyan); }
.machine-header { min-height:56px; display:flex; align-items:center; gap:20px; padding:8px 18px; border-bottom:1px solid var(--line); background:#0d1722; }.brand { color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.12em; }.brand span { color:var(--cyan); }.header-note { color:var(--yellow); font-size:11px; flex:1; }.machine-links { display:flex; justify-content:flex-end; gap:14px; font-size:11px; }
.machine-layout { height:calc(100vh - 86px); min-height:560px; display:grid; grid-template-columns:270px minmax(360px,1fr) 300px; }.panel { overflow:auto; padding:17px; background:var(--panel); }.catalog-panel { border-right:1px solid var(--line); }.inspector-panel { border-left:1px solid var(--line); }.panel-heading h1 { margin:0 0 7px; text-transform:uppercase; letter-spacing:.08em; font-size:17px; }.panel-heading p,.field-help,.muted { color:var(--muted); line-height:1.5; font-size:11px; }.panel h2 { margin:22px 0 8px; font-size:11px; letter-spacing:.1em; color:#bcd0de; text-transform:uppercase; }.panel h2:first-child { margin-top:0; }
.viewport-panel { position:relative; min-width:0; background:radial-gradient(circle at 50% 43%,#172a38,#0a111a 70%); }.viewport-panel:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image:linear-gradient(#385064 1px,transparent 1px),linear-gradient(90deg,#385064 1px,transparent 1px); background-size:50px 50px; }.viewport-panel > #viewport { position:absolute; inset:0; }.viewport-panel canvas { display:block; width:100%; height:100%; position:relative; }.preview-loading { position:absolute; top:14px; left:14px; padding:5px 7px; color:#bcd0de; background:#09121bdd; border:1px solid #263e51; font-size:10px; pointer-events:none; }.preview-loading[hidden] { display:none; }.view-controls { position:absolute; top:12px; right:12px; display:flex; gap:5px; }.view-controls button { min-height:28px; padding:4px 7px; background:#09121bdd; color:#bcd0de; font-size:10px; }.viewport-hud { position:absolute; bottom:13px; left:13px; display:flex; gap:7px; flex-wrap:wrap; pointer-events:none; }.viewport-hud span { background:#09121bdd; border:1px solid #263e51; padding:4px 6px; font-size:10px; color:#9ab0bf; }.empty-state { position:absolute; inset:0; display:grid; place-content:center; gap:7px; text-align:center; pointer-events:none; color:var(--muted); }.empty-state[hidden] { display:none; }.empty-state strong { color:var(--ink); font-size:15px; }.empty-state span { font-size:11px; }
.demo-list,.catalog-list { display:grid; gap:7px; }.catalog-search { display:grid; gap:4px; margin:0 0 8px; color:var(--muted); font-size:10px; }.catalog-search input { min-width:0; color:var(--ink); background:#0a121b; border:1px solid var(--line); border-radius:3px; padding:7px; }.demo-card,.catalog-card { text-align:left; background:var(--panel2); border:1px solid #294257; padding:10px; border-radius:4px; }.demo-card:hover,.catalog-card:hover { border-color:var(--cyan); }.card-title { display:block; color:var(--ink); font-size:12px; margin-bottom:5px; }.card-detail { display:block; color:var(--muted); font-size:10px; line-height:1.35; }.catalog-card .card-detail { margin-bottom:7px; }.badge { color:var(--green); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }.badge.review { display:block; color:var(--yellow); margin-top:4px; }.status,.message { min-height:20px; margin:14px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }.status.error,.message.error { color:var(--red); }.message.success { color:var(--green); }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:7px; }.actions.two { margin-bottom:7px; }.danger { color:#ffb1b1; width:100%; }.instance-list { display:grid; gap:5px; }.instance-item { min-height:30px; text-align:left; font-size:10px; padding:6px 7px; color:#bcd0de; background:#0d1823; }.instance-item[aria-pressed="true"] { border-color:var(--cyan); color:var(--cyan); background:#163045; }.selected-name { min-height:20px; margin:0 0 8px; color:var(--cyan); font-size:12px; }.transform-form { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.transform-form label { display:grid; gap:3px; font-size:10px; color:var(--muted); }.transform-form input { min-width:0; color:var(--ink); background:#0a121b; border:1px solid var(--line); border-radius:3px; padding:7px; }.transform-form button { grid-column:1 / -1; }.component-list { border-top:1px solid #24394b; }.component-row { padding:8px 0; border-bottom:1px solid #24394b; }.component-row strong,.component-row span { display:block; }.component-row strong { font-size:11px; }.component-row span { color:var(--muted); font-size:10px; margin-top:3px; }
footer { height:30px; padding:8px 18px; border-top:1px solid var(--line); color:#738c9e; background:#0d1722; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:900px) { .machine-layout { grid-template-columns:230px minmax(310px,1fr); }.inspector-panel { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); }.header-note { display:none; } body { overflow:auto; }.machine-layout { height:auto; min-height:calc(100vh - 86px); }.viewport-panel { min-height:520px; } }
@media (max-width:620px) { .machine-layout { grid-template-columns:1fr; }.catalog-panel { border-right:0; border-bottom:1px solid var(--line); }.viewport-panel { min-height:420px; }.machine-header { padding:8px 10px; }.brand { font-size:12px; }.machine-links { margin-left:auto; flex-wrap:wrap; gap:5px 10px; }.catalog-list { grid-template-columns:1fr 1fr; } footer { white-space:normal; height:auto; } }