:root {
    --ink: #eef7ff;
    --navy: #08111d;
    --paper: #070a10;
    --panel: #0c121c;
    --sunk: #080d14;
    --mint: #35e7ff;
    --mint-soft: #0b3540;
    --coral: #7650b5;
    --coral-soft: #2d2142;
    --line: #26384c;
    --line-soft: #192737;
    --muted: #86a0b7;
    --shadow: 0 18px 48px rgba(0, 0, 0, .35);
    color-scheme: dark;
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(14px, .35vw + 10px, 17px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: radial-gradient(circle at 85% 0%, #42277466 0, transparent 38%), var(--paper); }
button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.app-header { display: flex; align-items: center; min-height: 52px; padding: .38rem 1rem; color: white; background: linear-gradient(110deg,#0c121c,#08111d); border-top: 2px solid var(--mint); border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: .85rem; }
.product-name { font-weight: 720; letter-spacing: -.015em; font-size: 1rem; color: #eef7ff; }
.brand-credit { margin-left: .35rem; color: var(--muted); font-size: .68rem; font-weight: 500; letter-spacing: 0; }
.product-edition { margin-top: .1rem; color: var(--mint); font: 700 .54rem Consolas,"Courier New",monospace; letter-spacing: .11em; }
.edition-free,.edition-studio{display:none}body[data-edition="free"] .edition-free,body[data-edition="studio"] .edition-studio{display:inline}
.product-purpose { max-width: 670px; margin: 0; color: #dce6ee; line-height: 1.4; font-size: .86rem; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 1fr); min-height: 0; gap: 1rem; padding: 1rem; }
.preview-stage { display: grid; place-items: center start; min-width: 0; min-height: 0; }
.preview-panel, .inspector { min-height: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.preview-panel { width: 0; height: 0; aspect-ratio: 1; overflow: hidden; }
.eyebrow { display: block; color: var(--mint); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: .15rem 0 0; font-size: 1.35rem; letter-spacing: -.025em; }
h2 { margin: .15rem 0 0; font-size: 1.25rem; letter-spacing: -.02em; }
h3 { margin: .16rem 0 .28rem; font-size: 1.05rem; }
.view-switches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.inspector-view-options { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: auto auto repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .45rem .55rem; background: rgba(12,18,28,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
body[data-edition="free"] .inspector-view-options { grid-template-columns: auto auto repeat(2, minmax(0, 1fr)); }
.inspector-view-options .switch { justify-content: center; }
.switch { display: inline-flex; align-items: center; gap: .28rem; min-height: 27px; padding: .2rem .38rem; border: 1px solid var(--line); border-radius: 4px; background: #111d2a; cursor: pointer; font-size: .66rem; font-weight: 650; white-space: nowrap; }
.switch input { accent-color: var(--mint); }
.switch:has(input:checked) { border-color: var(--mint); background: var(--mint-soft); color: var(--mint); }
.switch.standalone { margin-bottom: .9rem; }

#canvas-container { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 15px; background: #162022; }
#glcanvas { display: block; width: 100%; height: 100%; aspect-ratio: 1; }
#tile-preview { position: absolute; inset: 0; display: none; background: center / 100% 100% no-repeat; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.engine-status { margin: .75rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--sunk); overflow: hidden; }
.engine-status-heading { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .52rem .7rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.engine-status-heading > span:first-child { display: flex; gap: .55rem; align-items: center; }
.engine-status-heading .status-dot { display: inline-block; }
#status { max-height: 9rem; overflow: auto; padding: .65rem .7rem; color: var(--ink); font: 650 .68rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; }
#invariant-status { max-height: 16rem; overflow: auto; margin-top: .7rem; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #05080d; font: 650 .68rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; }
#invariant-status:empty { display: none; }
.mode-note { color: var(--muted); font-weight: 600; letter-spacing: 0; text-align: right; text-transform: none; }

.inspector { overflow-y: auto; scrollbar-color: var(--line) transparent; }
.inspector-heading { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: rgba(12,18,28,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.control-section { border-bottom: 1px solid var(--line-soft); }
.control-section summary, .diagnostics summary { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; list-style: none; cursor: pointer; user-select: none; }
.control-section summary::-webkit-details-marker, .diagnostics summary::-webkit-details-marker { display: none; }
.control-section summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 1.2rem; }
.control-section[open] summary::after { content: "−"; }
.control-section summary strong { display: block; font-size: .9rem; }
.control-section summary small { display: block; margin-top: .12rem; color: var(--muted); font-size: .68rem; font-weight: 450; }
.stage-number { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--navy); color: white; font: 700 .68rem ui-monospace, "Cascadia Mono", Consolas, monospace; }
.badge { margin-left: auto; border-radius: 999px; padding: .2rem .48rem; background: var(--coral-soft); color: #8f351f; font-size: .62rem; font-weight: 750; }
.badge + * { margin-left: 0 !important; }
.section-body { padding: .15rem 1.1rem 1rem 3.85rem; }
.two-column, .parameter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
.control-group { min-width: 0; }
.control-group label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .36rem; color: var(--muted); font-size: .7rem; font-weight: 700; }
output { color: var(--mint); font: 700 .68rem ui-monospace, "Cascadia Mono", Consolas, monospace; }
input[type="range"] { width: 100%; height: 4px; margin: .35rem 0; accent-color: var(--mint); cursor: pointer; }
select { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: #111d2a; padding: .42rem .55rem; color: var(--ink); font-size: .76rem; }
.palette-control { grid-column: 1 / -1; }
.palette-editor { display: grid; gap: .55rem; margin-top: .65rem; padding: .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--sunk); }
.palette-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.palette-editor-heading label { margin: 0; }
.palette-name { width: 100%; min-height: 36px; border: 1px solid var(--line); border-radius: 7px; padding: .4rem .5rem; color: var(--ink); background: #05080d; font-size: .74rem; }
.palette-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.palette-swatch { display:grid;grid-template-columns:auto 1fr;grid-template-rows:46px auto;gap:.25rem .35rem;min-width:0;border:1px solid var(--line);border-radius:5px;padding:.3rem;background:#070c13;color:var(--ink);cursor:pointer;text-align:left; }
.palette-swatch:hover,.palette-swatch:focus-visible{border-color:var(--mint);transform:translateY(-1px);outline:0}.palette-swatch span{grid-column:1/-1;display:block;border:1px solid #ffffff33;border-radius:3px;box-shadow:inset 0 0 18px #0003}.palette-swatch b{color:var(--mint);font:700 .56rem Consolas,monospace}.palette-swatch code{overflow:hidden;color:var(--muted);font:.58rem Consolas,monospace;text-overflow:ellipsis}.palette-editor-heading>span{color:var(--muted);font:600 .6rem Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.palette-editor small { color: var(--muted); font-size: .63rem; line-height: 1.35; }
.palette-editor code { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.palette-editor :disabled { cursor: not-allowed; opacity: .68; }
.rd-section-body{padding-left:1.1rem}.rd-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;margin:.15rem 0 .55rem}.rd-group-heading strong{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mint)}.rd-group-heading span{color:var(--muted);font-size:.63rem;text-align:right}.rd-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.rd-level-card,.rd-settings-card{padding:.65rem;border:1px solid var(--line);border-radius:5px;background:#090f18}.rd-level-title{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--line-soft)}.rd-level-title>span{display:grid;place-items:center;width:25px;height:25px;border-radius:3px;background:var(--mint-soft);color:var(--mint);font:700 .6rem Consolas,monospace}.rd-level-title h4{margin:0;font-size:.78rem}.rd-level-title p{margin:.08rem 0 0;color:var(--muted);font-size:.58rem}.rd-level-card .control-group{margin-top:.6rem}.control-group small{display:block;margin-top:.1rem;color:var(--muted);font-size:.56rem;line-height:1.3}.rd-weight{margin-top:.8rem!important;padding-top:.6rem;border-top:1px solid var(--line-soft)}.rd-weight label{color:#cbb8f4}.rd-lower-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:.55rem;margin-top:.55rem}.rd-settings-card .rd-group-heading{margin-top:0}.rd-mix-card{border-color:#7650b588;background:linear-gradient(135deg,#0b111b,#171126)}.range-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:.55rem}

.btn { min-height: 31px; border: 1px solid transparent; border-radius: 4px; padding: .36rem .62rem; cursor: pointer; font-weight: 750; font-size: .68rem; }
.btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: white; }
.btn-secondary { border-color: #38506a; background: #111d2a; color: #cce5f5; }
.btn-quiet { border-color: var(--line); background: var(--sunk); color: var(--ink); }
.btn.compact { min-height: 27px; padding: .2rem .52rem; }
.output-card { margin: 1rem; padding: 1rem; border-radius: 12px; background: var(--navy); color: white; }
.output-card p { margin-bottom: 0; color: #c8d5e2; font-size: .72rem; line-height: 1.45; }
.output-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .8rem; }
.export-settings { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .8rem; }
.export-settings label { font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.export-settings select { min-width: 150px; }
.output-card .btn-secondary { border-color: rgba(255,255,255,.55); background: transparent; color: white; }
.diagnostics { margin: 0 1rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--sunk); }
.diagnostics summary { padding: .7rem .8rem; font-size: .72rem; font-weight: 750; }
.diagnostics > div { padding: 0 .8rem .8rem; }
.diagnostics p { color: var(--muted); font-size: .68rem; line-height: 1.45; }

.app-footer { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 1rem; color: var(--muted); background: var(--sunk); border-top: 1px solid var(--line); font-size: .62rem; }
.app-footer span:first-child { color: var(--mint); font-weight: 750; }

.about-dialog{position:relative;width:min(760px,calc(100vw - 40px));max-height:calc(100vh - 50px);overflow:auto;border:1px solid #35e7ff88;border-radius:6px;padding:1.6rem;background:linear-gradient(145deg,#0c1521,#080c13);color:var(--ink);box-shadow:0 0 60px #35e7ff20,0 30px 80px #000b}.about-dialog::backdrop{background:#02050acc;backdrop-filter:blur(5px)}.about-scanline{position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--mint),#a875ff,transparent)}.about-close{position:absolute;right:.8rem;top:.65rem;border:0;background:transparent;color:var(--muted);font-size:1.6rem;cursor:pointer}.about-dialog h1{margin:.3rem 0 .55rem;font-size:1.8rem;background:linear-gradient(90deg,#fff,var(--mint),#a875ff);background-clip:text;color:transparent}.about-lead{margin-bottom:.9rem;color:#c7d9e8;font-size:.8rem;line-height:1.55}.about-dialog dl{display:grid;grid-template-columns:1fr 1fr;margin:.8rem 0;border:1px solid var(--line)}.about-dialog dl div{display:flex;justify-content:space-between;padding:.5rem .65rem;border-bottom:1px solid var(--line-soft)}.about-dialog dl div:nth-last-child(-n+2){border-bottom:0}.about-dialog dl div:nth-child(odd){border-right:1px solid var(--line-soft)}.about-dialog dt{color:var(--muted);font:700 .65rem Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}.about-dialog dd{margin:0;font-size:.7rem}.about-actions{display:flex;gap:.65rem;margin-top:.9rem}.wiki-heading{padding:.75rem;border:1px solid var(--line);border-bottom:0;background:linear-gradient(90deg,#102130,#151229)}.wiki-heading h2{margin:.15rem 0;font-size:1rem}.wiki-heading p{margin:0;color:var(--muted);font-size:.68rem}.tech-wiki details{border:1px solid var(--line);border-bottom:0;background:#090f18}.tech-wiki details:last-child{border-bottom:1px solid var(--line)}.tech-wiki summary{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;cursor:pointer;list-style:none}.tech-wiki summary::-webkit-details-marker{display:none}.tech-wiki summary span{color:var(--mint);font:700 .6rem Consolas,monospace}.tech-wiki summary strong{font-size:.73rem}.tech-wiki summary::after{content:"+";margin-left:auto;color:var(--muted)}.tech-wiki details[open] summary::after{content:"−"}.tech-wiki details>div{padding:0 .8rem .65rem 2.35rem;color:#adc0cf}.tech-wiki details p{margin:.25rem 0;font-size:.7rem;line-height:1.5}.tech-wiki details b{color:#dff9ff}.about-legal{margin:.75rem 0 0;color:var(--muted);font-size:.62rem;line-height:1.45}
.verification-dialog{position:relative;width:min(680px,calc(100vw - 40px));max-height:calc(100vh - 60px);overflow:auto;border:1px solid #35e7ff88;border-radius:6px;padding:1.6rem;background:linear-gradient(145deg,#0c1521,#080c13);color:var(--ink);box-shadow:0 0 60px #35e7ff20,0 30px 80px #000b}.verification-dialog::backdrop{background:#02050acc;backdrop-filter:blur(5px)}.verification-dialog h1{margin:.3rem 0 .55rem;font-size:1.55rem}.verification-intro{margin:0 0 1rem;color:#b7cad9;font-size:.76rem;line-height:1.5}.verification-explainer{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:.8rem}.verification-explainer div{padding:.55rem;border:1px solid var(--line);border-radius:4px;background:#0a1019}.verification-explainer strong{display:block;margin-bottom:.2rem;color:var(--mint);font:700 .67rem Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}.verification-explainer span{color:var(--muted);font-size:.68rem;line-height:1.4}#invariant-status{max-height:15rem;overflow:auto;margin:.8rem 0 0;padding:.8rem;border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:3px;background:#05080d;color:#dff9ff;font:650 .68rem/1.45 Consolas,monospace;white-space:pre-wrap}.dialog-footer{display:flex;justify-content:flex-end;margin-top:.8rem}.dialog-footer .btn{min-width:80px}
.inline-colour-picker{grid-column:1/-1;margin-top:.55rem;padding:.65rem;border:1px solid #35e7ff66;border-radius:6px;background:linear-gradient(145deg,#0c1521,#080c13);box-shadow:inset 0 0 30px #35e7ff08}.inline-colour-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;color:var(--ink)}.inline-colour-heading strong{font-size:.75rem}.inline-colour-heading .colour-actions{display:flex;align-items:center;gap:.35rem}.inline-colour-heading .btn{min-width:70px;padding:.38rem .65rem}.inline-colour-heading .colour-close{border:0;background:transparent;color:var(--muted);font-size:1.15rem;cursor:pointer}.colour-picker-layout{display:grid;grid-template-columns:minmax(210px,1.15fr) minmax(245px,1fr);gap:.65rem}.colour-field{--picker-hue:#f00;position:relative;height:145px;border:1px solid #ffffff66;border-radius:5px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue);cursor:crosshair;touch-action:none}.colour-field i{position:absolute;width:12px;height:12px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #000,0 2px 8px #000;transform:translate(-50%,-50%);pointer-events:none}.hue-label{display:block;margin:.35rem 0 .15rem;color:var(--muted);font:700 .58rem Consolas,monospace;text-transform:uppercase}.hue-slider{width:100%;height:12px;padding:0;border:1px solid var(--line);border-radius:7px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);appearance:none}.hue-slider::-webkit-slider-thumb{width:14px;height:19px;border:2px solid white;border-radius:4px;background:transparent;box-shadow:0 0 0 1px #000;appearance:none}.colour-values{display:grid;align-content:start;gap:.35rem}.colour-compare{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.colour-compare div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.35rem;color:var(--muted);font-size:.58rem}.colour-compare i{height:25px;border:1px solid #ffffff44;border-radius:4px}.colour-values label{display:grid;gap:.15rem;color:var(--muted);font-size:.58rem}.colour-values input{width:100%;min-width:0;border:1px solid var(--line);border-radius:4px;padding:.28rem .35rem;background:#05080d;color:var(--ink);font:700 .68rem Consolas,monospace}.colour-inputs{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:.3rem}.colour-readout{display:flex;justify-content:space-between;padding:.32rem;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:.58rem}.colour-readout code{color:var(--mint)}.recent-colours>span{display:block;margin-bottom:.2rem;color:var(--muted);font-size:.58rem}.recent-colours>div{display:flex;gap:.25rem;min-height:23px}.recent-colours button{width:23px;height:23px;border:1px solid #ffffff44;border-radius:4px;cursor:pointer}@media(max-width:760px){.colour-picker-layout{grid-template-columns:1fr}.colour-field{height:120px}}

@media (max-width: 1050px) {
    .app-header { grid-template-columns: 1fr auto; }
    .product-purpose { display: none; }
    .view-switches { gap: .25rem; }
    .switch { padding: .3rem .42rem; }
}

@media (max-height: 720px) {
    .app-header { min-height: 48px; padding-block: .3rem; }
}