/* Both languages share a readable type scale. Small copy still carries meaning. */
.audio-heading>p{font-size:clamp(26px,2.5vw,34px);line-height:1.4}
.audio-heading .audio-body{font-size:clamp(20px,1.7vw,24px);line-height:1.6;max-width:32ch}
.audio-heading .audio-footnote{font-size:18px;line-height:1.7;max-width:36ch;margin-top:28px}
.tool-info p,.module-explanation p,.ink-proof p,.more-section p{font-size:17px;line-height:1.65}
.customize-copy .small-copy,.together-caption p,.together-caption p:first-child{font-size:17px;line-height:1.65}
.tool-name small,.tool-facts li,.module-explanation .module-fineprint,.x-steps li,
.custom-palette button,.custom-paper>span,.order-name,.module-more,.module-opening>span,
.note-meta,.note-instruction,.recording-meta,.audio-caption,.footer-bottom,
.journey-footer,.journey-footer button,.studio-caption,.studio-caption button,
.layout-page>span:first-child,.layout-pagination,.layout-pagination button,.paper-selector,
.paper-selector button,.infinite-hint,#reset-map{font-size:15px;line-height:1.5}
.order-status{font-size:15px!important;line-height:1.6;max-width:none}
.note-lines .note-timestamp,#audio-time{font-size:14px}
.note-lines .note-timestamp{min-width:42px}
.note-lines button{font-size:25px;gap:14px}
.note-lines button>span:last-child{min-width:0;hyphens:auto;overflow-wrap:anywhere}
.note-lines button:not(.active){opacity:.75}
.audio-section{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.audio-artifact{min-width:0}
.audio-note{padding-bottom:56px}
.recorded-moment{margin:-24px 0 0 18%;padding:24px}
#replay-transcript{font-size:20px;line-height:1.6}
.recording-meta{flex-wrap:wrap}
.audio-caption{color:var(--paper)}
.canvas-hint,.rail-pager{font-size:14px}
.custom-palette button{flex:1;min-width:0}
.palette-strip{width:min(100%,100px)}
.layout-options button{font-size:18px}
.layout-options small,.module-menu small{font-size:12px}
#layout-description{font-size:16px;line-height:1.5;max-width:none;padding-top:16px}
.layout-stage{height:540px}
/* Start at the top of the first sheet, then let visitors scroll the stack. */
.layout-stage[data-mode=scroll] .layout-pages{display:flex;flex-direction:column;align-items:center;gap:18px;inset:0 0 72px;overflow-y:auto;overscroll-behavior:contain;padding:16px 0 24px;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
.layout-stage[data-mode=scroll] .layout-page{position:relative;left:auto;top:auto;transform:none;flex:none}
.layout-page{width:min(320px,88%);left:calc(50% - min(160px,44%));height:370px}
.layout-page strong{font-size:42px;overflow-wrap:normal}
.layout-pagination{bottom:78px}
/* A little more room for the longest voice, including Sam's name tag. */
.together-heading .voices{min-width:0;margin-right:64px}
.voice:after{font-size:14px}
@media(min-width:1100px){
  .together-heading{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
  .together-heading h2{font-size:clamp(48px,4.4vw,72px)}
  .together-heading .voices{margin-right:48px}
  .voice:nth-child(3){margin-left:-72px;width:max-content;max-width:calc(100% + 72px)}
}
/* Product previews need readable labels too, with enough height to hold them. */
.module-appbar,.module-panel-title,.note-subject,.note-conclusion>span,.note-conclusion p,
.calculation-entry,.calculation-entry small,.calculation-result,.task-section-label,
.x-task strong,.x-task span,.calendar-modes,.x-day .calendar-date span,.x-card small,
.x-due,.x-zen-bar span,.x-zen-foot,.x-zen-switch,.x-zen-note{font-size:14px;line-height:1.45}
.x-tag{font-size:14px;max-width:calc(100% - 24px);white-space:normal;text-align:center}
.module-pane .product-module{height:560px}
.module-panel-title{gap:8px}
.module-panel-title small{font-size:12px}
.note-subject{letter-spacing:.02em}
.function-graph text{font-size:14px}
.x-card{height:auto;min-height:140px;overflow-wrap:anywhere}
.x-card b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
.x-slot{height:140px}
.x-zen-page{overflow-y:auto}
@media(max-width:700px){
  .brush-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brush-catalog button{font-size:14px;white-space:normal;min-height:76px}
  .module-menu button{font-size:14px}
  .module-menu{gap:10px 6px}
  .module-pane .product-module{height:640px}
  .module-appbar{padding:0 16px;gap:12px}
  .module-appbar>span{font-size:13px;text-align:center}
  .x-tasks .task-section-label{font-size:13px}
  .x-hand-task{font-size:19px}
  .x-zen-page{left:56px;right:46px;padding:16px 12px;bottom:68px}
  .x-zen-page .x-hand{font-size:18px}
  .x-zen-note{bottom:45px;max-width:calc(100% - 28px);white-space:normal}
  .x-zen-foot{font-size:13px}
  .x-zen-switch{min-height:40px}
  .x-week{padding:0 8px;gap:0}
  .x-day{padding:0 5px}
  .x-card{padding:12px 7px;min-height:200px}
  .x-card b,.x-card small{font-size:14px}
  .x-slot{height:200px}
  .calendar-topline{flex-wrap:wrap}
  .calendar-modes{margin-top:0}
  .layout-options{gap:10px;flex-wrap:wrap;justify-content:center}
  .layout-options button{font-size:15px}
  .layout-stage{height:520px}
  .layout-page strong{font-size:39px}
  .layout-page{height:355px}
  .layout-stage[data-mode=scroll] .layout-pages{bottom:90px}
  .layout-pagination{bottom:90px}
  .paper-selector>div{flex-wrap:wrap}
  .note-meta{flex-wrap:wrap}
  .audio-note{padding-bottom:28px}
  .note-lines button{font-size:22px;padding:12px 4px;gap:10px}
  .recorded-moment{margin:20px 0 0;padding:20px}
  .audio-heading .audio-footnote{font-size:18px}
  .audio-heading h2{font-size:clamp(58px,20vw,78px)}
  .audio-player{flex-wrap:wrap}
  .journey-footer{gap:20px;align-items:end}
  .journey-footer>span{max-width:58%}
  .journey-footer button{white-space:normal;text-align:right}
  .canvas-hint{font-size:13px}
  .studio-caption button{font-size:14px;min-height:36px}
  .together-heading .voices{margin-right:0;gap:34px}
  .together-heading h2{font-size:clamp(38px,12vw,55px)}
  .voice{font-size:25px}
  .voice:after{font-size:13px;top:-23px}
  .footer-bottom{font-size:14px}
}
@media(max-width:360px){
  .site-menu{padding-left:14px}
  .site-menu .nw{font-size:20px}
  .module-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .module-menu small{right:8px}
}