@import url("./base.css");
.library{max-width:1250px;margin:0 auto;padding:32px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 36px}.product-card{padding:24px;background:#171c23;border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:8px}.product-card h2{font-size:24px;margin-top:10px}.product-card p{min-height:45px;color:var(--muted)}.project-row{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.project-row .grow{display:flex;flex-direction:column;gap:5px}.input-row{padding:12px;border:1px solid var(--line);border-radius:6px;margin:8px 0;display:flex;gap:12px;align-items:center;background:#1a1f27;cursor:pointer}.input-row.active{border-color:var(--accent)}.input-row.flash{background:#294457}.input-row .grow{min-width:0}.input-row small{display:block}.live-log{font-family:ui-monospace,monospace;font-size:12px;white-space:pre-wrap;overflow:auto;max-height:200px;color:#9bb4c9}.react-card{border:1px solid var(--line);border-radius:7px;background:#1a1f27;margin:10px 0}.react-card.selected{border-color:#8d6448}.react-head{display:flex;align-items:center;gap:8px;padding:10px}.react-head .name{flex:1;border:0;background:none;padding:4px;text-align:left;font-weight:600;white-space:normal}.react-head button{padding:5px 7px}.react-body{padding:0 14px 16px}.react-meta{font-size:11px;color:var(--muted);padding:0 14px 9px}.react-body h3{margin:20px 0 6px;color:#efc09e}.react-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background-color:#18212b;background-image:linear-gradient(45deg,#ffffff03 25%,transparent 25%),linear-gradient(-45deg,#ffffff03 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff03 75%),linear-gradient(-45deg,transparent 75%,#ffffff03 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;border:1px solid #3b4654}.reference{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25;pointer-events:none}.design-layer{position:absolute;inset:0;z-index:9}.design-object{position:absolute;width:30%;cursor:move;touch-action:none;user-select:none;outline:1px dashed transparent;transform-origin:center;overflow-wrap:anywhere}.design-object.selected{outline-color:var(--accent)}.design-object img{width:100%;display:block;pointer-events:none}.design-object button{position:absolute;padding:3px 6px;right:-14px;bottom:-15px;display:none}.design-object.selected button{display:block}.design-object button.rotate{right:auto;left:-14px}.test-inputs{display:flex;gap:7px;flex-wrap:wrap}.test-inputs button{font-size:12px;padding:7px 10px}.scope-list{display:grid;gap:8px;max-height:190px;overflow:auto;padding:10px;background:#12161c;border:1px solid var(--line);border-radius:5px}dialog{max-width:560px;background:#191e26;border:1px solid #39414e;border-radius:10px;color:#dfe7ee;padding:26px}dialog::backdrop{background:#0009}@media(max-width:850px){.product-grid{grid-template-columns:1fr}.project-row{flex-wrap:wrap}.library{padding:20px}}
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learn-controls{align-items:flex-end}.learn-controls>.grow{min-width:200px}.learn-controls .field{margin-bottom:0}.remove-input{padding:4px 8px;color:var(--muted);background:transparent;border-color:transparent;align-self:flex-start}.remove-input:hover{color:#ffa59d;border-color:#78443f}.input-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:850px){.product-grid{grid-template-columns:1fr}}

#inputs{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:10px}
#inputs .input-row{margin:0;padding:7px;gap:4px;position:relative;align-items:flex-start}
#inputs .input-row .badge{display:none}
#inputs .input-row strong{font-size:11px;display:block;overflow-wrap:anywhere}
#inputs .input-row small{font-size:10px;overflow-wrap:anywhere}
#inputs .remove-input{padding:1px 4px}
#inputs .empty{grid-column:1/-1}
@container instrument-inputs (min-width:210px){#inputs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container instrument-inputs (min-width:320px){#inputs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container instrument-inputs (min-width:430px){#inputs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container instrument-inputs (min-width:540px){#inputs{grid-template-columns:repeat(5,minmax(0,1fr))}}

.project-row.project-reacts{--accent:#ffaa70;border-left:3px solid var(--accent);padding-left:12px}
.project-row.project-3d{--accent:#b4f773;border-left:3px solid var(--accent);padding-left:12px}
.react-head{gap:6px;flex-wrap:wrap}
.react-name{flex:1;min-width:60px;width:80px;border-color:transparent;background:transparent;font-weight:600;padding:5px}
.react-name:hover,.react-name:focus{border-color:#685143;background:#12161c}
.react-actions{display:flex;gap:3px;align-items:center;justify-content:flex-end;margin-left:auto}
.react-head .react-actions button{padding:4px 6px;min-width:24px;font-size:13px}
.react-meta{display:flex;justify-content:flex-end;padding-bottom:7px}
.react-disclosure{background:transparent;border:0;color:var(--muted);font-size:11px;padding:3px 0}
.react-card{position:relative}
.react-card.dragging{opacity:.5}
.react-card.drop-before::before,.react-card.drop-after::after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 8px #ffaa7066;pointer-events:none;z-index:5}
.react-card.drop-before::before{top:-7px}.react-card.drop-after::after{bottom:-7px}
.drag-handle{cursor:grab}.drag-handle:active{cursor:grabbing}


.react-body{padding-bottom:8px}
.react-section-body{padding-top:4px}
.react-file-actions{justify-content:flex-start;margin:10px 0}
.input-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:5px;margin:12px 0}
.input-tiles .input-tile{position:relative;min-width:0;padding:8px 6px;white-space:normal;overflow-wrap:anywhere;font-size:11px;text-align:center}
.input-tiles .input-tile.selected{border-color:var(--accent);background:#3b2d24;color:#ffd2b1}
.input-tile:has(.sequence-order){padding-top:23px}
.sequence-order{position:absolute;top:4px;right:5px;min-width:16px;height:16px;padding:0 3px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#172018;font-size:10px;font-weight:700}

.react-head,.react-meta{cursor:pointer}
.react-head input,.react-head button{cursor:auto}
.react-head button{cursor:pointer}
.react-head .drag-handle{cursor:grab}
.react-meta{align-items:center;gap:6px;min-height:28px}
.react-meta:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.react-warning{color:var(--accent);font-size:13px}
.design-object button{width:24px;height:24px;min-width:24px;padding:0;font:16px/21px sans-serif;border-radius:3px;right:-8px;bottom:-8px;transform:scale(var(--handle-scale,1));transform-origin:center}
.design-object button.rotate{left:-8px;right:auto}


body.studio{--accent:#75bcff}
.react-chevron{flex:none;width:12px;text-align:center;color:var(--muted);font-size:16px;line-height:1;cursor:pointer}