.composer-page{max-width:1120px;padding:24px var(--gutter-mobile) 64px;margin:0 auto}@media (min-width:1024px){.composer-page{padding:32px 20px 96px}}.composer-page__title,.composer-head h1{font-family:var(--font-display);margin:0;font-size:36px;font-weight:800;line-height:1.05}.composer-gate{background:var(--surface-raised);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:1.5px solid #241f2e1a;justify-items:start;gap:12px;padding:24px;display:grid}.composer-gate p{margin:0}.composer-gate__count{font-family:var(--font-display);font-size:22px;font-weight:700}.composer{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:32px;display:flex}.composer-stage{flex:0 360px;justify-content:center;min-width:280px;display:flex}@media (min-width:1024px){.composer-stage{position:sticky;top:96px}}.composer-panel{flex-direction:column;flex:300px;gap:22px;min-width:0;max-width:420px;display:flex}.composer-head p{color:var(--ink-soft);margin:6px 0 0;font-size:17px;line-height:1.45}.graphic-preview{border-radius:var(--radius-card);background:var(--surface);width:100%;max-width:360px;transition:aspect-ratio .3s ease-out;position:relative;overflow:hidden;box-shadow:0 8px #241f2e1f}.graphic-preview--cream{border:1.5px solid #241f2e14}.graphic-preview--plum-dark{background:var(--ink)}.graphic-preview__stage{transform-origin:0 0;pointer-events:none;position:absolute;top:0;left:0}.graphic-preview__stage [style*=Baloo]{font-family:var(--font-display)!important}.graphic-preview__stage [style*=Figtree]{font-family:var(--font-body)!important}.composer-choice{border:0;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;display:flex}.composer-label{font-family:var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0;padding:0;font-size:11px;font-weight:700}.composer-label__count{letter-spacing:.04em;margin-left:6px;font-weight:600}.composer-choice__row{flex-wrap:wrap;gap:8px;display:flex}.pill-toggle.composer-pill{border:2px solid var(--ink);height:40px;color:var(--ink);background:0 0;padding:0 18px;font-size:15px;font-weight:700}.pill-toggle.composer-pill.pill-toggle--on{background:var(--ink);color:var(--surface)}.pill-toggle.composer-pill:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}.composer-picker{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.composer-book{position:relative}.composer-book__toggle{cursor:pointer;text-align:left;width:100%;font-family:var(--font-body);color:var(--ink);background:0 0;border:2px solid #0000;border-radius:14px;gap:4px;padding:4px;display:grid}.composer-book__toggle .cover{border-radius:8px;box-shadow:0 2px #241f2e1f}.composer-book:not(.composer-book--in) .composer-book__toggle .cover{opacity:.45}.composer-book--in .composer-book__toggle{border-color:var(--ink);background:var(--surface-raised)}.composer-book__title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;font-weight:600;line-height:1.2;display:-webkit-box;overflow:hidden}.composer-book__order{border-radius:var(--radius-full);background:var(--ink);min-width:22px;height:22px;color:var(--surface);place-items:center;font-size:12px;font-weight:700;display:grid;position:absolute;top:8px;left:8px}.composer-book__arrange{flex-direction:column;gap:4px;display:flex;position:absolute;top:8px;right:8px}.composer-book__arrange button{border-radius:var(--radius-full);background:var(--surface-raised);width:24px;height:24px;color:var(--ink);font-family:var(--font-body);cursor:pointer;border:1.5px solid #241f2e33;padding:0;font-size:12px;font-weight:700}.composer-actions{flex-wrap:wrap;gap:10px;display:flex}.composer-result{justify-items:start;gap:12px;display:grid}.composer-result__cheer{font-family:var(--font-display);color:var(--ink);border-bottom:4px solid var(--chip-sun-bold);margin:0;font-size:22px;font-weight:700}.composer-result__img{border-radius:16px;max-width:min(100%,240px);box-shadow:0 4px #241f2e1f}.composer-result__actions{flex-wrap:wrap;align-items:center;gap:10px;margin:0;display:flex}.composer-back{color:var(--ink);text-underline-offset:3px;align-self:flex-start;font-size:15px;font-weight:600;text-decoration:underline}.composer-back:hover{color:var(--ink);text-decoration-thickness:2px}
