:root { color-scheme: light; font-family: ui-rounded, system-ui, sans-serif; color: #304838; background: #fafaf6; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
.brand { display: flex; align-items: center; gap: 11px; padding: 34px clamp(24px, 5vw, 72px); font-size: 23px; font-weight: 750; letter-spacing: -.9px; }
.brand img { border-radius: 13px; }
.tld { color: #8b9787; font-weight: 500; }
main { flex: 1; display: grid; place-items: center; padding: 32px 24px 120px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 40px); width: min(100%, 740px); }
.portal { --accent: #42694f; position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 48px; color: var(--accent); background: #eaf0e3; border: 1px solid #dfe7d7; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .25s, box-shadow .25s, background .25s; animation: arrive .65s ease-out both; }
.apps { --accent: #946b46; background: #f8ecdc; border-color: #efe0cb; animation-delay: .09s; }
.portal-art { width: 78%; overflow: visible; }
.controller, .app-grid { transform-origin: center; transition: transform .3s ease; }
.spark { transform-origin: 193px 66px; transition: transform .3s; }
.enter { position: absolute; right: 24px; bottom: 24px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #ffffff80; transition: transform .25s, background .25s; }
.enter svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portal:focus-visible { outline: 3px solid var(--accent); outline-offset: 7px; }
.portal:focus-visible .controller { transform: translateY(-5px) rotate(-5deg); }
.portal:focus-visible .app-grid { transform: translateY(-5px) rotate(5deg); }
@media (hover: hover) {
  .portal:hover { transform: translateY(-6px); box-shadow: 0 20px 40px #344b3810; }
  .portal:hover .controller { transform: translateY(-5px) rotate(-5deg); }
  .portal:hover .app-grid { transform: translateY(-5px) rotate(5deg); }
  .portal:hover .spark { transform: rotate(90deg); }
  .portal:hover .enter { transform: translateX(3px); background: #fffdf5; }
}
.portal:active { transform: scale(.97); }
@keyframes arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 540px) {
  .brand { padding: 26px 24px; font-size: 21px; }
  .brand img { width: 34px; height: 34px; border-radius: 11px; }
  main { padding: 20px 24px 85px; }
  .choices { grid-template-columns: 1fr; width: min(100%, 240px); gap: 22px; }
  .portal { border-radius: 36px; }
  .enter { right: 18px; bottom: 18px; width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}