:root{
    --bg:#05060f;
    --fg:rgba(255,255,255,.92);
    /* --panel: #11131a; */
    --stroke: #1f2230;
    --muted:rgba(255,255,255,.7);
    --text: #e8ecf3;
    --line:rgba(255,255,255,.12);
    --accent: #7cf0ff;
    --accent-2: #ff8bd1;
    --r:18px;
    --shadow: 0 20px 60px rgba(0,0,0,0.35);
    --radius: 14px;
    --space: 20px;
    --mono: ui-monospace, Menlo, Monaco, Consolas, monospace;
    --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:var(--sans);
    color:var(--fg);
    background:
    radial-gradient(900px 400px at 20% 10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(800px 500px at 80% 90%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
    line-height:1.5;
}

.wrap{
    max-width:1100px;
    margin:0 auto;
    padding:40px 20px 80px;
    text-align:center;
}

.mehxel-logo{
    width:min(420px, 90%);
    margin:10px auto 10px;
    display:block;
}

.tagline{
    font-size:clamp(18px, 2vw, 24px);
    margin-bottom:20px;
    font-weight:600;
}

.sub{
    max-width:640px;
    margin:0 auto 24px;
    color:var(--muted);
    font-size:16px;
}

.card{
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    border-radius:var(--r);
    padding:20px;
    margin-top:30px;
}

.card h2{
    margin:0 0 10px;
    font-size:20px;
}

.chips{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:14px;
}

.chip{
    font-family:var(--mono);
    font-size:12px;
    color:rgba(255,255,255,.85);
    padding:7px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
}

.coming{
    font-family:var(--mono);
    font-size:13px;
    margin-top:14px;
    color:rgba(255,255,255,.85);
}

.footer{
    margin-top:60px;
    border-top:1px solid var(--line);
    padding-top:18px;
    color:var(--muted);
    font-size:13px;
}

.rp-logo{
    width:100px;
    margin-top:18px;
    opacity:.9;
}

a{
    color:inherit;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

.btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: linear-gradient(135deg, rgba(124,240,255,0.15), rgba(255,139,209,0.12));
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.3); }
.btn.secondary {
    background: rgba(255,255,255,0.05);
    color: var(--muted);
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.controls label { font-weight: 600; color: var(--text); }
.controls select,
.controls input[type="color"],
.controls input[type="range"] {
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: #ffffff;
    /* color: var(--text); */
    color: #000000;
}
.controls input[type="range"] { accent-color: var(--accent); }
canvas {
    border: 1px solid var(--stroke);
    background: #0f1118;
    border-radius: 10px;
    max-width: 100%;
    display: block;
}

.meta-row { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) {
    body { padding: 16px; }
    header { flex-direction: column; align-items: flex-start; }
}

.shell { max-width: 1200px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 42px; }
.pill {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 13px;
}
/* .hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
    align-items: start;
} */
.panel {
    background: linear-gradient(145deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

.hero {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: start;
}

.panel-large {
    flex: 1 1 600px;
}

.panel-small {
    flex: 1 1 350px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}