:root {
  color-scheme:dark;
  --canvas:#01040a;
  --text:#d0e9ff;
  --muted:#a5c9e7;
  --accent:#5ab5ff;
  --line:#37546c;
  --paper:#fff;
  --ink:#103556;
  --light-muted:#3f607d;
  --wrap:min(100% - 112px,1328px);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
  background:var(--canvas)
}
body {
  margin:0;
  color:var(--text);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p {
  margin:0
}
a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:7px
}
::selection {
  color:var(--canvas);
  background:var(--accent)
}
.wrap {
  width:var(--wrap);
  margin-inline:auto
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:10;
  padding:14px 20px;
  background:var(--text);
  color:var(--canvas);
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:none
}
.site-header {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:100px
}
.brand {
  display:flex;
  align-items:center;
  flex:none;
  width:190px;
  min-height:44px
}
.brand img {
  width:100%;
  height:auto
}
.main-nav {
  display:flex;
  gap:36px;
  align-items:center;
  font-size:15px
}
.main-nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  transition:color .2s
}
.main-nav a:hover {
  color:var(--accent)
}
.hero {
  padding-top:48px;
  padding-bottom:54px
}
.hello {
  font-size:18px;
  line-height:1.5;
  color:var(--accent);
  margin-bottom:16px
}
h1 {
  font-size:clamp(54px,6.15vw,88px);
  font-weight:680;
  line-height:1.02;
  letter-spacing:-.055em
}
em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.055em;
  color:var(--accent)
}
h1 em {
  display:block;
  font-size:1.08em;
  line-height:1.08
}
.hero-lead {
  max-width:650px;
  font-size:22px;
  line-height:1.55;
  letter-spacing:-.02em;
  color:var(--muted);
  margin-top:26px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:44px;
  position:relative;
  width:fit-content;
  font-size:16px;
  font-weight:550;
  color:var(--accent)
}
.text-link:after {
  position:absolute;
  content:"";
  height:1px;
  bottom:6px;
  left:0;
  right:0;
  background:currentColor;
  transition:transform .2s;
  transform-origin:left
}
.text-link:hover:after {
  transform:scaleX(.8)
}
.hero .text-link {
  margin-top:14px
}
.arrow {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
h2 {
  font-size:clamp(36px,3.8vw,56px);
  line-height:1.12;
  font-weight:650;
  letter-spacing:-.045em
}
.apps {
  padding-bottom:34px
}
.apps h2 {
  margin-bottom:28px
}
.app-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:24px;
  list-style:none;
  padding:0;
  margin:0
}
.app-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:580px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  transition:border-color .2s,transform .25s;
  background:var(--canvas)
}
.app-card:hover {
  border-color:var(--accent);
  transform:translateY(-4px)
}
.app-card-head {
  display:flex;
  align-items:center;
  gap:24px;
  padding:30px 30px 0
}
.app-icon {
  width:94px;
  height:94px;
  object-fit:contain;
  border-radius:22%;
  flex:none
}
.app-card h3 {
  font-size:32px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.15
}
.app-description {
  font-size:16px;
  line-height:1.5;
  color:var(--muted);
  margin-top:8px
}
.app-art {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  height:355px;
  overflow:hidden;
  margin-top:24px;
  padding:0 26px
}
.app-art img {
  object-fit:contain;
  object-position:center top;
  width:100%;
  height:100%;
  transition:transform .5s
}
.app-card:hover .app-art img {
  transform:scale(1.025)
}
.app-card--talori .app-art img {
  height:auto;
  width:220px;
  border:5px solid #273442;
  border-radius:34px;
  box-shadow:0 0 0 1px #596777
}
.app-card .text-link {
  margin:12px 30px 20px
}
.app-card .card-link:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1
}
.card-link {
  position:static
}
.card-link:after {
  left:30px;
  right:auto;
  width:150px;
  bottom:27px
}
.app-card:focus-within {
  outline:3px solid var(--accent);
  outline-offset:5px
}
.plugins {
  background:var(--paper);
  color:var(--ink);
  color-scheme:light;
  padding-block:64px 60px
}
.section-label {
  font-size:16px;
  font-weight:500;
  color:var(--light-muted);
  margin-bottom:12px
}
.plugins h2 {
  margin-bottom:30px
}
.plugins em {
  color:#006bde
}
.plugin-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:20px;
  list-style:none;
  margin:0;
  padding:0
}
.plugin-card {
  display:flex;
  align-items:flex-start;
  gap:28px;
  border:1px solid #dbe5ed;
  border-radius:15px;
  padding:28px;
  transition:border-color .2s,box-shadow .2s;
  position:relative
}
.plugin-card:hover {
  border-color:#006bde;
  box-shadow:0 4px 20px #10355608
}
.plugin-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:100px;
  height:100px;
  border-radius:24px;
  background:#07121d;
  color:var(--accent)
}
.plugin-icon svg {
  width:62px;
  height:62px;
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.plugin-card h3 {
  font-size:25px;
  font-weight:650;
  letter-spacing:-.04em;
  margin-top:0
}
.plugin-card p {
  font-size:16px;
  line-height:1.5;
  max-width:33ch;
  color:var(--light-muted);
  margin-top:8px
}
.plugin-card .text-link {
  color:#006bde;
  margin-top:5px
}
.plugin-card .text-link:before {
  position:absolute;
  content:"";
  inset:0
}
.plugin-card .plugin-link {
  position:static
}
.plugin-link:after {
  display:none
}
.plugin-link span {
  border-bottom:1px solid #006bde;
  padding-bottom:4px
}
.about {
  padding-top:64px;
  padding-bottom:24px
}
.about h2 {
  max-width:1050px
}
.about h2 em {
  display:block
}
.about-copy {
  font-size:21px;
  line-height:1.55;
  max-width:800px;
  margin-top:22px;
  color:var(--muted)
}
.button {
  display:inline-flex;
  align-items:center;
  gap:22px;
  min-height:48px;
  border:1px solid var(--accent);
  border-radius:100px;
  color:var(--accent);
  padding:10px 24px;
  font-size:16px;
  font-weight:550;
  margin-top:22px;
  transition:background .2s,color .2s
}
.button:hover {
  background:var(--accent);
  color:var(--canvas)
}
.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  border-top:1px solid var(--line);
  min-height:90px;
  margin-top:10px
}
.site-footer .brand {
  width:150px
}
.site-footer nav {
  display:flex;
  gap:28px;
  font-size:13px;
  color:var(--muted)
}
.site-footer nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.site-footer nav a:hover {
  color:var(--accent)
}
.legal {
  max-width:880px;
  padding-top:70px;
  padding-bottom:80px
}
.legal h1 {
  font-size:clamp(42px,6vw,72px)
}
.legal h2 {
  font-size:28px;
  margin-top:36px;
  margin-bottom:12px
}
.legal p {
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  margin-top:12px
}
.legal a {
  text-decoration:underline;
  text-underline-offset:4px
}
.legal .text-link {
  margin-top:22px
}
.legal address {
  font-style:normal;
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  margin-top:20px
}
@media(min-width:1600px) {
  .app-art {
    height:395px
  }
  .app-card {
    min-height:620px
  }
  .app-card--talori .app-art img {
    width:245px
  }
}
@media(max-width:1000px) {
  :root {
    --wrap:calc(100% - 64px)
  }
  .site-header {
    min-height:88px
  }
  .main-nav {
    gap:22px
  }
  .hero {
    padding-top:64px;
    padding-bottom:64px
  }
  .hero-lead {
    font-size:20px;
    max-width:650px
  }
  .app-card-head {
    padding:24px 24px 0;
    gap:16px
  }
  .app-icon {
    width:74px;
    height:74px
  }
  .app-card h3 {
    font-size:28px
  }
  .app-description {
    font-size:15px
  }
  .app-grid,.plugin-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .app-card {
    min-height:520px
  }
  .app-art {
    height:330px;
    padding-inline:12px
  }
  .app-card--talori .app-art img {
    width:200px
  }
  .plugin-card {
    gap:18px;
    padding:24px
  }
  .plugin-icon {
    width:72px;
    height:72px;
    border-radius:18px
  }
  .plugin-icon svg {
    width:48px;
    height:48px
  }
  .plugin-card h3 {
    font-size:23px
  }
  .plugin-card p {
    font-size:15px
  }
}
@media(max-width:640px) {
  :root {
    --wrap:calc(100% - 40px)
  }
  html {
    scroll-padding-top:20px
  }
  .site-header {
    min-height:102px;
    flex-wrap:wrap;
    gap:4px;
    padding-top:20px;
    padding-bottom:8px
  }
  .brand {
    width:170px
  }
  .main-nav {
    width:100%;
    justify-content:space-between;
    gap:12px;
    font-size:13px
  }
  .main-nav a {
    min-height:42px
  }
  .hero {
    padding-top:48px;
    padding-bottom:55px
  }
  .hello {
    font-size:16px;
    margin-bottom:14px
  }
  h1 {
    font-size:clamp(43px,10.5vw,66px)
  }
  h1 em {
    line-height:1.12
  }
  .hero-lead {
    font-size:18px;
    line-height:1.6;
    margin-top:24px
  }
  .text-link {
    font-size:15px
  }
  h2 {
    font-size:clamp(33px,8.5vw,46px)
  }
  .apps h2 {
    margin-bottom:24px
  }
  .app-grid,.plugin-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .app-card {
    min-height:0
  }
  .app-card-head {
    padding:24px 22px 0
  }
  .app-icon {
    width:72px;
    height:72px
  }
  .app-card h3 {
    font-size:28px
  }
  .app-description {
    font-size:14px
  }
  .app-art {
    height:300px;
    margin-top:24px;
    padding:0 16px
  }
  .app-card--talori .app-art img {
    width:200px
  }
  .app-card .text-link {
    margin:10px 22px 17px
  }
  .card-link:after {
    left:22px;
    bottom:24px;
    width:141px
  }
  .apps {
    padding-bottom:28px
  }
  .plugins {
    padding-block:44px
  }
  .section-label {
    font-size:14px
  }
  .plugins h2 {
    max-width:400px;
    margin-bottom:26px
  }
  .plugin-card {
    padding:22px 20px;
    gap:20px;
    align-items:center
  }
  .plugin-card h3 {
    font-size:24px
  }
  .plugin-icon {
    width:76px;
    height:76px;
    border-radius:18px
  }
  .plugin-card p {
    font-size:15px
  }
  .about {
    padding-top:44px;
    padding-bottom:22px
  }
  .about-copy {
    font-size:18px
  }
  .button {
    font-size:15px;
    gap:20px;
    min-height:48px;
    padding-inline:20px
  }
  .site-footer {
    gap:18px;
    min-height:90px
  }
  .site-footer .brand {
    width:120px
  }
  .site-footer nav {
    font-size:12px;
    gap:18px
  }
  .legal {
    padding-top:42px
  }
  .legal p,.legal address {
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important
  }
  .app-card:hover,.app-card:hover .app-art img {
    transform:none
  }
}
.app-card--skip-and-stay .app-art img {
  width:220px;
  height:auto;
  max-width:60%
}
@media(max-width:640px) {
  .app-card--skip-and-stay .app-art img {
    width:200px
  }
}

/* Matching iPhone frames preserve the original portrait screenshot pixels. */
.app-art {
  align-items: center;
  height: 570px;
  overflow: visible;
  padding: 14px 24px 24px;
  margin-top: 24px;
}
.screenshot-link {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(210px, 48%, 252px);
  height: auto;
  flex: none;
  padding: 8px;
  border: 1px solid #53677c;
  border-radius: 38px;
  background: #070b12;
  box-shadow: 0 0 0 3px #172332, 0 22px 42px #0008;
  transition: transform .25s, border-color .25s;
}
.screenshot-link:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}
.app-art img,
.app-card--talori .app-art img,
.app-card--skip-and-stay .app-art img,
.app-card:hover .app-art img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
  border: 0;
  border-radius: 29px;
  box-shadow: none;
}
.app-card .card-link {
  margin-top: auto;
}
.apps h2 em, .plugins h2 em {
  margin-left: .12em;
}
.external-icon {
  width: 18px;
  height: 18px;
}
@media(max-width:640px) {
  .app-art {
    height: 540px;
    padding: 12px 20px 24px;
  }
  .screenshot-link {
    width: min(72%, 232px);
  }
  .main-nav {
    gap: 8px;
    font-size: 12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .screenshot-link:hover { transform: none; }
}

/* Personal contact shares the portfolio's palette and typography. */
.contact {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(32px,6vw,90px);
  padding-block:64px 72px;
}
.contact-intro .section-label { color:var(--accent); }
.contact-intro h2 { max-width:10ch; }
.contact-intro > p:last-child {
  max-width:36ch;
  color:var(--muted);
  font-size:20px;
  line-height:1.6;
  margin-top:22px;
}
.contact .contact-form { min-width:0; position:relative; background:transparent; }
.contact-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-field { display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
.contact-field label { font-size:15px; line-height:1.5; }
.contact-field label span { color:var(--muted); font-weight:400; }
.contact-field input, .contact-field textarea {
  width:100%;
  min-width:0;
  min-height:50px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--canvas);
  color:var(--text);
  padding:13px 15px;
  font:inherit;
  font-size:16px;
  line-height:1.5;
}
.contact-field textarea { resize:vertical; min-height:170px; }
.contact-field input:hover, .contact-field textarea:hover { border-color:var(--muted); }
.contact-form .button { font-family:inherit; background:transparent; cursor:pointer; margin-top:20px; }
.contact-form .button:hover { background:var(--accent); }
.contact-form .button:disabled { opacity:.5; cursor:not-allowed; }
.contact-form[aria-busy="true"] .button:disabled { cursor:wait; }
.contact-form .button:disabled:hover { background:transparent; color:var(--accent); }
.contact-note { color:var(--muted); font-size:14px; line-height:1.6; }
.contact-note a { text-decoration:underline; text-underline-offset:4px; }
.contact-status { min-height:24px; margin-top:18px; font-size:15px; line-height:1.6; color:var(--text); }
.contact-status[data-state="error"] { border-left:2px solid var(--accent); padding-left:12px; }
.contact-status[data-state="success"] { color:var(--accent); }
.contact-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:800px) {
  .contact { grid-template-columns:1fr; gap:28px; padding-block:44px; }
  .contact-intro h2 { max-width:18ch; }
  .contact-intro > p:last-child { font-size:18px; }
}
@media(max-width:480px) {
  .contact-row { grid-template-columns:1fr; gap:0; }
  .site-footer { flex-wrap:wrap; gap:0; padding-block:16px; }
  .site-footer nav { gap:16px; }
}