/* Looks band (#themes): the look switcher, the phone chrome, the Solar and Register looks, and the iPhone Duo mock.
   Loaded after styles.css; overrides its phone, themes and retro-look rules. */

@font-face { font-family: "DSEG7 Classic"; src: url("../fonts/DSEG7Classic-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DSEG7 Classic Italic"; src: url("../fonts/DSEG7Classic-Italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Dot Matrix"; src: url("../fonts/DotMatrix-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --wide: "Archivo", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --cond: "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --lcd-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Phone chrome: status bar and tab bar (hero and looks phones) ---------- */
.status { padding: .55em 1.75em 0 2.05em; }
.status-icons { display: flex; gap: .32em; align-items: center; }
.status-icons svg { display: block; fill: currentColor; }
.status-icons .st-wifi { width: 1.08em; height: .82em; }
.status-icons .st-batt { width: 1.7em; height: .82em; }

.phone .tabbar {
  --tab-accent: #F08A00;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  height: 5.7em; margin: 0 1.9em 1.8em; padding: 0 .3em; border-radius: 2.85em;
  font: 600 .44em/1.1 var(--font-ui); color: #1C1C1E;
  background: rgba(246, 246, 248, .88); border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.phone .tabbar span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32em; height: 4.9em; padding: 0; border-radius: 2.45em; white-space: nowrap; }
.phone .tabbar svg { width: 2.15em; height: 2.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.phone .tabbar .on { color: var(--tab-accent); }
.phone .tabbar > span.on { background: color-mix(in srgb, var(--tab-accent) 13%, transparent); }

/* Standard: no device header; the display starts under the status bar. */
.phone .calc { padding-bottom: .3em; }
.phone .calc[data-theme="standard"] .calc-brand { display: none; }
.phone .calc[data-theme="standard"] .calc-display { height: 8.7em; }

/* ---------- The band: two cards side by side on wide screens ---------- */
.touches { background: var(--paper-2); padding-block: clamp(56px, 7vw, 96px); }
.touches-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
/* Wide screens: the looks card beside a wider Duo card. Tablets: full-width cards, the looks card in two columns. */
@media (min-width: 1180px) { .touches-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; } }
@media (min-width: 720px) and (max-width: 1179px) {
  .touches .touch-looks { display: grid; grid-template-columns: minmax(0, 440px) auto; justify-content: center; grid-template-areas: "head stage" "seg stage"; align-content: center; align-items: start; column-gap: clamp(24px, 5vw, 64px); row-gap: 24px; padding-inline: clamp(28px, 6vw, 72px); }
  .touches .touch-looks .touch-head { grid-area: head; align-self: end; text-align: left; }
  .touches .touch-looks .look-seg { grid-area: seg; justify-self: start; }
  .touches .touch-looks .themes-stage { grid-area: stage; }
}
.touch {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; min-width: 0;
  padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: var(--surface); border: 1px solid var(--line);
  overflow: hidden;
}
.touch-head { align-self: stretch; text-align: center; }
.touch-head h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.touch-head p { margin-top: 8px; color: var(--ink-2); font-size: 1.02rem; }

/* Look switcher: a segmented control with tiny swatches */
.look-seg { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); max-width: 100%; }
.look-seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 .92rem/1 var(--font-body); white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.look-seg button:hover { color: var(--ink); }
.look-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(40, 30, 15, .1), 0 2px 8px rgba(40, 30, 15, .08); }
.look-seg button:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; border-radius: 999px; }
.lk-sw { position: relative; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.lk-sw::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; }
.lk-sw-standard { background: #E5E5EA; } .lk-sw-standard::after { background: #FF9F0A; }
.lk-sw-solar { background: #5A6075; } .lk-sw-solar::after { inset: 5px 3px; border-radius: 2px; background: #B4BE9C; }
.lk-sw-register { background: #E6DCC6; } .lk-sw-register::after { inset: 5px 3px; border-radius: 2px; background: #0F1B18; box-shadow: inset 0 0 0 1.5px #3FF2C8; }
.touch-looks { container-type: inline-size; }
@container (max-width: 400px) {
  .look-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .look-seg button { padding: 0 6px; gap: 6px; font-size: .86rem; }
}
@container (max-width: 290px) { .look-seg button { gap: 5px; font-size: .8rem; padding: 0 4px; } .lk-sw { width: 14px; height: 14px; } .lk-sw::after { inset: 4px 3px; } .lk-sw-standard::after { inset: 4px; } }
/* Phones: each option is as wide as its label plus an equal share of the spare room (instead of equal
   thirds), so "Standard" keeps clear padding. Widths don't depend on the pick, so nothing moves on a switch. */
@media (max-width: 400px) {
  .look-seg { grid-template-columns: repeat(3, auto); gap: 0; }
  .look-seg button { padding: 0 8px 0 6px; gap: 6px; font-size: .84rem; }
}
@media (max-width: 359px) {
  .look-seg button { padding: 0 7px 0 5px; gap: 5px; font-size: .8rem; }
  .lk-sw { width: 14px; height: 14px; } .lk-sw::after { inset: 4px 3px; } .lk-sw-standard::after { inset: 4px; }
}

/* The looks phone: smaller, its height reserved */
.themes-stage { display: flex; justify-content: center; align-items: flex-start; min-height: 0; height: calc(39.5 * 14px); }
.themes-stage .phone { --phone-font: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 30px 60px -30px rgba(28,25,21,.5), 0 14px 28px -16px rgba(28,25,21,.35); }
@media (max-width: 400px) {
  .themes-stage { height: calc(39.5 * 13px); }
  .themes-stage .phone { --phone-font: 13px; }
}

/* ---------- Decorations the retro looks add (hidden unless their look is on) ---------- */
.lk-head, .lk-ann, .lk-labels, .lk-qd, .lk-seg, .lk-rates, .l-reg, .k-sub, .lk-brand-solar, .lk-brand-reg, .lk-panel, .lk-tape, .lk-btn-r { display: none; }
.calc .lk-btn svg, .dz-btn svg { width: .9em; height: .9em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.calc .calc-brand { font-size: 1em; }
.calc .calc-keys button { position: relative; }

/* Shared seven-segment readout */
.dz-seg { display: block; }
.lk-seg, .dz-seg { position: relative; text-align: right; white-space: nowrap; line-height: 1; font-style: normal; }
.lk-seg .lk-ghost, .dz-seg s { position: absolute; right: 0; bottom: 0; text-decoration: none; }
.lk-seg .lk-lit, .dz-seg > span { position: relative; }
.seg-cm { position: relative; font-style: normal; }
.seg-cm::after { content: ""; position: absolute; left: -.2em; bottom: -.16em; width: .07em; height: .2em; background: currentColor; border-radius: .03em; transform: skewX(-14deg); }

/* ---------- Solar ---------- */
.phone-look[data-look="solar"] .phone-screen { background: linear-gradient(180deg, #646A80, #545A6E); color: #fff; }
.phone-look[data-look="solar"] .tabbar { background: rgba(130, 137, 160, .5); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .16); }
.phone-look[data-look="solar"] .tabbar .on { color: #fff; }
.phone-look[data-look="solar"] .tabbar > span.on, .phone-look[data-look="solar"] .tab-pill { background: rgba(62, 68, 92, .8); }

.calc[data-theme="solar"] {
  --c-bg: transparent; background: transparent; color: #F4F4F0;
  padding: 0 .62em .3em;
}
.calc[data-theme="solar"] .lk-head { display: flex; align-items: center; justify-content: space-between; height: 1.62em; margin-top: 1.9em; }
.calc[data-theme="solar"] .lk-btn.lk-btn-r { display: none; }
.calc[data-theme="solar"] .lk-btn, .dz-btn {
  display: grid; place-items: center; width: 2.05em; height: 1.55em; border-radius: .3em; color: #F2F2EE;
  background: linear-gradient(180deg, #3A3C45, #34363E 12%, #2B2D34 85%, #25272D);
  box-shadow: 0 .09em 0 #1C1D22, 0 .14em .3em rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.calc[data-theme="solar"] .lk-panel, .dz-panel {
  display: flex; gap: .07em; width: 8.9em; height: 1.2em; padding: .08em; border-radius: .1em;
  background: linear-gradient(180deg, #B9BEC6, #7A7F87); box-shadow: 0 .06em .12em rgba(0, 0, 0, .35);
}
.lk-panel i, .dz-panel i { flex: 1; background: linear-gradient(180deg, #3B2A2B, #2A1E20); box-shadow: inset 0 .05em .1em rgba(0, 0, 0, .6); }
.calc[data-theme="solar"] .calc-brand { display: flex; visibility: visible; height: auto; padding: 0 .15em; margin: .8em 0 .7em; }
.calc[data-theme="solar"] .lk-brand-solar, .dz-brand { display: flex; align-items: baseline; gap: .42em; width: 100%; white-space: nowrap; }
.lk-brand-solar b, .dz-brand b { font: 900 .6em/1 var(--wide); font-stretch: 125%; letter-spacing: .07em; background: linear-gradient(180deg, #F4F5F7, #B8BCC4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lk-brand-solar i, .dz-brand i { font: italic 600 .5em/1 var(--font-ui); color: #D9DCE1; }
.lk-brand-solar em, .dz-brand em { font: 800 .38em/1 var(--wide); font-stretch: 125%; font-style: normal; letter-spacing: .16em; color: #D9DCE1; }
.lk-brand-solar span { margin-left: auto; font: 800 .42em/1 var(--wide); font-stretch: 125%; letter-spacing: .13em; color: #8EA2FF; }

.calc[data-theme="solar"] .calc-display, .dz-lcd {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: end;
  height: 3.85em; margin: .33em; padding: .3em .42em .32em; border-radius: .38em;
  background: linear-gradient(180deg, #BAC4A3, #A7B38F); color: #20261E; text-align: right;
  box-shadow: 0 0 0 .33em #2B2E35, 0 0 0 .37em rgba(255, 255, 255, .08), 0 .3em .5em .2em rgba(0, 0, 0, .25), inset 0 .1em .25em rgba(0, 0, 0, .3);
  font-family: var(--lcd-mono);
}
.calc[data-theme="solar"] .lk-ann, .dz-ann { display: flex; gap: .55em; grid-area: 1 / 1; align-self: start; font: 700 .34em/1 var(--lcd-mono); color: rgba(32, 38, 30, .13); white-space: nowrap; }
.lk-ann i, .dz-ann i { font-style: normal; }
.calc[data-theme="solar"] .lk-ann .on { color: #20261E; }
.calc[data-theme="solar"] .d-hist { grid-area: 1 / 2; align-self: start; height: auto; font-size: .5em; line-height: 1.2; color: rgba(32, 38, 30, .85); padding-left: 1em; }
.calc[data-theme="solar"] .d-expr { grid-area: 2 / 1 / 3 / 3; height: auto; min-width: 0; margin-top: .1em; }
.calc[data-theme="solar"] .d-expr span { font-size: calc(min(1, var(--fit, 1) * 1.9) * .98em); font-weight: 500; letter-spacing: 0; line-height: 1.2; text-shadow: .03em .04em 0 rgba(32, 38, 30, .16); }
.calc[data-theme="solar"] .d-res { display: none; }
.calc[data-theme="solar"] .lk-seg { display: block; grid-area: 3 / 1 / 4 / 3; align-self: end; font: 1.48em/1 "DSEG7 Classic Italic", var(--lcd-mono); color: #20261E; }
.calc[data-theme="solar"] .lk-ghost, .dz-seg s { color: rgba(32, 38, 30, .075); }
.calc[data-theme="solar"] .lk-lit { text-shadow: .02em .03em 0 rgba(32, 38, 30, .18); }
.calc[data-theme="solar"] .lk-rates, .dz-rates { display: flex; align-items: center; gap: .7em; margin: .3em 0 .5em; font: 800 .36em/1 var(--wide); font-stretch: 125%; letter-spacing: .14em; color: rgba(222, 226, 236, .72); white-space: nowrap; }
.calc[data-theme="solar"] .lk-rates::before, .calc[data-theme="solar"] .lk-rates::after, .dz-rates::before, .dz-rates::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .16); }

.calc[data-theme="solar"] .calc-quick { gap: .2em; margin: .1em 0 1em; }
.calc[data-theme="solar"] .calc-quick::before { flex-basis: 3.6em; }
.calc[data-theme="solar"] .calc-quick button, .calc[data-theme="solar"] .calc-quick::before, .dz-quick i, .dz-keys i {
  background: linear-gradient(180deg, #3A3C45, #34363E 12%, #2B2D34 85%, #25272D); color: #F4F4F0;
  box-shadow: 0 .1em 0 #1C1D22, 0 .16em .3em rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.calc[data-theme="solar"] .calc-quick button, .calc[data-theme="solar"] .calc-quick::before { height: 2.75em; border-radius: .5em; font: 800 .51em/1 var(--wide); font-stretch: 125%; letter-spacing: .02em; opacity: 1; }
.calc[data-theme="solar"] .calc-quick button[data-k="sr"] { font-stretch: 100%; font-family: var(--font-ui); font-weight: 700; }
.calc[data-theme="solar"] .calc-quick button[data-k="sr"], .calc[data-theme="register"] .calc-quick button[data-k="sr"] { text-transform: uppercase; }
.calc[data-theme="solar"] .calc-keys { gap: .9em .4em; }
.calc[data-theme="solar"] .calc-keys button, .calc[data-theme="solar"] .calc-keys .k-op {
  aspect-ratio: auto; height: 2.08em; font: 800 1.36em/1 var(--wide) !important; font-stretch: 125% !important; border-radius: .2em;
  background: linear-gradient(180deg, #3A3C45, #34363E 12%, #2B2D34 85%, #25272D); color: #F4F4F0;
  box-shadow: 0 .07em 0 #1C1D22, 0 .1em .2em rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.calc[data-theme="solar"] .calc-keys .k-ac { background: linear-gradient(180deg, #D0616F, #C05562); box-shadow: 0 .07em 0 #8E3A45, 0 .1em .2em rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
.calc[data-theme="solar"] .calc-keys .k-ac .l-std { font-size: .62em; }
.calc[data-theme="solar"] .calc-keys [data-k="%"], .calc[data-theme="solar"] .calc-keys [data-k="00"] { font-size: 1.22em !important; height: 2.32em; }
.calc[data-theme="solar"] .calc-keys button svg { width: .95em; height: .95em; }
.calc[data-theme="solar"] .k-sub { display: block; position: absolute; left: 0; right: 0; bottom: calc(100% + .32em); font: 900 .27em/1 var(--wide); font-stretch: 125%; letter-spacing: .16em; color: #E3CC4F; text-align: center; }
.calc[data-theme="solar"] .calc-keys button:active, .calc[data-theme="solar"] .calc-keys button.is-down { transform: translateY(.04em); filter: brightness(.9); box-shadow: 0 .03em 0 #1C1D22, 0 .05em .1em rgba(0, 0, 0, .4); }

/* ---------- Register ---------- */
.phone-look[data-look="register"] .phone-screen { background: linear-gradient(180deg, #E6DCC6, #D8CCB2); color: #1C1915; }
.phone-look[data-look="register"] .tabbar { background: rgba(242, 236, 222, .9); border-color: rgba(60, 45, 20, .14); color: #1C1915; box-shadow: 0 .4em 1.2em rgba(70, 55, 30, .14), inset 0 1px 0 rgba(255, 255, 255, .7); }
.phone-look[data-look="register"] .tabbar .on { color: #1C1915; }
.phone-look[data-look="register"] .tabbar > span.on, .phone-look[data-look="register"] .tab-pill { background: rgba(120, 100, 60, .16); }

.calc[data-theme="register"] { --c-bg: transparent; background: transparent; color: #35322C; padding: 0 .62em .3em; }
.calc[data-theme="register"] .lk-head { display: flex; align-items: center; gap: .4em; height: 1.8em; margin-top: .55em; }
.calc[data-theme="register"] .lk-btn { display: grid; place-items: center; flex-shrink: 0; width: 2.3em; height: 1.75em; border-radius: .26em; color: #2B2723; background: linear-gradient(180deg, #C9DAEA, #B3C8DD); box-shadow: inset 0 -.14em 0 #97AFC6, 0 0 0 .06em #3A352C, 0 .1em .16em rgba(60, 45, 20, .35); }
.calc[data-theme="register"] .lk-btn:first-child { display: none; }
.calc[data-theme="register"] .lk-btn-r { display: grid; }
.calc[data-theme="register"] .lk-tape { display: block; flex: 1; min-width: 0; height: 1.66em; padding: .12em .12em .1em; border-radius: .2em; background: #1B1915; box-shadow: inset 0 .08em .14em #000, 0 .05em 0 rgba(255, 255, 255, .5); }
.lk-paper { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; overflow: hidden; padding: 0 .5em; border-radius: .08em; background: linear-gradient(90deg, #E6E3DC, #DEDBD3); font: .38em/1.2 "Dot Matrix", var(--lcd-mono); color: #2A2C33; }
.lk-paper > span { display: flex; gap: .4em; white-space: nowrap; }
.lk-paper > span > span:first-child { overflow: hidden; flex-shrink: 1; min-width: 0; }
.lk-paper > span i { flex: 1; min-width: 1em; overflow: hidden; opacity: .8; }
.lk-paper > span i::before { content: "................................................................"; }
.calc[data-theme="register"] .calc-brand { display: flex; visibility: visible; height: auto; margin: .55em 0 .5em; padding: 0 .1em; }
.calc[data-theme="register"] .lk-brand-reg { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 1.3em; }
.lk-power { display: flex; align-items: center; gap: .9em; font: 800 .3em/1 var(--wide); font-stretch: 125%; letter-spacing: .18em; color: #4A443A; }
.lk-power i { width: 1.6em; height: 1.6em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #D8FFC8, #46E04E 45%, #1E8A2A); box-shadow: 0 0 0 .25em #3F3A31, 0 0 .6em rgba(92, 255, 106, .8); }
.lk-badge { font: 900 .4em/1 var(--wide); font-stretch: 125%; letter-spacing: .2em; padding: .62em 1.5em .55em; border-radius: 999px; color: #37383B; background: linear-gradient(180deg, #FAFAF8, #CFD1D4 45%, #A7AAAE 55%, #E2E3E5); box-shadow: 0 0 0 1px rgba(109, 111, 114, .8), .06em .15em .2em rgba(90, 74, 44, .45); }
.lk-dial { display: flex; align-items: center; gap: .3em; }
.lk-dial span { font: 800 .21em/1.15 var(--wide); font-stretch: 125%; letter-spacing: .1em; color: #4A443A; text-align: right; }
.lk-dial i { width: 1.15em; height: 1.15em; border-radius: 50%; background: radial-gradient(circle, #4A4C50 0 30%, #232427 31% 36%, #C4C6C9 37%, #8E9095 100%); box-shadow: 0 0 0 .07em #3A352C, .04em .08em .12em rgba(60, 45, 20, .5); }

.calc[data-theme="register"] .calc-display {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: end;
  height: 3.95em; margin: .33em; padding: .38em .5em .3em; border-radius: .3em;
  background: linear-gradient(180deg, #10201D, #0A1714 50%, #060F0D); color: #B8FFF0; text-align: right;
  box-shadow: 0 0 0 .33em #221F1A, 0 0 0 .38em rgba(122, 104, 72, .6), 0 .05em 0 .4em rgba(255, 255, 255, .45), inset 0 .15em .5em rgba(0, 0, 0, .7);
  font-family: var(--lcd-mono);
}
.calc[data-theme="register"] .lk-labels { display: flex; grid-area: 1 / 1 / 2 / 3; align-self: start; font: 800 .28em/1 var(--wide); font-stretch: 125%; letter-spacing: .22em; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.lk-labels span:first-child { width: 4.6em; text-align: left; }
.lk-labels span:last-child { margin-left: auto; }
.calc[data-theme="register"] .lk-qd { display: flex; align-items: center; gap: .3em; grid-area: 2 / 1; align-self: center; white-space: nowrap; }
.lk-qty { position: relative; font: .48em/1 "DSEG7 Classic", var(--lcd-mono); }
.lk-qty s { text-decoration: none; color: #0F2A26; }
.lk-qty b { position: absolute; right: 0; top: 0; font-weight: 400; color: #B8FFF0; text-shadow: 0 0 .1em #3FF2C8, 0 0 .4em rgba(31, 214, 176, .45); }
.lk-qd [data-dept] { font: 700 .4em/1 var(--lcd-mono); color: #B8FFF0; text-shadow: 0 0 .1em #3FF2C8, 0 0 .4em rgba(31, 214, 176, .45); }
.lk-qd [data-dept].off { color: #0F2A26; text-shadow: none; }
.calc[data-theme="register"] .d-hist, .calc[data-theme="register"] .d-res { display: none; }
.calc[data-theme="register"] .d-expr { grid-area: 2 / 2; height: auto; min-width: 0; }
.calc[data-theme="register"] .d-expr span { font-size: calc(min(1, var(--fit, 1) * 1.7) * .66em); font-weight: 600; letter-spacing: 0; line-height: 1.25; color: #B8FFF0; text-shadow: 0 0 .08em #3FF2C8, 0 0 .35em rgba(63, 242, 200, .7); }
.calc[data-theme="register"] .lk-seg { display: block; grid-area: 3 / 1 / 4 / 3; align-self: end; font: 1.68em/1 "DSEG7 Classic", var(--lcd-mono); }
.calc[data-theme="register"] .lk-ghost { color: #0F2A26; }
.calc[data-theme="register"] .lk-lit { color: #B8FFF0; text-shadow: 0 0 .05em #3FF2C8, 0 0 .25em rgba(31, 214, 176, .6); }

/* The keyboard deck: quick row and keys share one recess */
.calc[data-theme="register"] .calc-quick, .calc[data-theme="register"] .calc-keys { background: linear-gradient(180deg, #D2C6AC, #CBBFA3); margin-inline: -.3em; }
.calc[data-theme="register"] .calc-quick { gap: .22em; margin-top: .55em; margin-bottom: 0; padding: .3em .3em .26em; border-radius: .45em .45em 0 0; box-shadow: inset 0 .12em .2em rgba(61, 50, 32, .4); }
.calc[data-theme="register"] .calc-quick button, .calc[data-theme="register"] .calc-quick::before {
  height: 2.05em; border-radius: .22em; opacity: 1; text-transform: none;
  font: 700 .74em/1 var(--cond); font-stretch: condensed; letter-spacing: 0;
  color: #29402B; background: linear-gradient(180deg, #CFE6D4, #C3DEC9); border: 0;
  box-shadow: inset 0 -.18em 0 #9EBFA8, 0 0 0 .07em #231F1A, .05em .12em .16em rgba(0, 0, 0, .35);
}
.calc[data-theme="register"] .calc-quick::before { color: #2B3442; background: linear-gradient(180deg, #CADBEA, #BCD0E2); box-shadow: inset 0 -.18em 0 #97AFC6, 0 0 0 .07em #231F1A, .05em .12em .16em rgba(0, 0, 0, .35); }
.calc[data-theme="register"] .calc-keys { gap: .28em; padding: .08em .3em .35em; border-radius: 0 0 .45em .45em; }
.calc[data-theme="register"] .calc-keys button, .calc[data-theme="register"] .calc-keys .k-op {
  --face: #EFE6D2; --wall: #D6CAB0; --bwall: #BFB295;
  aspect-ratio: auto; height: 2.3em; isolation: isolate; border: 0; border-radius: .14em;
  font: 500 1.62em/1 var(--cond) !important; font-stretch: normal; color: #2B2723;
  background: linear-gradient(180deg, var(--wall), var(--bwall));
  box-shadow: 0 0 0 .05em #231F1A, 0 .04em .05em rgba(0, 0, 0, .3);
  /* Labels sit on the face, which is set back by the walls (thicker at the bottom), as in the app. */
  padding: .14em .25em .46em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
}
/* A keycap like the app's: the face set into four sloped walls (light top, sides, a deep dark bottom), with
   mitred seams at the corners. The walls are borders of different colors, which meet on the diagonal. */
.calc[data-theme="register"] .calc-keys button::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: .14em; border-style: solid; border-width: .14em .25em .46em;
  border-color: color-mix(in srgb, var(--face) 45%, var(--wall)) var(--wall) var(--bwall) var(--wall); }
.calc[data-theme="register"] .calc-keys button::before { content: ""; position: absolute; inset: .14em .25em .46em; z-index: -1; border-radius: .1em; background: linear-gradient(180deg, color-mix(in srgb, var(--face) 70%, #fff), var(--face) 45%); box-shadow: 0 .02em .03em rgba(255, 255, 255, .5) inset; }
.calc[data-theme="register"] .k-ac { --face: #F0B9A6 !important; --wall: #D29480 !important; --bwall: #B97A66 !important; }
.calc[data-theme="register"] [data-k="del"], .calc[data-theme="register"] [data-k="%"] { --face: #BCD0E2 !important; --wall: #97AFC6 !important; --bwall: #7F98B1 !important; }
.calc[data-theme="register"] .k-op { --face: #F2C66A !important; --wall: #D4A447 !important; --bwall: #B98A30 !important; font-weight: 700 !important; }
.calc[data-theme="register"] .l-std, .calc[data-theme="register"] [data-k="del"] svg { display: none; }
.calc[data-theme="register"] .l-reg { display: block; font: 700 .52em/1 var(--cond); font-stretch: condensed; letter-spacing: .01em; }
.calc[data-theme="register"] [data-k="="] .l-reg { font-size: .5em; }
.calc[data-theme="register"] [data-k="="] .l-eq { font-size: .8em; line-height: .8; }
/* TOTAL and = sit higher on the face, leaving its bottom-right corner to "COPY". */
.calc[data-theme="register"] .calc-keys [data-k="="] { padding-bottom: .74em; gap: .02em; }
/* "CLR" and "COPY" sit inside the face, at its bottom-right corner (offsets in the label's own em: .25 of the key's). */
.calc[data-theme="register"] .k-sub { display: block; position: absolute; right: 1.6em; bottom: 2.25em; font: 500 .25em/1 var(--cond); color: rgba(43, 39, 35, .7); }
.calc[data-theme="register"] .calc-keys button:active, .calc[data-theme="register"] .calc-keys button.is-down { transform: translateY(.03em); filter: brightness(.95); }

/* ---------- iPhone Duo ---------- */
.duo-toggle {
  min-height: 40px; min-width: 96px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: 600 .92rem/1 var(--font-body);
  transition: border-color .2s, background-color .2s;
}
.duo-toggle:hover { border-color: var(--ink-3); }
.duo-toggle[hidden] { display: none; }
.duo-toggle { display: inline-grid; align-items: center; justify-items: center; }
.duo-lbl { grid-area: 1 / 1; white-space: nowrap; }
.duo-stage.is-tappable .duo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.duo-toggle:not([data-state="folded"]) .duo-lbl[data-when="folded"], .duo-toggle[data-state="folded"] .duo-lbl[data-when="open"] { visibility: hidden; }
.touch-duo .duo-toggle { order: 3; }
.touch-duo .duo-stage { margin-top: auto; }
.touch-duo .duo-toggle { margin-bottom: auto; }

.duo-stage { position: relative; width: 100%; max-width: 760px; container-type: inline-size; perspective: 2200px; perspective-origin: 50% 30%; padding: 3% 4% 6%; }
/* State: --f is 0 open, 1 folded. Each state carries the timings used when moving into it. */
.duo {
  --f: 0; --t: 1.2em; --frame: #0B0B0D; --bz: .8em;
  /* How far the left page reaches past the fold: at least 1.5px, so no hairline of the card shows between pages. */
  --lap: max(.06em, 1.5px);
  --ease: cubic-bezier(.62, 0, .28, 1);
  /* Opening: the cover dims and blurs, a blurred copy of it stretches across the inner screen,
     the blurred wide layout takes over, then the sharp layout resolves as the hinge lands. */
  --rot: 1.2s; --d-rot: .05s; --d-spine: .9s;
  --t-morph-x: .8s; --d-morph-x: .1s; --t-morph-o: .5s; --d-morph-o: .72s;
  --t-wblur: .4s; --d-wblur: .42s; --t-sharp: .5s; --d-sharp: .92s; --t-scale: .8s; --d-scale: .55s;
  --t-cblur: .22s; --d-cblur: 0s;
  position: relative; width: 100%; aspect-ratio: 44 / 31.4; font-size: calc(100cqw / 44);
  transform-style: preserve-3d;
  transform: rotateX(calc(4deg + var(--f) * 4deg)) rotateY(calc(var(--f) * -22deg)) translateX(calc(var(--f) * -25%));
  transition: transform var(--rot) var(--ease) var(--d-rot);
}
/* Folding: the sharp layout blurs, the blurred cover copy squeezes back onto the right page, the screen
   goes dark as the halves meet, then the cover screen sharpens in. */
.duo[data-state="folded"] {
  --f: 1; --rot: 1.1s; --d-rot: .25s; --d-spine: 0s;
  --t-morph-x: .85s; --d-morph-x: .38s; --t-morph-o: .3s; --d-morph-o: .12s;
  --t-wblur: .3s; --d-wblur: .3s; --t-sharp: .3s; --d-sharp: 0s; --t-scale: .4s; --d-scale: 0s;
  --t-cblur: .4s; --d-cblur: 1.36s;
}
@media (prefers-reduced-motion: no-preference) { .js .duo:not([data-state]) { --f: 1; } }

.duo-half { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; }
.duo-r { right: 0; }
/* iPhone Safari 26 drops a page's screen (leaving it black) once its turn ends at an exact 0deg, and the right page's
   too with no 3D transform at all. An invisible .01deg keeps both in 3D at rest; iOS 27 doesn't need it. */
.duo-l { left: 0; transform-origin: 100% 50%; transform: rotateY(calc(var(--f) * 180deg + .01deg)); transition: transform var(--rot) var(--ease) var(--d-rot); }
.duo-r { transform: rotateY(.01deg); }
/* The page's dark inside, midway through its thickness: if the switch between its two faces lands a little late
   (as on iPhone), the page shows a dark screen for a moment instead of the card through it. */
.duo-l::before { content: ""; position: absolute; inset: 0; border-radius: 2.8em 0 0 2.8em; background: var(--frame); transform: translateZ(calc(var(--t) / -2)); }
.duo-front, .duo-back, .duo-cover { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* WebKit keeps drawing a turned-away face whose screen has its own layer (the clipped, animated screen), so
   backface-visibility alone left the inner screen showing over the cover when folded. Each face of the turning
   page is also hidden outright when it is edge-on: 46.25% of the turn on this easing curve. Delays come from the target state. */
.duo-l .duo-front { visibility: visible; transition: visibility 0s linear calc(var(--d-rot) + var(--rot) * .4625); }
.duo-l .duo-cover { visibility: hidden; transition: visibility 0s linear calc(var(--d-rot) + var(--rot) * .4625); }
.duo[data-state="folded"] .duo-l .duo-front { visibility: hidden; }
.duo[data-state="folded"] .duo-l .duo-cover { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .js .duo:not([data-state]) .duo-l .duo-front { visibility: hidden; }
  .js .duo:not([data-state]) .duo-l .duo-cover { visibility: visible; }
}
.duo-front { --rim: #55565C; --n: max(1em, 10px); --rw: calc(var(--n) * .16); background: var(--frame); }
/* The frame's metal band, on the three outer sides of each half (not along the fold). */
.duo-l .duo-front { right: calc(-1 * var(--lap)); border-radius: 2.8em 0 0 2.8em; box-shadow: inset 0 var(--rw) 0 var(--rim), inset 0 calc(-1 * var(--rw)) 0 var(--rim), inset var(--rw) 0 0 var(--rim), inset 0 calc(var(--rw) + .04em) 0 rgba(255, 255, 255, .06), inset calc(var(--rw) + .04em) 0 0 rgba(255, 255, 255, .04); }
.duo-r .duo-front { border-radius: 0 2.8em 2.8em 0; box-shadow: inset 0 var(--rw) 0 var(--rim), inset 0 calc(-1 * var(--rw)) 0 var(--rim), inset calc(-1 * var(--rw)) 0 0 var(--rim), inset 0 calc(var(--rw) + .04em) 0 rgba(255, 255, 255, .06), inset calc(-1 * var(--rw) - .04em) 0 0 rgba(255, 255, 255, .04); }
/* Hinge notches, as on the real Duo: where the fold meets the top and bottom edges the metal band bends inward
   in a small rounded dip, creased at the fold. The dip shows the card behind it. Each half draws the whole notch
   centred on the fold and clips it to its own side, so the halves match while open and part cleanly when folding. */
.duo-front::before, .duo-front::after { content: ""; position: absolute; z-index: 3; height: calc(var(--n) * .4); pointer-events: none;
  background: var(--notch-band) 0 0 / calc(var(--n) * .68) 100% no-repeat, var(--surface);
  -webkit-mask: var(--notch-shape) 0 0 / calc(var(--n) * .68) 100% no-repeat; mask: var(--notch-shape) 0 0 / calc(var(--n) * .68) 100% no-repeat; }
.duo-front::before { top: 0; }
.duo-front::after { bottom: 0; transform: scaleY(-1); }
/* The left page overlaps the fold (--lap); its half of the notch covers that strip too. */
.duo-l .duo-front::before, .duo-l .duo-front::after { right: 0; width: calc(var(--n) * .34 + var(--lap)); }
.duo-r .duo-front::before, .duo-r .duo-front::after { left: 0; width: calc(var(--n) * .34); background-position: 100% 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.duo {
  --notch-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 40' preserveAspectRatio='none'%3E%3Cpath fill='%2355565C' d='M0 0H8C16 0 24 6 29 11L34 18L39 11C44 6 52 0 60 0H68V16H66C59 16 57 19 55 24C53 30 52 34 48 34H20C16 34 15 30 13 24C11 19 9 16 2 16H0Z'/%3E%3Cpath d='M34 18V34' stroke='%2344454B' stroke-width='1.2'/%3E%3C/svg%3E");
  --notch-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H68V16H66C59 16 57 19 55 24C53 30 52 34 48 34H20C16 34 15 30 13 24C11 19 9 16 2 16H0Z'/%3E%3C/svg%3E");
}
.duo-back { transform: translateZ(calc(-1 * var(--t))) rotateY(180deg); border-radius: 2.8em 0 0 2.8em; background: linear-gradient(135deg, #2A2B30, #141417 60%, #1E1F23); }
.duo-clip { position: absolute; top: var(--bz); bottom: var(--bz); overflow: hidden; background: #000; }
.duo-l .duo-clip { left: var(--bz); right: 0; }
.duo-r .duo-clip { left: 0; right: var(--bz); }
/* The screen's rounded corners are bezel-coloured corner pieces drawn on top, not a rounded clip: inside the 3D
   fold, iPhone Safari drops a rounded clip's layered content and leaves the screen black. A square clip is safe. */
.duo-clip::before { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; --g: transparent 2em, var(--frame) calc(2em + .5px); }
.duo-l .duo-clip::before { background: radial-gradient(circle at 2em 2em, var(--g)) top left / 2em 2em no-repeat, radial-gradient(circle at 2em 0, var(--g)) bottom left / 2em 2em no-repeat; }
.duo-r .duo-clip::before { background: radial-gradient(circle at 0 2em, var(--g)) top right / 2em 2em no-repeat, radial-gradient(circle at 0 0, var(--g)) bottom right / 2em 2em no-repeat; }
.duo-screen { position: absolute; top: 0; bottom: 0; left: 0; width: calc(44em - 2 * var(--bz)); }
/* Three layers per page, all animated with transform and opacity only. The blurred ones are pre-blurred
   copies (a fixed filter), so no blur radius is animated: blurred wide layout, blurred cover copy, sharp layout. */
/* Explicit order: WebKit depth-sorts these layers inside the rotating page, so page order alone isn't enough.
   No will-change: layers held on the GPU at rest are what iPhone Safari loses inside the fold. */
.duo-screen > .duo-wide-blur { z-index: 1; }
.duo-screen > .duo-morph { z-index: 2; }
.duo-screen > .duo-sharp { z-index: 3; }
.duo-sharp { opacity: calc(1 - var(--f)); transform: scale(calc(1 - var(--f) * .02)); transition: opacity var(--t-sharp) ease var(--d-sharp), transform var(--t-scale) cubic-bezier(.2, .7, .2, 1) var(--d-scale); }
.duo-wide-blur { filter: blur(1.3em) saturate(1.35); opacity: calc(1 - var(--f)); transform: scale(calc(1.06 - var(--f) * .03)); transition: opacity var(--t-wblur) ease var(--d-wblur), transform var(--t-scale) cubic-bezier(.2, .7, .2, 1) var(--d-scale); }
.duo-screen > .duo-morph { left: 50%; filter: blur(1.15em) saturate(1.35); opacity: var(--f); transform-origin: 100% 50%; transform: scale(calc(2 - var(--f)), calc(1.04 - var(--f) * .04)); transition: opacity var(--t-morph-o) ease var(--d-morph-o), transform var(--t-morph-x) cubic-bezier(.45, 0, .2, 1) var(--d-morph-x); }
/* Shifted with a transform, not a negative left: iPhone Safari 26 stops drawing a screen offset that way inside
   the 3D page once its animations end, leaving the right page black. */
.duo-r .duo-screen { transform: translateX(calc(var(--bz) - 22em)); }
/* The inner display is dark while closed and fades in late in the opening. The two veils are switched by state
   selectors with fixed timings, not var(--f): older iPhone Safari doesn't update a pseudo-element when an
   ancestor's custom property changes, so the veil stayed black over the open screen. */
.duo-clip::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; transition: opacity .28s ease .04s; pointer-events: none; }
.duo[data-state="folded"] .duo-clip::after { opacity: 1; transition: opacity .28s ease 1.05s; }
@media (prefers-reduced-motion: no-preference) { .js .duo:not([data-state]) .duo-clip::after { opacity: 1; } }
/* Before the script runs (or without it), the open screen spans both pages in one piece. */
.duo:not(.is-split) .duo-l .duo-clip { right: auto; width: calc(44em - 2 * var(--bz)); border-radius: 2em; z-index: 2; }

/* Thickness: outline faces built by duo.js, a back plate, the hinge spine and the buttons */
.duo-e { position: absolute; left: 0; top: 0; height: var(--t); transform-origin: 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, .28)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), var(--c); }
/* iPhone Safari 26 stops drawing the right page's screen while its edge faces (planes at right angles to it) are
   in the scene as the page opens; hiding them later doesn't bring it back. The right page doesn't move, so its
   edges leave as an opening starts and return as a fold starts. */
.duo[data-state="open"] .duo-r .duo-e { display: none; }
.duo-spine { position: absolute; left: 50%; top: .35em; bottom: .35em; width: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--f) * 90deg)); visibility: hidden; transition: transform var(--rot) var(--ease) var(--d-rot), visibility 0s linear var(--d-spine); }
.duo[data-state="folded"] .duo-spine { visibility: visible; }
@media (prefers-reduced-motion: no-preference) { .js .duo:not([data-state]) .duo-spine { visibility: visible; } }
.duo-spine i { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 8% 92%, rgba(0, 0, 0, .3)), var(--c); }
.duo-vol, .duo-side { position: absolute; background: linear-gradient(180deg, #4A4C52, #222327); border-radius: .2em; transform: translateZ(calc(var(--t) / -2)); }
.duo-vol { top: -.24em; left: 9.2em; width: 2.9em; height: .3em; }
.duo-vol2 { left: 12.7em; }
.duo-side { right: -.24em; top: 8.6em; width: .3em; height: 5em; background: linear-gradient(90deg, #4A4C52, #222327); }

/* The cover screen sits on the back of the left half: it faces you when the device is shut. */
.duo-cover { transform: translateZ(calc(-1 * var(--t))) rotateY(180deg); background: var(--frame); border-radius: .5em 3em 3em .5em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.duo-hinge { position: absolute; left: 0; top: .5em; bottom: .5em; width: .7em; border-radius: .3em; background: linear-gradient(90deg, #2E2E31, #444448 60%, #1C1C1E); }
.duo-cover-screen.dz-solar { inset: .72em .62em .7em 1.15em; }
.duo-cover-screen { position: absolute; border-radius: .3em 2.35em 2.35em .3em; overflow: hidden; }
.duo-cover-blur { z-index: 5; filter: blur(1em) saturate(1.3); opacity: calc(1 - var(--f)); transition: opacity var(--t-cblur) ease var(--d-cblur); }
.duo-cover-screen::after { content: ""; position: absolute; inset: 0; z-index: 6; background: #000; opacity: .5; transition: opacity .32s ease .1s; }
.duo[data-state="folded"] .duo-cover-screen::after { opacity: 0; transition: opacity .3s ease 1.28s; }
@media (prefers-reduced-motion: no-preference) { .js .duo:not([data-state]) .duo-cover-screen::after { opacity: 0; } }
.duo-cam { position: absolute; top: 1.15em; right: 1.15em; width: 1.5em; height: 1.5em; border-radius: 50%; background: #000; z-index: 3; }

/* Contact shadow: long and soft when open, short and darker when shut */
.duo-shadow { position: absolute; left: 50%; bottom: 3%; width: calc(84% - var(--f, 0) * 38%); height: 7%; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(28, 25, 21, .42), rgba(28, 25, 21, .14) 60%, transparent); filter: blur(4px); transition: width 1.15s cubic-bezier(.62, 0, .28, 1) .08s; }
.duo-stage:has(.duo[data-state="folded"]) .duo-shadow { width: 44%; transition-delay: .25s; }
@media (prefers-reduced-motion: no-preference) { .js .duo-stage:has(.duo:not([data-state])) .duo-shadow { width: 44%; } }
@media (prefers-reduced-motion: reduce) { .duo, .duo *, .duo *::after, .duo-shadow { transition: none !important; } }

/* The app on the Duo: Solar look, history beside the calculator */
.dz-solar { position: absolute; inset: 0; display: flex; color: #F4F4F0; background: linear-gradient(180deg, #646A80, #545A6E); font-family: var(--font-ui); }
/* The open Duo lying flat, as the app has it: the menu in about a third of the display (369 of 951 pt, 1em = 22.4 pt), the rows at their real size. */
.dz-side { width: 16.45em; flex-shrink: 0; display: flex; flex-direction: column; padding: .55em .7em; background: #1F2330; overflow: hidden; }
.dz-top { display: flex; justify-content: flex-end; margin-bottom: .5em; }
.dz-trio { display: flex; align-items: center; gap: 1.05em; height: 2em; padding: 0 .8em; border-radius: 1em; background: #2B303D; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 .1em .3em rgba(0,0,0,.35); }
.dz-trio svg { width: 1em; height: 1em; fill: none; stroke: #E8A23C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dz-trio .dz-flag { width: 1.05em; height: .64em; stroke: none; border-radius: .08em; }
.dz-search { display: flex; align-items: center; gap: .4em; height: 2.2em; flex-shrink: 0; margin-bottom: .55em; padding: 0 .75em; border-radius: 1.1em; background: #272B37; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font-size: .72em; color: #8E93A1; white-space: nowrap; }
.dz-search svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.dz-nav { display: flex; align-items: center; gap: .55em; height: 2.9em; flex-shrink: 0; padding: 0 .5em; border-radius: 1.45em; font: 500 .8em/1 var(--font-ui); color: #F2F2F5; white-space: nowrap; }
.dz-nav.on { background: rgba(255,255,255,.13); }
.dz-nav i { display: grid; place-items: center; width: 1.8em; height: 1.8em; flex-shrink: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)), var(--c); }
.dz-nav svg { width: .86em; height: .86em; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.dz-navsec { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: .95em .5em .45em; font: 500 .8em/1 var(--font-ui); color: #8E93A1; white-space: nowrap; }
.dz-navsec svg { width: 1em; height: 1em; fill: none; stroke: #C9CCD6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dz-main { flex: 1; min-width: 0; display: flex; justify-content: center; }
/* Beside the menu: the calculator centred between the menu and the side rail, its width setting the crease between the first two columns of keys. */
.dz-side + .dz-main { padding: 0 4.3em 0 0; }
.dz-rail { position: absolute; top: 0; bottom: 0; right: 0; width: 4.3em; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.05em 0 1.05em; }
.dz-status { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.dz-status b { font: 700 .72em/1 var(--font-ui); color: #fff; }
.dz-wifi { width: .95em; height: .72em; fill: #fff; }
.dz-tabs { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .1em; border-radius: 1.1em; background: rgba(130, 137, 160, .5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 .2em .6em rgba(0,0,0,.2); }
.dz-tabs i { display: grid; place-items: center; width: 1.95em; height: 2.15em; border-radius: 1em; color: #fff; }
.dz-tabs i.on { background: rgba(62, 68, 92, .85); }
.dz-tabs svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Static Solar calculator for the Duo (open: 4 columns; cover: 5 columns in 4 rows) */
.dz-calc { display: flex; flex-direction: column; width: 13.7em; padding-top: 1.05em; }
.dz-head { display: flex; align-items: center; justify-content: space-between; height: 1.72em; }
.dz-btn { width: 2.25em; height: 1.65em; }
.dz-panel { width: 8.1em; height: 1.3em; }
.dz-brand { margin: .6em 0 .55em; padding-left: .2em; }
.dz-brand b { font-size: .5em; } .dz-brand i { font-size: .45em; } .dz-brand em { font-size: .36em; }
.dz-lcd { height: 3.6em; margin: .32em .32em .5em; }
.dz-lcd-top { grid-area: 1 / 1 / 2 / 3; display: flex; justify-content: space-between; align-items: center; }
.dz-ann { font-size: .3em; }
.dz-last { font: 500 .45em/1 var(--lcd-mono); color: rgba(32, 38, 30, .85); }
.dz-lcd .dz-seg { grid-area: 3 / 1 / 4 / 3; font: 1.28em/1 "DSEG7 Classic Italic", var(--lcd-mono); color: #20261E; }
.dz-rates { font-size: .34em; margin: .25em 0 .55em; }
.dz-quick { display: grid; grid-template-columns: .72fr 1fr 1fr 1fr 1fr; gap: .2em; }
.dz-quick i { display: grid; place-items: center; height: 1.42em; border-radius: .22em; font: 800 .46em/1 var(--wide); font-stretch: 125%; font-style: normal; }
.dz-quick i { height: auto; aspect-ratio: auto; padding: .95em 0; }
.dz-quick i:last-child { font-family: var(--font-ui); font-stretch: 100%; font-weight: 700; }
.dz-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em .3em; margin-top: .8em; }
.dz-keys i { position: relative; display: grid; place-items: center; height: 2.3em; border-radius: .2em; font: 800 .98em/1 var(--wide); font-stretch: 125%; font-style: normal; }
.dz-keys i { height: auto; padding: .7em 0; }
.dz-keys .dz-ac { font-size: .62em; padding: 1.32em 0; background: linear-gradient(180deg, #D0616F, #C05562); box-shadow: 0 .1em 0 #8E3A45, 0 .16em .3em rgba(0,0,0,.42); }
.dz-keys svg { width: .7em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dz-keys [data-sub]::before { content: attr(data-sub); position: absolute; left: 0; right: 0; bottom: calc(100% + .3em); font: 900 .26em/1 var(--wide); font-stretch: 125%; letter-spacing: .16em; color: #E3CC4F; text-align: center; }
.dz-wide { width: 15.1em; padding-top: 3.05em; font-size: 1.06em; }
.dz-wide .dz-keys i { padding: .84em 0; }
.dz-wide .dz-keys .dz-ac { padding: 1.6em 0; }
.dz-wide .dz-keys { grid-template-columns: repeat(5, 1fr); gap: .52em .26em; }
.dz-open { padding-top: .55em; font-size: 1.325em; }
.dz-open .dz-brand { margin: .4em 0 .35em; }
.dz-open .dz-lcd { height: 3.4em; margin-bottom: .3em; }
.dz-open .dz-rates { margin: .15em 0 .4em; }
.dz-open .dz-keys { margin-top: .5em; row-gap: .6em; }
.dz-open .dz-keys i { padding: .75em 0; }
.dz-open .dz-keys .dz-ac { padding: 1.47em 0; }
.dz-wide .dz-quick { grid-template-columns: .72fr 1fr 1fr 1fr 1fr; }
:is(.duo-cover-screen, .duo-morph) .dz-main { justify-content: flex-start; padding-left: .55em; }
:is(.duo-cover-screen, .duo-morph) .dz-rail { width: 3.6em; padding-top: 2.9em; justify-content: flex-start; }
:is(.duo-cover-screen, .duo-morph) .dz-tabs { margin-top: auto; }
:is(.duo-cover-screen, .duo-morph) .dz-status { margin-bottom: auto; }
@media (max-width: 719px) { .touches .touch-duo { padding-inline: 12px; } .duo-stage { padding-inline: 1%; } }
/* Beside the phone (720–1179px) the switcher stacks into a short vertical list, so it never runs under the phone. */
@media (min-width: 720px) and (max-width: 1179px) {
  .touches .touch-looks .look-seg { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 240px); gap: 2px; padding: 4px; border-radius: 22px; }
  .touches .touch-looks .look-seg button { justify-content: flex-start; width: 100%; padding: 0 14px 0 10px; border-radius: 18px; }
  .touches .touch-looks .look-seg button:focus-visible { border-radius: 18px; }
}
/* iPhone Duo side status: battery ring open at the bottom, Wi-Fi inside, signal dots below (as on the device). */
.dz-status { gap: .42em; }
.dz-wifi { width: 1.62em; height: 1.86em; fill: #fff; overflow: visible; }
.dz-wifi .dz-ring { fill: none; stroke: #fff; stroke-width: 2.7; stroke-linecap: round; }
.dz-wifi .dz-dots { fill: #fff; opacity: .38; }
.dz-wifi .dz-ring { stroke-width: 3; }
.dz-wifi .dz-dots { opacity: .5; }
/* Under 315px: the look names alone (no swatches) so all three fit on one row; the looks phone scales to the card. */
@media (max-width: 339px) {
  .themes-stage .phone { --phone-font: min(13px, calc((100vw - 74px) / 19)); }
  .themes-stage { height: calc(39.5 * min(13px, calc((100vw - 74px) / 19))); }
}
@media (max-width: 314px) {
  .look-seg button { padding: 0 8px; font-size: .78rem; }
  .look-seg .lk-sw { display: none; }
}
@media (max-width: 299px) { .touches .touch { padding-inline: 14px; } .look-seg button { font-size: .76rem; } }