@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,600;1,9..144,900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg:#0A0C0B; --panel:rgba(15,19,17,.86); --line:#26332c;
  --green:#C6FF3D; --pink:#FF6B9D; --steel:#CDD6E0; --cyan:#7FE3F5;
  --txt:#e9f0ea; --dim:#8a978f;
  --display:'Fraunces',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--body);}
#stage{position:fixed;inset:0;z-index:1;}
canvas{display:block;touch-action:none;}

/* corner L-brackets (Quiet-Lab motif, unnamed) */
.ssc-corner{position:fixed;width:22px;height:22px;border:1.5px solid var(--green);opacity:.55;z-index:7;pointer-events:none;}
.ssc-corner.tl{top:10px;left:10px;border-right:none;border-bottom:none;}
.ssc-corner.tr{top:10px;right:10px;border-left:none;border-bottom:none;}
.ssc-corner.bl{bottom:10px;left:10px;border-right:none;border-top:none;}
.ssc-corner.br{bottom:10px;right:10px;border-left:none;border-top:none;}

/* top chrome */
.ssc-hdr{position:fixed;top:0;left:0;right:0;z-index:6;padding:14px 20px 6px;
  display:flex;justify-content:space-between;align-items:flex-start;
  background:linear-gradient(180deg,rgba(10,12,11,.92),rgba(10,12,11,0));pointer-events:none;}
.ssc-brand{display:flex;gap:9px;align-items:center;}
.ssc-hex{width:26px;height:26px;flex:none;}
.ssc-nm{display:flex;flex-direction:column;line-height:1.05;}
.ssc-nm b{font-family:var(--display);font-style:italic;font-weight:900;font-size:15px;letter-spacing:.01em;}
.ssc-nm b em{color:var(--green);font-style:italic;}
.ssc-nm span{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;margin-top:2px;}
.ssc-site{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--green);text-decoration:none;pointer-events:auto;opacity:.9;}

.ssc-title{position:fixed;top:46px;left:20px;right:20px;z-index:5;pointer-events:none;}
.ssc-title h1{margin:0;font-family:var(--display);font-style:italic;font-weight:900;font-size:23px;line-height:1;}
.ssc-title p{margin:4px 0 0;font-size:11.5px;color:var(--dim);max-width:70%;}

/* controls */
#ui{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--panel);
  border-top:1px solid var(--line);backdrop-filter:blur(9px);
  padding:9px 12px calc(8px + env(safe-area-inset-bottom));}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
.row:last-of-type{margin-bottom:0;}
.lbl{width:100%;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-bottom:1px;}
button.b{font-family:var(--body);font-size:12px;color:var(--txt);cursor:pointer;background:#161c19;
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;line-height:1;white-space:nowrap;transition:.12s;}
button.b:hover{border-color:#3f5349;}
button.b.on{background:var(--green);color:#0a0c0b;border-color:var(--green);font-weight:600;}
button.b.on.tog{background:#213a29;color:var(--green);border-color:#3a5c44;}
button.b sub{font-size:9px;}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:#28352d;flex:1;min-width:110px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--green);cursor:pointer;}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--green);cursor:pointer;}
.val{font-family:var(--mono);font-size:11px;color:var(--green);min-width:64px;text-align:right;}
#info{font-size:11.5px;line-height:1.4;color:#cfdad2;margin-top:5px;border-top:1px solid var(--line);padding-top:6px;min-height:30px;}
#info b{color:var(--green);}#info .pk{color:var(--pink);}#info .cy{color:var(--cyan);}

.ssc-ftr{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;padding-top:6px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--dim);}
.ssc-ftr span b{color:var(--green);font-weight:600;}

@media(max-width:430px){.ssc-title h1{font-size:19px;}.ssc-title p{max-width:100%;}}