.fm-wrap{--bg:#0C0B14;--panel:#15131F;--panel2:#1E1B2B;--line:#2C2740;--ink:#EDEAF6;--dim:#9A93B4;--teal:#2EECC5;--purple:#9B5FE3;--danger:#E5568B;
  max-width:1200px;margin:0 auto;padding:28px 16px 64px;color:var(--ink);font-family:'Epilogue',system-ui,sans-serif;}
.fm-wrap *{box-sizing:border-box}
.fm-head h1{font-family:'Syne',sans-serif;font-weight:800;font-size:34px;margin:0 0 8px;
  background:linear-gradient(90deg,var(--teal),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.fm-head p{color:var(--dim);max-width:70ch;margin:0 0 22px;line-height:1.5}
.fm-app{display:grid;grid-template-columns:210px 1fr 210px;gap:16px;align-items:start}
.fm-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 12px 14px;margin-bottom:14px}
.fm-panel h3{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.fm-note{font-size:11px;line-height:1.4;color:var(--dim);margin:10px 0 0}
.fm-pal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fm-sw{aspect-ratio:1;border-radius:7px;border:2px solid transparent;cursor:pointer;position:relative;outline:1px solid rgba(255,255,255,.08)}
.fm-sw.is-on{border-color:var(--teal);box-shadow:0 0 0 2px rgba(46,236,197,.25)}
.fm-tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.fm-t{flex:1 1 auto;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 6px;font-size:12px;font-family:inherit;cursor:pointer;white-space:nowrap;transition:.12s}
.fm-t:hover{border-color:var(--purple)}
.fm-t.is-on{background:linear-gradient(180deg,rgba(46,236,197,.18),rgba(46,236,197,.06));border-color:var(--teal);color:#fff}
.fm-t:disabled{opacity:.35;cursor:not-allowed}
.fm-t.fm-danger:hover{border-color:var(--danger);color:var(--danger)}
.fm-modes,.fm-comptabs{display:flex;gap:6px;margin-bottom:6px}
.fm-mode,.fm-ct{flex:1;background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:8px 4px;font-size:11.5px;font-family:inherit;cursor:pointer}
.fm-mode.is-on,.fm-ct.is-on{background:rgba(155,95,227,.16);border-color:var(--purple);color:#fff}
.fm-center{display:flex;flex-direction:column;align-items:center;gap:10px}
.fm-canvas-wrap{background:#000;border:1px solid var(--line);border-radius:10px;padding:10px;width:100%;display:flex;justify-content:center;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.fm-canvas{image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;height:auto;cursor:crosshair;touch-action:none;background:#000}
.fm-dims{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.fm-carousel{position:relative;margin-top:2px}
.fm-caro-stage{background:#000;border:1px solid var(--line);border-radius:9px;height:100px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;padding:8px 40px}
.fm-caro-stage.is-on{border-color:var(--teal);box-shadow:0 0 0 2px rgba(46,236,197,.3)}
.fm-caro-stage canvas{image-rendering:pixelated;max-width:100%;max-height:100%}
.fm-caro-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:46px;background:rgba(21,19,31,.9);color:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fm-caro-arrow:hover{border-color:var(--teal);color:#fff}
.fm-caro-prev{left:4px}.fm-caro-next{right:4px}
.fm-caro-meta{display:flex;justify-content:space-between;align-items:center;margin:7px 1px 0;font-size:12px}
#fmCaroLabel{color:var(--ink);font-family:'Syne',sans-serif;font-weight:700}
#fmCaroCount{color:var(--dim);font-variant-numeric:tabular-nums}
.fm-caro-select{width:100%;margin-top:8px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px;font-size:13px;font-family:inherit;cursor:pointer;transition:.12s}
.fm-caro-select:hover{border-color:var(--teal)}
.fm-caro-select.is-on{background:linear-gradient(180deg,rgba(46,236,197,.2),rgba(46,236,197,.06));border-color:var(--teal);color:#fff;font-weight:600}
.fm-sizes{display:flex;align-items:center;gap:5px;margin-top:8px;flex-wrap:wrap}
.fm-size-lbl{font-size:11px;color:var(--dim);margin-right:2px}
.fm-sz{flex:0 0 auto;background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:12px;font-family:inherit;cursor:pointer}
.fm-sz.is-on{background:rgba(46,236,197,.16);border-color:var(--teal);color:#fff}
.fm-examples{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.fm-ex{background:#000;border:1px solid var(--line);border-radius:7px;cursor:pointer;padding:5px}
.fm-ex:hover{border-color:var(--purple)}
.fm-ex canvas{image-rendering:pixelated;width:100%;height:auto;display:block}
.fm-ex span{display:block;font-size:10px;color:var(--dim);text-align:center;margin-top:3px}
.fm-anim{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:16px}
.fm-anim-row{overflow-x:auto;padding-bottom:6px}
.fm-frames{display:flex;gap:8px;min-height:66px;align-items:center}
.fm-frame{position:relative;flex:0 0 auto;border:2px solid var(--line);border-radius:6px;background:#000;cursor:pointer;padding:0}
.fm-frame.is-on{border-color:var(--teal)}
.fm-frame canvas{display:block;image-rendering:pixelated;width:112px;height:auto;border-radius:4px}
.fm-frame b{position:absolute;top:2px;left:4px;font-size:10px;color:var(--teal);font-family:'Syne',sans-serif;text-shadow:0 1px 2px #000}
.fm-anim-ctl{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:10px}
.fm-grp{display:flex;gap:6px;align-items:center}
.fm-play.is-on{background:linear-gradient(180deg,rgba(155,95,227,.3),rgba(155,95,227,.1));border-color:var(--purple);color:#fff}
.fm-fps label{font-size:12px;color:var(--dim)}
.fm-fps input{accent-color:var(--teal)}
.fm-fps span{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;min-width:52px}
.fm-export{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:16px}
.fm-export h3{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin:0 0 12px}
.fm-export-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fm-export-col{display:flex;flex-direction:column;gap:8px}
.fm-export-lbl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.fm-x{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:11px 10px;font-size:13px;font-family:inherit;cursor:pointer;transition:.12s}
.fm-x:hover{border-color:var(--teal)}
.fm-x-pri{background:linear-gradient(180deg,rgba(46,236,197,.16),rgba(155,95,227,.1));border-color:var(--teal);color:#fff;font-weight:600}
.fm-packs{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:16px}
.fm-packs h3{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin:0 0 8px}
.fm-packs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fm-pack{background:#000;border:1px solid var(--line);border-radius:9px;padding:8px;display:flex;flex-direction:column;gap:8px;text-align:center;transition:.12s}
.fm-pack:hover{border-color:var(--purple)}
.fm-pack img{width:100%;height:auto;image-rendering:pixelated;border-radius:5px;display:block;background:#000}
.fm-pack span{font-size:12px;color:var(--ink);font-family:'Syne',sans-serif;font-weight:700}
.fm-pack .fm-x{display:block;text-decoration:none;text-align:center;padding:8px 6px;font-size:12px}
.fm-modal{position:fixed;inset:0;z-index:9999;background:rgba(6,5,12,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.fm-modal[hidden]{display:none}
.fm-modal-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;max-width:340px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.fm-modal-box p{margin:0 0 16px;color:var(--ink);line-height:1.45;font-size:14px}
.fm-modal-btns{display:flex;gap:10px;justify-content:flex-end}
.fm-modal-btns .fm-t{flex:0 0 auto;padding:9px 16px}
@media(max-width:900px){
  .fm-app{grid-template-columns:1fr}
  .fm-left{order:2}.fm-center{order:1}.fm-right{order:3}
  .fm-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .fm-export-grid{grid-template-columns:1fr}
}