html,body { width:100%; height:100%; overflow:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
#peculiar-splash[data-screen] {
  box-sizing:border-box; width:100%; height:100%; padding:0;
  --screen-safe-top:0px; --screen-safe-right:0px; --screen-safe-bottom:0px; --screen-safe-left:0px;
  --screen-control-size:47px; --screen-icon-size:24px;
  --screen-gutter:clamp(23px,2.8cqi,40px);
  --screen-tool-top:clamp(18px,1.6cqi,24px);
}
#peculiar-splash[data-screen] .splash-board {
  box-sizing:border-box; width:100%; height:100%; max-width:none; margin:0;
  grid-template-rows:minmax(0,1fr) auto; border:0; border-radius:0;
}
#peculiar-splash[data-screen] .splash-board .splash-main {
  display:block; box-sizing:border-box; min-height:0; min-width:0;
  padding-top:calc(var(--screen-safe-top) + var(--screen-tool-top) + var(--screen-control-size) + 12px);
  padding-left:calc(var(--screen-safe-left) + var(--screen-gutter));
  padding-right:calc(var(--screen-safe-right) + var(--screen-gutter));
  /* The painted outline, shadow and descenders can extend past the line box. */
  padding-bottom:clamp(27px,3.1cqi,44px);
}
#peculiar-splash[data-screen] .screen-card-content { position:absolute; display:grid; min-width:0; transform-origin:top left; align-content:center; }
/* Centre the actual headline line box, rather than stretching an h1 to the
   full grid row and leaving its letters at the top of a mostly empty box. */
#peculiar-splash[data-screen] .splash-board .splash-hero { align-content:center; }
#peculiar-splash[data-screen] #splash-word { display:flex; align-items:baseline; }
#peculiar-splash[data-screen] .splash-letter { flex:none; }
/* "pretty" line balancing chooses different breaks in Safari and Chromium.
   Ordinary wrapping keeps the shared copy's width and reading order stable. */
#peculiar-splash[data-screen] :is(.splash-copy p,.splash-copy blockquote,.splash-question p) { text-wrap:wrap; }
#peculiar-splash[data-screen] :is(#splash-example,.splash-meaning,.splash-question p) { min-width:0; }
#peculiar-splash[data-screen] .splash-bubble { grid-template-columns:minmax(0,1fr) var(--example-speaker-size,44px); }
#peculiar-splash[data-screen] .splash-sound-small {
  width:var(--example-speaker-size,44px); height:var(--example-speaker-size,44px);
  min-width:0; min-height:0;
}
#peculiar-splash[data-screen] .splash-sound-small svg { width:calc(var(--example-speaker-size,44px) * 0.4773); }
#peculiar-splash[data-screen] [data-screen-lines] { white-space:nowrap; }
#peculiar-splash[data-screen] .splash-board .splash-question {
  padding-left:calc(var(--screen-gutter) + var(--screen-safe-left));
  padding-right:calc(var(--screen-gutter) + var(--screen-safe-right));
  padding-bottom:calc(11px + var(--screen-safe-bottom));
}
#peculiar-splash[data-screen] :is(.splash-calendar-open,.splash-word-tools .splash-sound) {
  width:var(--screen-control-size); height:var(--screen-control-size); min-width:var(--screen-control-size); min-height:var(--screen-control-size);
}
#peculiar-splash[data-screen] :is(.splash-calendar-open,.splash-word-tools .splash-sound) svg { width:var(--screen-icon-size); height:var(--screen-icon-size); }
#peculiar-splash[data-screen] .splash-main .splash-calendar-open { top:calc(var(--screen-tool-top) + var(--screen-safe-top)); left:calc(var(--screen-gutter) + var(--screen-safe-left)); }
#peculiar-splash[data-screen] .splash-main .splash-word-tools { top:calc(var(--screen-tool-top) + var(--screen-safe-top)); right:calc(var(--screen-gutter) + var(--screen-safe-right)); }
#peculiar-splash[data-screen] .splash-board .week-art { width:min(97%,max(390px,40cqi)); }
#peculiar-splash[data-screen] .splash-board[data-layout="shine"] .gleam-art { width:min(96%,max(285px,29cqi)); }
#peculiar-splash[data-screen] .splash-board[data-view="calendar"] { grid-template-rows:minmax(0,1fr); }
#peculiar-splash[data-screen] .splash-board .splash-calendar-view { box-sizing:border-box; min-height:0; height:100%; padding:0; overflow:hidden; }
#peculiar-splash[data-screen] .splash-calendar-inner { position:absolute; box-sizing:border-box; margin:0; transform-origin:top left; }
#peculiar-splash[data-screen] dialog { max-height:calc(100vh - var(--screen-safe-top) - var(--screen-safe-bottom) - 24px); }
@container (min-width:650px) {
  /* Full-width titles share the height with an illustrated row. */
  #peculiar-splash[data-screen] :is([data-preset="top-left"],[data-preset="top-right"]) .week-art {
    width:min(97%,max(370px,38cqi));
  }
}
@container (min-width:850px) {
  /* Use the same column for the definition and the example. */
  #peculiar-splash[data-screen] [data-week-art] .splash-definition-line { max-width:none; }
  #peculiar-splash[data-screen] [data-reading-fit] :is(.splash-definition-line,.splash-bubble) { max-width:none; }
}
@container (min-width:1100px) {
  #peculiar-splash[data-screen] :is([data-rain-day="6"],[data-roomy-example]) #splash-example { font-size:clamp(1.4rem,2.25cqi,1.85rem); }
}
@container (max-width:649px) {
  #peculiar-splash[data-screen] .splash-board .week-art { width:min(96%,420px); }
  #peculiar-splash[data-screen] .splash-board[data-layout="shine"] .gleam-art { width:min(96%,320px); }
  #peculiar-splash[data-screen] .splash-board[data-compact-reading] .splash-main { row-gap:8px; }
  #peculiar-splash[data-screen] .splash-board[data-compact-reading] .splash-copy { padding-inline:10px; gap:8px; }
}