@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=M+PLUS+1p:wght@600&display=swap");   /* 2026-10-23: Rajdhani from this site (SIL Open Font License), not Google Fonts. "Rajdhani Fallback" = Arial sized like Rajdhani,
   so nothing moves when the real font arrives (layout shift). */
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rajdhani/rajdhani-400-latin-ext.woff2)format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rajdhani/rajdhani-400-latin.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rajdhani/rajdhani-500-latin-ext.woff2)format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rajdhani/rajdhani-500-latin.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/rajdhani/rajdhani-600-latin-ext.woff2)format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/rajdhani/rajdhani-600-latin.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/rajdhani/rajdhani-700-latin-ext.woff2)format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/rajdhani/rajdhani-700-latin.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani Fallback";font-weight:100 550;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:92.85%;ascent-override:100.17%;descent-override:37.27%;line-gap-override:0%}
@font-face{font-family:"Rajdhani Fallback";font-weight:551 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:86.42%;ascent-override:107.62%;descent-override:40.04%;line-gap-override:0%}
@font-face{font-family:"Rajdhani Fallback Android";font-weight:100 550;src:local("Roboto Medium"),local("Roboto-Medium"),local("Roboto");size-adjust:91.86%;ascent-override:101.24%;descent-override:37.67%;line-gap-override:0%}
@font-face{font-family:"Rajdhani Fallback Android";font-weight:551 900;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:92.22%;ascent-override:100.85%;descent-override:37.52%;line-gap-override:0%}
/* only downloaded where used */
/* C4TM30W maker studio look — Goal Maker, Frame & Media Studio and Scene Maker look like the CATMINT makers:
   settings on the left (one top box + tabs), preview on the right, "Save & use" under the preview.
   Proportions are CATMINT's (13.5 px text, 32 px fields, 140 px label column, 42 px row pitch, boxes with the title
   on the border), scaled with the window through --u; colours and fonts are the website's.
   Only the editor UI is styled: the preview and everything a streamer designs keep their own look; exports are untouched.
   html.cm-look / html.cm-app are set by catmint-look.js. */
@font-face{font-family:'Scratchmeow5';src:url('../fonts/Scratchmeow5-Regular.woff2') format('woff2'),url('../fonts/Scratchmeow5-Regular.ttf') format('truetype');font-display:swap}

html.cm-look{
  /* one unit = CATMINT's text size, growing with the window: 13 px (laptop) … 17 px (2560 px screens) */
  --u:clamp(13px, calc(7px + .42vw), 17px);
  --cm-bg:#08050f; --cm-panel:#110a1b; --cm-panel-2:#0c0713; --cm-field:#1a1027; --cm-field-hover:#211433;
  --cm-line:#2e1f40; --cm-line-soft:#21162f; --cm-line-strong:#4a3163;
  --cm-text:#f3ecff; --cm-label:#e6dff0; --cm-muted:#a996bd; --cm-title:#b98aff;
  --cm-accent:#8b2cff; --cm-accent-2:#ff35ae; --cm-accent-hover:#9a45ff;
  --cm-font:"Rajdhani","Arial Narrow","Rajdhani Fallback","Rajdhani Fallback Android",Arial,sans-serif; --cm-brand:'Scratchmeow5',"Rajdhani","Arial Narrow","Rajdhani Fallback","Rajdhani Fallback Android",Arial,sans-serif;
  --cm-label-w:calc(var(--u) * 10.4);
  --cm-h:calc(var(--u) * 2.35);          /* field / dropdown / button height */
  --cm-gap:calc(var(--u) * .75);         /* space between rows */
  --cm-r:calc(var(--u) * .3);            /* field corner radius */
  --cm-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23e6dff0'/%3E%3C/svg%3E");
  color-scheme:dark;
}
html.cm-look,html.cm-look body{background:var(--cm-bg)!important;color:var(--cm-text)!important}
html.cm-look body{margin:0!important;font:400 var(--u)/1.35 var(--cm-font)!important}

/* ---------- shell: settings column + preview column ---------- */
html.cm-look .cm-shell{display:grid;grid-template-columns:clamp(calc(var(--u) * 26), 33%, calc(var(--u) * 44)) minmax(0,1fr);
  gap:calc(var(--u) * 1.2);padding:calc(var(--u) * 1);box-sizing:border-box;width:100%;max-width:none;margin:0 auto;align-items:start;font-size:var(--u)}
html.cm-look .cm-shell *,html.cm-look .cm-shell *::before,html.cm-look .cm-shell *::after{box-sizing:border-box}
html.cm-look .cm-left,html.cm-look .cm-right{display:flex;flex-direction:column;gap:calc(var(--u) * .8);min-width:0}
html.cm-look .cm-shell[hidden]{display:none!important}
/* the Scene Maker shell also carries the old '.workspace' class: its own column rules must not apply */
html.cm-look .cm-shell.cm-scene.workspace,html.cm-look .cm-shell.cm-scene.workspace.bothMode{display:grid!important;grid-template-columns:clamp(calc(var(--u) * 26), 33%, calc(var(--u) * 44)) minmax(0,1fr)!important;gap:calc(var(--u) * 1.2)!important;width:100%!important;align-items:start!important}

/* ---------- CATMINT group box: thin border, title sitting on the edge ---------- */
html.cm-look .cm-shell .cm-group,html.cm-look .cm-shell details.cm-flat{position:relative;background:var(--cm-panel)!important;border:1px solid var(--cm-line)!important;border-radius:calc(var(--u) * .45)!important;
  padding:calc(var(--u) * 1.35) calc(var(--u) * 1.15) calc(var(--u) * .9)!important;margin:calc(var(--u) * .7) 0 0!important;min-width:0;box-shadow:none!important;overflow:visible!important}
html.cm-look .cm-shell .cm-group-title,html.cm-look .cm-shell details.cm-flat>summary{position:absolute;top:calc(var(--u) * -.72)!important;left:calc(var(--u) * .8)!important;padding:0 calc(var(--u) * .4)!important;margin:0!important;
  background:var(--cm-bg)!important;border:0!important;border-radius:3px;list-style:none;pointer-events:none;white-space:nowrap;max-width:calc(100% - var(--u) * 1.6);overflow:hidden;text-overflow:ellipsis;
  font:500 calc(var(--u) * .95)/1.3 var(--cm-font)!important;color:var(--cm-title)!important;text-transform:none!important;letter-spacing:0!important}
html.cm-look .cm-shell .cm-group-title *,html.cm-look .cm-shell details.cm-flat>summary *{font:inherit!important;color:inherit!important;text-transform:none!important;letter-spacing:0!important;background:none!important;border:0!important;padding:0!important;margin:0!important}
html.cm-look .cm-shell .cm-group-title :is(.panel-no,.cm-num),html.cm-look .cm-shell details.cm-flat>summary :is(.panel-no,.cm-num){display:none!important}
html.cm-look .cm-shell details.cm-flat>summary::-webkit-details-marker,html.cm-look .cm-shell details.cm-flat>summary::after,html.cm-look .cm-shell details.cm-flat>summary::before{display:none!important;content:none!important}
html.cm-look .cm-shell details.cm-flat>:not(summary){display:block}
html.cm-look .cm-shell details.cm-flat>:is(.editorAccordionBody,.inside,.stepInside),html.cm-look .cm-ui .cm-group>:is(.inside,.stepInside){padding:0!important;margin:0!important;border:0!important;background:none!important}

/* ---------- tabs (CATMINT: plain words, the active one bold with a coloured line) ---------- */
html.cm-look .cm-shell .cm-tabs{display:flex;flex-wrap:wrap;gap:0;margin-top:calc(var(--u) * .3);padding:0;border-bottom:1px solid var(--cm-line)}
html.cm-look .cm-ui .cm-tabs .cm-tab{all:unset;cursor:pointer;padding:calc(var(--u) * .62) calc(var(--u) * 1.15)!important;margin-bottom:-1px;border-bottom:2px solid transparent!important;white-space:nowrap;
  font:400 var(--u)/1 var(--cm-font)!important;color:var(--cm-muted)!important;text-transform:none!important;letter-spacing:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;min-height:0!important;width:auto!important}
html.cm-look .cm-ui .cm-tabs .cm-tab *{all:unset;font:inherit!important;color:inherit!important}
html.cm-look .cm-ui .cm-tabs .cm-tab .panel-no{display:none!important}
html.cm-look .cm-ui .cm-tabs .cm-tab:hover{color:var(--cm-text)!important}
html.cm-look .cm-ui .cm-tabs .cm-tab.is-active{color:#fff!important;font-weight:700!important;border-bottom-color:var(--cm-accent)!important;background:rgba(139,44,255,.10)!important}
html.cm-look .cm-ui .cm-tabs .cm-tab:focus-visible{outline:2px solid var(--cm-accent);outline-offset:2px}
html.cm-look .cm-ui .cm-tabs .cm-tab[hidden]{display:none!important}
html.cm-look .cm-pane{display:none}
html.cm-look .cm-pane.is-active{display:block}
html.cm-look .cm-pane>.cm-group:first-child{margin-top:calc(var(--u) * 1.1)!important}

/* ---------- hint row above the preview, help box ---------- */
html.cm-look .cm-hint{display:flex;align-items:center;gap:calc(var(--u) * .6);flex-wrap:wrap;min-height:var(--cm-h);color:var(--cm-label);font-size:var(--u)}
html.cm-look .cm-hint-text{flex:1 1 calc(var(--u) * 20);min-width:0}
html.cm-look .cm-hint-tools{display:flex;gap:calc(var(--u) * .45);flex-wrap:wrap;align-items:center}
html.cm-look .cm-canvas{background:transparent!important;border:0!important;padding:0!important;min-width:0}
html.cm-look .cm-help{background:var(--cm-panel);border:1px solid var(--cm-line);border-radius:calc(var(--u) * .45)}
html.cm-look .cm-help>summary{cursor:pointer;list-style:none;padding:calc(var(--u) * .7) calc(var(--u) * 1.05);font:500 var(--u)/1 var(--cm-font)!important;color:var(--cm-title)}
html.cm-look .cm-help>summary::-webkit-details-marker{display:none}
html.cm-look .cm-help>summary::before{content:'?';display:inline-grid;place-items:center;width:calc(var(--u) * 1.35);height:calc(var(--u) * 1.35);margin-right:calc(var(--u) * .6);border-radius:50%;border:1px solid var(--cm-line);font:700 calc(var(--u) * .8) var(--cm-font);color:var(--cm-text)}
html.cm-look .cm-help[open]>summary{border-bottom:1px solid var(--cm-line)}
html.cm-look .cm-help-body{padding:calc(var(--u) * .9) calc(var(--u) * 1.05);color:var(--cm-muted);font-size:calc(var(--u) * .92)}

/* ---------- text ---------- */
html.cm-look .cm-ui{color:var(--cm-text);font:400 var(--u)/1.35 var(--cm-font)}
html.cm-look .cm-ui :is(h1,h2,h3,h4){color:var(--cm-text)}
html.cm-look .cm-ui :is(label,.label,.fieldRow>label){font:400 var(--u)/1.3 var(--cm-font)!important;color:var(--cm-label)!important;text-transform:none!important;letter-spacing:0!important}
html.cm-look .cm-ui :is(p,.small,.note,.help,.miniNote,.tiny-note,small,.canvas-tip,.status,.truth-note,.licenseBox,.streamerbot-source-note,.streamerbot-other-note){font-size:calc(var(--u) * .92)!important;line-height:1.45!important;color:var(--cm-muted)!important}
html.cm-look .cm-ui :is(.selected-divider-label,.subsectionTitle,.masterAlign strong,.alignSection>b){display:block;font:500 calc(var(--u) * .95)/1.3 var(--cm-font)!important;color:var(--cm-title)!important;text-transform:none!important;letter-spacing:0!important;margin:calc(var(--u) * .9) 0 calc(var(--u) * .55)!important;padding:0!important;border:0!important;background:none!important}
html.cm-look .cm-ui :is(.truth-note,.export-help,.goal-pack-panel,.status,.licenseBox){background:transparent!important;border:0!important;padding:calc(var(--u) * .15) 0!important}

/* ---------- fields and dropdowns (CATMINT: dark field, thin border, filled ▼ arrow) ---------- */
html.cm-look .cm-ui :is(input[type=text],input[type=number],input[type=search],input[type=url],input:not([type]),select,textarea){
  width:100%;min-width:0;height:var(--cm-h)!important;min-height:var(--cm-h)!important;padding:0 calc(var(--u) * .65)!important;
  font:400 var(--u)/1.2 var(--cm-font)!important;color:var(--cm-text)!important;background-color:var(--cm-field)!important;
  border:1px solid var(--cm-line)!important;border-radius:var(--cm-r)!important;box-shadow:none!important;text-align:left;outline:none}
html.cm-look .cm-ui select{appearance:none!important;-webkit-appearance:none!important;padding-right:calc(var(--u) * 2.2)!important;cursor:pointer;
  background-image:var(--cm-arrow)!important;background-repeat:no-repeat!important;background-position:right calc(var(--u) * .75) center!important;background-size:calc(var(--u) * .72) auto!important}
html.cm-look .cm-ui select option{background:var(--cm-field);color:var(--cm-text)}
html.cm-look .cm-ui textarea{height:auto!important;min-height:calc(var(--u) * 4.4)!important;padding:calc(var(--u) * .5) calc(var(--u) * .65)!important;line-height:1.35!important;resize:vertical}
html.cm-look .cm-ui :is(input,select,textarea):not([type=range]):not([type=checkbox]):not([type=radio]):hover{border-color:var(--cm-line-strong)!important;background-color:var(--cm-field-hover)!important}
html.cm-look .cm-ui :is(input,select,textarea):not([type=range]):not([type=checkbox]):not([type=radio]):focus{border-color:var(--cm-accent)!important;box-shadow:0 0 0 1px rgba(139,44,255,.45)!important}
/* colour: CATMINT shows a small swatch inside a field together with the hex code (the hex code is added by catmint-look.js) */
html.cm-look .cm-ui input[type=color]{-webkit-appearance:none;appearance:none;width:calc(var(--u) * 3.3)!important;min-width:calc(var(--u) * 3.3)!important;height:calc(var(--u) * 1.85)!important;min-height:0!important;padding:calc(var(--u) * .18)!important;
  border:1px solid var(--cm-line)!important;border-radius:var(--cm-r)!important;background:var(--cm-field)!important;cursor:pointer;justify-self:start}
html.cm-look .cm-ui input[type=color]::-webkit-color-swatch-wrapper{padding:0}
html.cm-look .cm-ui input[type=color]::-webkit-color-swatch{border:0;border-radius:2px}
html.cm-look .cm-ui input[type=color]::-moz-color-swatch{border:0;border-radius:2px}
html.cm-look .cm-ui .cm-colour{display:flex;align-items:center;gap:calc(var(--u) * .55);height:var(--cm-h);padding:0 calc(var(--u) * .5);background:var(--cm-field);border:1px solid var(--cm-line);border-radius:var(--cm-r);min-width:0;cursor:pointer}
html.cm-look .cm-ui .cm-colour:hover{border-color:var(--cm-line-strong);background:var(--cm-field-hover)}
html.cm-look .cm-ui .cm-colour>input[type=color]{width:calc(var(--u) * 1.3)!important;min-width:calc(var(--u) * 1.3)!important;height:calc(var(--u) * 1.3)!important;padding:0!important;border:0!important;border-radius:3px!important;background:none!important;flex:0 0 auto}
html.cm-look .cm-ui .cm-colour>.cm-hex{font:400 var(--u)/1 var(--cm-font);color:var(--cm-text);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
html.cm-look .cm-ui input[type=checkbox],html.cm-look .cm-ui input[type=radio]{accent-color:var(--cm-accent)!important;width:calc(var(--u) * 1.05);height:calc(var(--u) * 1.05);margin:0 calc(var(--u) * .5) 0 0;flex:0 0 auto;vertical-align:-.15em}
html.cm-look .cm-ui input[type=range]{accent-color:var(--cm-accent)!important;width:100%;height:calc(var(--u) * 1.3)!important;min-height:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html.cm-look .cm-ui input[type=file]{width:100%;height:var(--cm-h);color:var(--cm-muted);font:400 calc(var(--u) * .92)/1 var(--cm-font);background:var(--cm-field);border:1px solid var(--cm-line);border-radius:var(--cm-r);padding:calc(var(--u) * .3)}
html.cm-look .cm-ui input[type=file]::file-selector-button{height:calc(var(--cm-h) - var(--u) * .7);background:#241736;color:var(--cm-text);border:1px solid var(--cm-line-strong);border-radius:var(--cm-r);padding:0 calc(var(--u) * .9);margin-right:calc(var(--u) * .6);cursor:pointer;font:500 calc(var(--u) * .92) var(--cm-font)}
/* number with unit ("8 px") */
html.cm-look .cm-ui .numberWrap{display:flex!important;align-items:center;height:var(--cm-h)!important;min-height:var(--cm-h)!important;padding:0!important;background:var(--cm-field)!important;border:1px solid var(--cm-line)!important;border-radius:var(--cm-r)!important;overflow:hidden}
html.cm-look .cm-ui .numberWrap input{height:calc(var(--cm-h) - 2px)!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;text-align:right!important;padding:0 calc(var(--u) * .3) 0 calc(var(--u) * .5)!important}
html.cm-look .cm-ui .numberWrap span{padding:0 calc(var(--u) * .6) 0 calc(var(--u) * .15);color:var(--cm-label);font-size:var(--u)}

/* ---------- buttons (CATMINT: flat, same height as the fields) ---------- */
html.cm-look .cm-ui :is(button,.upload-btn,.smallBtn,.mini-btn,.tinyAction):not(.cm-tab){
  display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u) * .35);width:auto;
  min-height:var(--cm-h)!important;height:auto;padding:calc(var(--u) * .35) calc(var(--u) * 1)!important;
  font:400 var(--u)/1.2 var(--cm-font)!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--cm-text)!important;background:#1c1229!important;background-image:none!important;border:1px solid #382650!important;border-radius:var(--cm-r)!important;box-shadow:none!important;cursor:pointer}
html.cm-look .cm-ui :is(button,.upload-btn,.smallBtn,.mini-btn,.tinyAction):not(.cm-tab):hover:not(:disabled){border-color:var(--cm-accent)!important;background:#25173a!important}
html.cm-look .cm-ui :is(button.primary,.smallBtn.primary,.cm-primary,#downloadHtml,#generatePack,#downloadGoalPack,#saveGoalToPack,#startBuild,#applyGoal){background:var(--cm-accent)!important;border-color:#a35cff!important;color:#fff!important}
html.cm-look .cm-ui :is(button.primary,.smallBtn.primary,.cm-primary,#downloadHtml,#generatePack,#downloadGoalPack,#saveGoalToPack,#startBuild,#applyGoal):hover:not(:disabled){background:var(--cm-accent-hover)!important}
html.cm-look .cm-ui :is(button.danger,.danger){color:#ffc6e4!important;border-color:#4a2340!important}
html.cm-look .cm-ui button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- CATMINT form rows: label on the left, control on the right ---------- */
html.cm-look .cm-ui :is(.cm-row,.fieldRow){display:grid!important;grid-template-columns:var(--cm-label-w) minmax(0,1fr)!important;align-items:center!important;gap:calc(var(--u) * .6)!important;margin:0 0 var(--cm-gap)!important;padding:0!important;border:0!important;background:none!important}
html.cm-look .cm-ui .fieldRow>label{margin:0!important}
html.cm-look .cm-ui .fieldRow.hidden{display:none!important}
html.cm-look .cm-ui :is(.controlPair,.triplePair){display:grid!important;grid-template-columns:minmax(0,1fr) calc(var(--u) * 6.6)!important;gap:calc(var(--u) * .6)!important;align-items:center!important}
html.cm-look .cm-ui .inlineChecks{display:flex;flex-wrap:wrap;gap:calc(var(--u) * .45) calc(var(--u) * 1.1)}
html.cm-look .cm-ui :is(.inlineChecks label,.option-item,label.check){display:flex!important;align-items:center;cursor:pointer}
html.cm-look .cm-ui :is(.smallBtnRow,.buttonrow,.saveActions){display:flex!important;flex-wrap:wrap;gap:calc(var(--u) * .45)!important;margin:calc(var(--u) * .6) 0!important}
html.cm-look .cm-ui .sectionDivider{height:1px;background:var(--cm-line-soft);margin:calc(var(--u) * .9) 0}

/* the old in-page headers are replaced by the website page around the maker */
html.cm-look :is(.top-bar,.maker-footer,.projectHeader,.maker-gap-filler){display:none!important}

/* ---------- Goal Maker ---------- */
html.cm-look .cm-goal .row{display:block!important;margin:0!important}
html.cm-look .cm-goal :is(.panel-body,.shape-grid,.shape-column,.colour-grid,.text-control-strip,.selected-control-grid,.custom-goal-grid){display:block!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;grid-template-columns:none!important}
html.cm-look .cm-goal :is(.row>div,.shape-column>.cm-row,.colour-grid>div,.custom-goal-grid>div,.snap-size,.export-control,.export-port),
html.cm-look .cm-goal .selected-control-grid>div:not(.selected-divider-label):not(.selected-layer-buttons):not(.selected-duplicate):not(.selected-delete){
  display:grid!important;grid-template-columns:var(--cm-label-w) minmax(0,1fr)!important;align-items:center;gap:calc(var(--u) * .6)!important;margin:0 0 var(--cm-gap)!important;padding:0!important;background:none!important;border:0!important}
html.cm-look .cm-goal .row>div>.label{margin:0!important}
html.cm-look .cm-goal .mt{margin-top:calc(var(--u) * .6)!important}
html.cm-look .cm-goal .font-compact{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:calc(var(--u) * .6);align-items:center;margin:0 0 var(--cm-gap)!important}
html.cm-look .cm-goal .font-compact .font-grow{display:grid;grid-template-columns:var(--cm-label-w) minmax(0,1fr);align-items:center;gap:calc(var(--u) * .6)}
html.cm-look .cm-goal :is(.live-data-compact,.texture-card,.text-control-group,.snap-tools,.asset-section){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:calc(var(--u) * .6) 0 0!important}
html.cm-look .cm-goal .live-data-compact{border-top:1px solid var(--cm-line-soft)!important;padding-top:calc(var(--u) * .8)!important}
html.cm-look .cm-goal .live-data-compact-head{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u) * .6);flex-wrap:wrap;margin-bottom:calc(var(--u) * .5)}
html.cm-look .cm-goal .temporary-login-row{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--u) * 8.5);gap:calc(var(--u) * .6);align-items:center}
html.cm-look .cm-goal .platform-compact-row{display:flex;gap:calc(var(--u) * 1.2);margin:calc(var(--u) * .6) 0}
html.cm-look .cm-goal .platform-compact-row label{display:flex;align-items:center}
html.cm-look .cm-goal .goal-setup-actions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * .45);margin-top:calc(var(--u) * .8)}
html.cm-look .cm-goal .goal-setup-actions button{width:100%}
html.cm-look .cm-goal .text-control-group{display:grid!important;grid-template-columns:minmax(0,1fr) calc(var(--u) * 5);gap:calc(var(--u) * .6);align-items:center;margin:0 0 var(--cm-gap)!important}
html.cm-look .cm-goal .text-control-group.has-text-field{grid-template-columns:var(--cm-label-w) minmax(0,1fr)}
html.cm-look .cm-goal .visibility-subrow{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--u) * 5);gap:calc(var(--u) * .6)}
html.cm-look .cm-goal .selected-swatch{grid-template-columns:var(--cm-label-w) repeat(3,minmax(0,1fr))!important}
html.cm-look .cm-goal :is(.selected-layer-buttons,.asset-button-grid){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * .45);margin:calc(var(--u) * .45) 0!important}
html.cm-look .cm-goal .asset-button-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
html.cm-look .cm-goal :is(.selected-layer-buttons,.asset-button-grid) button{width:100%}
html.cm-look .cm-goal :is(.selected-duplicate,.selected-delete){display:inline-block!important;margin:calc(var(--u) * .45) calc(var(--u) * .45) 0 0!important}
html.cm-look .cm-goal .snap-tools{border-top:1px solid var(--cm-line-soft)!important;padding-top:calc(var(--u) * .45)!important;display:grid!important;grid-template-columns:1fr 1fr;gap:calc(var(--u) * .3) calc(var(--u) * .8)}
html.cm-look .cm-goal .snap-tools :is(.selected-divider-label,.snap-size){grid-column:1/-1}
html.cm-look .cm-goal .texture-main{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"copy copy" "upload status"!important;gap:calc(var(--u) * .6);align-items:center}
html.cm-look .cm-goal .texture-copy{grid-area:copy!important}
html.cm-look .cm-goal .texture-upload{grid-area:upload!important;white-space:nowrap}
html.cm-look .cm-goal .texture-status{grid-area:status!important;display:flex;justify-content:space-between;align-items:center}
html.cm-look .cm-goal .texture-copy .label{display:block!important;margin:0 0 calc(var(--u) * .25)!important}
html.cm-look .cm-goal :is(.canvas-area,.panel-3-layout,.creation-top-row){display:block!important;padding:0!important;margin:0!important;background:none!important;border:0!important}
html.cm-look .cm-goal .preview-head{display:none!important}
html.cm-look .cm-goal .canvas-host{border:1px solid rgba(139,44,255,.7)!important;border-radius:2px!important;background:#000;box-shadow:none!important}
html.cm-look .cm-goal :is(.export-panel-body,.export-main-grid,.export-left-stack,.export-top-row){display:block!important;padding:0!important;margin:0!important;background:none!important;border:0!important}
html.cm-look .cm-goal .export-port .tiny-note{grid-column:1/-1}
html.cm-look .cm-goal .export-download-side{display:flex!important;align-items:center;justify-content:space-between;gap:calc(var(--u) * .8);flex-wrap:wrap;margin:calc(var(--u) * .6) 0 0!important;padding:0!important;background:none!important;border:0!important}
html.cm-look .cm-goal .goal-maker-download-stat{display:flex;gap:calc(var(--u) * .6);align-items:center;color:var(--cm-muted);font-size:calc(var(--u) * .92);background:none!important;border:0!important;padding:0!important}
html.cm-look .cm-goal .goal-pack-panel{margin-top:calc(var(--u) * .9)!important}
html.cm-look .cm-goal .goal-pack-head{display:flex;justify-content:space-between;gap:calc(var(--u) * .6);align-items:flex-start;margin-bottom:calc(var(--u) * .6)}
html.cm-look .cm-goal .goal-pack-head small{display:block;color:var(--cm-muted)}
html.cm-look .cm-goal :is(.goal-pack-actions,.goal-pack-downloads){display:flex!important;flex-wrap:wrap;gap:calc(var(--u) * .45);margin:calc(var(--u) * .45) 0}
html.cm-look .cm-goal .goal-pack-list{border:1px dashed var(--cm-line);border-radius:var(--cm-r);padding:calc(var(--u) * .6);margin:calc(var(--u) * .45) 0;color:var(--cm-muted)}
html.cm-look .cm-goal .howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * .6)}
html.cm-look .cm-goal .howto-step{display:flex;gap:calc(var(--u) * .6);background:var(--cm-panel-2);border:1px solid var(--cm-line-soft);border-radius:var(--cm-r);padding:calc(var(--u) * .6)}
html.cm-look .cm-goal .howto-step>span{flex:0 0 calc(var(--u) * 1.6);height:calc(var(--u) * 1.6);display:grid;place-items:center;border-radius:50%;background:var(--cm-accent);color:#fff;font-weight:700;font-size:calc(var(--u) * .8)}
html.cm-look .cm-goal .howto-step small{display:block;color:var(--cm-muted)}
html.cm-look .cm-goal .howto-important{margin-top:calc(var(--u) * .6);color:var(--cm-muted)}
/* long export explanations live in the help box, like CATMINT */
html.cm-look .cm-goal :is(.export-help,.goal-pack-note,.export-port .tiny-note){display:none!important}
html.cm-look .cm-goal .cm-right .live-data-compact{border-top:0!important;padding-top:0!important;margin:0 0 calc(var(--u) * .6)!important}
html.cm-look .cm-goal .cm-right .direct-platform-compact{margin-top:calc(var(--u) * .3)}

/* ---------- Frame & Media Studio ---------- */
html.cm-look .cm-frame .modeChooser{display:grid!important;grid-template-columns:1fr 1fr;gap:calc(var(--u) * .6);margin:0!important}
html.cm-look .cm-frame .modeChoice{display:block!important;text-align:left!important;padding:calc(var(--u) * .55) calc(var(--u) * .8)!important;min-height:0!important;border-radius:var(--cm-r)!important}
html.cm-look .cm-frame .modeChoice.active{border-color:var(--cm-accent)!important;background:#1d0f2c!important}
html.cm-look .cm-frame .modeChoiceTitle{display:block;font:600 var(--u)/1.2 var(--cm-font)!important;color:var(--cm-text)!important;margin-bottom:calc(var(--u) * .2);text-transform:none!important}
html.cm-look .cm-frame .modeChoiceText{display:block;font:400 calc(var(--u) * .88)/1.35 var(--cm-font)!important;color:var(--cm-muted)!important}
html.cm-look .cm-frame .previewShell{background:none!important;border:0!important;padding:0!important;margin:0!important;min-height:0!important}
html.cm-look .cm-frame .previewStage{border:1px solid rgba(139,44,255,.7)!important;border-radius:2px!important;box-shadow:none!important}
html.cm-look .cm-frame .previewTopbar{display:flex!important;gap:calc(var(--u) * .45);margin:0!important;align-items:center}
html.cm-look .cm-frame .previewTopbar select{width:auto!important}
html.cm-look .cm-frame .sizeInfo{color:var(--cm-muted);font-size:calc(var(--u) * .92);margin:0 0 calc(var(--u) * .6)}
html.cm-look .cm-frame .actions{display:flex!important;flex-wrap:wrap;gap:calc(var(--u) * .45);margin:0 0 calc(var(--u) * .45)!important}
html.cm-look .cm-frame .hiddenAction{display:none!important}
html.cm-look .cm-frame .mediaDropZone{background:var(--cm-field);border:1px dashed var(--cm-line);border-radius:var(--cm-r);padding:calc(var(--u) * .6)}
html.cm-look .cm-frame .panelTypeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u) * .3) calc(var(--u) * .8)}
html.cm-look .cm-frame .panelTypeGrid label{display:flex;align-items:center}
html.cm-look .cm-frame details.compactSection>summary{cursor:pointer;color:var(--cm-muted);margin:calc(var(--u) * .3) 0 calc(var(--u) * .6)}
html.cm-look .cm-frame .cm-left>details.cm-flat{margin-top:calc(var(--u) * .6)!important}
html.cm-look .cm-frame #overlayType{display:block!important;position:static!important;opacity:1!important;pointer-events:auto!important;width:100%!important}

/* ---------- Scene Maker ---------- */
html.cm-look .cm-scene :is(.inside>label:not(.check),.stepInside>label:not(.check),.grid2>label,.cm-group>label:not(.check)){display:grid!important;grid-template-columns:var(--cm-label-w) minmax(0,1fr)!important;align-items:center;gap:calc(var(--u) * .6);margin:0 0 var(--cm-gap)!important}
html.cm-look .cm-scene .grid2{display:block!important}
html.cm-look .cm-scene .formatPick{display:flex!important;flex-wrap:wrap;gap:calc(var(--u) * .3) calc(var(--u) * 1.2)!important;margin:0 0 calc(var(--u) * .6)!important}
html.cm-look .cm-scene .formatPick label{display:flex!important;align-items:center;background:none!important;border:0!important;box-shadow:none!important;padding:calc(var(--u) * .15) 0!important;min-height:0!important}
html.cm-look .cm-scene .checkgrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * .45) calc(var(--u) * .8)!important;margin:0 0 var(--cm-gap)}
html.cm-look .cm-scene .checkgrid label{display:flex!important;align-items:center;background:none!important;border:0!important;padding:calc(var(--u) * .1) 0!important;min-height:0!important;line-height:1.25!important}
html.cm-look .cm-scene .stepInside>p:first-child{display:none}
html.cm-look .cm-scene .cm-group>#startBuild{margin-top:calc(var(--u) * .3)}
html.cm-look .cm-scene .cm-group>#outputChoices{margin-bottom:calc(var(--u) * .6)}
html.cm-look .cm-scene .masterAlign{border-top:1px solid var(--cm-line-soft);margin-top:calc(var(--u) * .8);padding-top:calc(var(--u) * .6)}
html.cm-look .cm-scene .masterAlign>strong{display:none!important}
html.cm-look .cm-scene .alignCompact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * .4)}
html.cm-look .cm-scene .alignCompact button{width:100%}
html.cm-look .cm-scene :is(#objectList,#textList,#decoList,#mediaList,#savedList)>*{background:var(--cm-panel-2)!important;border:1px solid var(--cm-line-soft)!important;border-radius:calc(var(--u) * .45)!important;padding:calc(var(--u) * .6)!important;margin:calc(var(--u) * .45) 0 0!important}
html.cm-look .cm-scene :is(.previewTop,.quickGuide h2){display:none!important}
html.cm-look .cm-scene .previewPanel{background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important}
html.cm-look .cm-scene #previewGrid{display:flex!important;flex-wrap:nowrap!important;gap:calc(var(--u) * .9)!important;align-items:flex-start!important;justify-content:center!important;background:none!important;border:0!important;padding:0!important}
html.cm-look .cm-scene #previewGrid>.previewCard{margin:0!important;padding:calc(var(--u) * .45)!important;border:1px solid var(--cm-line)!important;border-radius:2px!important;background:transparent!important;cursor:pointer;min-width:0}
html.cm-look .cm-scene #previewGrid>.previewCard[data-format=h]{flex:1 1 0!important;max-width:none!important;width:auto!important}
html.cm-look .cm-shell.cm-scene:has(input[name=packFormat][value=both]:checked) #previewGrid>.previewCard[hidden]{display:block!important}
html.cm-look .cm-shell.cm-scene:has(input[name=packFormat][value=both]:checked) #previewGrid>.previewCard[data-format=v]{flex:0 0 26%!important;max-width:26%!important;width:26%!important}
html.cm-look .cm-scene #previewGrid>.previewCard[data-format=v]{flex:0 1 calc(var(--u) * 24)!important;max-width:calc(var(--u) * 24)!important}
html.cm-look .cm-scene #previewGrid>.previewCard.active{border-color:var(--cm-accent)!important;box-shadow:0 0 0 1px rgba(139,44,255,.45)!important;opacity:1}
html.cm-look .cm-shell.cm-scene:has(input[name=packFormat][value=both]:checked) #previewGrid>.previewCard:not(.active){opacity:.72}
html.cm-look .cm-shell.cm-scene:has(input[name=packFormat][value=both]:checked) #previewGrid>.previewCard:not(.active):hover{opacity:1;border-color:var(--cm-line-strong)!important}
html.cm-look .cm-scene #previewGrid>.previewCard .stage{width:100%!important;height:auto!important}
html.cm-look .cm-scene .formatHead{display:flex;justify-content:space-between;color:var(--cm-muted);font-size:calc(var(--u) * .88)!important;margin:0 0 calc(var(--u) * .4)!important}
html.cm-look .cm-scene .formatHead strong{color:var(--cm-text)}
html.cm-look .cm-scene .previewHelp{margin:calc(var(--u) * .6) 0 0!important}
html.cm-look .cm-scene .guideLines p{margin:0 0 calc(var(--u) * .45)}
/* item cards, like CATMINT's "Selected" page: one label column, X / Y and W / H as pairs, full-width text, equal buttons */
html.cm-look .cm-scene .controlCard{padding:calc(var(--u) * .8) calc(var(--u) * .9)!important;margin:0 0 calc(var(--u) * .6)!important}
html.cm-look .cm-scene .controlCard>strong{display:block;margin:0 0 calc(var(--u) * .6);font-size:var(--u)}
html.cm-look .cm-scene .controlCard .row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:calc(var(--u) * .5) calc(var(--u) * .75)!important;margin:0!important}
html.cm-look .cm-scene .controlCard .row>label{grid-column:1/-1;display:grid!important;grid-template-columns:var(--cm-label-w) minmax(0,1fr)!important;align-items:center!important;gap:calc(var(--u) * .6)!important;margin:0!important;line-height:1.25}
html.cm-look .cm-scene .controlCard .row>label:nth-child(-n+4){grid-column:auto;grid-template-columns:calc(var(--u) * 1.5) minmax(0,1fr)!important;line-height:var(--cm-h)}
html.cm-look .cm-scene .controlCard .row>label.checkline{display:grid!important;grid-template-columns:calc(var(--u) * 1.2) auto!important;justify-content:start!important;align-items:center;gap:calc(var(--u) * .6)!important;padding-left:calc(var(--cm-label-w) + var(--u) * .6)!important}
html.cm-look .cm-scene .controlCard .row>label.checkline>input{order:-1;margin:0!important}
html.cm-look .cm-scene .controlCard .alignGroup{grid-column:1/-1;display:grid;grid-template-columns:var(--cm-label-w) minmax(0,1fr);align-items:center;gap:calc(var(--u) * .6);margin:0!important}
html.cm-look .cm-scene .controlCard .alignButtons{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * .45)!important;margin:0!important}
html.cm-look .cm-scene .controlCard :is(.alignButtons,.miniButtons)>button{width:100%;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.cm-look .cm-scene .controlCard .miniButtons{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:calc(var(--u) * .45)!important;margin:calc(var(--u) * .8) 0 0!important}

/* ---------- Undo / Redo, left of the tools above the preview ---------- */
html.cm-look .cm-undo-tools{display:inline-flex;gap:calc(var(--u) * .45);margin-right:calc(var(--u) * .45);vertical-align:middle}
html.cm-look .cm-undo-tools>button{min-width:calc(var(--u) * 4.8)}
html.cm-look .cm-undo-tools>button:disabled{opacity:.45;cursor:default}

/* the makers hide things with .hidden / [hidden]; that must beat every layout rule above */
html.cm-look .cm-shell :is(.hidden,[hidden],#cm-never){display:none!important}

/* the website measures .wrap / the document for the iframe height: nothing may clip the layout */
html.cm-look,html.cm-look body{height:auto!important;max-height:none!important;overflow-y:visible!important}
html.cm-look .wrap{height:auto!important;max-height:none!important;overflow:visible!important}

/* =====================================================================================================
   CATMINT window (html.cm-app, wide screens): a fixed-height tool like the CATMINT window. The settings column
   scrolls by itself; preview and "Save & use" always stay in view. No empty blocks, nothing cut off.
   ===================================================================================================== */
html.cm-app,html.cm-app body{height:100%!important;max-height:100%!important;overflow:hidden!important}
html.cm-app .wrap{height:100%!important;max-height:100%!important;overflow:hidden!important;width:100%!important}
html.cm-app :is(main.builder,main.page){height:100%!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
html.cm-app .cm-shell{height:100vh!important;max-height:100vh!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden!important;align-items:stretch!important}
html.cm-app .cm-left{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 calc(var(--u) * .6) calc(var(--u) * .9) 0;scrollbar-width:thin;scrollbar-color:#5a3d86 transparent}
html.cm-app .cm-left::-webkit-scrollbar{width:8px}
html.cm-app .cm-left::-webkit-scrollbar-thumb{background:#4a3270;border-radius:8px}
html.cm-app .cm-right{height:100%;min-height:0;display:flex!important;flex-direction:column}
html.cm-app .cm-right>.cm-hint{flex:0 0 auto}
html.cm-app .cm-right>.cm-canvas{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
html.cm-app .cm-right>.cm-canvas>*{width:100%;max-height:100%;min-height:0}
html.cm-app .cm-right>.cm-group{flex:0 0 auto!important;max-height:none!important;margin-top:calc(var(--u) * .5)!important}
html.cm-app .cm-right>.cm-help{flex:0 0 auto}
html.cm-app .cm-right>.cm-help[open]{max-height:40%;overflow:auto}
html.cm-app .cm-frame .cm-canvas>.previewShell{height:100%!important;width:100%!important;min-height:0!important;max-height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
html.cm-app .cm-frame .cm-canvas>#previewOptionsRow{display:none!important}
/* 2026-10-20 user: no empty band above the Frame Studio preview: it starts right under its top bar, level with the settings */
html.cm-app .cm-frame .cm-canvas>.previewShell{align-items:flex-start!important;padding-top:calc(var(--u) * .4)!important}
html.cm-app .cm-scene .cm-canvas #previewGrid{max-height:100%;align-items:center!important}

/* ---------- phones and small tablets: one column that fits the screen ---------- */
@media (max-width:980px){
  html.cm-look .cm-shell,html.cm-look .cm-shell.cm-scene.workspace,html.cm-look .cm-shell.cm-scene.workspace.bothMode{grid-template-columns:minmax(0,1fr)!important;padding:10px!important;width:100%!important;max-width:100%!important}
  html.cm-look .cm-shell>*{min-width:0!important;max-width:100%!important}
  html.cm-look .cm-shell :is(.cm-group,.cm-canvas,.cm-hint){max-width:100%!important;min-width:0!important}
  html.cm-look .cm-right{order:-1}
}
@media (max-width:700px){
  html.cm-look .cm-scene #previewGrid{flex-wrap:wrap!important}
  html.cm-look .cm-shell.cm-scene:has(input[name=packFormat][value=both]:checked) #previewGrid>.previewCard[data-format=v]{flex:0 0 60%!important;max-width:60%!important;width:60%!important}
}
@media (max-width:520px){
  html.cm-look{--cm-label-w:calc(var(--u) * 7.4)}
  html.cm-look .cm-goal :is(.goal-setup-actions,.howto-grid){grid-template-columns:1fr}
  html.cm-look .cm-scene .checkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- details after the first look at 2540 px ---------- */
/* Goal Maker "Progress shape / direction": the label sits in the label column like every other row */
html.cm-look .cm-goal .shape-column:has(> #shapeType){display:grid!important;grid-template-columns:var(--cm-label-w) minmax(0,1fr)!important;align-items:center;gap:var(--cm-gap) calc(var(--u) * .6)!important}
html.cm-look .cm-goal .shape-column:has(> #shapeType) > :not(label):not(select){grid-column:1/-1}
html.cm-look .cm-goal .shape-column:has(> #shapeType) > :is(.mt,label,select){margin:0!important}
/* dropdowns sized by their text keep room for the arrow */
html.cm-look .cm-ui :is(.previewTopbar,.cm-hint-tools) select{width:auto!important;min-width:calc(var(--u) * 10)!important}
/* colour fields never take the makers' own label spacing */
html.cm-look .cm-ui .cm-colour{display:flex!important;grid-template-columns:none!important;margin:0!important;padding:0 calc(var(--u) * .5)!important;gap:calc(var(--u) * .55)!important;height:var(--cm-h)!important;min-height:0!important;line-height:1!important}
/* the help box reads like the other two makers */
html.cm-look .cm-help>summary{text-transform:none!important;letter-spacing:0!important}

/* box titles in the site's own font, in capitals — like every header on the website
   (languages the font cannot write use the same display fonts as the website: Oswald, M PLUS 1p) */
html.cm-look .cm-shell :is(.cm-group-title,details.cm-flat>summary){font-family:var(--cm-brand)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.04em!important;font-size:calc(var(--u) * 1.05)!important;line-height:1.2!important;top:calc(var(--u) * -.78)!important}
html.cm-look .cm-help>summary{font-family:var(--cm-brand)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.04em!important;font-size:calc(var(--u) * 1.05)!important}
html.cm-look:is([data-cm-lang="es"],[data-cm-lang="pt-br"],[data-cm-lang="fr"],[data-cm-lang="pl"]) :is(.cm-shell .cm-group-title,.cm-shell details.cm-flat>summary,.cm-help>summary){font-family:"Oswald","Rajdhani","Arial Narrow","Rajdhani Fallback","Rajdhani Fallback Android",Arial,sans-serif!important;font-weight:500!important;letter-spacing:.02em!important}
html.cm-look[data-cm-lang="ja"] :is(.cm-shell .cm-group-title,.cm-shell details.cm-flat>summary,.cm-help>summary){font-family:"M PLUS 1p","Rajdhani","Arial Narrow","Rajdhani Fallback","Rajdhani Fallback Android",Arial,sans-serif!important;font-weight:600!important;letter-spacing:.01em!important}

/* box titles at the same size as the website's box headers ("RECENT CLIPS"), sitting on the box border */
html.cm-look .cm-shell :is(.cm-group-title,details.cm-flat>summary){font-size:calc(var(--u) * 1.45)!important;line-height:1!important;top:calc(var(--u) * -.72)!important;padding:0 calc(var(--u) * .45)!important}
html.cm-look .cm-shell .cm-group,html.cm-look .cm-shell details.cm-flat{padding-top:calc(var(--u) * 1.7)!important;margin-top:calc(var(--u) * 1.05)!important}
html.cm-look .cm-help>summary{font-size:calc(var(--u) * 1.45)!important;line-height:1!important}
html.cm-look .cm-pane>.cm-group:first-child{margin-top:calc(var(--u) * 1.5)!important}

/* every maker fills its page the same way (the Scene Maker's own page box had a maximum width) */
html.cm-look :is(main.page,main.builder,main.dashboard-grid,.wrap){max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important}
html.cm-look .cm-shell{max-width:none!important;width:100%!important}
/* 2026-10-23 Frame & Media Studio flows with the page (catmint-look.js cm-flow): two columns that end together, preview sized by
   the frame's shape, "Save & use" right under it - no fixed window, no empty blocks */
html.cm-flow .cm-shell{height:auto!important;max-height:none!important;overflow:visible!important;align-items:start!important;grid-template-rows:auto!important}
html.cm-flow .cm-left{height:auto!important;overflow:visible!important}
html.cm-flow .cm-right{height:auto!important;display:flex!important;flex-direction:column;gap:calc(var(--u) * .5)}
html.cm-flow .cm-right>.cm-canvas{flex:0 0 auto!important;display:flex!important;align-items:center;justify-content:center;overflow:hidden}
html.cm-flow .cm-frame .cm-canvas>.previewShell{height:100%!important;width:100%!important;min-height:0!important;max-height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
html.cm-flow .cm-frame .cm-canvas>#previewOptionsRow{display:none!important}
html.cm-flow .cm-right>.cm-group{flex:0 0 auto!important;margin-top:calc(var(--u) * .5)!important}