@font-face{font-family:JSTSerif;src:url(fonts/DejaVuSerif.ttf)}@font-face{font-family:JSTSans;src:url(fonts/DejaVuSans.ttf)}
.jstudio{--ink:#213633;--muted:#657571;--line:#dce1da;--gold:#a77c3f;--paper:#f9faf6;color:var(--ink);background:var(--paper);font:14px/1.5 system-ui,sans-serif;border:1px solid var(--line);border-radius:16px;max-width:1800px;width:100%;margin:24px auto;overflow:hidden}.jstudio *{box-sizing:border-box}.jstudio button,.jstudio input,.jstudio select,.jstudio textarea{font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none}.jstudio button{padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);cursor:pointer;line-height:1.3}.jstudio button:hover{border-color:var(--gold)}.jstudio button:disabled{opacity:.4;cursor:not-allowed}.jstudio :focus-visible{outline:2px solid var(--gold);outline-offset:2px}.jstudio input,.jstudio select,.jstudio textarea{background:#fff;color:var(--ink);width:100%;min-width:0;height:auto;padding:8px;border:1px solid #cbd4cd;border-radius:5px;margin-top:4px}.jstudio label{display:block;font-size:11px;font-weight:600;margin:10px 0}.jstudio input[type=range]{padding:0;accent-color:var(--gold)}.jstudio small,.jstudio .js-small{font-size:11px;line-height:1.5;color:var(--muted)}.jstudio h3{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;font-weight:650;margin:20px 0 10px;color:var(--ink)}.jstudio h3:first-child{margin-top:0}.jstudio .js-head{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid var(--line)}.jstudio .js-brand{display:flex;gap:12px;align-items:center}.jstudio .js-brand b{letter-spacing:3px;font-size:14px}.jstudio .js-brand small{display:block;font-size:10px;margin-top:1px}.jstudio .js-mark{font:30px Georgia,serif;border:1px solid var(--gold);color:var(--gold);height:42px;width:42px;text-align:center;border-radius:50%}.jstudio .js-languages{display:flex;gap:5px}.jstudio .js-languages button.active{background:var(--ink);color:#fff}.jstudio .js-flows{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.jstudio .js-flows button{border:0;border-radius:0;background:transparent;padding:17px;display:flex;align-items:center;gap:10px;text-align:left;border-bottom:3px solid transparent}.jstudio .js-flows button.selected{border-bottom-color:var(--gold);background:#f0f1e8}.jstudio .js-flows span{color:var(--gold);font-size:11px}.jstudio .js-flows b{font-size:12px;font-weight:550}.jstudio .js-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 255px;min-height:740px}.jstudio .js-tools,.jstudio .js-options{padding:20px}.jstudio .js-tools{border-right:1px solid var(--line)}.jstudio .js-options{border-left:1px solid var(--line)}.jstudio .js-work{min-width:0;background:#edf0e9;padding:16px;align-self:stretch}.jstudio .js-blank-card{background:#edf0e9;border:1px solid var(--line);border-radius:8px;text-align:center;padding:6px 12px 12px}.jstudio .js-blank-card img{height:105px;width:130px;object-fit:contain;display:block;margin:auto}.jstudio .js-blank-card b{display:block;font-size:12px}.jstudio .js-upload{background:white;border:1px dashed #a8b6a7;border-radius:6px;padding:12px;text-align:center;cursor:pointer}.jstudio .js-upload input{font-size:10px;padding:4px;border:0}.jstudio .js-file-name{display:block;overflow-wrap:anywhere}.jstudio .js-link{border:0;font-size:11px;padding:5px 0;background:transparent;text-decoration:underline}.jstudio .js-viewbar{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px}.jstudio .js-viewbar button{font-size:10px;padding:6px}.jstudio .js-stage{position:relative;width:100%;aspect-ratio:1;background:radial-gradient(ellipse,#fafbf5 0%,#e1e7dd 85%);border-radius:10px;margin-top:12px;overflow:hidden}.jstudio canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.jstudio .js-viewtag{position:absolute;bottom:12px;left:12px;border:1px solid #d0d8ca;background:#f8faf3cc;border-radius:20px;padding:4px 10px;font-size:9px;pointer-events:none}.jstudio .js-under{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted)}.jstudio .js-under label{display:flex;gap:5px;align-items:center;max-width:120px}.jstudio .js-measure{font-size:12px;background:#fafbf6;padding:12px;border-radius:6px;min-height:42px;margin:10px 0}.jstudio .js-note{font-size:11px;color:var(--muted)}.jstudio .js-status{white-space:pre-line;background:#f8f8ef;border-left:3px solid var(--gold);padding:12px;font-size:12px;margin:15px 0;min-height:43px}.jstudio .js-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.jstudio .js-triple{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.jstudio .js-price{background:var(--ink);color:#fff;padding:16px;border-radius:8px;margin-top:18px}.jstudio .js-price span{font-size:11px;display:block}.jstudio .js-price strong{font:30px/1.5 Georgia,serif;display:block}.jstudio .js-price small{color:#d1ddd5;display:block}.jstudio .js-options>button{width:100%;margin:4px 0}.jstudio .js-primary{background:var(--gold);color:white;border-color:var(--gold)}.jstudio .js-secondary{background:var(--ink);color:white;border-color:var(--ink)}.jstudio .js-footer{padding:12px 25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.8px;color:var(--muted)}.jstudio a{color:#896328}.jstudio .js-own-only{display:none}.jstudio.own .js-template-only{display:none}.jstudio.own .js-own-only{display:block}
@media(max-width:1050px){.jstudio .js-layout{grid-template-columns:190px minmax(0,1fr) 220px}.jstudio .js-tools,.jstudio .js-options{padding:12px}}@media(max-width:800px){.jstudio .js-layout{grid-template-columns:1fr 1fr}.jstudio .js-work{grid-column:1/-1;grid-row:1}.jstudio .js-tools{border-top:1px solid var(--line)}.jstudio .js-options{border-top:1px solid var(--line)}.jstudio .js-stage{max-width:520px;margin:12px auto 0}.jstudio .js-flows button{padding:12px 8px;gap:5px}.jstudio .js-flows b{font-size:10px}.jstudio .js-head{padding:15px}.jstudio .js-footer{padding:10px;flex-direction:column;gap:3px}}@media(max-width:390px){.jstudio .js-layout{grid-template-columns:1fr}.jstudio .js-options{border-left:0}.jstudio .js-flows span{display:none}}

.jstudio .js-price strong{font-size:clamp(22px,2.1vw,30px);white-space:nowrap;}

.jstudio .js-manip{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 10px}.jstudio .js-manip button{font-size:11px}.jstudio .js-manip button.active{background:var(--ink);color:white}.jstudio .js-diameter{position:absolute;top:12px;left:12px;background:#fff9;padding:5px 9px;border-radius:5px;pointer-events:none;font-weight:600}.jstudio .js-live-size{display:grid;grid-template-columns:1fr 1fr;gap:15px}.jstudio .js-stage canvas{touch-action:none}

.js-template-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.js-template-card{border:1px solid #d4d5d0;background:#fff;padding:5px;text-align:left;border-radius:4px;cursor:pointer;color:inherit}.js-template-card.active{outline:2px solid #b88942}.js-template-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#ecebe6;display:block}.js-template-card span{display:block;font-size:12px;padding:5px 2px}.js-band-only{display:none}.jstudio.band .js-band-only{display:block}.jstudio.band .js-template-only .js-pair,.jstudio.band .js-template-only label:has([data-f=top]),.jstudio.band .js-template-only label:has([data-f=bottom]),.jstudio.band .js-template-only label:has([data-f=radius]){display:none}
.jstudio .js-historybar{display:flex;justify-content:center;gap:8px;margin:10px 0 4px}.jstudio .js-historybar button{min-width:110px}.jstudio .js-plastic-sample{display:flex;align-items:flex-start;gap:8px;padding:10px 0;margin:4px 0;font-size:12px}.jstudio .js-plastic-sample input{width:auto;margin:2px 0 0;flex:none}.jstudio .js-plastic-sample span{line-height:1.4}
@media(max-width:800px){.jstudio .js-historybar{margin:6px 0 2px}.jstudio .js-historybar button{min-width:0;flex:1;padding:7px}}
/* 0.10.2 — prototype is a separate order type, not an add-on. */
.jstudio .js-plastic-sample{border:1px solid var(--line);border-radius:8px;padding:11px;background:#fff}
.jstudio .js-plastic-sample>span{display:block}.jstudio .js-plastic-sample strong{display:block;font-size:12px}.jstudio .js-plastic-sample small{display:block;margin-top:3px;font-weight:400;color:var(--muted)}
.jstudio.jst-sample-order .js-price{box-shadow:inset 0 0 0 2px var(--gold)}


/* 0.11.0 — action workspaces / full-size editors */
.jstudio .jst-workspace-launcher{margin:0 0 16px}.jstudio .jst-workspace-launcher>h3{margin-bottom:8px}.jstudio .jst-workspace-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}.jstudio .jst-workspace-grid button{min-height:68px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:3px;padding:10px}.jstudio .jst-workspace-grid button>span{font-size:20px;line-height:1}.jstudio .jst-workspace-grid button>b{font-size:11px}.jstudio.jst-workspace-ready:not(.jst-workspace-open) .surface-library,.jstudio.jst-workspace-ready:not(.jst-workspace-open) .surface-fingerprint-tools,.jstudio.jst-workspace-ready:not(.jst-workspace-open) .surface-portrait-tools,.jstudio.jst-workspace-ready:not(.jst-workspace-open) .surface-phone-import-tools{display:none!important}.jst-workspace-modal-open{overflow:hidden}.jst-workspace-overlay[hidden]{display:none!important}.jst-workspace-overlay{position:fixed;inset:0;z-index:999999;background:#14201dcc;backdrop-filter:blur(4px);padding:3vh 2vw;display:grid;place-items:center}.jst-workspace-shell{width:calc(100vw - 24px);max-width:1920px;height:min(96vh,1120px);background:#f9faf6;color:#213633;border-radius:14px;box-shadow:0 24px 80px #0008;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}.jst-workspace-shell>header,.jst-workspace-shell>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #dce1da}.jst-workspace-shell>footer{border-bottom:0;border-top:1px solid #dce1da}.jst-workspace-shell>header strong{display:block;font-size:18px}.jst-workspace-shell>header small{display:block;color:#657571}.jst-workspace-shell>header button{font-size:18px;min-width:44px}.jst-workspace-shell>footer button{background:#213633;color:white}.jst-workspace-body{display:grid;grid-template-columns:minmax(320px,410px) minmax(0,1fr);min-height:0}.jst-workspace-body>[data-ws-tool]{padding:16px;overflow:auto;background:#fff;border-right:1px solid #dce1da}.jst-workspace-body>[data-ws-view]{min-width:0;overflow:auto;background:#edf0e9}.jst-workspace-body .jstudio .js-work,.jst-workspace-body .js-work{height:100%;min-height:0;padding:16px}.jst-workspace-body .js-stage{height:min(70vh,820px);aspect-ratio:auto;margin-top:10px}.jst-workspace-active-tool{display:block!important;margin:0!important}.jst-workspace-active-tool[open]>summary{font-size:16px;font-weight:700;margin-bottom:12px}.jst-workspace-overlay[data-workspace=text] .surface-library>.surface-symbol-library,.jst-workspace-overlay[data-workspace=text] .surface-library>.surface-drawing{display:none!important}.jst-workspace-overlay[data-workspace=symbols] .surface-library>h3,.jst-workspace-overlay[data-workspace=symbols] .surface-library>input:not([type=file]),.jst-workspace-overlay[data-workspace=symbols] .surface-library>select,.jst-workspace-overlay[data-workspace=symbols] .surface-library>button,.jst-workspace-overlay[data-workspace=symbols] .surface-library>.surface-drawing{display:none!important}.jst-workspace-overlay[data-workspace=symbols] .surface-symbol-library{display:block!important}.jst-workspace-overlay[data-workspace=drawing] .surface-library>h3,.jst-workspace-overlay[data-workspace=drawing] .surface-library>input:not([type=file]),.jst-workspace-overlay[data-workspace=drawing] .surface-library>select,.jst-workspace-overlay[data-workspace=drawing] .surface-library>button,.jst-workspace-overlay[data-workspace=drawing] .surface-library>.surface-symbol-library{display:none!important}.jst-workspace-overlay[data-workspace=drawing] .surface-drawing{display:block!important}.jstudio .jst-offset-tools{display:inline-flex;gap:4px;align-items:center}.jstudio .jst-offset-tools button{min-width:36px}.jstudio .jst-surface-offset-field{border-top:1px solid var(--line);padding-top:8px}.jstudio .jst-surface-offset-field input{font-variant-numeric:tabular-nums}.jstudio .surface-toolbar .jst-offset-tools+button[data-element-action=delete]{margin-left:6px}
@media(max-width:850px){.jst-workspace-overlay{padding:0}.jst-workspace-shell{width:100vw;height:100dvh;border-radius:0}.jst-workspace-body{grid-template-columns:1fr;grid-template-rows:minmax(44vh,58vh) minmax(0,1fr)}.jst-workspace-body>[data-ws-view]{grid-row:1}.jst-workspace-body>[data-ws-tool]{grid-row:2;border-right:0;border-top:1px solid #dce1da}.jst-workspace-body .js-stage{height:42vh;max-width:none}.jst-workspace-shell>footer{font-size:10px}.jstudio .jst-workspace-grid{grid-template-columns:1fr 1fr}}

/* 0.11.1 — stable workspace navigation and wide desktop canvas */
.jstudio .jst-workspace-launcher{display:block!important}.jstudio .jst-workspace-active-view{display:block!important}.jstudio .jst-workspace-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.jstudio .jst-workspace-grid button{min-height:76px}.jstudio .jst-workspace-grid button>span{font-size:24px}.jstudio .jst-workspace-body .js-work{width:100%!important;max-width:none!important}.jstudio .jst-workspace-body .js-stage{width:100%;max-width:none!important}
@media(max-width:1050px){.jstudio .jst-workspace-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.jstudio .jst-workspace-grid{grid-template-columns:1fr 1fr}.jstudio .jst-workspace-grid button{min-height:62px}}


/* 0.11.3 — wide Gutenberg breakout without transform.
   transform on the root made position:fixed workspaces relative to the
   configurator instead of the browser viewport. */
.jst-studio-root{
  width:min(calc(100vw - 32px),var(--jst-configurator-width,1800px))!important;
  max-width:none!important;
  position:relative;
  left:calc(50% - min(calc(50vw - 16px),var(--jst-configurator-half,900px)));
  transform:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box;
}
.jst-studio-root>.jst-block-canvas{width:100%;max-width:none!important}

/* The large action workspace is always tied to the browser viewport. */
.jst-workspace-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  transform:none!important;
  box-sizing:border-box;
}
.jst-workspace-shell{
  max-height:calc(100dvh - 24px);
}

@media(max-width:800px){
  .jst-studio-root{
    width:calc(100vw - 16px)!important;
    left:calc(50% - (50vw - 8px));
  }
  .jst-workspace-shell{max-height:100dvh}
}
