/* An open reference board, using the homepage's existing Tack tokens. */
.inout { background: var(--paper); color: var(--ink); padding-block: clamp(72px, 9vw, 128px) clamp(64px, 7vw, 104px); scroll-margin-top: 84px; }
.inout-shell { max-width: 1120px; }
.inout-head { text-align: center; }
.inout-head .section-eyebrow { color: var(--muted-dark); }
.inout-intro { margin: 22px auto 0; color: var(--muted-dark); font-size: 1rem; line-height: 1.6; }
.inout-tabs { display: flex; justify-content: center; gap: 12px 30px; margin: 34px auto 0; }
.inout-tabs[hidden], .inout-panel[hidden] { display: none; }
.inout-tabs button { position: relative; padding: 10px 0 12px; min-height: 44px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted-dark); font: 400 .9rem/1.4 var(--sans); cursor: pointer; transition: color .2s, border-color .2s; }
.inout-tabs button:hover { color: var(--ink); }
.inout-tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.inout-tabs button:focus-visible { outline-color: var(--blue); border-radius: 2px; }
.inout-panel { margin: 36px 0 0; }
.inout-comparison { display: grid; grid-template-columns: minmax(0,1fr) 120px minmax(0,1fr); align-items: center; gap: 16px; }
.inout-label { display: flex; justify-content: center; align-items: baseline; gap: 10px; color: var(--muted-dark); font-size: .8rem; }
.inout-label span { color: var(--blue); font: italic 500 1.6rem/1 var(--serif); }
.inout-browser, .inout-result { height: 370px; margin-top: 24px; }
/* Actual image bounds stay proportional, so rounding follows the visible corners. */
.inout-stack { position: relative; isolation: isolate; max-width: 400px; margin-inline: auto; }
.inout-reference { position: absolute; width: auto; height: 61%; max-width: none; border-radius: 12px; transform: translateX(-50%) rotate(var(--inout-angle)); }
.inout-reference-1 { left: 39%; top: 3%; --inout-angle: -7deg; }
.inout-reference-2 { left: 61%; top: 6%; --inout-angle: 6deg; }
.inout-reference-3 { left: 40%; top: 38%; --inout-angle: 4deg; }
.inout-reference-4 { left: 62%; top: 40%; --inout-angle: -5deg; }
.inout-stack-2 .inout-reference { width: 66%; height: auto; }
.inout-stack-2 .inout-reference-1 { left: 36%; top: 10%; }
.inout-stack-2 .inout-reference-2 { left: 64%; top: 37%; }
.inout-stack-3 .inout-reference-3 { left: 52%; top: 37%; --inout-angle: -4deg; }
.inout-stack-4 .inout-reference { height: 58%; }
.inout-browser { position: relative; max-width: 420px; margin-inline: auto; padding-top: 60px; }
.inout-browser-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.inout-browser-site { position: absolute; top: 23px; left: 27px; display: flex; align-items: center; gap: 8px; color: var(--muted-dark); font: 400 .75rem/1 var(--sans); }
.inout-browser-site img { width: 20px; height: 20px; object-fit: contain; }
.inout-browser .inout-stack { width: calc(100% - 48px); height: calc(100% - 22px); margin: 0 auto; }
.inout-arrow { width: 100%; color: var(--blue); }
.inout-result { display: flex; justify-content: center; align-items: center; }
.inout-result img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 12px; }
.inout-subject { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 40px; text-align: center; }
.inout-subject span { color: var(--muted-dark); font-size: .78rem; }
.inout-subject q { font: 500 clamp(1.3rem, 2.3vw, 1.7rem)/1.25 var(--serif); }
.inout-panel[role="tabpanel"] { animation: inout-appear .32s ease both; }
@keyframes inout-appear { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 760px) {
  .inout-comparison { grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); gap: 8px; }
  .inout-browser, .inout-result { height: 320px; }
}
@media (max-width: 540px) {
  .inout .shell { width: calc(100% - 40px); }
  .inout-head .section-title em { display: block; text-wrap: balance; }
  .inout-intro { max-width: 28ch; text-wrap: balance; }
  .inout-tabs { display: grid; grid-template-columns: auto auto; gap: 4px 26px; max-width: 310px; margin-top: 24px; }
  .inout-tabs button { font-size: .875rem; }
  .inout-comparison { grid-template-columns: 1fr; gap: 2px; }
  .inout-input, .inout-output { width: 100%; max-width: 330px; margin-inline: auto; }
  .inout-browser { height: 330px; margin-top: 18px; }
  .inout-arrow { width: 70px; height: 60px; justify-self: center; transform: rotate(90deg); margin-block: 12px 16px; }
  .inout-result { height: 310px; margin-top: 18px; }
  .inout-subject { flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .inout-panel[role="tabpanel"] { animation: none; }
  .inout-tabs button { transition: none; }
}