.ojband-app{--bg:#0d1410;--panel:#121a14;--panel2:#151f18;--line:rgba(116,255,96,.18);--text:#f8fafc;--muted:#cbd5e1;--shadow:0 30px 80px rgba(0,0,0,.45);color:var(--text);font-family:Arial,Helvetica,sans-serif}.ojband-shell{max-width:1320px;margin:0 auto;padding:28px;border-radius:34px;background:radial-gradient(circle at top,rgb(105 255 75 / .12),transparent 22%),radial-gradient(circle at bottom,rgb(255 170 0 / .10),transparent 28%),linear-gradient(180deg,rgb(8 12 9 / .98),rgb(15 22 17 / .98));border:1px solid rgb(116 255 96 / .18);box-shadow:var(--shadow)}.ojband-topbar{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start;margin-bottom:18px}.ojband-pill{display:inline-block;padding:8px 14px;border-radius:999px;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .14);color:#d9f99d;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ojband-topbar h2{margin:10px 0 10px;font-size:72px;line-height:.92;font-weight:900;color:#fbbf24;text-shadow:0 5px 0 rgb(0 0 0 / .35),0 0 32px rgb(251 191 36 / .16)}.ojband-topbar h2 span{color:#84cc16}.ojband-topbar p{margin:0;max-width:760px;font-size:18px;color:#e5e7eb;line-height:1.5}.ojband-top-actions,.ojband-side-actions,.ojband-recorder-actions{display:grid;gap:14px}.ojband-top-actions{grid-template-columns:1fr 1fr}.ojband-side-actions,.ojband-recorder-actions{grid-template-columns:1fr 1fr}.ojband-btn{appearance:none;border:none;cursor:pointer;border-radius:18px;padding:16px 18px;font-size:22px;font-weight:900;color:#fff;box-shadow:0 14px 30px rgb(0 0 0 / .35)}.ojband-btn:disabled{opacity:.55;cursor:not-allowed}.is-play{background:linear-gradient(180deg,#4ade80,#22c55e)}.is-secondary{background:linear-gradient(180deg,#f59e0b,#f97316)}.is-stop{background:linear-gradient(180deg,#60a5fa,#2563eb)}.is-save,.is-record{background:linear-gradient(180deg,#a855f7,#7c3aed)}.ojband-status{background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .10);color:#dcfce7;border-radius:20px;padding:16px 18px;font-size:18px;font-weight:700;margin-bottom:18px}.ojband-layout{display:grid;grid-template-columns:1.5fr .62fr;gap:22px}.ojband-main,.ojband-card{background:linear-gradient(180deg,rgb(15 22 17 / .88),rgb(10 16 12 / .90));border-radius:28px;border:1px solid var(--line);box-shadow:0 16px 50px rgb(0 0 0 / .32)}.ojband-main{padding:18px}.ojband-card{padding:20px}.ojband-animal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin-bottom:18px}.ojband-animal-card{background:#fff0;border:none;padding:0;cursor:grab;text-align:center;transition:transform .16s ease,filter .16s ease}.ojband-animal-card:hover{transform:translateY(-3px) scale(1.01)}.ojband-animal-card.is-active .ojband-card-art{box-shadow:0 0 0 3px rgb(110 231 183 / .65),0 18px 36px rgb(0 0 0 / .35)}.ojband-card-art{width:100%;display:block;border-radius:22px;box-shadow:0 12px 26px rgb(0 0 0 / .28)}.ojband-card-tip{display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;background:rgb(255 255 255 / .08);color:#93c5fd;font-size:12px;font-weight:800}.ojband-grid-shell{margin-top:10px}.ojband-grid-title{font-size:40px;font-weight:900;color:#84cc16;margin:0 0 12px;letter-spacing:.02em}.ojband-stage{position:relative;min-height:420px;border-radius:28px;padding:16px;background:linear-gradient(180deg,rgb(8 11 9 / .92),rgb(14 19 15 / .92));border:2px dashed rgb(116 255 96 / .35)}.ojband-stage.is-drag-over{box-shadow:inset 0 0 0 4px rgb(110 231 183 / .18);border-color:#86efac}.ojband-stage-empty{text-align:center;color:#d1d5db;font-weight:800;padding:22px 6px 12px}.ojband-grid-head{display:grid;grid-template-columns:220px repeat(16,1fr);gap:8px;margin-bottom:10px}.ojband-head-step{text-align:center;color:#d9f99d;font-weight:800;opacity:.72}.ojband-head-step.is-current{color:#fff;text-shadow:0 0 14px rgb(255 255 255 / .75)}.ojband-grid-rows{display:flex;flex-direction:column;gap:8px}.ojband-grid-row{display:grid;grid-template-columns:220px 1fr;gap:8px;align-items:center}.ojband-row-label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:18px;background:rgb(255 255 255 / .04);border:1px solid rgb(255 255 255 / .08)}.ojband-row-label img{width:44px;height:44px;border-radius:12px;object-fit:cover}.ojband-row-label strong{display:block;font-size:16px;line-height:1.1}.ojband-row-label span{display:block;color:#cbd5e1;font-size:12px;font-weight:700}.ojband-row-remove{margin-left:auto;width:30px;height:30px;border:none;border-radius:999px;background:#451a03;color:#fdba74;font-size:22px;cursor:pointer}.ojband-row-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:8px}.ojband-step{height:36px;border:none;border-radius:10px;background:rgb(255 255 255 / .08);cursor:pointer;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .03)}.ojband-step.is-on{background:color-mix(in srgb,var(--step-color) 72%,black 0%);box-shadow:0 0 12px color-mix(in srgb,var(--step-color) 50%,transparent 50%)}.ojband-step.is-current{outline:3px solid rgb(255 255 255 / .55);outline-offset:1px}.ojband-howto{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.ojband-howto div{display:flex;align-items:center;gap:10px;padding:14px;border-radius:20px;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .08)}.ojband-howto strong{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:#1f2937;color:#a3e635;font-size:24px}.ojband-howto span{font-weight:800;color:#e5e7eb}.ojband-side{display:flex;flex-direction:column;gap:16px}.ojband-card h3{margin:0 0 14px;font-size:34px;line-height:1;color:#a3e635}.ojband-field span{display:block;margin-bottom:8px;color:#e5e7eb;font-weight:800}.ojband-field input{width:100%;box-sizing:border-box;padding:14px 16px;border-radius:16px;border:1px solid rgb(255 255 255 / .14);background:#081326;color:#fff;font-size:18px;font-weight:800}.ojband-meter{height:12px;margin:16px 0 12px;background:#334155;border-radius:999px;overflow:hidden}.ojband-meter span{display:block;width:0%;height:100%;background:linear-gradient(90deg,#22c55e,#38bdf8)}.ojband-help{margin-bottom:14px;color:#d1d5db;font-weight:700}.ojband-audio{width:100%;margin-top:14px;filter:brightness(1.2)}.ojband-safe-card p{margin:0;color:#fde68a;font-weight:800;font-size:18px;line-height:1.5}.ojband-save-list{display:flex;flex-direction:column;gap:10px}.ojband-empty-save,.ojband-save-item{border-radius:18px;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .08);color:#fff;padding:14px}.ojband-save-item{border:none;text-align:left;cursor:pointer}.ojband-save-item strong,.ojband-save-item span,.ojband-save-item small{display:block}.ojband-save-item span,.ojband-save-item small{color:#cbd5e1;margin-top:4px}@media (max-width:1200px){.ojband-topbar,.ojband-layout{grid-template-columns:1fr}.ojband-animal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:900px){.ojband-shell{padding:18px;border-radius:24px}.ojband-topbar h2{font-size:52px}.ojband-animal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ojband-grid-head,.ojband-grid-row{grid-template-columns:160px 1fr}.ojband-howto{grid-template-columns:1fr 1fr}}@media (max-width:640px){.ojband-top-actions,.ojband-side-actions,.ojband-recorder-actions{grid-template-columns:1fr}.ojband-topbar h2{font-size:40px}.ojband-grid-head{display:none}.ojband-grid-row{grid-template-columns:1fr}.ojband-row-steps{grid-template-columns:repeat(8,1fr)}.ojband-howto{grid-template-columns:1fr}}.ojband-genre-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 14px;padding:10px;border-radius:18px;background:rgb(10 35 15 / .72);border:1px solid rgb(100 255 110 / .28);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .04)}.ojband-genre-label{font-weight:900;color:#baff6b;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-right:2px}.ojband-genre-btn,.ojband-style-btn,.ojband-mix-btn{appearance:none;border:1px solid rgb(255 255 255 / .18);border-radius:999px;padding:7px 11px;font-weight:900;font-size:12px;line-height:1;cursor:pointer;color:#fff;background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(0 0 0 / .28));box-shadow:0 4px 10px rgb(0 0 0 / .22);transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}.ojband-genre-btn:hover,.ojband-style-btn:hover,.ojband-mix-btn:hover{transform:translateY(-1px);filter:brightness(1.12)}.ojband-genre-btn.is-active,.ojband-style-btn.is-active,.ojband-mix-btn.is-active{border-color:rgb(255 255 255 / .55);box-shadow:0 0 0 2px rgb(80 255 80 / .22),0 8px 18px rgb(0 0 0 / .28)}.ojband-genre-btn[data-genre="hiphop"].is-active{background:linear-gradient(180deg,#ffb12a,#da6b00)}.ojband-genre-btn[data-genre="rnb"].is-active{background:linear-gradient(180deg,#a86cff,#6233d9)}.ojband-genre-btn[data-genre="trap"].is-active{background:linear-gradient(180deg,#43d7ff,#1766e8)}.ojband-genre-btn[data-genre="pop"].is-active{background:linear-gradient(180deg,#65e943,#1c9d2e)}.ojband-genre-btn[data-genre="classical"].is-active{background:linear-gradient(180deg,#ffe27a,#b87910)}.ojband-style-btn.is-active{background:linear-gradient(180deg,#39ff73,#149b32)}.ojband-mix-btn.is-active{background:linear-gradient(180deg,#ff4bd2,#8a23ff)}.ojband-genre-note{width:100%;font-size:12px;font-weight:800;color:#fff7bd;opacity:.95}@media(max-width:700px){.ojband-genre-bar{gap:6px}.ojband-genre-btn,.ojband-style-btn,.ojband-mix-btn{font-size:11px;padding:7px 9px}.ojband-genre-note{font-size:11px}}.ojband-genre-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 14px;padding:10px;border-radius:18px;background:rgb(10 35 15 / .72);border:1px solid rgb(100 255 110 / .28);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .04)}.ojband-genre-label{font-weight:900;color:#baff6b;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-right:2px}.ojband-genre-btn,.ojband-style-btn,.ojband-mix-btn{appearance:none;border:1px solid rgb(255 255 255 / .18);border-radius:999px;padding:7px 11px;font-weight:900;font-size:12px;line-height:1;cursor:pointer;color:#fff;background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(0 0 0 / .28));box-shadow:0 4px 10px rgb(0 0 0 / .22);transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}.ojband-genre-btn:hover,.ojband-style-btn:hover,.ojband-mix-btn:hover{transform:translateY(-1px);filter:brightness(1.12)}.ojband-genre-btn.is-active,.ojband-style-btn.is-active,.ojband-mix-btn.is-active{border-color:rgb(255 255 255 / .55);box-shadow:0 0 0 2px rgb(80 255 80 / .22),0 8px 18px rgb(0 0 0 / .28)}.ojband-genre-btn[data-genre="hiphop"].is-active{background:linear-gradient(180deg,#ffb12a,#da6b00)}.ojband-genre-btn[data-genre="rnb"].is-active{background:linear-gradient(180deg,#a86cff,#6233d9)}.ojband-genre-btn[data-genre="trap"].is-active{background:linear-gradient(180deg,#43d7ff,#1766e8)}.ojband-genre-btn[data-genre="pop"].is-active{background:linear-gradient(180deg,#65e943,#1c9d2e)}.ojband-genre-btn[data-genre="classical"].is-active{background:linear-gradient(180deg,#ffe27a,#b87910)}.ojband-style-btn.is-active{background:linear-gradient(180deg,#39ff73,#149b32)}.ojband-mix-btn.is-active{background:linear-gradient(180deg,#ff4bd2,#8a23ff)}.ojband-genre-note{width:100%;font-size:12px;font-weight:800;color:#fff7bd;opacity:.95}@media(max-width:700px){.ojband-genre-bar{gap:6px}.ojband-genre-btn,.ojband-style-btn,.ojband-mix-btn{font-size:11px;padding:7px 9px}.ojband-genre-note{font-size:11px}}