/* Shared appearance chooser; each theme retains its approved independent visual system. */
.theme-intro{color:var(--muted,#7f7567);font-size:15px;line-height:1.5;margin:0 0 20px}
.theme-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.theme-choice{display:flex;flex-direction:column;min-width:0;padding:9px 9px 14px;border:2px solid var(--line,#ddcfb9);border-radius:20px;background:var(--paper,#fff9ef);color:inherit;text-align:left;font:inherit;cursor:pointer;touch-action:manipulation}
.theme-choice[aria-checked=true]{border-color:var(--terra,#b65f3a);box-shadow:0 0 0 2px color-mix(in srgb,var(--terra,#b65f3a) 18%,transparent)}
.theme-choice:focus-visible{outline:3px solid var(--terra,#b65f3a);outline-offset:4px}
.theme-choice:disabled{opacity:.7;cursor:wait}
.theme-sample{display:flex;flex-direction:column;align-items:center;width:100%;padding:14px 10px 9px;aspect-ratio:9/14;max-height:295px;overflow:hidden;border-radius:12px;background:var(--choice-bg);color:var(--choice-ink);box-shadow:inset 0 0 0 1px #8883;pointer-events:none}
.theme-mini-title{font:800 clamp(9px,2.7vw,14px)/1.2 Arial,sans-serif;white-space:nowrap}
[data-theme-choice=kraft] .theme-mini-title{font-family:'Orelega One',Georgia,serif;font-weight:400}
.theme-sample img{width:100%;height:0;flex:1;min-height:0;object-fit:contain;margin:6px 0 9px}
.theme-mini-button{width:100%;height:22px;border-radius:8px;background:var(--choice-accent)}
[data-theme-choice=kraft] .theme-mini-button{border-radius:16px;box-shadow:inset 0 1px 1px #fff8,inset 0 -2px 2px #0002}
.theme-mini-nav{display:flex;justify-content:space-around;width:100%;padding-top:12px}
.theme-mini-nav i{display:block;width:8px;height:8px;border:1.5px solid var(--choice-ink);border-radius:2px;opacity:.6}
.theme-mini-nav i:first-child{border-color:var(--choice-accent);opacity:1}
.theme-choice-label{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;margin-top:12px;padding:0 3px}
.theme-choice-label strong{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.theme-chosen{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--terra,#b65f3a);color:#fff;visibility:hidden}
.theme-choice[aria-checked=true] .theme-chosen{visibility:visible}
.theme-description{display:block;font-size:12px;line-height:1.5;color:var(--muted,#7f7567);margin:7px 3px 0}
.theme-note{margin-top:22px!important;font-size:14px!important}
html[data-theme=graphite] .theme-choice{background:#282f37;border-color:#414b57;box-shadow:none}
html[data-theme=graphite] .theme-choice[aria-checked=true]{border-color:#f4ba61;box-shadow:0 0 0 2px #f4ba6120}
html[data-theme=graphite] .theme-chosen{background:#f4ba61;color:#1d2228}
html[data-theme=kraft] .setting-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
html[data-theme=kraft] .setting-copy small{font-size:12px;color:var(--muted,#7f7567);font-weight:400;line-height:1.35}
html[data-theme=kraft] .setting-copy small.setting-active{color:var(--terra,#b65f3a)}
html[data-theme=kraft] .universal-settings-footnote{display:flex;align-items:flex-start;gap:9px;margin:23px 8px;color:var(--muted,#7f7567);font-size:13px;line-height:1.5;text-align:center}
html[data-theme=kraft] .universal-settings-footnote .ico{flex:none;width:20px;height:20px}
/* Prevent intrinsic attachment widths from widening the form in either theme. */
#box-form{grid-template-columns:minmax(0,1fr)}
#box-form,#form-media,.media-actions,.audio-list,.audio-row,.photo-strip{min-width:0;max-width:100%}
.media-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.media-actions.video-actions{grid-template-columns:minmax(0,1fr)}
.audio-row audio{flex:1;min-width:0;max-width:100%}.photo-strip{width:100%;overscroll-behavior-x:contain}
.error-line:empty,.success-line:empty{display:none!important}
@media(max-width:340px){.theme-options{gap:9px}.theme-choice{padding:7px 7px 12px}.theme-choice-label strong{font-size:15px}.theme-description{font-size:11px}.theme-mini-title{font-size:10px}}

/* Shared one-box notices. Colours follow the active approved theme. */
.demo-access-notice{padding:14px 16px;margin:16px 0 20px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink)}
.demo-access-notice p{margin:0 0 12px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.demo-access-notice .glass+.glass{margin-top:10px}
html[data-theme=graphite] .demo-access-notice{background:var(--surface);color:var(--ink)}
html[data-theme=graphite] .demo-access-notice p{color:var(--muted)}
#restore-file .glass{margin:12px 0}
.modal-card{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}

/* Three real themes in this separate application. Keep the selector compact
   without shrinking the names or removing descriptions and selected state. */
.theme-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.theme-choice{position:relative;padding:7px 7px 12px;min-width:0}
.theme-sample{padding:11px 6px 8px;max-height:250px}
.theme-mini-title{max-width:100%;white-space:normal;text-align:center;font-size:clamp(8px,2.05vw,12px);line-height:1.15}
.theme-choice-label{justify-content:center;min-height:21px;padding:0;margin-top:11px}
.theme-choice-label strong{font-size:clamp(13px,3.4vw,17px);line-height:1.2;text-align:center}
.theme-chosen{position:absolute;top:11px;right:11px;width:20px;height:20px;box-shadow:0 0 0 2px #fff}
.theme-chosen .ico{width:15px;height:15px}
.theme-description{font-size:11px;line-height:1.4;margin:7px 0 0;text-align:center}
[data-theme-choice=stickers] .theme-mini-button{border:3px solid #fff;outline:1px solid #302047;border-radius:7px 10px 6px 9px;box-shadow:1px 2px 0 #30204725}
html[data-theme=stickers] .theme-choice{background:#fffefa;color:#171331;border-color:#e7dcf3}
html[data-theme=stickers] .theme-choice[aria-checked=true]{border-color:#6e36f6}
html[data-theme=stickers] .theme-chosen{background:#6e36f6;color:#fff}

/* Six regular settings actions fit on ordinary portrait phones. Additional
   recovery actions, enlarged text and the 320px fallback keep natural flow. */
@media(min-width:360px) and (min-height:700px) and (max-height:900px){
  .app[data-route=settings] .screen-header{margin-bottom:15px;min-height:44px}
  .app[data-route=settings] .settings-list{gap:10px}
  .app[data-route=settings] .settings-list>.glass{min-height:62px;padding-top:8px;padding-bottom:8px}
  .app[data-route=settings] .universal-settings-footnote{margin-top:17px;margin-bottom:0;padding-top:9px;padding-bottom:9px}
}
@media(max-width:350px){.theme-options{gap:8px}.theme-choice{padding:6px 5px 10px}.theme-sample{padding:10px 4px 7px}.theme-mini-title{font-size:8px}.theme-choice-label strong{font-size:12px}.theme-chosen{width:18px;height:18px;right:9px;top:9px}.theme-description{font-size:10px;line-height:1.4}}
/* Intrinsic input height can expand with system text zoom. Their established
   minimum heights retain the normal design while avoiding clipped glyphs. */
.screen[data-screen=form] .input,.screen[data-screen=labels] .input{height:auto}

/* Natural content frames remove only near-transparent PNG padding. The whole
   original image is positioned from its measured alpha bounds plus 16px safe
   margin; neither the raster nor the actual boxes are cropped or rescaled to
   force a route into one viewport. Large explanations may scroll naturally. */
.illustration-frame{position:relative;display:block;width:100%;max-width:none;aspect-ratio:var(--art-crop-width) / var(--art-crop-height);overflow:hidden;margin:8px auto 12px}
.screen .illustration-frame>img{position:absolute;display:block;left:calc(-100% * var(--art-crop-left) / var(--art-crop-width));top:calc(-100% * var(--art-crop-top) / var(--art-crop-height));width:calc(100% * var(--art-canvas-width) / var(--art-crop-width));height:calc(100% * var(--art-canvas-height) / var(--art-crop-height));max-width:none;max-height:none;object-fit:fill;margin:0}
.paywall-art-frame{--art-canvas-width:1536;--art-canvas-height:1024;--art-crop-left:17;--art-crop-top:84;--art-crop-width:1501;--art-crop-height:902}
html[data-theme=graphite] .paywall-art-frame{--art-crop-left:35;--art-crop-top:122;--art-crop-width:1467;--art-crop-height:770}
html[data-theme=stickers] .paywall-art-frame{--art-canvas-width:1254;--art-canvas-height:1254;--art-crop-left:51;--art-crop-top:237;--art-crop-width:1163;--art-crop-height:834}
.backup-art-frame{--art-canvas-width:1536;--art-canvas-height:1024;--art-crop-left:57;--art-crop-top:110;--art-crop-width:1427;--art-crop-height:854;margin:0 auto 10px}
.backup-art-frame[data-art=restore]{--art-crop-left:50;--art-crop-top:111;--art-crop-width:1458;--art-crop-height:840}
.paywall .illustration-frame+h1{margin-top:0}

/* Compact spacing on ordinary phones retains readable text and all actions.
   Illustration size follows useful content width, never viewport height. */
@media(min-width:360px) and (max-width:699px) and (min-height:700px) and (max-height:900px){
 .screen[data-screen=backup] .screen-header{margin-bottom:12px}
 .screen[data-screen=backup] .backup-visual{margin:10px 0 12px}
 .screen[data-screen=backup] .data-types{padding:14px;gap:10px;margin:12px 0 16px}
 .screen[data-screen=backup] .hint{font-size:14px;line-height:1.45;margin:10px 0}
 html[data-theme=stickers] .screen[data-screen=scan] .camera{height:clamp(250px,calc(100dvh - 360px),450px);min-height:250px}
 html[data-theme=stickers] .screen[data-screen=scan] .manual-code summary{min-height:44px}
 html[data-theme=graphite] .screen[data-screen=paywall] .screen-header{margin-bottom:16px}
 html[data-theme=graphite] .screen[data-screen=paywall] .benefit-grid{margin:14px 0 16px}
 html[data-theme=graphite] .screen[data-screen=paywall] .benefit{padding:12px}
 html[data-theme=graphite] .screen[data-screen=paywall] .benefit strong{font-size:14px}
 html:is([data-theme=kraft],[data-theme=stickers]) .screen[data-screen=paywall] .screen-header{margin-bottom:14px}
 html:is([data-theme=kraft],[data-theme=stickers]) .screen[data-screen=paywall] .paywall:not(.full-edition) p{margin:10px 0}
 html:is([data-theme=kraft],[data-theme=stickers]) .screen[data-screen=paywall] .paywall:not(.full-edition) .forever{margin:14px 0 16px}
}

/* One portrait layout contract for all themes. The theme changes colour,
   texture and iconography; it must not change the width of the application.
   These rules intentionally follow every lazily loaded theme stylesheet. */
html[data-theme] {
  --page-gutter:clamp(16px,3.5vw,36px);
  --page-top:clamp(16px,2vw,28px);
  --page-gap:clamp(12px,1.8vw,20px);
  --nav:84px;
}
html[data-theme] body { min-width:280px;overflow-x:hidden; }
html[data-theme] .app {
  width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;
  min-height:100dvh;height:auto;overflow:visible;
  padding:calc(var(--page-top) + env(safe-area-inset-top)) var(--page-gutter) calc(24px + env(safe-area-inset-bottom));
}
html[data-theme] .app.has-nav {
  padding-bottom:calc(var(--nav) + 22px + env(safe-area-inset-bottom));
}
html[data-theme] .app .screen { width:100%;min-width:0;max-width:none; }
html[data-theme] .nav {
  width:100%;max-width:none;left:0;bottom:0;transform:none;
  min-height:var(--nav);border-left:0;border-right:0;border-bottom:0;
  border-bottom-left-radius:0;border-bottom-right-radius:0;
  padding-left:var(--page-gutter);padding-right:var(--page-gutter);
}
html[data-theme] .nav button { min-width:44px;min-height:56px; }
html[data-theme] .plain { min-width:44px;min-height:44px; }
html[data-theme] .text-link { min-height:44px; }
html[data-theme] .screen-header { min-height:44px;margin-bottom:clamp(16px,2vw,24px); }
html[data-theme] .screen-header h1 { white-space:normal;overflow-wrap:anywhere; }
html[data-theme] .screen input:not([type=checkbox]):not([type=radio]),
html[data-theme] .screen textarea,
html[data-theme] .screen select { font-size:16px; }
html[data-theme] .screen button { touch-action:manipulation; }
html[data-theme] .screen .segmented button { min-height:44px; }
html[data-theme] .count-controls button,
html[data-theme] .count-controls input { min-height:44px; }

/* A home illustration gets a real, width-led square instead of the entire
   remaining screen height. That prevents empty letterboxing above and below
   the box on tall tablets. Buttons follow the illustration at a normal gap;
   short phones may scroll, rather than losing the explanatory picture. */
html[data-theme] .app.is-home { height:auto;min-height:100dvh; }
html[data-theme] .screen[data-screen=home] {
  display:flex;flex-direction:column;align-items:stretch;
  height:auto;min-height:0;gap:var(--page-gap);
}
html[data-theme] .home-brand {
  display:flex;flex-direction:column;align-items:center;gap:0;margin:0;text-align:center;
}
html[data-theme] .home-brand h1 {
  max-width:100%;font-size:clamp(28px,7.3vw,40px);line-height:1.13;white-space:normal;
}
html[data-theme] .home-brand p {
  max-width:100%;font-size:clamp(13px,2vw,17px);line-height:1.4;margin-top:9px;
}
html[data-theme] .home-box-cycle {
  position:relative;flex:none;width:min(100%,760px);max-width:none;
  height:auto;min-height:0;aspect-ratio:1;margin:0 auto;overflow:visible;
}
html[data-theme] .home-box-cycle img {
  position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:0;object-fit:contain;
}
html[data-theme] .screen[data-screen=home] .action-stack {
  flex:none;gap:clamp(12px,1.6vw,18px);margin:0;
}
html[data-theme] .screen[data-screen=home] .action-stack>.glass { min-height:58px; }
html[data-theme=graphite] .home-tiles .glass { min-height:106px;gap:10px; }

/* Creation flows naturally on a large display. Fields and attachments do not
   push an invisible flexible stage out to the full viewport height. */
html[data-theme] .app.is-form {
  --form-frame-height:100dvh;
  padding-top:calc(var(--page-top) + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
html[data-theme] .screen[data-screen=form] {
  min-height:0;height:auto;gap:var(--page-gap);
}
html[data-theme] .screen[data-screen=form] .screen-header { margin:0; }
html[data-theme] .form-art-stage {
  flex:none;position:relative;width:min(100%,480px);height:auto;
  min-height:0;aspect-ratio:1.8;margin:0 auto;
}
html[data-theme] .form-art-stage .new-box-art {
  position:absolute;inset:0;width:100%;height:100%;padding:0;max-width:none;object-fit:contain;
}
html[data-theme] #box-form { gap:12px; }
html[data-theme] .screen[data-screen=form] .input { height:auto;min-height:46px; }
html[data-theme] .screen[data-screen=form] textarea { height:auto;min-height:84px; }
html[data-theme] .screen[data-screen=form] .media-actions .glass { min-height:48px; }
html[data-theme] .screen[data-screen=form] .hint { font-size:13px;line-height:1.45; }
html[data-theme] .audio-file-link { min-height:44px; }

/* Long printing pages retain normal document flow. A preview's height is
   intentional content, never an empty viewport-filling spacer. */
html[data-theme] .app.is-labels {
  --labels-frame-height:100dvh;
  padding-top:calc(var(--page-top) + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
html[data-theme] .screen[data-screen=labels] { min-height:0;height:auto;gap:12px; }
html[data-theme] .screen[data-screen=labels] .label-preview {
  flex:none;height:clamp(190px,32vw,330px);min-height:190px;
}
html[data-theme] .screen[data-screen=labels] .empty-state {
  flex:none;min-height:0;gap:12px;justify-content:flex-start;
}
html[data-theme] .screen[data-screen=labels] .empty-state .closed-box-art {
  flex:none;width:min(100%,440px);max-width:none;height:auto;min-height:0;max-height:none;
  aspect-ratio:1.4;object-fit:contain;
}
html[data-theme] .screen[data-screen=labels] .empty-state p { max-width:38em; }
html[data-theme] .screen[data-screen=labels] .input { height:auto;min-height:44px; }
html[data-theme] .screen[data-screen=labels] .hint { font-size:13px;line-height:1.45; }
html[data-theme] .settings-list { gap:clamp(12px,1.5vw,18px); }
html[data-theme] .settings-list>.glass { overflow-wrap:anywhere; }
html[data-theme] .theme-sample { max-height:330px; }
html[data-theme] .theme-mini-title { font-size:clamp(8px,2vw,16px); }
html[data-theme] .theme-description { font-size:clamp(11px,1.7vw,14px); }
html[data-theme] .paywall p { max-width:48em;margin-left:auto;margin-right:auto; }

@media(min-width:700px) {
  html[data-theme] { --nav:94px; }
  html[data-theme] .screen-header h1,
  html[data-theme] .screen[data-screen=form] .screen-header h1,
  html[data-theme] .screen[data-screen=labels] .screen-header h1 { font-size:clamp(34px,4.2vw,43px); }
  html[data-theme] .home-brand h1 { font-size:clamp(38px,4.7vw,48px); }
  html[data-theme] .home-brand p { font-size:18px; }
  html[data-theme] .home-box-cycle { width:min(100%,760px); }
  html[data-theme] .screen[data-screen=home] .action-stack>.glass { min-height:68px;font-size:19px; }
  html[data-theme=graphite] .home-tiles .glass { min-height:116px;font-size:18px; }
  html[data-theme] .home-tiles .ico { width:38px;height:38px; }
  html[data-theme] .nav button { min-height:68px;font-size:13px;gap:6px; }
  html[data-theme] .settings-list>.glass { min-height:84px;font-size:18px;padding:14px 20px; }
  html[data-theme] .setting-copy small { font-size:14px; }
  html[data-theme] .universal-settings-footnote { font-size:15px; }
  html[data-theme] .screen[data-screen=form] .field>span { font-size:16px; }
  html[data-theme] .screen[data-screen=form] .input,
  html[data-theme] .screen[data-screen=form] textarea { font-size:18px;min-height:52px; }
  html[data-theme] .screen[data-screen=form] textarea { min-height:110px; }
  html[data-theme] .screen[data-screen=form] .media-actions .glass { min-height:58px;font-size:17px; }
  html[data-theme] .screen[data-screen=form] [type=submit] { min-height:62px;font-size:19px; }
  html[data-theme] .screen[data-screen=form] .hint { font-size:15px; }
  html[data-theme] .form-art-stage { width:min(100%,560px);aspect-ratio:1.8; }
  html[data-theme] #box-form { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
  html[data-theme] #box-form>* { grid-column:1/-1; }
  html[data-theme] #box-form>.field:nth-child(1),
  html[data-theme] #box-form>.field:nth-child(2) { grid-column:auto; }
  html[data-theme] .screen[data-screen=labels] .segmented button,
  html[data-theme] .screen[data-screen=labels] .segmented button.active { min-height:54px;font-size:17px; }
  html[data-theme] .screen[data-screen=labels] .input { min-height:52px;font-size:18px; }
  html[data-theme] .screen[data-screen=labels] .field>span,
  html[data-theme] .screen[data-screen=labels] .check-row,
  html[data-theme] .screen[data-screen=labels] .count-row>label { font-size:16px; }
  html[data-theme] .screen[data-screen=labels] .hint { font-size:14px; }
  html[data-theme] .screen[data-screen=labels]>.glass { min-height:60px;font-size:18px; }
  html[data-theme] .screen[data-screen=labels] .buttons-row .glass { min-height:56px;font-size:17px; }
  html[data-theme] .paywall h1 { font-size:36px; }
  html[data-theme] .paywall p { font-size:18px; }
  html[data-theme] .modal-card { max-width:600px; }
}
@media(max-width:350px) {
  html[data-theme] { --page-gutter:14px;--page-gap:12px; }
  html[data-theme] .home-brand h1 { font-size:27px; }
  html[data-theme] .screen[data-screen=home] .action-stack>.glass { font-size:15px; }
  html[data-theme] .screen[data-screen=form] .media-actions .glass { flex-wrap:wrap;font-size:13px;gap:5px; }
  html[data-theme] .screen[data-screen=labels] .size-row { gap:10px; }
  html[data-theme] .screen[data-screen=labels] .size-row .input { width:60px; }
}
/* The editable part of search and the manual-code disclosure are touch targets. */
html[data-theme] .search-field input { min-height:44px;height:auto; }
html[data-theme] .manual-code summary { min-height:44px; }
/* Measured union of all five hero alpha bounds, with 16px safe margin.
   All actual artwork stays visible through the crossfade. Only transparent
   canvas padding is omitted, so the Kraft and Stickers boxes become larger. */
html[data-theme] .home-box-cycle {
  --home-canvas:1254;--home-left:111;--home-top:74;--home-width:1042;--home-height:1101;
  aspect-ratio:var(--home-width) / var(--home-height);overflow:hidden;
}
html[data-theme=graphite] .home-box-cycle { --home-left:0;--home-top:62;--home-width:1254;--home-height:1149; }
html[data-theme=stickers] .home-box-cycle { --home-left:54;--home-top:121;--home-width:1150;--home-height:1063; }
html[data-theme] .home-box-cycle img {
  inset:auto;left:calc(-100% * var(--home-left) / var(--home-width));
  top:calc(-100% * var(--home-top) / var(--home-height));
  width:calc(100% * var(--home-canvas) / var(--home-width));
  height:calc(100% * var(--home-canvas) / var(--home-height));
  max-width:none;max-height:none;object-fit:fill;
}

/* Stickers backup explanations use their own full-size artwork. The captions
   remain real text below the scene, with no text baked into the PNG. */
html[data-theme=stickers] .sticker-backup-explainer {
  width:min(100%,760px);min-width:0;margin:0 auto 16px;
}
html[data-theme=stickers] .sticker-backup-art-frame {
  --art-canvas-width:1536;--art-canvas-height:1024;
  --art-crop-left:70;--art-crop-top:80;--art-crop-width:1459;--art-crop-height:864;
  margin:0 auto 6px;
}
html[data-theme=stickers] .sticker-backup-art-frame[data-art=restore] {
  --art-crop-left:33;--art-crop-top:113;--art-crop-width:1480;--art-crop-height:775;
}
html[data-theme=stickers] .sticker-backup-captions {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,3vw,24px);
  margin:0;padding:0 3%;color:var(--ink);font-size:clamp(12px,2.5vw,18px);
  font-weight:650;line-height:1.35;text-align:center;
}
html[data-theme=stickers] .sticker-backup-captions>span {
  display:block;min-width:0;max-width:100%;margin:0;text-align:center;
  white-space:nowrap;overflow-wrap:normal;
}

/* On small phones the long backup headings get a full-width line beneath
   Back. Keep whole words readable at enlarged system text sizes. */
@media(max-width:350px) {
  html[data-theme=stickers] .screen:is([data-screen=backup],[data-screen=restore]) .screen-header {
    display:grid;grid-template-columns:minmax(0,1fr);row-gap:9px;
  }
  html[data-theme=stickers] .screen:is([data-screen=backup],[data-screen=restore]) .screen-header>.plain {
    justify-self:start;
  }
  html[data-theme=stickers] .screen:is([data-screen=backup],[data-screen=restore]) .screen-header h1 {
    max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal;
  }
}