/* Números romanos: símbolos grandes, construcción activa y controles estables. */
.aw-app .aw-roman {
  --roman-teal:#167e74;
  --roman-muted:#60796d;
  position:relative;
  container:aw-roman / inline-size;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  height:100%;
  min-width:0;
  min-height:460px;
  padding:16px 24px;
  color:#183b35;
  background:#fff;
  isolation:isolate;
}
.aw-app .aw-window[data-type=roman] .aw-window-header {min-height:44px;padding:0 8px 0 14px;gap:8px}
.aw-app .aw-window[data-type=roman] .aw-window-handle {padding-block:6px}
.aw-app .aw-window[data-type=roman] .aw-window-header h2 {font-size:16px}
.aw-app .aw-window[data-type=roman] .aw-window-buttons button {min-height:44px}
.aw-app .aw-roman [hidden] {display:none!important}
.aw-app .aw-roman :where(button) {min-height:44px;min-width:44px;white-space:normal;-webkit-tap-highlight-color:transparent}
.aw-app .aw-roman :is(button,input,select,.aw-roman-response):focus-visible {outline:3px solid var(--roman-teal);outline-offset:-4px}
.aw-app .aw-roman-button {min-height:44px;padding:10px 16px;border:1px solid #d6e5de;border-radius:12px;background:#fff;color:#284a40;font-size:15px;font-weight:650;line-height:1.2;touch-action:manipulation}
.aw-app .aw-roman-button:hover {border-color:#87b8a9;background:#f2f9f5}
.aw-app .aw-roman-primary {background:var(--roman-teal);border-color:var(--roman-teal);color:#fff}
.aw-app .aw-roman-primary:hover {background:#116b62;border-color:#116b62;color:#fff}
.aw-app .aw-roman-primary:focus-visible {outline-color:#fff;box-shadow:inset 0 0 0 1px var(--roman-teal)}
.aw-app .aw-roman-top {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;flex:none;min-width:0}
.aw-app .aw-roman-tabs {display:flex;gap:3px;padding:4px;border-radius:15px;background:#eff5f2;max-width:100%;min-width:0}
.aw-app .aw-roman-tabs button {flex:1 1 auto;height:44px;padding:9px 14px;border-color:transparent;border-radius:11px;background:transparent;font-size:14px;font-weight:650;color:#557269}
.aw-app .aw-roman-tabs button[aria-pressed=true] {background:#fff;color:#106c60;border-color:#d3e5dc;box-shadow:0 2px 5px #153e2910}
.aw-app .aw-roman-options {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%;margin-left:auto}
.aw-app .aw-roman-options label {display:flex;align-items:center;gap:8px;min-width:0;color:#536e64;font-size:13px;font-weight:550}
.aw-app .aw-roman-options select {width:210px;height:44px;min-height:44px;min-width:0;max-width:100%;padding:8px 28px 8px 10px;border-color:#d9e6e0;border-radius:11px;background:#fff;font-size:14px;font-weight:600;color:#284a40}
.aw-app .aw-roman-options>.aw-roman-button {height:44px;padding:8px 10px;font-size:14px}
.aw-app .aw-roman-options>.aw-roman-button:first-of-type {width:150px}
.aw-app .aw-roman-options>.aw-roman-button:last-of-type {width:76px}
.aw-app .aw-roman-stage {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;flex:1 0 auto;min-width:0;min-height:0;width:100%;padding:4px 0}
.aw-app .aw-roman-hero {display:flex;align-items:center;justify-content:center;gap:22px;width:min(100%,1120px);min-width:0}
.aw-app .aw-roman-illustration {flex:none;width:110px;height:110px;display:flex;align-items:center;justify-content:center}
.aw-app .aw-roman-illustration img,.aw-app img.aw-roman-illustration {display:block;width:110px;height:110px;object-fit:contain;user-select:none;-webkit-user-select:none;pointer-events:none}
.aw-app .aw-roman-challenge {container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;max-width:100%;text-align:center}
.aw-app .aw-roman-kicker {margin:0;font-size:14px;line-height:1.3;font-weight:600;color:#6b8276}
.aw-app .aw-roman-big {display:block;max-width:100%;margin:0;font-size:clamp(16px,min(24cqw,calc(115cqw / var(--roman-length,4))),106px);line-height:1.05;font-weight:740;letter-spacing:.015em;color:#173f33;font-variant-numeric:tabular-nums;white-space:nowrap}
.aw-app .aw-roman-prompt {margin:0;max-width:100%;font-size:clamp(15px,2.2cqw,21px);line-height:1.35;font-weight:500;color:var(--roman-muted);overflow-wrap:anywhere}
.aw-app .aw-roman-link {display:grid;grid-template-columns:minmax(0,.65fr) 44px minmax(0,1.35fr);align-items:center;justify-content:center;gap:18px;width:min(100%,1080px);min-width:0;text-align:center}
.aw-app .aw-roman-decimal {min-width:0;font-size:clamp(32px,7.5cqw,84px);font-weight:730;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.aw-app .aw-roman-numeral {min-width:0;max-width:100%;font-size:clamp(18px,min(7cqw,calc(83cqw / var(--roman-length,4))),88px);font-weight:730;line-height:1.1;letter-spacing:.02em;color:var(--roman-teal);white-space:nowrap}
.aw-app .aw-roman-equals {font-size:32px;line-height:1;font-weight:400;color:#85a697;text-align:center}
.aw-app .aw-roman-workspace {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:min(100%,1000px);min-width:0}
.aw-app .aw-roman-response-group {container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-width:0}
.aw-app .aw-roman-response-tools {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-width:0}
.aw-app .aw-roman-response-tools .aw-roman-button {min-height:44px;font-size:13px;padding:9px 14px}
.aw-app .aw-roman-response {display:flex;align-items:center;justify-content:center;min-width:0;width:100%;min-height:82px;padding:10px 16px;border:2px dashed #bcd5c7;border-radius:16px;background:#f5faf6;color:#225740;font-size:clamp(8px,min(7.5cqw,calc(95cqw / var(--roman-length,4))),68px);font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:.035em;white-space:nowrap}
.aw-app .aw-roman-response:empty:after {content:'…';color:#9ab6a7}
.aw-app .aw-roman-response[data-result=correct] {background:#eaf6eb;border-color:#5b9e70;color:#275d38}
.aw-app .aw-roman-response[data-result=incorrect] {background:#fff5e9;border-color:#c59a60;color:#805324}
.aw-app .aw-roman-symbols {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:100%;min-width:0}
.aw-app .aw-roman-symbols .aw-roman-button {display:flex;flex-direction:column;gap:4px;min-width:70px;width:86px;height:74px;min-height:74px;padding:8px 10px;border:1px solid #cddfd4;border-radius:14px;background:#fff}
.aw-app .aw-roman-symbols strong {font-size:30px;line-height:1;font-weight:680;color:#245b47}
.aw-app .aw-roman-symbols span {font-size:13px;line-height:1.2;font-weight:550;color:#6e877a}
.aw-app .aw-roman-pad {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:228px;max-width:100%;min-width:0}
.aw-app .aw-roman-pad .aw-roman-button {height:46px;min-height:46px;padding:7px;font-size:24px;line-height:1;font-weight:600;border-color:#d4e4d9;border-radius:10px}
.aw-app .aw-roman[data-mode=read] .aw-roman-workspace {display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:24px;width:min(100%,850px);align-items:center}
.aw-app .aw-roman[data-mode=read] .aw-roman-response {min-height:106px;font-size:clamp(42px,7cqw,76px)}
.aw-app .aw-roman-feedback {flex:none;min-height:26px;margin:0;padding:2px 6px;text-align:center;font-size:clamp(15px,1.7cqw,20px);line-height:1.4;color:#587265;max-width:100%;overflow-wrap:anywhere}
.aw-app .aw-roman-feedback[data-result=correct] {color:#246440;font-weight:600}
.aw-app .aw-roman-feedback[data-result=incorrect] {color:#85551c}
.aw-app .aw-roman-actions {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;flex:none;width:100%;min-width:0}
.aw-app .aw-roman-actions .aw-roman-button {min-height:48px;padding:12px 20px;font-size:16px}
.aw-app .aw-roman-actions .aw-roman-primary {min-width:164px}
.aw-app .aw-roman-breakdown {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;width:100%;min-width:0;font-size:24px;color:#8aa195}
.aw-app .aw-roman-pieces {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;width:100%;min-width:0}
.aw-app .aw-roman-piece {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:82px;min-height:68px;padding:9px 14px;border:1px solid #dbe8df;border-radius:13px;background:#f4f9f5;color:#305d46;text-align:center}
.aw-app .aw-roman-piece strong {font-size:28px;font-weight:650;line-height:1.1;white-space:nowrap}
.aw-app .aw-roman-piece span {font-size:13px;font-weight:550;line-height:1.3;color:#647d6e}
.aw-app .aw-roman-piece.aw-roman-subtractive {background:#fff6e8;border-color:#ead4b1;color:#865720}
.aw-app .aw-roman-subtractive span {color:#8d6f44}
.aw-app .aw-roman-equation {width:100%;margin:0;text-align:center;font-size:clamp(18px,2.3cqw,27px);line-height:1.4;font-weight:550;font-variant-numeric:tabular-nums;color:#577567;overflow-wrap:anywhere}
.aw-app .aw-roman-detail {width:100%;margin:0;text-align:center;font-size:16px;line-height:1.4;color:#637c6e;overflow-wrap:anywhere}
.aw-app .aw-roman-step-actions {display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-width:0}
.aw-app .aw-roman-step-actions .aw-roman-button {min-height:44px;padding:10px 14px;font-size:14px}
.aw-app .aw-roman-step-actions>span {font-size:13px;font-weight:600;color:#749080;white-space:nowrap}
.aw-app .aw-roman-guide,.aw-app .aw-roman-editor {position:absolute;top:68px;right:14px;z-index:20;display:flex;flex-direction:column;gap:10px;width:340px;max-width:calc(100% - 28px);max-height:calc(100% - 82px);overflow:auto;padding:16px;border:1px solid #c8ded1;border-radius:17px;background:#fff;box-shadow:0 14px 44px #21433429;overscroll-behavior:contain}
.aw-app .aw-roman-guide p {margin:0;color:#466855;font-size:16px;line-height:1.5}
.aw-app .aw-roman-guide header,.aw-app .aw-roman-editor header,.aw-app .aw-roman-editor-head {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;font-weight:650;color:#2c5341}
.aw-app .aw-roman-guide header .aw-roman-button,.aw-app .aw-roman-editor header .aw-roman-button,.aw-app .aw-roman-editor-head .aw-roman-button {min-width:44px;padding:8px;border-color:transparent;font-size:22px}
.aw-app .aw-roman-editor {width:282px;gap:8px;padding:14px}
.aw-app .aw-roman-input {width:100%;min-width:0;height:52px;min-height:52px;padding:8px 12px;border:1px solid #c5dccd;border-radius:11px;background:#f4f9f5;text-align:right;font-size:32px;line-height:1.1;font-weight:650;font-variant-numeric:tabular-nums}
.aw-app .aw-roman-editor .aw-roman-pad {width:100%}
.aw-app .aw-roman-editor>.aw-roman-primary {width:100%;min-height:46px}
.aw-app .aw-roman-error {min-height:0;margin:0;color:#984e38;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.aw-app .aw-roman-error:empty {display:none}

@container aw-roman (max-width:1000px) {
  .aw-app .aw-roman-options label {font-size:0;gap:0}
}
@container aw-roman (max-width:740px) {
  .aw-app .aw-roman-top {justify-content:center}
  .aw-app .aw-roman-tabs {width:100%}
  .aw-app .aw-roman-tabs button {flex:1 1 0;padding-inline:8px}
  .aw-app .aw-roman-options {width:100%;justify-content:center;margin-left:0}
  .aw-app .aw-roman-illustration,.aw-app .aw-roman-illustration img,.aw-app img.aw-roman-illustration {width:86px;height:86px}
  .aw-app .aw-roman-hero {gap:14px}
  .aw-app .aw-roman-symbols {gap:6px}
  .aw-app .aw-roman-symbols .aw-roman-button {min-width:58px;width:68px;height:68px;min-height:68px}
  .aw-app .aw-roman[data-mode=read] .aw-roman-workspace {grid-template-columns:minmax(0,1fr) 204px;gap:14px}
}
@container aw-roman (max-width:440px) {
  .aw-app .aw-roman-tabs {gap:2px;padding:3px}
  .aw-app .aw-roman-tabs button {font-size:12px;padding:7px 5px}
  .aw-app .aw-roman-options {display:grid;grid-template-columns:minmax(0,1fr) 105px 60px;gap:6px}
  .aw-app .aw-roman-options label {width:100%}
  .aw-app .aw-roman-options select {width:100%;font-size:12px;padding-left:7px;padding-right:20px}
  .aw-app .aw-roman-options>.aw-roman-button:first-of-type,.aw-app .aw-roman-options>.aw-roman-button:last-of-type {width:100%;font-size:11px;padding:8px 5px}
  .aw-app .aw-roman-stage {gap:14px;padding:2px 0}
  .aw-app .aw-roman-hero {flex-direction:column;gap:5px}
  .aw-app .aw-roman-illustration,.aw-app .aw-roman-illustration img,.aw-app img.aw-roman-illustration {width:66px;height:66px}
  .aw-app .aw-roman-challenge {width:100%}
  .aw-app .aw-roman-kicker {font-size:12px}
  .aw-app .aw-roman-prompt {font-size:15px}
  .aw-app .aw-roman-link {grid-template-columns:minmax(0,1fr);gap:8px}
  .aw-app .aw-roman-decimal {font-size:44px}
  .aw-app .aw-roman-numeral {font-size:clamp(16px,min(14cqw,calc(115cqw / var(--roman-length,4))),54px)}
  .aw-app .aw-roman-equals {font-size:26px}
  .aw-app .aw-roman-response {min-height:68px;padding:9px 8px;font-size:clamp(8px,min(12cqw,calc(95cqw / var(--roman-length,4))),44px)}
  .aw-app .aw-roman-symbols .aw-roman-button {width:58px;min-width:48px;height:64px;min-height:64px;padding:8px 5px}
  .aw-app .aw-roman-symbols strong {font-size:26px}
  .aw-app .aw-roman-symbols span {font-size:11px}
  .aw-app .aw-roman[data-mode=read] .aw-roman-workspace {display:flex;flex-direction:column;gap:10px;width:100%}
  .aw-app .aw-roman[data-mode=read] .aw-roman-response {min-height:70px;font-size:42px}
  .aw-app .aw-roman-pad {width:100%;max-width:270px}
  .aw-app .aw-roman-feedback {min-height:24px;font-size:14px;padding-inline:0}
  .aw-app .aw-roman-actions {gap:6px}
  .aw-app .aw-roman-actions .aw-roman-button {min-height:44px;min-width:44px;padding:9px 8px;font-size:13px;flex:1 1 auto}
  .aw-app .aw-roman-piece {min-width:68px;min-height:60px;padding:8px 10px}
  .aw-app .aw-roman-piece strong {font-size:25px}
  .aw-app .aw-roman-piece span {font-size:12px}
  .aw-app .aw-roman-pieces {gap:6px}
  .aw-app .aw-roman-detail {font-size:14px}
  .aw-app .aw-roman-step-actions {gap:6px}
  .aw-app .aw-roman-step-actions .aw-roman-button {padding:9px 10px;font-size:12px}
  .aw-app .aw-roman-guide,.aw-app .aw-roman-editor {top:62px;right:8px;max-width:calc(100% - 16px);padding:12px}
}
@container aw-roman (max-width:260px) {
  .aw-app .aw-roman-options {grid-template-columns:minmax(0,1fr) 66px}
  .aw-app .aw-roman-options label {grid-column:1 / -1}
}
@media (min-width:761px) and (max-height:950px) {
  .aw-app .aw-roman {gap:5px;min-height:440px;padding:8px 18px}
  .aw-app .aw-roman-stage {gap:10px;padding:0}
  .aw-app .aw-roman-big {font-size:clamp(18px,min(20cqw,calc(115cqw / var(--roman-length,4))),80px)}
  .aw-app .aw-roman-illustration,.aw-app .aw-roman-illustration img,.aw-app img.aw-roman-illustration {width:90px;height:90px}
  .aw-app .aw-roman-kicker {font-size:13px}
  .aw-app .aw-roman-prompt {font-size:16px}
  .aw-app .aw-roman-decimal {font-size:clamp(34px,6cqw,68px)}
  .aw-app .aw-roman-numeral {font-size:clamp(18px,min(6cqw,calc(80cqw / var(--roman-length,4))),70px)}
  .aw-app .aw-roman-response {min-height:76px;padding:8px 12px;font-size:clamp(8px,min(7.5cqw,calc(95cqw / var(--roman-length,4))),56px)}
  .aw-app .aw-roman-breakdown,.aw-app .aw-roman-pieces {gap:6px}
  .aw-app .aw-roman-piece {min-height:60px;padding:7px 12px}
  .aw-app .aw-roman-piece strong {font-size:26px}
  .aw-app .aw-roman-equation {font-size:19px;line-height:1.3}
  .aw-app .aw-roman-detail {font-size:14px}
  .aw-app .aw-roman-feedback {font-size:15px;min-height:23px;padding-block:1px}
  .aw-app .aw-roman-actions .aw-roman-button {min-height:44px;padding:9px 18px;font-size:15px}
}
@media (max-width:580px) {
  .aw-app .aw-roman {padding:12px 10px;gap:8px;min-height:460px}
}
@container aw-roman (min-width:740px) {
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-stage {display:grid;grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:auto auto;gap:12px 18px;align-content:center;align-items:center;justify-items:center}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-hero {grid-column:1;grid-row:1;gap:12px}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-illustration {width:70px;height:70px}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-workspace {grid-column:1;grid-row:2;max-width:100%}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-breakdown {grid-column:2;grid-row:1 / 3;align-self:center;align-content:flex-start;width:100%;max-height:360px;overflow:auto;padding:12px;border:1px solid #d8e8dd;border-radius:16px;background:#f4f9f5;scrollbar-width:thin;overscroll-behavior:contain;font-size:18px}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-step-actions {order:-1;position:sticky;top:-12px;z-index:1;gap:5px;padding:8px 0;background:#f4f9f5}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-step-actions .aw-roman-button {padding:8px;font-size:12px}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-pieces {gap:6px}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-piece {min-width:66px;min-height:60px;padding:7px 9px}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-piece strong {font-size:25px}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-equation {font-size:18px}
  .aw-app .aw-roman[data-explain=true]:not([data-mode=explore]) .aw-roman-detail {font-size:14px}
  .aw-app .aw-roman[data-explain=true] .aw-roman-symbols {gap:5px}
  .aw-app .aw-roman[data-explain=true] .aw-roman-symbols .aw-roman-button {width:60px;min-width:48px;height:64px;min-height:64px;padding:7px 5px}
  .aw-app .aw-roman[data-explain=true] .aw-roman-symbols strong {font-size:27px}
  .aw-app .aw-roman[data-explain=true][data-mode=read] .aw-roman-workspace {grid-template-columns:minmax(0,1fr) 204px;gap:14px}
}
@media print {
  .aw-app .aw-roman-top,.aw-app .aw-roman-actions,.aw-app .aw-roman-editor,.aw-app .aw-roman-guide,.aw-app .aw-roman-pad,.aw-app .aw-roman-symbols {display:none!important}
  .aw-app .aw-roman {height:auto;min-height:0;padding:20px}
  .aw-app .aw-roman-stage {gap:18px}
}

/* La raya pertenece únicamente al grupo multiplicado por mil. */
.aw-app .aw-roman-overbar{display:inline-block;text-decoration-line:overline;text-decoration-thickness:.06em;text-decoration-skip-ink:none;padding-top:.16em;line-height:1.3}
.aw-app .aw-roman-response .aw-roman-overbar{margin-right:.035em}
.aw-app [data-roman-bar][aria-pressed=true]{background:#ddede7;border-color:#167e74;box-shadow:inset 0 0 0 1px #167e74}
.aw-app .aw-roman-response{gap:0;flex-wrap:wrap}

.aw-app .aw-roman-piece strong>span{font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit}

/* Roma has more presence while discovering; practice keeps the compact illustration. */
@container aw-roman (min-width:980px) {
 .aw-app .aw-roman[data-mode=explore] .aw-roman-hero {width:min(100%,1380px)}
 .aw-app .aw-roman[data-mode=explore] .aw-roman-illustration {width:180px;height:180px}
}
@container aw-roman (min-width:1450px) {
 .aw-app .aw-roman[data-mode=explore] .aw-roman-illustration {width:220px;height:220px}
}

/* One visual card connects both notations; explanations appear after interaction. */
.aw-app .aw-roman-hero{padding:24px;border:1px solid #dce9e2;border-radius:24px;background:#f8fbf9;gap:24px}
.aw-app .aw-roman-challenge{gap:16px}
.aw-app .aw-roman-kicker{font-size:clamp(15px,1.8cqw,22px);color:#385f54;font-weight:650}
.aw-app .aw-roman-link{grid-template-columns:minmax(0,.65fr) 36px minmax(0,1.35fr);gap:12px}
.aw-app .aw-roman-equals{font-size:40px;color:#618c7e}
.aw-app .aw-roman-feedback:empty,.aw-app .aw-roman-equation:empty,.aw-app .aw-roman-detail:empty{display:none}
.aw-app .aw-roman[data-mode=explore] .aw-roman-breakdown{padding-top:14px;border-top:1px solid #dce9e2;gap:12px}
.aw-app .aw-roman[data-mode=explore] .aw-roman-piece{background:white;min-height:86px;min-width:90px;border-radius:16px}
.aw-app .aw-roman[data-mode=explore] .aw-roman-piece strong{font-size:36px}
.aw-app .aw-roman[data-mode=explore] .aw-roman-piece>span{font-size:18px}
.aw-app .aw-roman[data-mode=explore] .aw-roman-subtractive{background:#fff6e8}
@container aw-roman (max-width:740px){
 .aw-app .aw-roman-hero{padding:16px;gap:12px}
 .aw-app .aw-roman[data-mode=explore] .aw-roman-hero{flex-direction:column}
 .aw-app .aw-roman[data-mode=explore] .aw-roman-challenge{width:100%}
}
@container aw-roman (max-width:440px){
 .aw-app .aw-roman-hero{padding:12px;gap:8px}
 .aw-app .aw-roman-challenge{gap:12px}
 .aw-app .aw-roman-kicker{font-size:14px}
 .aw-app .aw-roman-link{grid-template-columns:minmax(0,.7fr) 24px minmax(0,1.3fr);gap:6px}
 .aw-app .aw-roman-decimal{font-size:clamp(18px,10cqw,38px)}
 .aw-app .aw-roman-numeral{font-size:clamp(9px,min(12cqw,calc(64cqw / var(--roman-length,4))),42px)}
 .aw-app .aw-roman-equals{font-size:24px}
 .aw-app .aw-roman[data-mode=explore] .aw-roman-piece{min-width:60px;min-height:68px;padding:8px}
 .aw-app .aw-roman[data-mode=explore] .aw-roman-piece strong{font-size:26px}
}

@container aw-roman (max-width:440px){
 .aw-app .aw-roman[data-long=true] .aw-roman-link{grid-template-columns:minmax(0,1fr);gap:8px}
 .aw-app .aw-roman[data-long=true] .aw-roman-numeral{font-size:clamp(12px,calc(120cqw / var(--roman-length,4)),34px)}
}
@container aw-roman (max-width:440px){
 .aw-app .aw-roman[data-long=true][data-mode=read] .aw-roman-big{font-size:clamp(12px,calc(120cqw / var(--roman-length,4)),34px)}
}