.oc-studio{text-align:left;gap:1.5rem;display:grid}@media (width>=860px){.oc-studio{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}.oc-studio.oc-sheet{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}.oc-form{gap:1rem;min-width:0;display:grid}.oc-row{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem;display:grid}.oc-field{border:0;gap:.4rem;min-width:0;margin:0;padding:0;display:grid}.oc-label{font-size:.8125rem;font-weight:600}.oc-field input,.oc-field select,.oc-field textarea{border:1px solid var(--input,var(--border));background:var(--card,#fff);width:100%;min-width:0;color:inherit;font:inherit;border-radius:.625rem;padding:.6rem .75rem;font-size:.9375rem}.oc-field textarea{resize:vertical}.oc-field input:focus-visible,.oc-field select:focus-visible,.oc-field textarea:focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 55%, transparent);outline-offset:1px}.oc-style-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;display:grid}.oc-style{border:1px solid var(--border);background:var(--card,#fff);color:inherit;cursor:pointer;border-radius:.75rem;justify-items:center;gap:.35rem;padding:.45rem .25rem .5rem;font-size:.75rem;font-weight:600;display:grid}.oc-style img{aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:.45rem;width:100%;max-width:3.5rem}.oc-chips{flex-wrap:wrap;gap:.4rem;display:flex}.oc-chip,.oc-segment button{border:1px solid var(--border);background:var(--card,#fff);color:inherit;font:inherit;cursor:pointer;border-radius:999px;padding:.4rem .75rem;font-size:.8125rem}.oc-segment{flex-wrap:wrap;gap:.4rem;display:inline-flex}.oc-style[data-selected],.oc-chip[data-selected],.oc-segment button[data-selected],.oc-mine button[data-selected]{border-color:color-mix(in oklab, var(--brand) 70%, transparent);background:color-mix(in oklab, var(--brand) 8%, var(--card,#fff))}.oc-swatches{flex-wrap:wrap;gap:.4rem;display:flex}.oc-swatch{cursor:pointer;border:1px solid #00000024;border-radius:999px;width:1.75rem;height:1.75rem}.oc-swatch[data-selected]{outline:2px solid var(--brand);outline-offset:2px}.oc-upload{border:1px dashed var(--input,var(--border));color:var(--muted-foreground);cursor:pointer;border-radius:.625rem;align-items:center;gap:.5rem;padding:.6rem .75rem;font-size:.875rem;display:inline-flex}.oc-upload:hover{color:var(--foreground)}.oc-ref{width:6rem;position:relative}.oc-ref img{border:1px solid var(--border);background:var(--muted,#f5f5f4);object-fit:contain;border-radius:.625rem;width:6rem;height:8rem;display:block}.oc-ref>button:not(.oc-zoom){border:1px solid var(--border);background:var(--card,#fff);cursor:pointer;border-radius:999px;place-items:center;width:1.5rem;height:1.5rem;display:grid;position:absolute;top:-.4rem;right:-.4rem}.oc-check{align-items:flex-start;gap:.5rem;font-size:.8125rem;display:flex}.oc-check input{width:auto;accent-color:var(--brand);flex:none;margin-top:.2rem;padding:0}.oc-actions{flex-wrap:wrap;gap:.6rem;display:flex}.oc-btn{gap:.5rem}.oc-btn:disabled{opacity:.6;cursor:not-allowed}.oc-steady{font-variant-numeric:tabular-nums;justify-items:center;display:inline-grid}.oc-steady>span{white-space:nowrap;grid-area:1/1}.oc-steady-sizer{visibility:hidden}.oc-muted{color:var(--muted-foreground)}.oc-small{margin:0;font-size:.8125rem;line-height:1.5}.oc-link{color:inherit;text-underline-offset:2px;cursor:pointer;text-decoration:underline}.oc-problem{background:color-mix(in oklab, #e11d48 6%, var(--card,#fff));border:1px solid oklab(58.5838% .211667 .0670822/.3);border-radius:.75rem;justify-items:start;gap:.6rem;padding:.75rem .9rem;font-size:.875rem;display:grid}.oc-problem p{margin:0}.oc-result{gap:.75rem;min-width:0;display:grid}.oc-result-frame{aspect-ratio:3/4;border:1px solid var(--border);background:var(--muted,#f5f5f4);border-radius:1rem;margin:0;position:relative;overflow:hidden}.oc-result-frame.oc-wide{aspect-ratio:16/9}.oc-base .oc-result-frame{aspect-ratio:2/3}.oc-result-frame img{object-fit:contain;width:100%;height:100%;display:block}.oc-result-frame figcaption{background:#ffffffd9;border-radius:999px;padding:.25rem .6rem;font-size:.75rem;font-weight:600;position:absolute;bottom:.75rem;left:.75rem}.oc-result-frame[data-busy] img{opacity:.35;filter:blur(2px)}.oc-next{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.oc-next .oc-small{flex-basis:100%}.oc-checker{background-color:#fff;background-image:linear-gradient(45deg,#ececec 25%,#0000 25%),linear-gradient(-45deg,#ececec 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ececec 75%),linear-gradient(-45deg,#0000 75%,#ececec 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.oc-mine{grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));gap:.5rem;display:grid}.oc-mine button{border:1px solid var(--border);background:var(--card,#fff);cursor:pointer;border-radius:.6rem;padding:.2rem}.oc-mine img{aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:.45rem;width:100%;display:block}.oc-gallery{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:1rem;display:grid}.oc-gallery-item{margin:0}.oc-gallery-item .oc-checker{border:1px solid var(--border);border-radius:.875rem;overflow:hidden}.oc-gallery-item img{aspect-ratio:2/3;object-fit:contain;width:100%;display:block}.oc-gallery-item figcaption{justify-content:space-between;gap:.5rem;margin-top:.4rem;font-size:.8125rem;display:flex}.oc-text-results{align-content:start;gap:.75rem;min-width:0;display:grid}.oc-list,.oc-names{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.oc-list li,.oc-names li{border:1px solid var(--border);background:var(--card,#fff);border-radius:.75rem;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:.7rem .85rem;font-size:.9375rem;line-height:1.5;display:flex}.oc-names li{grid-template-columns:auto 1fr auto;align-items:baseline;display:grid}.oc-names li span{color:var(--muted-foreground);font-size:.8125rem}.oc-copy{border:1px solid var(--border);color:var(--muted-foreground);font:inherit;cursor:pointer;background:0 0;border-radius:999px;flex:none;align-items:center;gap:.3rem;padding:.2rem .5rem;font-size:.75rem;display:inline-flex}.oc-ideas{gap:.75rem;display:grid}.oc-idea{border:1px solid var(--border);background:var(--card,#fff);border-radius:.875rem;padding:.9rem 1rem}.oc-idea h3{margin:0 0 .35rem;font-size:1rem}.oc-idea h3 span{color:var(--muted-foreground);font-weight:500}.oc-idea p{margin:.2rem 0;font-size:.875rem;line-height:1.5}.oc-idea-actions{align-items:center;gap:.75rem;margin-top:.5rem;display:flex}.oc-example-note{border:1px dashed var(--border);color:var(--muted-foreground);border-radius:.875rem;margin:0;padding:1rem;font-size:.9375rem;line-height:1.55}@media (width<=520px){.oc-style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.oc-copyblock{border:1px solid var(--border);background:var(--card,#fff);border-radius:.875rem;margin:1.25rem 0;overflow:hidden}.oc-copyblock figcaption{border-bottom:1px solid var(--border);background:var(--muted,#f5f5f4);justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem .85rem;font-size:.875rem;font-weight:600;display:flex}.oc-copyblock pre{white-space:pre-wrap;margin:0;padding:.9rem 1rem;font-family:inherit;font-size:.875rem;line-height:1.6;overflow-x:auto}.oc-zoom{border-radius:inherit;cursor:zoom-in;background:0 0;border:0;width:100%;padding:0;display:block}.oc-ref .oc-zoom{width:auto}.oc-result-frame .oc-zoom{height:100%}.oc-zoom:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.oc-lightbox{background:#fff;border:0;border-radius:1rem;max-width:min(92vw,72rem);max-height:92vh;margin:auto;padding:0;overflow:visible}.oc-lightbox::backdrop{background:#0a0a0ab8}.oc-lightbox img{object-fit:contain;border-radius:1rem;width:auto;max-width:min(92vw,72rem);height:auto;max-height:92vh;display:block}.oc-lightbox-close{border:1px solid var(--border);color:#0a0a0a;cursor:pointer;background:#fff;border-radius:999px;place-items:center;width:2.25rem;height:2.25rem;display:grid;position:absolute;top:-.75rem;right:-.75rem}.oc-tool-card{padding:1.25rem}@media (width>=640px){.oc-tool-card{padding:1.75rem}}.oc-tools-grid{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.75rem;margin:1.25rem 0 0;padding:0;list-style:none;display:grid}.oc-tool-link{border:1px solid var(--border);background:var(--card,#fff);height:100%;color:inherit;border-radius:.875rem;align-content:start;gap:.25rem;padding:.9rem 1rem;text-decoration:none;display:grid}.oc-tool-link:hover{border-color:var(--brand)}.oc-tool-link span{color:var(--muted-foreground);font-size:.875rem;line-height:1.45}.oc-name-lists{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.25rem;display:grid}.oc-idea-list{gap:.6rem;margin:0;padding-left:1.25rem;line-height:1.55;display:grid}
