/* The AI₄₅ page (ai.html): chat on the left, the ways to use it on the right, AI₄₅+ below */
.aip { --spring: linear(0, 0.033, 0.115, 0.226, 0.349, 0.474, 0.592, 0.698, 0.789, 0.865, 0.925, 0.971, 1.004, 1.027, 1.041, 1.048, 1.049, 1.048, 1.044, 1.038, 1.032, 1.026, 1.02, 1.015, 1.01, 1.007, 1.004, 1.001, 1, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
  max-width: 1240px; margin: 0 auto; padding: 30px 28px 150px; }
@supports not (transition-timing-function: linear(0, 1)) { .aip { --spring: cubic-bezier(0.32, 0.72, 0, 1); } }
@keyframes aip-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.aip-head h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; animation: aip-in .8s var(--spring) both; }
.aip-head h1 sub { font-size: .5em; vertical-align: -0.2em; line-height: 0; }
.aip-head p { margin-top: 8px; max-width: 580px; font-size: 16px; line-height: 1.5; color: var(--muted); animation: aip-in .8s .08s var(--spring) both; }
.aip-head kbd { font-family: inherit; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 7px; background: var(--card); box-shadow: 0 1px 0 var(--line), inset 0 0 0 1px var(--line); }
.aip-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--muted); animation: aip-in .7s var(--spring) both; }
.aip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 18%, transparent); animation: aip-pulse 2.4s ease-in-out infinite; }
@keyframes aip-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--orange) 8%, transparent); } }
.aip-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.aip-chat { animation: aip-in .8s .12s var(--spring) both; }
.aip-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.aip-lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
.aip-lbl:not(:first-child) { margin-top: 10px; }
.aip-caps { display: grid; gap: 8px; }
.aip-cap { padding: 14px 16px; border-radius: 20px; background: var(--card); box-shadow: 0 1px 0 var(--line); animation: aip-in .7s var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms + 160ms); }
.aip-cap--mint { background: var(--mint); } .aip-cap--sky { background: var(--sky); } .aip-cap--lav { background: var(--lav); } .aip-cap--sun { background: var(--sun); } .aip-cap--rose { background: var(--rose); }
html[data-theme="dark"] .aip-cap--mint { background: var(--mint); } html[data-theme="dark"] .aip-cap--sky { background: var(--sky); }
html[data-theme="dark"] .aip-cap--lav { background: var(--lav); } html[data-theme="dark"] .aip-cap--sun { background: var(--sun); } html[data-theme="dark"] .aip-cap--rose { background: var(--rose); }
.aip-cap__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aip-cap__h b { font-size: 15px; letter-spacing: -0.01em; }
.aip-cap p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--paper) 72%, transparent); }
.aip-pill { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 10%, transparent); color: var(--muted); }
.aip-pill.is-live { background: var(--ink, #0E0E10); color: #fff; }
.aip-tries { margin-top: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.aip-try { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; border: 0; border-radius: 11px; background: color-mix(in srgb, var(--card) 72%, transparent); color: var(--paper); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .15s, transform .35s var(--spring); }
.aip-try svg { width: 13px; height: 13px; flex: none; opacity: .4; transition: opacity .2s, transform .35s var(--spring); }
.aip-try:hover { background: var(--card); transform: translateX(2px); }
.aip-try:hover svg { opacity: 1; transform: translateX(2px); }
.aip-try:focus-visible, .aip-plus__item:focus-visible, .aip-plus__go:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.aip-rules { margin: 0; padding: 14px 16px 14px 34px; border-radius: 20px; background: var(--card); box-shadow: 0 1px 0 var(--line); display: grid; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.aip-rules b { color: var(--paper); }

/* AI₄₅+: dark, glowing, the deep-work tools */
@property --aip-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes aip-turn { to { --aip-a: 360deg; } }
.aip-plus { position: relative; isolation: isolate; margin-top: 28px; padding: 26px; border-radius: 30px; background: #0E0E10; color: #fff; overflow: hidden; }
.aip-plus:empty { display: none; }
.aip-plus::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--aip-a, 0deg), #F08A4E, #FFC56B, #B79CE8, #7FB0E8, #F08A4E);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: aip-turn 7s linear infinite; }
.aip-plus::after { content: ""; position: absolute; z-index: -1; inset: -30% -10% auto 40%; height: 120%; background: radial-gradient(closest-side, rgba(240, 138, 78, .25), transparent), radial-gradient(closest-side at 30% 70%, rgba(142, 108, 224, .22), transparent); pointer-events: none; animation: aip-drift 14s ease-in-out infinite alternate; }
@keyframes aip-drift { to { transform: translate(-12%, 10%) rotate(8deg); } }
.aip-plus__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.aip-plus__mark { font-size: 15px; font-weight: 900; }
.aip-plus__mark sub { font-size: .62em; vertical-align: -0.25em; line-height: 0; }
.aip-plus__mark b { margin-left: 2px; padding: 0 5px; border-radius: 6px; background: linear-gradient(120deg, #F08A4E, #B79CE8); }
.aip-plus h2 { margin-top: 6px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.aip-plus__h p { margin-top: 6px; max-width: 560px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .65); }
.aip-plus__go { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 14px; background: #fff; color: #0E0E10; font-size: 14.5px; font-weight: 800; text-decoration: none; transition: transform .35s var(--spring); }
.aip-plus__go svg { width: 15px; height: 15px; }
.aip-plus__go:hover { transform: translateY(-2px); }
.aip-plus__grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.aip-plus__item { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .06); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, transform .45s var(--spring);
  animation: aip-in .7s var(--spring) both; animation-delay: calc(var(--k, 0) * 50ms + 200ms); }
.aip-plus__item:hover { background: rgba(255, 255, 255, .11); transform: translateY(-3px); }
.aip-plus__item b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.aip-plus__item b svg { width: 14px; height: 14px; color: rgba(255, 255, 255, .45); }
.aip-plus__item span { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.aip-plus__item em { margin-top: auto; padding-top: 4px; font-style: normal; font-size: 12px; font-weight: 700; color: #FFC56B; }
@media (max-width: 1100px) { .aip-plus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .aip-grid { grid-template-columns: minmax(0, 1fr); } .aip-side { position: static; max-height: none; overflow: visible; } }
@media (max-width: 640px) { .aip { padding: 18px 14px 120px; } .aip-plus { padding: 18px; border-radius: 24px; } .aip-plus__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .aip *, .aip *::before, .aip *::after, .aip::before, .aip-plus::before, .aip-plus::after { animation: none !important; transition: none !important; } }