:root{
  --bg:#0b0c10; --panel:#12151d; --panel-2:#0c0f16; --text:#f1f5f9; --muted:#93a3b7; --line:#1c2230;
  --trisda-red:#e11d48; --trisda-yellow:#f59e0b; --trisda-green:#10b981;
  --accent:#ffffff; --accent-2:#cbd5e1;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(225,29,72,.08), transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(16,185,129,.08), transparent 60%),
    linear-gradient(180deg,#0b0d12 0%,#090a0e 100%);
}
header{ position:sticky; top:0; z-index:10; background:rgba(18,21,29,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
header::after{ content:""; display:block; height:3px;
  background:linear-gradient(90deg,var(--trisda-red),var(--trisda-yellow),var(--trisda-green)); }
.wrap{ max-width:1100px; margin:0 auto; padding:16px }
h1{ font-size:clamp(20px,2.2vw,28px); margin:0 }
.panel{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px }
@media(min-width:960px){ .panel{ grid-template-columns:1fr 360px } }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.25); overflow:hidden; }
.card h2{ margin:0 0 8px; font-size:16px; color:#fff }
.card .content{ padding:14px }
.controls{ display:grid; gap:10px }
.row{ display:flex; gap:10px; flex-wrap:wrap }
button,select,label{
  appearance:none; border:none; padding:10px 12px; border-radius:12px; background:var(--panel-2); color:var(--text);
  font-weight:600; border:1px solid var(--line); cursor:pointer; transition:transform .06s ease, box-shadow .06s ease, opacity .2s ease;font-size: 12px;
}
button:hover,select:hover, label:hover{ box-shadow:0 0 0 2px rgba(255,255,255,.04) inset }
button:active{ transform:translateY(1px) }
button:disabled{ opacity:.5; cursor:not-allowed }
button.primary{ background:#0f1115; color:#fff; border:1px solid var(--line); box-shadow:0 0 0 2px rgba(255,255,255,.02) inset; }
button.primary:focus-visible{
  outline:none; box-shadow:
    0 0 0 2px rgba(255,255,255,.04) inset,
    0 0 0 3px var(--trisda-red),
    0 0 0 5px var(--trisda-yellow),
    0 0 0 7px var(--trisda-green);
}

label:active{ transform:translateY(1px) }
label:disabled{ opacity:.5; cursor:not-allowed }
label.primary{ background:#0f1115; color:#fff; border:1px solid var(--line); box-shadow:0 0 0 2px rgba(255,255,255,.02) inset; }
label.primary:focus-visible{
  outline:none; box-shadow:
    0 0 0 2px rgba(255,255,255,.04) inset,
    0 0 0 3px var(--trisda-red),
    0 0 0 5px var(--trisda-yellow),
    0 0 0 7px var(--trisda-green);
}
.stage{ display:grid; place-items:center; padding:12px }
.canvas-shell{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,#0b0d12,#0a0c11); overflow:hidden;

  /* Kunci gesture agar drag/zoom tidak diambil alih scroll */
  touch-action:none;
  overscroll-behavior:contain;
}
.canvas-shell[data-ratio="4:5"]{ aspect-ratio:4/5 }
.canvas-shell[data-ratio="9:16"]{ aspect-ratio:9/16 }

canvas{ width:100%; height:100%; display:block }

.hint{ font-size:12px; color:var(--muted) }
.brand{ display:flex; align-items:center; gap:8px }
.brand img{ height:50px; width:auto; display:block }
.brand h1{ display:flex; align-items:center; gap:8px }
.ratio{ position:relative; border-radius:12px }
.ratio::after{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:12px;
  background:linear-gradient(90deg,var(--trisda-red),var(--trisda-yellow),var(--trisda-green));
  filter:blur(4px); opacity:.35;
}
footer{ margin-top:24px; border-top:1px solid var(--line); background:rgba(18,21,29,.85); backdrop-filter:blur(8px) }
footer a{color:#fff;}