.C9I-3a_grid{grid-template-columns:280px 1fr;align-items:start;gap:48px;display:grid}.C9I-3a_controls{flex-direction:column;gap:32px;display:flex}.C9I-3a_field,.C9I-3a_group{border:0;flex-direction:column;gap:12px;margin:0;padding:0;display:flex}.C9I-3a_row{justify-content:space-between;font-weight:500;display:flex}.C9I-3a_value{color:#6b6b6b;font-variant-numeric:tabular-nums;font-weight:400}.C9I-3a_legend{margin-bottom:12px;padding:0;font-weight:500}.C9I-3a_hint{color:#6b6b6b;margin:0;font-size:13px}.C9I-3a_check{align-items:center;gap:8px;display:flex}.C9I-3a_color{grid-template-columns:32px 1fr 88px;align-items:center;gap:12px;display:grid}.C9I-3a_color input[type=color]{cursor:pointer;background:0 0;border:1px solid #1111111a;border-radius:8px;width:32px;height:32px;padding:0}.C9I-3a_hex{border:1px solid #1111111a;border-radius:8px;height:32px;padding:0 8px;font:13px/1 ui-monospace,SF Mono,Menlo,monospace}.C9I-3a_range{accent-color:#111}.C9I-3a_output{flex-direction:column;gap:16px;min-width:0;display:flex}.C9I-3a_stage{--skeleton:#11111114;background:#fff;border:1px solid #11111114;border-radius:12px;flex-direction:column;justify-content:flex-end;min-height:200px;padding:0 24px;display:flex;position:relative}.C9I-3a_stageDark{--skeleton:#ffffff1a;background:#111}.C9I-3a_stage:before,.C9I-3a_stage:after{content:"";background:linear-gradient(var(--skeleton) 0 0) 0 0 / 80% 12px no-repeat, linear-gradient(var(--skeleton) 0 0) 0 100% / 50% 12px no-repeat;border-radius:6px;width:28%;height:40px;position:absolute;bottom:24px}.C9I-3a_stage:before{left:24px}.C9I-3a_stage:after{background-position:100% 0,100% 100%;right:24px}.C9I-3a_segmented{background:#f0f0f0;border-radius:10px;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;display:grid}.C9I-3a_segment{position:relative}.C9I-3a_segment input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.C9I-3a_segment span{color:#6b6b6b;border-radius:6px;place-items:center;height:32px;font-size:14px;transition:background-color .15s,color .15s;display:grid}.C9I-3a_segment input:checked+span{color:#111;background:#fff;font-weight:500;box-shadow:0 1px 2px #11111114,0 0 0 1px #1111110f}.C9I-3a_segment input:focus-visible+span{outline-offset:2px;outline:2px solid #111}.C9I-3a_code{background:#f4f4f4;border-radius:12px;align-items:center;gap:12px;padding:12px 12px 12px 16px;display:flex}.C9I-3a_code pre{white-space:pre-wrap;word-break:break-all;flex:1;margin:0;font:13px/1.5 ui-monospace,SF Mono,Menlo,monospace}.C9I-3a_copy{color:#fff;height:36px;font:inherit;cursor:pointer;background:#111;border:0;border-radius:8px;flex:none;padding:0 16px;font-size:14px;font-weight:500;transition:background-color .15s,transform .1s}.C9I-3a_copy:hover{background:#333}.C9I-3a_copy:active{transform:scale(.98)}.C9I-3a_copy:focus-visible,.C9I-3a_hex:focus-visible,.C9I-3a_color input[type=color]:focus-visible{outline-offset:2px;outline:2px solid #111}@media (max-width:760px){.C9I-3a_grid{grid-template-columns:1fr;gap:32px}}