.otter-page{flex-direction:column;gap:40px;width:100%;padding-bottom:72px;display:flex;container-type:inline-size}.otter-page .card{border-radius:var(--radius-site-card)}.otter-page .otter-maker{padding:24px;display:block}.otter-maker-grid{border:0;grid-template-columns:minmax(0,1fr);align-items:start;gap:40px;width:100%;min-width:0;margin:0;padding:0;display:grid}.otter-stage{aspect-ratio:1;border-radius:var(--radius-pill);background:radial-gradient(circle at 50% 38%, var(--paper) 0 40%, var(--sky) 41% 100%);border:4px solid var(--white);width:min(100%,440px);box-shadow:var(--shadow-puffy), var(--shadow-glass);position:relative}.otter-stage-art{position:absolute;top:14%;left:8%;right:8%}.otter-stage-art svg,.otter-option-art svg,.otter-stage-art img,.otter-option-art img{width:100%;height:auto;display:block}.otter-name-field{flex-direction:column;align-items:center;gap:6px;max-width:100%;display:flex}.otter-name-field label{font:var(--type-site-nav-weight) var(--type-small-size) var(--f-display);color:var(--ink-2)}.otter-name-field input{text-align:center;border-radius:var(--radius-pill);border:var(--border-glass) solid var(--white);background:var(--paper);width:min(220px,100%);min-height:48px;font:var(--type-site-hero-weight) var(--type-h3-size) var(--f-display);color:var(--ink);box-shadow:var(--shadow-glass);padding:0 12px}.otter-tab{min-height:var(--tap-target);min-width:var(--tap-target);border-radius:var(--radius-pill);border:var(--border-chip) solid var(--chip-line);background:var(--paper);color:var(--ink);font:var(--type-site-nav-weight) var(--type-site-button-small-size) var(--f-display);cursor:pointer;padding:0 18px}.otter-tab[aria-selected=true]{background:var(--coral-tint);border-color:var(--coral-ink);color:var(--ink);font-weight:var(--type-site-hero-weight);box-shadow:var(--shadow-ghost)}.otter-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.otter-option{aspect-ratio:1;min-height:var(--tap-target);min-width:var(--tap-target);border-radius:var(--radius-card);border:var(--border-card) solid var(--edge);background:var(--paper);box-shadow:var(--shadow-ghost);cursor:pointer;padding:0;position:relative}.otter-option[aria-pressed=true]{border-width:4px;border-color:var(--coral-ink);background:var(--coral-tint)}.otter-option-art{position:absolute;top:12%;left:6%;right:6%}.otter-none{inset-inline:0;font:var(--type-site-nav-weight) var(--type-small-size) var(--f-display);color:var(--ink);position:absolute;bottom:2px}.otter-steps,.otter-tools,.otter-faq{grid-template-columns:minmax(0,1fr);gap:24px;display:grid}.otter-steps h2,.otter-tools h2{font-size:var(--type-site-heading-size);line-height:var(--type-site-heading-leading)}.otter-steps .card{gap:14px;padding:24px}.otter-steps p,.otter-tools p{font-size:var(--type-site-body-small-size)}.otter-page .otter-tool-link{color:var(--ink);flex-direction:row;align-items:center;gap:20px;padding:24px;text-decoration:none;display:flex}.otter-tool-link>div{min-width:0}.otter-tool-art{flex:none;width:70px;height:120px;display:block}.otter-tool-art>svg,.otter-tool-art>img{width:100%;height:100%;display:block}.otter-paper{border-radius:var(--radius-tape)}.otter-page button:disabled{opacity:.6;cursor:wait}@container (max-width:330px){.otter-options{grid-template-columns:repeat(3,minmax(0,1fr))}.otter-page .otter-maker{padding:16px}}@container (min-width:900px){.otter-page .otter-maker{padding:40px}.otter-maker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}.otter-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.otter-page>section,.otter-page>nav{margin-top:56px}.otter-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.otter-tools,.otter-faq{grid-template-columns:repeat(2,minmax(0,1fr))}.otter-faq{gap:48px}}