/** Shopify CDN: Minification failed

Line 208:94 Unterminated string token

**/
/* generated by scripts/build_studio_section.py 鈥?edit preview/studio.template.html */
#ufs{
  --ink:#121212;
  --ink-2:#2c2c2c;
  --muted:rgba(18,18,18,.50);
  --muted-2:rgba(18,18,18,.36);
  --line:rgba(18,18,18,.09);
  --line-2:rgba(18,18,18,.16);
  --bg:#fafafa;
  --surface:#ffffff;
  --navy:#17315c;          
  --navy-soft:#e8eef7;
  --navy-border:rgba(23,49,92,.22);
  --radius:20px;
  --radius-sm:12px;
  --page-max:1440px;       
  --page-pad:24px;
  --cta-h:64px;            
  --font:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --shadow-card:0 1px 2px rgba(18,18,18,.04), 0 8px 24px -12px rgba(18,18,18,.18);
}
#ufs *, #ufs *::before, #ufs *::after{box-sizing:border-box}
#ufs, #ufs{min-height:100%}
#ufs{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.45;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
}
#ufs button{font:inherit;color:inherit;cursor:pointer}
#ufs img{display:block;max-width:100%}
#ufs input, #ufs select{font:inherit}
#ufs .studio{
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 var(--page-pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(400px,468px);
  column-gap:44px;
  align-items:start;
}
#ufs .stage-slot{
  position:sticky;top:14px;
  height:calc(100dvh - var(--cta-h) - 28px);
  min-height:380px;
  margin-left:calc(var(--page-pad) * -1);
  border-radius:0 var(--radius) var(--radius) 0;
  overflow:hidden;
}
#ufs .stage{
  position:relative;
  height:100%;
  overflow:hidden;
  background:
    radial-gradient(120% 95% at 50% 0%, #ffffff 0%, #f1f0ec 52%, #e2e0da 100%);
  isolation:isolate;
}
#ufs .stage__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
#ufs .stage__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(122% 96% at 50% 44%, rgba(0,0,0,0) 52%, rgba(0,0,0,.09) 100%);
}
#ufs .stage__crumbs{
  position:absolute;top:16px;left:20px;
  font-size:12.5px;color:var(--muted);letter-spacing:.01em;
  display:flex;align-items:center;gap:8px;pointer-events:none;
}
#ufs .stage__crumbs b{font-weight:500;color:var(--ink)}
#ufs .stage__readout{
  position:absolute;top:14px;right:18px;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none;
}
#ufs .chip{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(18,18,18,.07);
  border-radius:999px;padding:6px 12px;
  font-size:12.5px;font-weight:500;color:var(--ink);
  box-shadow:0 4px 14px -8px rgba(18,18,18,.35);
}
#ufs .chip small{font-weight:400;color:var(--muted)}
#ufs .chip--ghost{background:rgba(255,255,255,.6);font-weight:400;color:var(--muted)}
#ufs .stage__views{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;padding:5px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(18,18,18,.07);
  border-radius:999px;box-shadow:0 10px 30px -18px rgba(18,18,18,.6);
}
#ufs .stage__views button{
  border:0;background:transparent;border-radius:999px;
  padding:8px 15px;font-size:12.5px;font-weight:500;color:var(--muted);
  transition:background .16s ease,color .16s ease;white-space:nowrap;
}
#ufs .stage__views button:hover{color:var(--ink);background:rgba(18,18,18,.05)}
#ufs .stage__views button.is-active{background:var(--ink);color:#fff}
#ufs .stage__hint{
  position:absolute;bottom:26px;left:20px;pointer-events:none;
  font-size:12px;color:var(--muted-2);letter-spacing:.01em;
}
#ufs .stage__boot{
  position:absolute;inset:0;display:grid;place-items:center;
  background:var(--surface);z-index:6;transition:opacity .5s ease;
  font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
}
#ufs .stage__boot.is-done{opacity:0;pointer-events:none}
#ufs .stage__fatal{
  position:absolute;inset:0;display:none;place-content:center;gap:10px;
  padding:40px;text-align:center;background:#fff;z-index:8;
}
#ufs .stage__fatal.is-on{display:grid}
#ufs .stage__fatal h2{margin:0;font-size:17px;font-weight:600}
#ufs .stage__fatal p{margin:0;color:var(--muted);font-size:13px;max-width:460px}
#ufs .stage__fatal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#f4f4f2;border-radius:6px;padding:2px 6px;font-size:12px;
}
#ufs .panel{background:var(--surface);min-width:0}
#ufs .panel__scroll{
  display:block;
  padding:14px 0 26px;
}
#ufs .step{padding:18px 0;border-bottom:1px solid var(--line)}
#ufs .step:last-of-type{border-bottom:0}
#ufs .step__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#ufs .step__no{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--navy);
  background:var(--navy-soft);border-radius:999px;padding:2px 8px;line-height:1.5;
}
#ufs .step__title{margin:0;font-size:14px;font-weight:600;letter-spacing:.005em}
#ufs .step__sub{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
#ufs .step__value{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:400}
#ufs .step__note{
  margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.5;
  background:#f7f7f5;border-radius:10px;padding:8px 10px;
}
#ufs .dims{display:flex;align-items:flex-end;gap:10px}
#ufs .dim{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
#ufs .dim__label{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
#ufs .dim__field{
  display:flex;align-items:center;border:1px solid var(--line-2);
  border-radius:10px;background:#fff;overflow:hidden;transition:border-color .14s ease,box-shadow .14s ease;
}
#ufs .dim__field:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
#ufs .dim__input{
  flex:1;min-width:0;border:0;background:transparent;text-align:center;
  font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;
  padding:9px 2px;color:var(--ink);appearance:textfield;-moz-appearance:textfield;
}
#ufs .dim__input:focus{outline:none}
#ufs .dim__input::-webkit-outer-spin-button, #ufs .dim__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#ufs .dim__step{width:30px;align-self:stretch;border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1}
#ufs .dim__step:hover{background:#f4f4f2;color:var(--ink)}
#ufs .dim__step:active{background:#ececea}
#ufs .dims__x{font-size:14px;color:var(--muted-2);padding-bottom:11px}
#ufs .presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
#ufs .preset{
  border:1px solid var(--line-2);background:#fff;border-radius:999px;
  padding:5px 11px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;
  transition:border-color .14s ease,background .14s ease,color .14s ease;
}
#ufs .preset:hover{border-color:rgba(18,18,18,.34)}
#ufs .preset.is-active{
  border-color:var(--navy);background:var(--navy-soft);color:var(--navy);
  font-weight:600;box-shadow:inset 0 0 0 1px var(--navy);
}
#ufs .frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px}
#ufs .fcard{
  border:1px solid var(--line-2);background:#fff;border-radius:12px;
  padding:9px 8px 8px;text-align:left;display:flex;flex-direction:column;gap:7px;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
#ufs .fcard:hover{border-color:rgba(18,18,18,.32)}
#ufs .fcard.is-active{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:#fbfcfe}
#ufs .fcard__sw{
  width:100%;aspect-ratio:1.38/1;border-radius:8px;background:#f7f6f3;
  position:relative;overflow:hidden;
}
#ufs .fcard__sw img{display:block;width:100%;height:100%;object-fit:cover}
#ufs .fcard__sw.is-missing{
  display:grid;place-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.06em;color:var(--muted-2);
}
#ufs .fcard__name{font-size:12px;color:var(--ink);font-weight:500;line-height:1.25;margin-top:0;
  min-height:2.5em;white-space:normal;overflow-wrap:break-word}
#ufs .thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#ufs .thumb{
  border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff;
  padding:0;aspect-ratio:4/5;position:relative;
}
#ufs .thumb img{width:100%;height:100%;object-fit:cover;display:block}
#ufs .thumb.is-active{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
#ufs .thumb.is-active::after{
  content:'鉁?;position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:99px;
  background:var(--navy);color:#fff;font-size:11px;display:grid;place-items:center;
}
#ufs .upload{margin-top:10px;display:flex;gap:8px;align-items:stretch}
#ufs .urlrow{display:flex;gap:8px;margin-top:8px}
#ufs .input{
  flex:1;min-width:0;border:1px solid var(--line-2);border-radius:10px;
  padding:9px 11px;font-size:12.5px;background:#fff;color:var(--ink);
}
#ufs .input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
#ufs .input::placeholder{color:var(--muted-2)}
#ufs .btn{
  border:1px solid var(--line-2);background:#fff;border-radius:10px;
  padding:9px 14px;font-size:12.5px;font-weight:500;transition:.15s ease;white-space:nowrap;
}
#ufs .btn:hover{border-color:rgba(18,18,18,.34)}
#ufs .btn--primary{
  background:var(--navy);border-color:var(--navy);color:#fff;border-radius:999px;
  padding:12px 22px;font-size:13.5px;font-weight:500;
}
#ufs .btn--primary:hover{background:#12264a;border-color:#12264a}
#ufs .btn--full{width:100%;justify-content:center;text-align:center}
#ufs .ctabar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
#ufs .ctabar__inner{
  width:100%;max-width:var(--page-max);margin:0 auto;
  padding:0 var(--page-pad);
  display:flex;align-items:center;gap:16px;
}
#ufs .ctabar__info{min-width:0;display:flex;flex-direction:column;gap:2px}
#ufs .ctabar__price{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
#ufs .ctabar__desc{
  font-size:12px;color:var(--muted);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#ufs .ctabar .btn--primary{margin-left:auto;flex:none}
#ufs .pip{
  position:fixed;right:14px;bottom:calc(var(--cta-h) + 14px);z-index:55;
  width:132px;height:100px;padding:0;border:0;border-radius:14px;overflow:hidden;
  background:#e9e6e1;box-shadow:0 10px 30px -10px rgba(18,18,18,.55), 0 0 0 1px rgba(18,18,18,.07);
  display:none;
}
#ufs .pip.is-on{display:block;animation:pip-in .26s cubic-bezier(.22,1,.36,1)}
/* On phones the theme's bottom toolbar (55px) sits under the buy bar, so the live
   preview has to clear both or the buy bar covers its lower half. */
@media (max-width:1024px){
  #ufs .pip{bottom:calc(var(--cta-h) + 55px + 14px + env(safe-area-inset-bottom, 0px))}
}
@keyframes pip-in{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
#ufs .pip img{width:100%;height:100%;object-fit:cover;display:block}
#ufs .pip__badge{
  position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:7px;
  background:rgba(18,18,18,.62);color:#fff;font-size:11px;display:grid;place-items:center;
}
#ufs .stage__expand{
  position:absolute;right:16px;bottom:16px;z-index:3;
  width:34px;height:34px;padding:0;border-radius:999px;border:1px solid rgba(18,18,18,.07);
  background:rgba(255,255,255,.86);color:var(--ink);font-size:14px;line-height:1;
  display:grid;place-items:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px -8px rgba(18,18,18,.35);
}
#ufs .stage__expand:hover{background:#fff}
#ufs .preview-overlay{position:fixed;inset:0;z-index:90;background:#f4f2ee;display:none}
#ufs .preview-overlay.is-open{display:block}
#ufs .preview-overlay .stage{height:100%}
#ufs .preview-overlay .stage__crumbs, #ufs .preview-overlay .stage__readout, #ufs .preview-overlay .stage__expand{display:none}
#ufs .preview-overlay__close{
  position:absolute;top:14px;right:14px;z-index:95;
  width:38px;height:38px;padding:0;border-radius:999px;border:1px solid rgba(18,18,18,.08);
  background:rgba(255,255,255,.9);font-size:14px;line-height:1;
  display:grid;place-items:center;box-shadow:0 6px 20px -10px rgba(18,18,18,.5);
}
#ufs .preview-overlay.is-open .stage__views{bottom:26px}
#ufs .toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,18px);
  background:var(--ink);color:#fff;border-radius:999px;padding:11px 20px;
  font-size:13px;opacity:0;pointer-events:none;transition:.28s cubic-bezier(.22,1,.36,1);
  z-index:60;max-width:min(88vw,520px);text-align:center;
}
#ufs .toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:1024px){
#ufs .studio{
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
  }
#ufs .stage-slot{
    position:relative;top:auto;
    height:clamp(280px,46vh,440px);
    min-height:0;
    margin:0 calc(var(--page-pad) * -1);
    border-radius:0;
  }
#ufs .panel{background:transparent}
#ufs .panel__scroll{padding:6px 0 20px}
#ufs{padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:900px){
#ufs{--page-pad:16px;--cta-h:62px}
#ufs .stage__hint{display:none}
#ufs .stage__views{bottom:14px}
#ufs .ctabar__price{font-size:18px}
}
@media (max-width:640px){
#ufs .frames{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
#ufs .fcard{padding:8px 7px 7px;gap:6px}
#ufs .fcard__name{font-size:11.5px}
}
@media (max-width:420px){
#ufs .ctabar__desc{font-size:11px}
#ufs .ctabar .btn--primary{padding:11px 16px;font-size:13px}
}
/* The theme page is white; the studio's own #fafafa would draw a visible seam
   against it (the studio is centred at 1440px, so the sides show page background). */
#ufs{background:transparent}
#ufs .studio{padding-top:6px}

/* the fixed buy bar is 67px tall and would sit on the last line of the footer;
   pad the page itself, but only on pages that actually render the studio */
body:has(#ufs){padding-bottom:76px}
@media (max-width:767px){ body:has(#ufs){padding-bottom:132px} }

/* Desktop: the stage is sized from 100dvh, but inside a theme it starts below the
   header, so its bottom (Front / Angle / Detail) slides under the fixed buy bar.
   The inline script in the section measures the real offset into --ufs-stage-h. */
@media (min-width:1025px){
  #ufs .stage-slot{
    /* the theme navbar floats fixed at top:61 once scrolled (64 tall), so the
       stage has to stick below it instead of at 14px or the nav covers the frame */
    top:133px;
    height:var(--ufs-stage-h, calc(100dvh - var(--cta-h) - 138px));
    /* the preview bleeds the stage off the left viewport edge; centred inside a
       theme that reads as a clipped card, so give it the same radius all round */
    margin-left:0;
    border-radius:var(--radius);
  }
}

/* The studio owns the bottom of the viewport. The Shopify Inbox bubble lands in
   the same corner as the fixed buy bar and swallows clicks on Add to cart, so it
   is hidden on this page only (this stylesheet is loaded by the studio section). */
shopify-chat{display:none!important}
/* the theme's chrome sits at z-index 500 (announcement bar) and 190 (mobile
   toolbar); the fullscreen preview has to cover both or its close button is
   unclickable */
#ufs .preview-overlay{z-index:900}
#ufs .preview-overlay__close{
  z-index:901;
  top:calc(14px + env(safe-area-inset-top,0px));
  right:calc(14px + env(safe-area-inset-right,0px));
}
/* the theme's mobile toolbar is fixed at the bottom with z-index 190, so the
   buy bar has to sit above it or the Add to cart button is unreachable */
@media (max-width:767px){
  #ufs .ctabar{bottom:55px;z-index:200}
}


/* ---- frame-your-art only -------------------------------------------------
   The 3D stage fills the viewport, so the floating navbar is pinned on every
   other page but scrolls away here. Scoped by a body class that theme.liquid
   only adds for the page.frame-your-art template. */
body.usipic-frame-page nav.new-usipic-navbar{
  position:static !important;
  top:auto !important;left:auto !important;right:auto !important;
  width:calc(100% - 32px) !important;
  margin:0 auto !important;
  transform:none !important;
}
body.usipic-frame-page .NEW-header-main-slot{height:auto !important;}