.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 (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 (width>=841px){.playground-card{flex-direction:row}.preview-panel{width:50%}}@media (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}}*{box-sizing:border-box}:root{color:#0e0f0c;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f5f5f1;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #16330038}.toast-region{z-index:20;pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:min(360px,100vw - 40px);display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.toast{color:#fff;text-align:center;border-radius:10px;width:fit-content;max-width:100%;padding:12px 16px;font-size:14px;font-weight:600;animation:.18s ease-out toast-enter;box-shadow:0 8px 30px #0e0f0c24}.toast--success{background:#054d28}.toast--error{background:#b4232b}.toast--info{background:#454745}@keyframes toast-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}