:root{--motion-fast:160ms;--motion-normal:240ms;--ease-out:cubic-bezier(.2,.7,.2,1);--focus-ring:#8bb8ff}
html{scrollbar-gutter:stable}
:is(.button,.icon-button,.inline-link,.art-preview-button,.docs-outline button,.preview-primary,.preview-back,button.mini-option,button.mini-close){touch-action:manipulation;transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-normal) var(--ease-out),transform var(--motion-fast) var(--ease-out),opacity var(--motion-fast) ease}
.button{isolation:isolate;position:relative}
.button:hover{transform:none}
.button svg,.inline-link svg,.docs-outline button>span:last-child{transition:transform var(--motion-normal) var(--ease-out),color var(--motion-fast) ease}
.button-primary{background:linear-gradient(180deg,#2466c9,#1d5bbf);border-color:#4d85dc;box-shadow:inset 0 1px 0 #ffffff12,0 3px 12px #0b2e631f}
.button-outline{background:#ffffff02;border-color:#ffffff26}
.icon-button{min-width:44px;min-height:44px;border:1px solid transparent}
.icon-button:disabled{cursor:not-allowed;opacity:.4}
.art-preview-button{min-height:44px}
.basket-trigger{border-color:var(--line)}
.inline-link{align-items:center;min-height:44px;text-underline-offset:5px}
.main-nav a{position:relative;min-height:44px;display:inline-flex;align-items:center;transition:color var(--motion-fast) ease}
.main-nav a::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-normal) var(--ease-out)}
.main-nav a[aria-current]{color:var(--text)}
/* The current section is already selected when a document arrives. Only hover draws a line. */
.main-nav a[aria-current]::after{transform:scaleX(1);transition:none}
.footer-top nav a{display:inline-flex;align-items:center;min-height:36px;transition:color var(--motion-fast) ease}
.resource-card{transition:border-color var(--motion-normal) ease,box-shadow var(--motion-normal) ease}
.resource-art img{transition:filter var(--motion-normal) ease}
.docs-outline button{border-radius:7px}
.faq-list summary{transition:color var(--motion-fast) ease}
.faq-list summary>span{transition:transform var(--motion-normal) var(--ease-out),color var(--motion-fast) ease}
.faq-list details.is-animating{overflow:hidden}
.faq-list details.is-collapsing summary>span{transform:rotate(0)}
.faq-list details[open]>p{animation:simply-fade-in var(--motion-normal) ease both}
:is(button,a,input,select,summary):focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
:is(.button,.icon-button,.preview-primary,.preview-back,button.mini-option):focus-visible{box-shadow:0 0 0 5px #3b82f61c}
.resource-card:focus-within{border-color:#3b82f673;box-shadow:0 0 0 3px #3b82f610}
.button-primary.is-added{background:#17325b;border-color:#4f83d085;color:#d4e4ff;box-shadow:inset 0 1px 0 #ffffff08}
.button-primary.is-added svg{animation:simply-check-in 180ms var(--ease-out)}
.button:disabled{transform:none;box-shadow:none;cursor:not-allowed;opacity:.48}
.button[aria-busy="true"]{cursor:progress;opacity:1;background:#184b99;color:#dce9ff;min-height:49px}
.button-spinner{width:16px;height:16px;flex:0 0 16px;border:2px solid #ffffff3d;border-top-color:currentColor;border-radius:50%;animation:simply-spin 700ms linear infinite}
button.mini-close{min-width:44px;min-height:44px}
.preview-primary,.preview-back{min-height:44px}
.preview-primary{border:1px solid #4d85dc}
.form-box input{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease}
.form-box input:focus-visible{border-color:#75a8ff;box-shadow:0 0 0 4px #3b82f61c;background:#152033}
dialog[open]{animation:simply-dialog-in 220ms var(--ease-out) both}
dialog[open]::backdrop{animation:simply-fade-in 200ms ease both}
dialog.is-closing{pointer-events:none}
dialog.is-closing::backdrop{animation:simply-fade-out 140ms ease both}
.toast:not([hidden]){animation:simply-toast-in 220ms var(--ease-out) both}
.toast.is-leaving{animation:simply-fade-out 140ms ease both}
.basket-error:not([hidden]),.preview-status:not(:empty){animation:simply-fade-in 200ms ease both}
@media(hover:hover) and (pointer:fine){
  .button:not(:disabled):hover{transform:translateY(-1px)}
  .button-primary:not(:disabled):hover{background:linear-gradient(180deg,#2b74df,#2468ce);border-color:#79a8ef;box-shadow:inset 0 1px 0 #ffffff19,0 5px 18px #1d5bbf30}
  .button-primary.is-added:not(:disabled):hover{background:#1c3d6b;border-color:#6b9ce6}
  .button-outline:not(:disabled):hover{background:#1a2537;border-color:#5a88cf80;box-shadow:0 3px 12px #0002}
  .button-text:not(:disabled):hover{color:var(--text);background:transparent;box-shadow:none}
  :is(.button,.inline-link):not(:disabled):hover svg:last-child{transform:translateX(2px)}
  .button-text:hover .play-circle svg{transform:none}
  .icon-button:not(:disabled):hover{background:#1a2537;border-color:#3b82f640;color:#cce0ff}
  .basket-item .icon-button:not(:disabled):hover{color:#ffb1b1;background:#ef444412;border-color:#ef444430}
  .main-nav a:hover::after{transform:scaleX(1)}
  .resource-card:hover{border-color:#3b82f640;box-shadow:0 8px 28px #0002}
  .resource-art:hover img{filter:brightness(1.045)}
  .docs-outline button:hover{background:#3b82f608}
  .docs-outline button:hover>span:last-child{transform:translateX(3px)}
  .faq-list summary:hover,.faq-list summary:hover>span{color:#b9d4ff}
  .art-preview-button:hover{background:#1a2537;border-color:#3b82f64d;color:#fff;box-shadow:0 4px 14px #0003}
  :is(.preview-primary,.preview-back,button.mini-option,button.mini-close):not(:disabled):hover{border-color:#629af080;box-shadow:0 3px 12px #0002}
  .preview-primary:hover{background:#276bcb}
  .preview-back:hover,button.mini-option:hover{background:#242e40}
}
@media(hover:none){
  .button:hover{transform:none}
  .button-primary:hover{background:linear-gradient(180deg,#2466c9,#1d5bbf)}
  .button-primary.is-added:hover{background:#17325b}
  .button-outline:hover{background:#ffffff02;border-color:#ffffff26}
  .button-text:hover{color:var(--muted)}
  .icon-button:hover{background:transparent}
  button.mini-option:hover{background:#1b202b;border-color:#ffffff12}
}
:is(.button,.icon-button,.preview-primary,.preview-back,button.mini-option,button.mini-close):not(:disabled):active{transform:translateY(1px);box-shadow:inset 0 2px 5px #0003;transition-duration:70ms}
.art-preview-button:not(:disabled):active{transform:rotate(-3deg) translateY(1px);background:#1d2c45}
.inline-link:active{color:#b9d5ff;transform:translateY(1px)}
@media(max-width:600px){
  .main-nav{display:flex;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity 180ms ease,transform 180ms var(--ease-out),visibility 0s 180ms}
  .main-nav.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  .main-nav a{min-height:44px;width:100%}
  .main-nav a::after{right:auto;width:24px;bottom:3px}
  .footer-top nav a{min-height:44px}
}
@keyframes simply-spin{to{transform:rotate(360deg)}}
@keyframes simply-fade-in{from{opacity:0}to{opacity:1}}
@keyframes simply-fade-out{from{opacity:1}to{opacity:0}}
@keyframes simply-check-in{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes simply-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes simply-toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .button:hover,.button:active,.icon-button:active,.inline-link:active,.preview-primary:active,.preview-back:active,button.mini-option:active,button.mini-close:active{transform:none!important}
  .art-preview-button:active{transform:rotate(-3deg)}
}