/* myNoise clone — tokens ported from the observed page's single <style> block
   (see ../mynoise-re/obs/inline.css). Class names keep the originals where the
   mechanism is reproduced. */

@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-v9-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-v9-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-v9-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: rgb(18,18,18); height: 100%; font-size: 15px; line-height: 1.35em; scroll-behavior: smooth; }
body { font-family: Figtree, Arial, sans-serif; font-size: 15px; background: rgb(18,18,18); color: rgb(190,189,182); min-width: 320px; min-height: 100%; overflow-x: hidden; text-align: left; font-weight: 300; -webkit-font-smoothing: antialiased; }

/* palette */
.highlight { color: rgba(255,255,255,1); padding: 0 1px; }
.lowlight  { color: rgb(107,107,103); }
.bright    { color: #fff; }
.orange    { color: rgb(255,85,50); }
.blue      { color: rgb(60,204,228); }
.muted     { color: rgb(143,142,137); }
.highlightGreen { color: #5cc93b; }
:root {
  --bg: rgb(18,18,18);
  --panel: rgb(30,30,30);
  --ink: rgb(190,189,182);
  --title: rgb(253,252,243);
  --dim: rgb(143,142,137);
  --dimmer: rgb(107,107,103);
  --accent: rgb(60,204,228);
  --green: #5cc93b;
  --warn: rgb(255,85,50);
  --edge: #555;
}

/* ---- top menu (observed: fixed hamburger + #topMenu panel) ---- */
#hamburger { position: fixed; top: 0; left: 0; margin: 10px 10px; width: 24px; height: 24px; filter: brightness(70%); z-index: 10; cursor: pointer; }
#menuOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; backdrop-filter: blur(5px); z-index: 10; }
#topMenu { position: fixed; width: 80%; min-width: 320px; max-width: 640px; max-height: 100%; left: 5px; top: 5px; border: solid 1px var(--edge); background-color: var(--bg); border-radius: 10px; box-shadow: 5px 5px 30px 10px rgba(0,0,0,1); display: none; z-index: 11; overflow-y: auto; overflow-x: hidden; padding: 10px 10px; }
.menuItem { position: relative; display: block; float: left; margin: 0.5%; width: 49%; }
.menuItemBig { width: 99%; text-align: center; }
.menuItemMedium { width: 66%; }
.menuDivider { height: 1px; background: var(--edge); margin: 10px 0; }
.menutext { font-size: 0.8rem; color: var(--dim); }
a.button { display: inline-block; white-space: nowrap; padding: 5px 10px; border-radius: 4px; border: solid 1px rgba(85,85,85,0.9); background-color: rgb(30,30,30); color: var(--ink); font-size: 0.9rem; text-decoration: none; cursor: pointer; }
a.button:hover { border-color: var(--accent); color: var(--title); text-decoration: none; }

/* ---- hero + animated backdrop (observed: #bgimage + bgblur keyframes) ---- */
.bgcontainer { position: absolute; width: 100%; height: 600px; overflow: hidden; z-index: 0; }
#bgimage { position: absolute; left: 0; top: 0; width: 100%; height: 600px; background-image: url('/assets/img/hero.svg'); background-position: center; background-size: cover; transform: translateZ(0); opacity: 0; filter: blur(13px); z-index: 1; }
#bgmask { position: absolute; left: 0; width: 100%; height: 600px; background-image: url('/assets/img/bg-mask.svg'); background-position: center; background-size: cover; z-index: 2; }
@keyframes bgblur { from { opacity: 0; filter: blur(13px); } to { opacity: 1; filter: blur(0px); } }
.animated { animation: bgblur 2s ease forwards; }

.wrapper { position: relative; width: 100%; text-align: center; padding: 10px 20px; }
.wrap { max-width: 1920px; margin: 0 auto; padding: 0 12px; }
#homelogo { display: inline-block; margin: 0 10px 3px 0; height: 24px; opacity: 0.8; cursor: pointer; }
.mainTitle { position: relative; width: auto; margin: 20px auto 10px auto; color: var(--title); font-size: 2.07rem; line-height: 1.1em; font-weight: 400; }
span.myLogo { font-weight: 500; font-size: 1.55rem; letter-spacing: 1px; color: #fff; }
span.noiseLogo { font-weight: 500; font-size: 2.07rem; color: #fff; }
span.tm { position: relative; font-size: 40%; line-height: 0; bottom: 0.64em; color: var(--ink); }
.subTitle { font-size: 1.05rem; font-weight: 300; }
.titlesmall { font-size: 1rem; }
span.smaller { font-size: 0.9em; }
h1 { font-size: 1.44rem; color: var(--title); padding: 10px 0; text-align: left; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
h2 { font-size: 1.2rem; color: var(--title); font-weight: 400; text-align: left; }
h3 { font-size: 1.05rem; color: var(--title); font-weight: 300; text-align: left; }
p { margin: 10px 0; }
blockquote { padding: 0 10px 0 20px; font-style: italic; margin: 10px; border-left: 1px solid var(--dim); color: var(--dim); }
ul { list-style-position: inside; padding-left: 1em; }
li { padding-bottom: 10px; }

/* ---- category grid (observed .nested / .nestedSection) ---- */
.nested, .reorderIndex { display: flex; flex-wrap: wrap; gap: 10px; }
.nestedSection { padding: 10px 20px; flex: 1 1 350px; justify-content: space-between; border: solid 1px var(--edge); border-radius: 10px; box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.2); background-color: rgba(25,25,25,0.60); position: relative; }
.nestedSection.m { flex: 1 1 360px; }
.nestedSection.l { flex: 1 1 540px; }
.nestedSection.full { flex: 0 0 100%; }
.readable { max-width: 720px; margin: 0 auto; }

/* ---- machine cards (observed .grid/.card/.thumb/.title) ---- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; padding: 10px 20px; }
.card { background: var(--panel); border: 1px solid var(--panel); border-radius: 10px; overflow: hidden; cursor: pointer; display: block; text-decoration: none; }
.card:hover { border-color: rgba(60,204,228,0.45); }
.thumb { aspect-ratio: 16/9; background: #000; border-bottom: 1px solid var(--panel); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb svg { width: 100%; height: 100%; display: block; }
.title { padding: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; color: var(--accent); }
.card:hover .title { color: var(--title); }
.cardDate { font-size: 0.9rem; padding: 0 10px 10px; color: var(--dim); }
.note { margin-top: 10px; font-size: 12px; color: var(--dim); }
.easyImg { margin: 0 3px; width: 92px; object-fit: cover; aspect-ratio: 4/4; border: solid rgba(255,255,255,0.2) 1px; padding: 4px; border-radius: 10px; }

/* ---- suggestion rows (observed table.suggestion) ---- */
table.suggestion { border-spacing: 0 10px; width: 100%; }
table.suggestion td { vertical-align: top; }
table.suggestion td.img { width: 104px; }
table.suggestion td.descr { font-size: 0.9rem; color: var(--dim); }
table.suggestion td.descr a { color: var(--accent); text-decoration: none; }
span.actionlink { color: var(--accent); text-decoration: none; padding: 0 1px; border-radius: 4px; cursor: pointer; }
a.nostyle { padding: 0; text-decoration: none; background-color: transparent; }

/* ---- buttons + badges ---- */
.faBtn { font-size: 16px; width: 32px; height: 32px; border: solid 2px rgba(131,130,126,0.5); display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #fff; background: rgba(131,130,126,0.5); }
.faBtn:hover { background: var(--accent); border-color: var(--accent); }
.faBtnBig { font-size: 22px; width: 42px; height: 42px; border: solid 2px rgba(131,130,126,0.5); display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #fff; background: rgba(131,130,126,0.5); }
.donateButtonBlue { display: inline-block; background: #0070BA; color: #fff; border-radius: 4px; padding: 10px 40px; font-size: 18px; font-weight: 400; text-decoration: none; cursor: pointer; }
.donateButtonBlue:hover { background: var(--accent); text-decoration: none; }
.donateButtonOrange { display: inline-block; background: rgb(255,85,50); color: #fff; border-radius: 4px; padding: 10px 40px; font-size: 18px; font-weight: 400; text-decoration: none; cursor: pointer; }
.donateButtonOrange:hover { background: rgb(255,120,80); text-decoration: none; }
.donateRow { text-align: center; padding-bottom: 4px; }
.price { font-size: 0.8rem; font-weight: 300; }

/* ---- machine page (observed .hero/.playerStage/.player/.meta/.mixer/.controlers) ---- */
.hero { border: 0px solid var(--edge); border-radius: 10px; background: var(--panel); overflow: hidden; }
.playerStage { background: var(--bg); display: flex; align-items: center; justify-content: center; }
.player { aspect-ratio: 16/9; width: min(100%, calc(70vh * 16 / 9)); height: auto; max-height: 70vh; background: #000; }
.player canvas { display: block; width: 100%; height: 100%; }
.meta { padding: 10px; border-top: 0px solid var(--edge); }
.mixer { position: relative; width: auto; max-width: 400px; margin: 20px auto 10px auto; }
.controlers { display: flex; gap: 6px; justify-content: center; align-items: stretch; }

/* the ten controllers, observed as #s0..#s9 + .ui-slider-vertical */
.ui-slider-vertical { position: relative; width: 26px; height: 120px; border: 1px solid rgba(131,130,126,0.35); border-radius: 4px; background: rgba(0,0,0,0.35); display: inline-block; cursor: ns-resize; vertical-align: top; margin: 0 3px; }
.ui-slider-vertical_lowlight { background: rgba(0,0,0,0.2); }
.ui-slider-range { position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 3px; background: rgba(60,204,228,0.55); pointer-events: none; }
.ui-slider-handle { position: absolute; left: -4px; width: 34px; height: 13px; border-radius: 4px; background: rgb(143,142,137); border: 1px solid rgba(0,0,0,0.5); color: var(--title); font-size: 0.7rem; text-align: center; line-height: 13px; cursor: grab; }
.ui-slider-handle:hover { background: var(--accent); }
.ui-slider-handle:active { background: var(--title); }
.ui-slider.disabled { opacity: 0.4; pointer-events: none; }
#s0 .ui-slider-handle, #s1 .ui-slider-handle, #s2 .ui-slider-handle, #s3 .ui-slider-handle, #s4 .ui-slider-handle, #s5 .ui-slider-handle, #s6 .ui-slider-handle, #s7 .ui-slider-handle, #s8 .ui-slider-handle, #s9 .ui-slider-handle { background: rgb(143,142,137); }

/* spectrum shaper: 15 bands, observed as myNoise's adjustable frequency bands */
.shaper { display: flex; gap: 3px; padding: 8px; border: 1px solid rgba(131,130,126,0.3); border-radius: 8px; background: rgba(0,0,0,0.35); }
.shaper .band { position: relative; flex: 1 1 auto; height: 96px; background: rgba(255,255,255,0.05); border-radius: 3px; cursor: ns-resize; }
.shaper .band > i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(60,204,228,0.5); border-radius: 3px; pointer-events: none; }
.shaper .band > b { position: absolute; left: -3px; right: -3px; height: 9px; border-radius: 3px; background: rgb(190,189,182); cursor: grab; }
.shaper .band > b:active { background: var(--accent); }
.shaperLegend { font-size: 0.7rem; color: var(--dim); }

/* FFT readout, observed as #fftCanvas */
#fftCanvas { display: block; width: 100%; height: 100%; background: #000; opacity: 0.9; cursor: crosshair; }
#fftCanvas:hover { opacity: 1; }

.playOff { opacity: 0.45; }
.playOn { opacity: 1; }
.noselect { user-select: none; -webkit-user-select: none; }
.fullwidth { width: 100%; }
.hidden-quiet { display: none; }
.visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: rect(0 0 0 0); }

/* responsive */
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .nestedSection.m, .nestedSection.l { flex: 1 1 100%; }
  .mainTitle, .subTitle { text-align: right; padding-right: 30px; }
  body { font-size: 16px; }
  .controlers { flex-wrap: wrap; }
}
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } #fftCanvas { height: 120px; } }
@media (prefers-reduced-motion: reduce) { .animated { animation: none; opacity: 1; filter: none; } }