.gmt-playground-form__body{display:grid;gap:.75rem;min-inline-size:0}.gmt-playground-form__cell{min-inline-size:0}.gmt-playground-form__wide{grid-column:1 / -1}.gmt-playground-form__units{display:grid;gap:.75rem;grid-template-columns:minmax(0,2fr) minmax(0,1fr);min-inline-size:0}@container (inline-size < 22rem){.gmt-playground-form__units{grid-template-columns:minmax(0,1fr)}}.gmt-playground-form__list{display:grid;gap:.375rem;min-inline-size:0}.gmt-playground-form__listLabel{color:var(--gmt-ice);font-size:clamp(.8125rem,.78rem + .15vw,.9375rem);font-weight:600}.gmt-playground-form__rows{display:grid;gap:.5rem;min-inline-size:0}.gmt-playground-form__row{display:flex;gap:.5rem;align-items:center;min-inline-size:0}.gmt-playground-form__rowInput,.gmt-playground-form__rowSelect{appearance:none;box-sizing:border-box;flex:1 1 auto;inline-size:100%;min-inline-size:0;min-block-size:var(--gmt-target-min);padding-block:.375rem;padding-inline:.625rem;border:1px solid var(--gmt-hairline);border-radius:var(--gmt-radius-sm);corner-shape:bevel;background-color:var(--gmt-surface-2);color:var(--gmt-ice);font:inherit;font-family:var(--gmt-font-mono);transition:border-color var(--gmt-motion-fast) var(--gmt-easing);&:hover{border-color:var(--gmt-cyan)}&:focus-visible{outline:2px solid var(--gmt-cyan);outline-offset:2px}}.gmt-playground-form__rowSelect{padding-inline-end:2rem;background-image:linear-gradient(45deg,transparent 50%,var(--gmt-ice) 50%),linear-gradient(135deg,var(--gmt-ice) 50%,transparent 50%);background-position:calc(100% - 1.125rem) 55%,calc(100% - .8125rem) 55%;background-size:.3125rem .3125rem;background-repeat:no-repeat;cursor:pointer;&:dir(rtl){padding-inline:2rem .625rem;background-position:1.125rem 55%,.8125rem 55%}}.gmt-playground-form__remove,.gmt-playground-form__add{appearance:none;box-sizing:border-box;min-inline-size:var(--gmt-target-min);min-block-size:var(--gmt-target-min);border:1px solid var(--gmt-hairline);border-radius:var(--gmt-radius-sm);corner-shape:bevel;background-color:var(--gmt-surface-2);font:inherit;font-family:var(--gmt-font-mono);cursor:pointer;transition:color var(--gmt-motion-fast) var(--gmt-easing),border-color var(--gmt-motion-fast) var(--gmt-easing);&:focus-visible{outline:2px solid var(--gmt-cyan);outline-offset:2px}}.gmt-playground-form__remove{flex:0 0 auto;line-height:1;color:var(--gmt-ice);&:hover,&:focus-visible{border-color:var(--gmt-ice)}}.gmt-playground-form__add{justify-self:start;padding-block:.25rem;padding-inline:.75rem;color:var(--gmt-cyan-ink);font-size:.8125rem;&:hover,&:focus-visible{border-color:var(--gmt-cyan)}}.gmt-playground-form__result{display:grid;gap:.375rem;min-inline-size:0}.gmt-playground-form__outputLabel{color:var(--gmt-ice-dim);font-size:var(--gmt-text-xs);letter-spacing:var(--gmt-tracking-wide);text-transform:uppercase}.gmt-playground-form__output{display:block;box-sizing:border-box;min-block-size:calc(1.5em + 1.5rem);padding:.75rem 1rem;border:1px solid var(--gmt-code-border);border-radius:var(--gmt-radius-md);corner-shape:bevel;background:var(--gmt-code-surface);color:var(--gmt-ice);font-family:var(--gmt-font-mono);font-size:.85rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;&[data-state=live]{color:var(--gmt-spring-ink)}&[data-state=sentinel]{border-color:var(--gmt-signal-border);background:var(--gmt-signal-fill);color:var(--gmt-signal-ink)}&[data-state=empty]{color:var(--gmt-ice-dim);font-style:italic}}.gmt-playground-form__wrong{border-color:var(--gmt-signal-border)}.gmt-playground-form__right{border-color:color(from var(--gmt-spring) srgb r g b / 35%)}@media(prefers-reduced-motion:reduce){.gmt-playground-form__rowInput,.gmt-playground-form__rowSelect,.gmt-playground-form__remove,.gmt-playground-form__add{transition:none}}@media(forced-colors:active){.gmt-playground-form__rowInput,.gmt-playground-form__rowSelect{border-color:ButtonText;background-color:Field;color:FieldText;&:focus-visible{outline-color:Highlight}}.gmt-playground-form__remove,.gmt-playground-form__add{border-color:ButtonText;background-color:ButtonFace;color:ButtonText;&:focus-visible{outline-color:Highlight}}.gmt-playground-form__output{border-color:CanvasText;background:Canvas;color:CanvasText}.gmt-playground-form__listLabel,.gmt-playground-form__outputLabel{color:CanvasText}}@media(prefers-contrast:more){.gmt-playground-form__rowInput,.gmt-playground-form__rowSelect,.gmt-playground-form__remove,.gmt-playground-form__add,.gmt-playground-form__output{border-color:var(--gmt-ice)}.gmt-playground-form__outputLabel{color:var(--gmt-ice)}}
