/* Roboto, Dell's typeface, self-hosted. Turkish ğ, ı, İ and ş are in the Latin Extended file. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Departure Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/departure-mono.woff2") format("woff2");
}

/* A digital summit page in Dell's brand: ASCII artwork behind, text set on panels with stepped pixel corners.
   Roboto only, as Dell's guidelines ask: Light for headlines, Regular for text, Medium capitals with open
   spacing for small labels. Colours are Dell's: Cosmos for the page, Raven for secondary controls, White and
   Quartz for text, Quartz buttons with Cosmos text, and Dell Blue for graphic accents only (Dell does not
   allow it for buttons). The animal colours stay in the artwork: the drawings, the ASCII animals and the
   glow on the card. The pixel font is used only for the ASCII artwork itself. */
:root {
  --black: #1d2c3b; /* Cosmos */
  --panel: #1d2c3b;
  --raven: #40586d;
  --dell-blue: #0672cb;
  --text: #ffffff;
  --quiet: #f0f0f0; /* Quartz */
  --line: #40586d;
  --accent: #f0f0f0;
  --button-text: #1d2c3b;
  --error: #d9506a;
  --grotesk: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pixel: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step: 5px;
  color-scheme: dark;
}


* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--black);
}

body {
  margin: 0;
  color: var(--text);
  font: 400 15px/1.5 var(--grotesk);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--text);
  color: var(--black);
}

h1, h2, p, ul, ol, dl, dd {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

.field-art {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 16px env(safe-area-inset-bottom);
}

main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 0;
}

/* Stepped pixel corners. The polygon is written here, once, so each element's own --step applies. */
.panel,
.chip,
.button,
.answer,
.languages button,
.languages a,
.languages span {
  clip-path: polygon(0 calc(var(--step) * 2), var(--step) calc(var(--step) * 2), var(--step) var(--step), calc(var(--step) * 2) var(--step), calc(var(--step) * 2) 0, calc(100% - var(--step) * 2) 0, calc(100% - var(--step) * 2) var(--step), calc(100% - var(--step)) var(--step), calc(100% - var(--step)) calc(var(--step) * 2), 100% calc(var(--step) * 2), 100% calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step) * 2) calc(100% - var(--step)), calc(100% - var(--step) * 2) 100%, calc(var(--step) * 2) 100%, calc(var(--step) * 2) calc(100% - var(--step)), var(--step) calc(100% - var(--step)), var(--step) calc(100% - var(--step) * 2), 0 calc(100% - var(--step) * 2));
}

/* Small labels are Dell "eyebrows": Roboto Medium capitals with open letter spacing. */
.pixel-label,
.chip,
.answer-letter,
.languages button,
.languages a,
.languages span,
.about-section h2 {
  font: 500 12px/1.35 var(--pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pixel-label {
  color: var(--quiet);
}

.panel {
  padding: 22px 20px 24px;
  background: var(--panel);
  }

.chip {
  --step: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 0;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  }

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 10px;
}

/* Dell's logo exactly as supplied, white, top left on every page, with the event slogan smaller below.
   Dell asks for free space the size of the "D" on every side (about three quarters of the logo's height),
   so the logo sits on its own plain area with that space around it, apart from the slogan and the art. */
.brand {
  --clear: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--clear);
  margin-left: calc(var(--clear) * -1);
  padding: var(--clear);
  background: var(--black);
  color: var(--quiet);
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 156px;
  height: auto;
}

.brand-slogan {
  font: 500 12px/1.2 var(--grotesk);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.topbar .languages {
  margin-top: 14px;
}

.languages {
  display: flex;
  gap: 4px;
}

.languages button,
.languages a,
.languages span {
  --step: 2px;
  padding: 6px 8px;
  border: 0;
  background: var(--panel);
  color: var(--quiet);
  text-decoration: none;
  cursor: pointer;
  }

.languages button:disabled,
.languages span[aria-current] {
  background: var(--quiet);
  color: var(--button-text);
  cursor: default;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: appear 0.3s steps(4) both;
}

/* The big words: Roboto Light, as Dell sets its largest headlines, in normal case. */
.display {
  margin-top: 14px;
  font: 300 clamp(38px, 11vw, 54px)/1.02 var(--grotesk);
  letter-spacing: -0.015em;
}

/* Words once had a pixel first letter in an animal colour; in Dell's style they are plain. */
.px {
  color: inherit !important;
}

/* Dell's "element", the 1:4 bar from the E of its logo, anchors the main headline. */
.form > .display::before,
.about .panel:first-child .display::before {
  content: "";
  display: block;
  width: 44px;
  height: 11px;
  margin-bottom: 22px;
  background: var(--dell-blue);
}

/* The event's one-line promise, between the title and the welcome text. */
.subtitle {
  margin-top: 18px;
  color: var(--text);
  font: 400 19px/1.4 var(--grotesk);
}

.subtitle + .lead {
  margin-top: 10px;
}

.lead {
  margin-top: 16px;
  color: var(--quiet);
  font-size: 15px;
  line-height: 1.5;
}

/* Name */
.form {
  display: flex;
  flex-direction: column;
}

.form .display {
  margin-bottom: 0;
}

.form .field {
  margin-top: 22px;
}

.form .button {
  margin-top: 14px;
}

/* The name field is large and high contrast so it is easy to find and read at any age. */
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.name-label {
  color: var(--text);
  font: 500 18px/1.25 var(--grotesk);
}

.field input {
  width: 100%;
  height: 64px;
  padding: 0 18px;
  border: 3px solid var(--text);
  border-radius: 0;
  outline: 0;
  background: #fff;
  color: var(--button-text);
  font: 400 26px/1 var(--grotesk);
  letter-spacing: -0.01em;
}

.field input::placeholder {
  color: #6b6b6b;
  font-weight: 400;
}

.field input:focus {
  box-shadow: 0 0 0 4px var(--black), 0 0 0 7px var(--dell-blue);
}


.button {
  --step: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 0;
  background: var(--accent);
  color: var(--button-text);
  font: 500 17px/1 var(--grotesk);
  text-decoration: none;
  cursor: pointer;
  }

.button:hover {
  filter: brightness(0.88);
}

/* Questions */
.progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.segments {
  display: flex;
  flex: 1;
  gap: 3px;
}

.segments span {
  flex: 1;
  height: 6px;
  background: var(--line);
}

.segments span.done {
  background: var(--dell-blue);
}

.question-text {
  margin-top: 18px;
  font: 300 clamp(26px, 7.4vw, 34px)/1.15 var(--grotesk);
  letter-spacing: -0.01em;
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.answer {
  --step: 4px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: baseline;
  width: 100%;
  padding: 15px 16px 15px 14px;
  border: 0;
  background: var(--raven);
  color: var(--quiet);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  }

.answer-letter {
  color: var(--quiet);
}

.answer:hover {
  background: #4b657c;
}

.answer:hover .answer-letter {
  color: var(--text);
}

.answer[aria-pressed="true"] {
  background: var(--quiet);
  color: var(--button-text);
}

.answer[aria-pressed="true"] .answer-letter {
  color: inherit;
}

.answer:disabled:not([aria-pressed="true"]) {
  opacity: 0.4;
}

.back {
  align-self: flex-start;
  margin-top: 4px;
  color: var(--quiet);
  cursor: pointer;
}

/* The share page shows the artist's drawing of the animal above its card. */
.card-drawing {
  display: block;
  width: 100%;
  max-height: 42dvh;
  object-fit: contain;
}

/* Result: the card image itself comes first, so people see exactly what they will share. */
.card-preview {
  margin: 0;
}

.card-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  background: var(--black);
  outline: 1px solid var(--line);
}

.card-preview figcaption {
  margin-top: 8px;
  text-align: center;
}

.owner {
  color: var(--text);
}

.card-name {
  margin-top: 12px;
  font-size: clamp(30px, 9.4vw, 48px);
}

/* The Dell Technologies product is set exactly as large as the animal's name, under its own label. */
.card-product-label {
  margin-top: 16px;
}

.card-product {
  margin-top: 6px;
}

.card-tagline {
  margin-top: 16px;
}

.card-description {
  margin-top: 18px;
  color: var(--quiet);
  line-height: 1.55;
}

.card-facts {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.card-facts div {
  padding: 12px 10px 0 0;
}

.card-facts div + div {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.card-facts dd {
  margin-top: 6px;
  font: 500 17px/1.25 var(--grotesk);
}

.live-status {
  align-self: flex-start;
}

.live-status:empty {
  display: none;
}

.live-status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--dell-blue);
  animation: blink 1s steps(2) infinite;
}

.share {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.share-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.share-action {
  justify-content: center;
  height: 44px;
  background: var(--raven);
  cursor: pointer;
}

.share-action:hover {
  background: #4b657c;
}

/* Footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 0 16px;
}

.site-footer a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* About */
.about {
  gap: 8px;
}

.about-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-section h2 {
  color: var(--quiet);
}

.about-section p,
.about-steps {
  line-height: 1.55;
}

.about-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 1.3em;
}

.about-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.55;
  list-style: square;
}

.about-animals {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-animals li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font: 500 18px/1.4 var(--grotesk);
}

.about-animals li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--swatch);
}

.about-animals span {
  flex-basis: 100%;
  padding-left: 18px;
  color: var(--quiet);
  font: 400 14px/1.2 var(--grotesk);
}

/* Errors must be easy to notice at any age: normal size text on a solid red panel. */
.error.chip {
  display: block;
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--error);
  color: #000;
  font: 500 16px/1.35 var(--grotesk);
  letter-spacing: 0;
  text-transform: none;
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (min-width: 700px) {
  .column {
    width: min(100%, 540px);
  }

  .display {
    font-size: 60px;
  }

  .brand {
    --clear: 18px;
  }

  .brand-logo {
    width: 190px;
  }

  .panel {
    padding: 28px 28px 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .live-status::before {
    animation: none;
  }
}