.forge{grid-template-columns:1.2fr 1fr}
.swatch{height:190px;border-radius:12px;display:flex;align-items:flex-end;padding:16px;font:700 26px var(--mono);letter-spacing:.02em;box-shadow:inset 0 0 0 1px #ffffff1a;transition:background .2s}
.pick-row{margin-top:14px;flex-wrap:nowrap}.pick-row input.code{flex:1}
.fmts{display:grid;gap:8px;margin-top:14px}
.fmt{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font:13.5px var(--mono);cursor:pointer;background:#ffffff03}
.fmt:hover{border-color:var(--line-2)}.fmt small{color:var(--faint);text-transform:uppercase}
.grow{flex:1}.preview{margin-top:14px;padding:22px;border-radius:12px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 0 1px #ffffff14}
.preview b{font-size:24px}.wcag{margin-top:14px;gap:6px}
.mt{margin-top:16px}.w140{width:140px!important}
.scale{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.sw{aspect-ratio:1/1.15;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px;font:600 11px var(--mono);cursor:pointer;border:0;transition:transform .12s}
.sw:hover{transform:translateY(-3px)}.sw span{opacity:.8;font-weight:400;font-size:10px}
.exp{margin-top:14px;min-height:0;max-height:220px}
.harm{display:flex;gap:8px;height:120px;margin-bottom:10px}.harm .sw{flex:1;aspect-ratio:auto}
@media (max-width:860px){.forge{grid-template-columns:1fr}.scale{grid-template-columns:repeat(4,1fr)}.harm{height:90px}}
.row.bottom{align-items:flex-end}