.website-app-intro{text-align:center;margin-bottom:var(--family-space-32)}.website-app-intro h1{margin:0}.website-app-intro .family-hero-description{margin:var(--family-space-16) auto 0}.website-app-workspace{width:min(calc(100% - var(--family-gutter)),760px);gap:var(--family-space-24);margin:0 auto;display:grid}.website-app-workspace .family-card{padding:var(--family-card-padding)}.website-app-form fieldset{gap:var(--family-space-24);border:0;min-width:0;margin:0;padding:0;display:grid}.website-app-field{gap:var(--family-space-8);font-size:var(--family-type-body);display:grid}.website-app-field input{border:1px solid var(--line-strong);border-radius:var(--family-control-radius);background:var(--field);width:100%;min-width:0;min-height:46px;color:var(--ink);font:inherit;padding:10px 14px}.website-app-icon-row{align-items:center;gap:var(--family-space-24);display:flex}.website-app-icon-row>div:last-child{min-width:0}.website-app-icon-preview{flex:0 0 72px}.website-app-icon-preview img{object-fit:contain;border-radius:16px;width:72px;height:72px;display:block}.website-app-icon-label span,.website-app-hint,.website-app-note{color:var(--muted)}.website-app-actions .text-action{font:inherit;cursor:pointer;background:0 0;border:0;padding:8px 0}.website-app-hint{margin:var(--family-space-12) 0 0;font-size:var(--family-type-small)}.website-app-status:empty{display:none}.website-app-status{font-size:var(--family-type-small);color:var(--muted)}.website-app-error{color:var(--danger)}.website-app-form fieldset>.family-primary{justify-self:start}.website-app-site button:disabled{opacity:.6;cursor:wait}.website-app-result h2{font-size:var(--family-type-heading);margin:0}.website-app-address,.website-app-result code{overflow-wrap:anywhere}.website-app-result ol{margin-block:var(--family-space-24);padding-left:24px}.website-app-result li{margin-bottom:var(--family-space-8)}.website-app-result details{margin-top:var(--family-space-24);font-size:var(--family-type-small)}.website-app-result summary{cursor:pointer;min-height:32px}@media (width<=520px){.website-app-icon-row{align-items:flex-start;gap:var(--family-space-16)}}@media (width<=650px){.website-app-workspace{width:calc(100% - var(--family-gutter-mobile))}}.website-app-icon-section{min-width:0}.website-app-icon-section h2{margin:0 0 var(--family-space-16);font-size:var(--family-type-body)}.icon-methods,.icon-kind{gap:var(--family-space-8);margin-bottom:var(--family-space-24);flex-wrap:wrap;display:flex}.icon-methods button,.icon-kind button{border:1px solid var(--line-strong);border-radius:var(--family-control-radius);background:var(--field);color:var(--ink);min-height:44px;font:inherit;cursor:pointer;padding:10px 14px}.icon-methods button[aria-pressed=true],.icon-kind button[aria-pressed=true],.icon-preset-grid button[aria-pressed=true]{border-color:var(--family-accent);box-shadow:inset 0 0 0 1px var(--family-accent);background:var(--family-accent-soft)}.website-app-icon-preview{flex-basis:96px}.website-app-icon-preview img{border:1px solid var(--line-strong);background:repeating-conic-gradient(#bbb 0 25%,#eee 0 50%) 0/16px 16px;width:96px;height:96px}.icon-creator{margin-top:var(--family-space-24);gap:var(--family-space-24);min-width:0;display:grid}.icon-creator .icon-kind{margin-bottom:0}.icon-preset-grid{gap:var(--family-space-8);max-height:248px;padding:var(--family-space-4);grid-template-columns:repeat(auto-fill,minmax(44px,1fr));display:grid;overflow:auto}.icon-preset-grid button{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:var(--family-control-radius);background:var(--field);min-height:44px;color:var(--ink);cursor:pointer;place-items:center;display:grid}.icon-colours{gap:var(--family-space-24);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.website-app-form .icon-colour{min-width:0;padding:0;display:block}.icon-colour legend{font-size:var(--family-type-small);margin-bottom:var(--family-space-12)}.icon-colour:disabled{opacity:.55}.icon-colour-inputs{gap:var(--family-space-8);align-items:center;display:flex}.icon-colour-inputs input[type=color]{border:1px solid var(--line-strong);border-radius:var(--family-control-radius);background:var(--field);cursor:pointer;flex:0 0 44px;width:44px;height:44px;padding:2px}.icon-colour-inputs input[type=text]{border:1px solid var(--line-strong);border-radius:var(--family-control-radius);width:100%;min-width:0;min-height:44px;font:inherit;color:var(--ink);background:var(--field);padding:8px}.icon-colour-inputs input[aria-invalid=true]{border-color:var(--danger)}.icon-swatches{gap:var(--family-space-4);margin-block:var(--family-space-12);flex-wrap:wrap;display:flex}.icon-swatches button{border:1px solid var(--line-strong);cursor:pointer;border-radius:50%;width:28px;height:28px}.icon-swatches button[aria-pressed=true]{outline:2px solid var(--family-accent);outline-offset:2px}.icon-colour details{font-size:var(--family-type-small)}.icon-colour summary{cursor:pointer;min-height:32px}.icon-colour details label{align-items:center;gap:var(--family-space-8);grid-template-columns:48px minmax(0,1fr);min-height:40px;display:grid}.icon-size{gap:var(--family-space-8);font-size:var(--family-type-small);grid-template-columns:1fr auto;display:grid}.icon-size input{grid-column:1/-1;width:100%;min-height:32px}.icon-creator input[type=range]{accent-color:var(--family-accent);min-width:0}@media (width<=420px){.icon-colours{grid-template-columns:1fr}.icon-methods button{flex:auto}}.website-app-workspace>:last-child{margin-bottom:0}