.input-container{flex-direction:column;align-items:flex-start;gap:4px;width:100%;display:flex}.input-label{color:#0e0f0c;font-size:14px;font-weight:600}.input{color:#0e0f0c;background:#fff;border:1px solid #868685;border-radius:10px;width:100%;height:48px;padding:12px 16px}.input::placeholder{color:#737570}.paste-button{color:#454745;cursor:pointer;background:#f1f1ed;border:0;border-radius:100px;align-items:center;gap:6px;min-height:32px;padding:4px 8px 4px 7px;font-size:14px;font-weight:500;line-height:1.55;display:inline-flex}.paste-button:hover:not(:disabled){background:#e7e7e1}.paste-button:disabled{cursor:wait;opacity:.78}.paste-button--success{color:#054d28;background:#e2f6d5;text-decoration:none}.spinner{border:2px solid #c9cbc5;border-top-color:#454745;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.4s}}.form-group{flex-direction:column;align-items:flex-start;gap:16px;width:min(392px,100%);padding:24px 16px;display:flex;position:relative}.paste-capture{opacity:0;pointer-events:none;border:0;width:1px;height:1px;padding:0;position:absolute;left:-9999px}.group-header{border-bottom:1px solid #cac8c8;justify-content:space-between;align-items:center;gap:16px;width:100%;padding-bottom:8px;display:flex}.form-group-label{color:#454745;letter-spacing:-.084px;margin:0;font-size:14px;font-weight:500;line-height:1.4}.inputs-container{flex-direction:column;gap:16px;width:100%;display:flex}.code-panel{background:#fbfbfa;border-top:1px solid #e2e2df;flex-direction:column;flex:auto;min-height:0;display:flex;position:relative}.code-stage{background:#fbfbfa;flex:auto;min-height:0;position:relative;overflow:hidden}.code-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-x pan-y;position:absolute;inset:0;overflow:auto}.code-content{width:max-content;min-width:100%;min-height:100%;position:relative}.code-input,.syntax-layer{box-sizing:border-box;font-variant-ligatures:none;tab-size:2;white-space:pre;border:0;margin:0;padding:30px 40px 64px 96px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:14px;font-weight:400;line-height:21px}.syntax-layer{z-index:1;color:#252934;pointer-events:none;width:100%;min-width:100%;min-height:100%;position:relative;overflow:visible}.code-input{z-index:2;resize:none;caret-color:#111827;color:#0000;-webkit-text-fill-color:transparent;background:0 0;outline:none;width:100%;height:100%;min-height:100%;position:absolute;inset:0;overflow:hidden}.code-input::selection{background:#3a7bd538}.line-number-gutter{z-index:3;color:#858681;pointer-events:none;text-align:right;background:#fbfbfa;width:76px;padding-top:30px;position:absolute;top:0;bottom:0;left:0;overflow:hidden}.line-number-track{flex-direction:column;padding-right:18px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:14px;line-height:21px;display:flex}.syntax-keyword{color:#db3340}.syntax-string{color:#003b7a}.syntax-tag{color:#7734a7}.syntax-prop{color:#9b4b12}.syntax-comment{color:#777b75;font-style:italic}.editor-error{color:#a1222a;background:#fff5f5;border-top:1px solid #f1c5c8;align-items:center;gap:7px;min-height:44px;padding:9px 20px;font-size:12px;font-weight:600;display:flex}.status-dot{background:#cb272f;border-radius:50%;flex:none;width:7px;height:7px}@media (max-width:700px){.code-stage{min-height:240px}.code-input,.syntax-layer{padding:24px 24px 60px 62px;line-height:21px}.line-number-gutter{width:48px;padding-top:24px}.line-number-track{padding-right:10px;line-height:21px}}#root{align-items:center;min-height:100vh;display:flex}.playground-shell{justify-content:center;width:min(1280px,100% - 48px);margin:0 auto;padding:30px 0 60px;display:flex}.playground-card{background:#fff;border:1px solid #dededb;border-radius:34px;flex-direction:column;width:100%;height:800px;max-height:800px;display:flex;position:relative;overflow:hidden}.preview-panel{background:#fff;flex:none;place-items:center;padding:48px 24px;display:grid}.preview-panel .form-group{width:min(392px,100%)}@media (min-width:841px){.playground-card{flex-direction:row}.preview-panel{width:50%}}@media (max-width:700px){.playground-shell{width:min(100% - 20px,1280px);padding:10px 0 32px}.playground-card{border-radius:22px}.preview-panel{min-height:500px;padding:42px 10px}}