[hidden]{display:none!important}
:root{font-family:Inter,system-ui,sans-serif;color:#f6f4fb;background:#090910;--c1:#ff007f;--c2:#00ffff;--c3:#8a2be2;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 15% 15%,#ff007f18,transparent 42%),radial-gradient(ellipse at 85% 45%,#00ffff11,transparent 42%),radial-gradient(ellipse at 50% 100%,#8a2be222,transparent 40%),#090910}.shell{max-width:850px;margin:auto;padding:34px 16px 60px}.brand{text-align:center;display:flex;align-items:center;justify-content:center;gap:12px;letter-spacing:.22em;font-size:13px;font-weight:600}.brand strong{background:linear-gradient(90deg,#fa69c5,#60effa,#ae82ef);color:transparent;background-clip:text}.gem{font-size:24px;color:#77e9f4;text-shadow:0 0 15px #77e9f4}.subtitle{text-align:center;font-size:12px;color:#9a95ae;letter-spacing:.13em;margin:12px 0 35px}h1{font-weight:500;font-size:20px;letter-spacing:.17em;text-align:center}h2{font-size:13px;letter-spacing:.18em;text-align:center;color:#dbd5e5}p{color:#a9a3b8}.small{text-align:center;font-size:12px}.glass{background:#151420db;border:1px solid #ffffff20;border-radius:18px;box-shadow:0 18px 60px #0007;backdrop-filter:blur(18px)}.access{max-width:410px;margin:40px auto;padding:30px}.access p{text-align:center;font-size:13px}.access form{display:grid;gap:10px}label{font-size:12px;letter-spacing:.04em;color:#bab4c6;display:block;margin:12px 0 6px}input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),textarea{width:100%;background:#ffffff0c;border:1px solid #ffffff24;color:#fff;padding:12px 13px;border-radius:9px;font:inherit;font-size:14px;outline:none}input:focus,textarea:focus{border-color:#71dce2!important}input[type=file]{width:100%;font-size:12px}.primary{display:block;width:100%;border:1px solid #a0cde0a0;background:linear-gradient(105deg,#b51681,#357db0,#6a2fba);padding:14px 18px;border-radius:10px;color:white;font:600 12px Inter,sans-serif;letter-spacing:.12em;cursor:pointer;text-align:center;text-decoration:none}.primary:hover{filter:brightness(1.2)}.plain{border:0;background:transparent;color:#8bdef2;cursor:pointer;font-size:13px;padding:12px}.access .plain{width:100%}.toolbar{display:flex;justify-content:space-between;align-items:center;color:#a7a3b3;font-size:12px}.studio{max-width:650px;margin:auto}.card-stage{padding:35px 0;display:flex;justify-content:center;perspective:1100px}.flip-stage{position:relative;width:min(320px,85vw);aspect-ratio:9/14;border:0;background:none;color:inherit;padding:0;cursor:pointer;perspective:1200px;--border:conic-gradient(from var(--edge-angle),var(--c1) 0deg,var(--c2) 115deg,var(--c3) 235deg,var(--c1) 360deg)}.card-rotator{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.2,1)}.card-rotator.flipped{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;border-radius:23px;padding:24px;border:3px solid transparent;box-shadow:0 0 30px #ff007f35,0 0 55px #00ffff1c,0 25px 70px #000b;overflow:hidden}.back{transform:rotateY(180deg);justify-content:flex-start;padding-top:40px;gap:18px}.portrait-wrap{width:150px;height:150px;border-radius:100%;background:linear-gradient(35deg,var(--c1),var(--c2));padding:4px;display:flex;align-items:center;justify-content:center;margin-bottom:25px;box-shadow:0 0 30px #10d5dc37}.portrait-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#111}.portrait-wrap #portraitIcon,.portrait-wrap #sharedIcon{font-size:85px;color:#191525}.front-caption{font-size:17px;font-weight:600;letter-spacing:.12em;text-align:center}.tap-note{margin-top:12px;font-size:10px;letter-spacing:.22em;color:#aaa2ba}.type-emoji{font-size:48px}.type-label{font-size:11px;letter-spacing:.2em;color:#c7c0d3}.back-name{font-size:21px;font-weight:600;overflow-wrap:anywhere;max-width:100%;text-align:center}.back-bio{font-size:13px;line-height:1.55;color:#d4cfe0;overflow-wrap:anywhere;text-align:center;max-height:120px;overflow:auto}.card-link{margin-top:auto;display:block;max-width:100%;width:100%;background:#ffffff13;border:1px solid #ffffff25;border-radius:8px;padding:11px;text-align:center;font-size:12px;color:#f7f4fc;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-link+.card-link{margin-top:0}.editor{padding:25px}.type-switch{display:flex;gap:10px;justify-content:center}.type-switch label{padding:10px;background:#ffffff10;border-radius:8px;cursor:pointer}.colors{display:flex;align-items:center;gap:10px;margin:18px 0}.colors label{margin-right:auto}.colors input{width:44px;height:37px;background:transparent;border:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.publish{display:flex;align-items:center;gap:10px;margin:25px 0}.editor .primary{margin-top:20px}.share{display:flex;gap:8px}.share button{background:#3b2960;border:1px solid #9772bf;border-radius:9px;color:#fff;cursor:pointer}.notice{max-width:600px;margin:15px auto;padding:12px 16px;border:1px solid #48a8b9;border-radius:9px;background:#142c35;color:#c8f6f7;font-size:13px}.create-link{max-width:300px;margin:auto}footer{font-size:10px;text-align:center;margin-top:55px;letter-spacing:.14em;color:#777285}#shared .flip-stage{cursor:pointer}@media(max-width:550px){.two{grid-template-columns:1fr}.editor{padding:17px}.brand{letter-spacing:.11em;font-size:11px}}

/* Portrait cards and customization */
.front{justify-content:flex-end;padding:0}.front .portrait-wrap{position:absolute;inset:3px 3px auto;width:calc(100% - 6px);height:56%;margin:0;border-radius:20px 20px 0 0;padding:0;box-shadow:none;background:transparent}.front .portrait-wrap img{border-radius:20px 20px 0 0;object-fit:cover}.front .portrait-wrap img,.front .portrait-wrap #portraitIcon,.front .portrait-wrap #sharedIcon{height:100%;width:100%}.front-info{z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40%;width:100%;padding:14px 22px 22px;gap:9px}.front-business{font-size:13px;color:#ded7e6;text-align:center}.front[data-unused]{color:inherit}.flip-stage[data-layout=full] .front .portrait-wrap{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:20px}.flip-stage[data-layout=full] .front .portrait-wrap img{border-radius:20px}.flip-stage[data-layout=full] .front-info{background:linear-gradient(transparent,#090911e8 42%);min-height:39%;color:white}.corner-type{position:absolute;top:15px;right:16px;z-index:4;font-size:26px;filter:drop-shadow(0 0 9px #000)}.tap-note{border:1px solid #ffffff55;border-radius:30px;padding:9px 18px;color:white;background:#ffffff14}.back{gap:8px;padding:20px 18px;justify-content:flex-start}.small-avatar{width:72px;height:72px;border-radius:50%;padding:2px;background:linear-gradient(45deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:center;flex-shrink:0}.small-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.small-avatar span{font-size:34px}.back-name{font-size:18px}.back-role{font-size:11px;color:#a2eff4;text-align:center}.back-bio{max-height:68px;font-size:11px}.social-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;overflow-y:auto;max-height:130px;width:100%;padding:3px}.social-links a{font-size:10px;padding:7px 9px;background:#ffffff13;color:white;border:1px solid #ffffff22;border-radius:8px;text-decoration:none}.card-link{margin-top:0;padding:8px}.editor select{width:100%;padding:12px;background:#151420;border:1px solid #ffffff35;border-radius:9px;color:#fff}.editor input[type=color]{width:100%;height:40px;border:0;background:transparent}.card-face .card-link[hidden]{display:none}#shared .create-link{margin-top:14px}


/* Interior Color Studio: the same settings render on editable and public cards. */
.interior-builder{margin:20px 0 18px;padding:16px;border:1px solid #ffffff28;border-radius:14px;background:#ffffff06;min-width:0}
.interior-builder legend{padding:0 9px;color:#e9ccfa;font-weight:600;font-size:12px;letter-spacing:.15em}
.interior-hint{font-size:12px;line-height:1.55;margin:0 0 12px;color:#b8acc5}
.interior-pickers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.interior-pickers label{margin:4px 0;font-size:12px;text-align:center}
.interior-pickers input[type=color]{display:block;margin:9px auto 0;width:100%;height:49px;cursor:pointer;border:1px solid #ffffff32;border-radius:9px;padding:3px;background:#100d1b}
.interior-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;margin-top:14px}
.interior-range{min-width:0}
.interior-range label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.interior-range output{color:#8decf4;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}
.interior-range input[type=range]{width:100%;accent-color:#c36ce8;cursor:pointer}
.flip-stage{--interior-art:linear-gradient(145deg,#191822,#302054,#0b1830);--interior-x:50%;--interior-y:50%;--interior-zoom:165%;--finish-strength:.65}
.flip-stage .card-face{
  isolation:isolate;
  background-image:linear-gradient(180deg,#09091419,#05071448),var(--interior-art),var(--border);
  background-origin:padding-box,padding-box,border-box;
  background-clip:padding-box,padding-box,border-box;
  background-size:100% 100%,var(--interior-zoom) var(--interior-zoom),100% 100%;
  background-position:center,var(--interior-x) var(--interior-y),center;
  background-repeat:no-repeat;
}
.flip-stage .card-face::before,.flip-stage .card-face::after{content:"";position:absolute;inset:3px;border-radius:19px;pointer-events:none;z-index:1}
.flip-stage .card-face::before{opacity:var(--finish-strength);transition:opacity .18s ease}
.flip-stage .card-face::after{opacity:var(--finish-strength);transition:opacity .18s ease}
.flip-stage[data-finish="gloss"] .card-face::before{background:linear-gradient(127deg,#fff9 0%,#ffffff0a 19%,transparent 34%,#fff4 37%,transparent 47%,#0003 100%)}
.flip-stage[data-finish="gloss"] .card-face::after{inset:3px 3px auto;height:45%;background:radial-gradient(ellipse at 30% 0%,#ffffff7a,transparent 67%);opacity:calc(var(--finish-strength) * .45)}
.flip-stage[data-finish="glass"] .card-face::before{background:linear-gradient(155deg,#ffffff4c,transparent 30%,#ffffff1b 60%,transparent),radial-gradient(ellipse at 86% 20%,#ffffff24,transparent 60%);backdrop-filter:blur(2px) saturate(1.18)}
.flip-stage[data-finish="glass"] .card-face::after{box-shadow:inset 1px 1px 1px #ffffffa0,inset -2px -2px 2px #05071177,inset 0 0 38px #ffffff1b}
.flip-stage[data-finish="haze"] .card-face::before{background:linear-gradient(#0c1019b3,#14151ba6),radial-gradient(ellipse at 13% 30%,#e8dbee46,transparent 63%);backdrop-filter:blur(5px) saturate(.58)}
.flip-stage[data-finish="haze"] .card-face::after{background:radial-gradient(ellipse at 75% 84%,#eeeeff42,transparent 72%);box-shadow:inset 0 0 54px #0a0d14aa}
.flip-stage .card-face > *{z-index:2}
.flip-stage .card-face > .front-info{z-index:3}
.flip-stage .card-face > .corner-type{z-index:4}
@media(max-width:550px){.interior-sliders{grid-template-columns:1fr}.interior-builder{padding:12px}.interior-pickers{gap:7px}}

/* Card typography + optional front overlay */
.flip-stage{--card-font:Inter,sans-serif;--font-solid:#ffffff;--font-art:linear-gradient(100deg,#ffffff,#00ffff,#b08cff);--font-outline:#14101e;--font-outline-width:0px;--front-tint:linear-gradient(#10102059,#10102059)}
.flip-stage .front-info,.flip-stage .back{font-family:var(--card-font)}
.flip-stage .front-caption,.flip-stage .front-business,.flip-stage .back-name,.flip-stage .back-role,.flip-stage .type-label,.flip-stage .back-bio {color:var(--font-solid);-webkit-text-stroke:var(--font-outline-width) var(--font-outline)}
.flip-stage[data-fontmode="gradient"] .front-caption,.flip-stage[data-fontmode="gradient"] .front-business,.flip-stage[data-fontmode="gradient"] .back-name,.flip-stage[data-fontmode="gradient"] .back-role,.flip-stage[data-fontmode="gradient"] .type-label,.flip-stage[data-fontmode="gradient"] .back-bio{background-image:var(--font-art);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.flip-stage .front .portrait-wrap::after{content:"";position:absolute;inset:0;background:var(--front-tint);pointer-events:none;border-radius:inherit}
.font-builder input[type=color]{height:42px;border:1px solid #ffffff36;border-radius:9px;padding:3px;background:#191424;cursor:pointer}
/* Optional NFC product and Network entry flow */
.hub-dialog{position:fixed;max-height:min(88dvh,760px);overflow:auto;width:min(455px,calc(100vw - 28px));border:1px solid #63ddec88;border-radius:22px;padding:29px 24px 24px;background:radial-gradient(ellipse at 15% 0%,#b00b7040,transparent 70%),radial-gradient(ellipse at 100% 95%,#00e8f122,transparent 65%),#13101c;color:white;box-shadow:0 18px 75px #000b;text-align:center}
.hub-dialog::backdrop{background:#06040be0;backdrop-filter:blur(8px)}
.hub-dialog h2{font-size:17px;line-height:1.55;letter-spacing:.14em;color:white}
.hub-dialog p{font-size:13px;line-height:1.65;color:#ddd5e5}
.hub-dialog .modal-sub{font-size:11px;color:#afa4bf}
.hub-dialog .modal-mark{font-size:35px;color:#86f6f8;filter:drop-shadow(0 0 13px #a05bdb);margin-bottom:10px}
.hub-dialog .modal-actions{display:grid;gap:8px;margin-top:21px}
.hub-dialog .primary{margin-top:10px}
.hub-dialog form{text-align:left}
.hub-dialog input,.hub-dialog textarea,.hub-dialog select{width:100%;background:#241d30;border:1px solid #6e577b;color:white;border-radius:9px;padding:12px;font:inherit}
.hub-dialog .action-skip{display:block;margin:5px auto 0;width:100%;color:#c4e8e9}


/* Live design station: sticky preview beside scrolling editor. */
.shell{max-width:1240px}
.studio{max-width:1140px;margin-inline:auto}
.studio-workspace{display:grid;grid-template-columns:minmax(330px,390px) minmax(0,1fr);align-items:start;gap:clamp(20px,4vw,52px);margin-top:22px}
.studio-preview{position:sticky;top:16px;align-self:start;min-width:0;border:1px solid #ffffff1b;background:linear-gradient(135deg,#211027db,#0b1220ee);border-radius:24px;padding:18px 16px 24px;box-shadow:0 15px 48px #0008;z-index:5}
.preview-meta{text-align:center}
.preview-meta h1{margin:9px 0;font-size:16px}
.preview-meta .small{margin:6px 0 0;line-height:1.45}
.preview-kicker{font-size:10px;letter-spacing:.24em;color:#88e5f0}
.studio-preview .card-stage{padding:20px 0 0}
.studio-controls{min-width:0}
.design-shortcuts{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:12px;padding:10px;background:#110f1ef2;border:1px solid #ffffff20;border-radius:14px;backdrop-filter:blur(14px)}
.design-shortcuts a{padding:9px 11px;color:#d6ceea;background:#ffffff0b;border:1px solid #ffffff1c;border-radius:9px;text-decoration:none;font-size:11px;letter-spacing:.04em;transition:background .2s,border-color .2s}
.design-shortcuts a:hover,.design-shortcuts a:focus-visible{background:#ad56d043;border-color:#8de2ee9a;color:white}
#editor{scroll-margin-top:80px}
#editor [id]{scroll-margin-top:94px}
.card-shell{position:relative;width:min(320px,85vw);max-width:100%;aspect-ratio:9 / 14}
.card-shell .flip-stage{width:100%;height:100%}
.card-gem-share{position:absolute;left:11px;top:11px;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:52px;min-height:55px;padding:4px;border-radius:13px;border:1px solid #9ce7f66b;background:#0b1023c4;box-shadow:0 5px 20px #0009,0 0 12px #46d6ed37;color:#fff;cursor:pointer;backdrop-filter:blur(10px)}
.card-gem-share:hover,.card-gem-share:focus-visible{border-color:#a4f6ff;background:#243055ec;box-shadow:0 0 20px #69e8f499}

.card-gem-share span{font-size:8px;letter-spacing:.1em;font-weight:700}
.button-gem{display:inline-block;width:17px;height:17px;vertical-align:middle;object-fit:contain;margin-right:6px}
/* True continuous colored perimeter flow. Interior pattern/texture remains independent. */
@property --edge-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes flowingGemBorder{from{--edge-angle:0deg}to{--edge-angle:360deg}}
.flip-stage .card-face{animation:flowingGemBorder 5.2s linear infinite;border-width:4px;box-shadow:0 0 13px #ff007f45,0 0 27px #00ffff22,0 0 48px #8a2be21e,0 22px 55px #000b}
@media(prefers-reduced-motion:reduce){.flip-stage .card-face{animation:none}.card-rotator{transition:none}}
/* Mobile editing keeps the complete, usable card visible instead of shrinking it
   into a sticky 143px thumbnail beside the instructions. */
.card-gem-share .share-gem,
.button-gem.share-gem{
  display:inline-block;
  font-size:27px;
  line-height:1;
  font-family:Arial,sans-serif;
  font-weight:700;
  background:linear-gradient(140deg,#f5ffff 0%,#7eecff 28%,#b17dff 55%,#20e6e8 82%,#fbb7ef 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 8px #55caffaa);
}
.button-gem.share-gem{font-size:18px;vertical-align:middle;margin-right:7px}
@media(max-width:840px){
  .shell{padding:24px 16px 55px}
  .studio{width:100%;min-width:0}
  .studio-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:15px;margin-top:18px}
  .studio-preview{
    position:relative;top:auto;z-index:1;
    display:flex;flex-direction:column;align-items:center;gap:12px;
    margin:0;padding:22px 16px 28px;
    border-radius:23px;
    background:linear-gradient(135deg,#211027db,#0b1220ee);
    box-shadow:0 15px 48px #0008;
  }
  .preview-meta{order:0;text-align:center;width:100%;max-width:470px}
  .preview-meta h1{font-size:17px;line-height:1.4;margin:8px 0}
  .preview-meta .small{font-size:12px;line-height:1.5;margin:6px 0 0}
  .preview-kicker{font-size:11px}
  .studio-preview .card-stage{order:1;padding:9px 0 0;width:100%;display:flex;justify-content:center}
  .studio-preview .card-shell{width:min(340px,calc(100vw - 80px));max-width:100%;aspect-ratio:9/14}
  #studio .flip-stage .corner-type{font-size:26px;top:15px;right:16px}
  #studio .flip-stage .front-caption{font-size:clamp(16px,4.3vw,21px);letter-spacing:.09em}
  #studio .flip-stage .front-business{font-size:13px}
  #studio .flip-stage .front-info{padding:15px 17px 22px;gap:9px}
  #studio .flip-stage .tap-note{font-size:10px;padding:9px 17px;margin-top:12px}
  #studio .flip-stage .back{padding:20px 16px;gap:8px}
  #studio .flip-stage .small-avatar{width:70px;height:70px}
  #studio .flip-stage .back-name{font-size:18px}
  #studio .flip-stage .type-label{font-size:11px}
  #studio .flip-stage .back-role{font-size:11px}
  #studio .flip-stage .back-bio{max-height:80px;font-size:11px;line-height:1.5}
  #studio .flip-stage .social-links{max-height:112px;gap:5px}
  #studio .flip-stage .social-links a{font-size:10px;padding:7px 8px}
  #studio .flip-stage .card-link{font-size:11px;padding:8px}
  #studio .card-gem-share{width:50px;min-height:53px;left:11px;top:11px;border-radius:12px;gap:2px}
  #studio .card-gem-share .share-gem{font-size:28px}
  #studio .card-gem-share span:last-child{font-size:8px}
  .design-shortcuts{position:sticky;top:0;z-index:6;gap:7px;justify-content:center;margin:0 0 12px;padding:9px}
  .design-shortcuts a{font-size:11px;padding:9px 11px}
  #editor [id],#editor{scroll-margin-top:90px}
  .toolbar{flex-wrap:wrap;gap:4px}
  #welcome{overflow-wrap:anywhere;min-width:0}
}
@media(max-width:430px){
  .studio-preview{padding:20px 12px 24px;gap:10px}
  .studio-preview .card-shell{width:min(330px,calc(100vw - 64px))}
  .preview-meta h1{font-size:16px}
  .preview-meta .small{font-size:11px}
  .design-shortcuts{gap:6px}
  .design-shortcuts a{font-size:11px;padding:9px 10px}
  .studio-preview .card-stage{padding:8px 0 0}
}
@media(max-width:360px){
  .studio-preview .card-shell{width:calc(100vw - 58px)}
  #studio .flip-stage .back{padding:15px 12px;gap:6px}
  #studio .flip-stage .back-name{font-size:16px}
  #studio .flip-stage .social-links a{font-size:9px;padding:5px}
  .shell{padding-inline:12px}
}


/* Mobile live editing: comfortably sized card AND useful space for controls.
   Sticky preview belongs to the workspace, without scaling its children into
   an unreadable thumbnail. Keep the surface opaque so sliders do not ghost
   through the card panel as the page scrolls. */
@media (max-width:840px){
  .studio-workspace{display:block;position:relative;overflow:visible}
  .studio-preview{
    position:sticky;
    top:0;
    z-index:15;
    width:100%;
    margin:0;
    overflow:visible;
    background:linear-gradient(125deg,#1c0c23,#0b1322);
    box-shadow:0 8px 30px #000c;
  }
  .studio-controls{position:relative;z-index:1;margin-top:12px}
  .design-shortcuts{position:relative;top:auto;z-index:1}
  .studio-preview.is-editing{
    padding:7px 12px 10px;
    gap:0;
    border-radius:0 0 19px 19px;
    background:linear-gradient(125deg,#1c0c23,#0b1322);
    box-shadow:0 8px 30px #000c;
  }
  .studio-preview.is-editing .preview-meta{display:none}
  .studio-preview.is-editing .card-stage{
    height:auto;
    min-height:0;
    width:100%;
    padding:0;
    overflow:visible;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .studio-preview.is-editing .card-shell{
    width:min(310px,calc(100vw - 80px));
    max-width:100%;
    flex:0 1 auto;
    aspect-ratio:9/14;
    transform:none;
    transition:none;
  }
}

/* On phones, the card is roughly 15-18% smaller than the oversized version.
   Keep a single unobtrusive preview label; no huge title occupying slider space.
   These selectors also apply before the scroll script activates, so the editor
   remains usable even if the browser delays that script. */
@media (max-width:550px){
  .studio-preview,
  .studio-preview.is-editing{
    padding:8px 10px 12px;
    gap:4px;
    border-radius:0 0 19px 19px;
  }
  .studio-preview .preview-meta,
  .studio-preview.is-editing .preview-meta{
    display:block;
    order:0;
    width:100%;
    margin:0;
    text-align:center;
  }
  .studio-preview .preview-meta h1,
  .studio-preview .preview-meta .small{display:none}
  .studio-preview .preview-kicker{display:block;font-size:10px;line-height:16px;letter-spacing:.24em}
  .studio-preview .card-stage,
  .studio-preview.is-editing .card-stage{
    order:1;
    height:auto;
    min-height:0;
    width:100%;
    padding:2px 0 0;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .studio-preview .card-shell,
  .studio-preview.is-editing .card-shell{
    width:min(278px,calc(100vw - 96px));
    max-width:100%;
    flex:0 1 auto;
    aspect-ratio:9/14;
    transform:none;
    transition:none;
  }
  #editor [id],#editor{scroll-margin-top:480px}
}
/* Short devices need more usable space for the actual settings. */
@media (max-width:550px) and (max-height:725px){
  .studio-preview .card-shell,
  .studio-preview.is-editing .card-shell{width:min(252px,calc(100vw - 96px))}
  #editor [id],#editor{scroll-margin-top:440px}
}
@media (max-width:360px){
  .studio-preview .card-shell,
  .studio-preview.is-editing .card-shell{width:min(255px,calc(100vw - 88px))}
  #editor [id],#editor{scroll-margin-top:415px}
}