/* Portfolio presentation only. The device UI retains its Figma design tokens. */
body {
  --paper-ink: #141414;
  --paper-charcoal: #252421;
  --paper: #f4efe6;
  --paper-white: #fffaf2;
  --paper-muted: #736d63;
  --paper-line: rgba(20, 20, 20, .16);
  --paper-red: #d95435;
  background: linear-gradient(90deg, rgba(20,20,20,.035) 1px, transparent 1px) 0 0 / 96px 96px, var(--paper);
}
.presentation-header { background: var(--paper-charcoal); color: var(--paper-white); border-bottom: 1px solid rgba(255,250,242,.16); }
.presentation-nav { width: min(1180px, calc(100% - 32px)); margin: auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.presentation-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.presentation-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,250,242,.24); border-radius: 50%; background: rgba(255,250,242,.08); font: 700 16px Georgia, serif; }
.presentation-brand strong { display: block; font-weight: 760; line-height: 1; }
.presentation-brand small { display: block; color: rgba(255,250,242,.68); font-size: .77rem; line-height: 1.25; text-transform: uppercase; }
.portfolio-link { color: rgba(255,250,242,.84); border: 1px solid rgba(255,250,242,.24); border-radius: 999px; padding: 12px 16px; text-decoration: none; font-size: .9rem; font-weight: 650; }
.portfolio-link:hover { color: var(--paper-white); background: rgba(255,250,242,.08); }
.showcase { max-width: 1180px; grid-template-columns: minmax(0, 1fr) 430px; gap: clamp(40px, 7vw, 100px); padding: 72px 16px 88px; }
.intro { max-width: 570px; color: var(--paper-ink); }
.intro .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #b53d23; font-size: .76rem; font-weight: 800; letter-spacing: 0; }
.intro .eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; flex: none; }
.intro h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(52px, 5.6vw, 76px); font-weight: 520; letter-spacing: 0; line-height: .98; margin: 24px 0 28px; }
.intro > p { color: var(--paper-muted); }
.intro > h1 + p { font-size: 1.14rem; line-height: 1.6; }
.intro .demo-label { display: inline-flex; border: 1px solid var(--paper-line); border-radius: 999px; padding: 8px 12px; margin-top: 28px; font-size: .8rem; font-weight: 650; }
.try-heading { margin: 40px 0 0; font-size: .76rem; text-transform: uppercase; font-weight: 800; color: #b53d23; }
.intro .try-list { list-style: none; counter-reset: trial; margin: 14px 0 28px; padding: 0; }
.intro .try-list li { counter-increment: trial; display: flex; gap: 16px; border-top: 1px solid var(--paper-line); padding: 14px 0; font-size: .94rem; line-height: 1.5; }
.intro .try-list li::before { content: '0' counter(trial); color: #b53d23; font-weight: 800; font-size: .76rem; padding-top: 2px; }
.intro .small { font-size: .8rem; line-height: 1.65; max-width: 440px; }
.intro .text-action { border: 1px solid var(--paper-ink); border-radius: 999px; background: var(--paper-ink); color: var(--paper-white); text-decoration: none; padding: 13px 18px; font-weight: 760; font-size: .9rem; margin: 12px 0 4px; }
.intro .text-action:hover { background: #b53d23; border-color: #b53d23; }
.presentation-header a:focus-visible, .intro button:focus-visible { outline-color: var(--paper-red); }
.device-caption { color: var(--paper-muted); font-size: .8rem; }
.presentation-footer { border-top: 1px solid var(--paper-line); max-width: 1180px; margin: 0 auto; padding: 28px 16px; display: flex; justify-content: space-between; gap: 24px; color: var(--paper-muted); font-size: .8rem; }
html.embed .presentation-header, html.embed .presentation-footer { display: none; }
html.embed body { background: transparent; }
@media(max-width:900px) {
  .showcase { display: flex; flex-direction: column; padding: 48px 24px 64px; gap: 48px; }
  .intro { max-width: 570px; }
  .intro h1 { font-size: clamp(48px, 8vw, 68px); }
  .intro .try-list { display: block; }
  .device-wrap { width: 100%; max-width: 426px; }
}
@media(max-width:480px) {
  .presentation-brand small { display: none; }
  .portfolio-link { font-size: .76rem; padding: 12px; }
  .presentation-nav { gap: 12px; }
  .showcase { padding: 40px 16px 48px; }
  .intro h1 { font-size: 48px; }
  .presentation-footer { flex-direction: column; gap: 8px; }
}