.page_pageWrapper__o7IR0{background:#f8f9fa;min-height:100vh;padding-top:80px;padding-bottom:3rem}.page_container__rpHzn{max-width:1400px;margin:0 auto;padding:0 24px}.page_pageHeader__XCGW1{padding:2rem 0 1.5rem}.page_pageTitle__a1xHH{font-size:1.75rem;font-weight:700;color:#202124;margin-bottom:.5rem}.page_pageSubtitle__LKqy9{font-size:1rem;color:#5f6368;margin:0}.page_playgroundLayout__yzmPb{display:grid;grid-template-columns:380px 1fr;gap:1.5rem;align-items:start}.page_controlsPanel__kQ73a{background:#fff;border:1px solid #e8eaed;border-radius:16px;padding:1.5rem;position:sticky;top:90px;max-height:calc(100vh - 110px);overflow-y:auto}.page_controlsPanel__kQ73a::-webkit-scrollbar{width:4px}.page_controlsPanel__kQ73a::-webkit-scrollbar-track{background:transparent}.page_controlsPanel__kQ73a::-webkit-scrollbar-thumb{background:#dadce0;border-radius:4px}.page_controlSection__3blBu{margin-bottom:1.75rem}.page_controlSection__3blBu:last-child{margin-bottom:0}.page_controlSectionTitle__LFd1E{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#1a73e8;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #e8f0fe;display:flex;align-items:center;gap:.5rem}.page_controlGroup__sAs_P{margin-bottom:1rem}.page_controlGroup__sAs_P:last-child{margin-bottom:0}.page_controlLabel__gc8Nf{font-size:.8rem;font-weight:600;color:#3c4043;margin-bottom:.35rem;display:flex;align-items:center;justify-content:space-between}.page_attrName__5xWVB{font-size:.7rem;font-weight:500;color:#9aa0a6;font-family:SF Mono,Fira Code,monospace}.page_controlInput__0Nd_r{width:100%;padding:.6rem .75rem;border:2px solid #e8eaed;border-radius:8px;font-size:.875rem;font-family:inherit;color:#202124;transition:border-color .2s,box-shadow .2s;background:#fff}.page_controlInput__0Nd_r:focus{outline:none;border-color:#1a73e8;box-shadow:0 0 0 3px rgba(26,115,232,.1)}.page_controlSelect__AUT_x{width:100%;border:2px solid #e8eaed;border-radius:8px;font-size:.875rem;font-family:inherit;color:#202124;background:#fff;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem;padding:.6rem 2rem .6rem .75rem;transition:border-color .2s,box-shadow .2s}.page_controlSelect__AUT_x:focus{outline:none;border-color:#1a73e8;box-shadow:0 0 0 3px rgba(26,115,232,.1)}.page_colorInputRow__SJU47{display:flex;gap:.5rem;align-items:center}.page_colorSwatch__iRu8R{width:36px;height:36px;border:2px solid #e8eaed;border-radius:8px;cursor:pointer;padding:0;flex-shrink:0}.page_colorSwatch__iRu8R::-webkit-color-swatch-wrapper{padding:2px}.page_colorSwatch__iRu8R::-webkit-color-swatch{border:none;border-radius:4px}.page_rangeRow__6mDcK{display:flex;align-items:center;gap:.75rem}.page_rangeInput__Kgd5b{flex:1;accent-color:#1a73e8}.page_rangeValue__SLwzt{font-size:.8rem;font-weight:600;color:#202124;min-width:48px;text-align:right;font-family:SF Mono,Fira Code,monospace}.page_previewColumn__Q9ary{display:flex;flex-direction:column;gap:1.5rem;min-width:0;overflow:hidden}.page_previewPanel__IYNga{background:#fff;border:1px solid #e8eaed;border-radius:16px;overflow:hidden;min-width:0}.page_previewToolbar__H5ZWA{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;background:#f8f9fa;border-bottom:1px solid #e8eaed}.page_previewToolbarLeft__5uNQr{display:flex;align-items:center;gap:.5rem}.page_previewToolbarRight__377Pv{display:flex;align-items:center;gap:.75rem}.page_browserDots__niHtI{display:flex;gap:6px}.page_browserDots__niHtI span{width:10px;height:10px;border-radius:50%;display:block}.page_dotRed__8hWyz{background:#ea4335}.page_dotYellow__I9sjx{background:#fbbc04}.page_dotGreen__ycAmG{background:#34a853}.page_previewUrl__37wuc{background:#fff;border:1px solid #e8eaed;border-radius:6px;padding:.35rem .75rem;font-size:.75rem;color:#5f6368;margin-left:.75rem;min-width:200px}.page_viewportSelect__r0rI2{padding:.3rem 1.8rem .3rem .6rem;border:1.5px solid #e8eaed;border-radius:6px;font-size:.75rem;font-weight:600;font-family:inherit;color:#3c4043;background:#fff;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .4rem center;background-repeat:no-repeat;background-size:.85rem;transition:border-color .2s}.page_viewportSelect__r0rI2:hover{border-color:#1a73e8}.page_viewportSelect__r0rI2:focus{outline:none;border-color:#1a73e8}.page_previewViewport__j4_UO{position:relative;overflow:hidden;width:100%;min-height:300px}.page_previewArea__UyavM{position:relative;background:#fff;background-image:radial-gradient(circle,#e8eaed 1px,transparent 0);background-size:24px 24px;transform-origin:top left}.page_deviceTablet__iz6l8{background:#f1f3f4;display:flex;justify-content:center;padding:1.5rem 0}.page_deviceTablet__iz6l8 .page_previewArea__UyavM{border-radius:16px;box-shadow:0 0 0 3px #dadce0,0 8px 24px rgba(0,0,0,.1);overflow:hidden}.page_devicePhone__EClJ6{background:#202124;display:flex;justify-content:center;padding:1.5rem 0}.page_devicePhone__EClJ6 .page_previewArea__UyavM{border-radius:24px;box-shadow:0 0 0 3px #3c4043,0 8px 30px rgba(0,0,0,.2);overflow:hidden}.page_phoneMode__boSG0 .page_previewWidget__PYzc8.page_visible__QvYBQ{top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;border-radius:0;transform:none!important}.page_simContent__C6d5M{padding:3rem 2.5rem;max-width:600px}.page_simContent__C6d5M h2{font-size:1.5rem;font-weight:700;color:#202124;margin-bottom:.75rem}.page_simContent__C6d5M p{font-size:.9rem;color:#5f6368;margin-bottom:1rem;line-height:1.7}.page_simLine__wfcyX{height:10px;background:#f1f3f4;border-radius:5px;margin-bottom:.6rem}.page_previewButton__kRQkf{position:absolute;display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;border:none;border-radius:28px;color:#fff;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:transform .2s,box-shadow .2s;z-index:10}.page_previewButton__kRQkf:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(0,0,0,.25)}.page_previewButton__kRQkf svg{flex-shrink:0}.page_sizeSmall__3OIsh{height:40px;font-size:.8rem;padding:0 1rem}.page_sizeSmall__3OIsh svg{width:16px;height:16px}.page_sizeMedium__sfvLj{height:48px;font-size:.9rem}.page_sizeMedium__sfvLj svg{width:18px;height:18px}.page_sizeLarge__PkVoc{height:56px;font-size:1rem;padding:0 1.5rem}.page_sizeLarge__PkVoc svg{width:20px;height:20px}.page_posBottomRight___0aiV{bottom:24px;right:24px}.page_posBottomLeft__x6wYS{bottom:24px;left:24px}.page_previewWidget__PYzc8{position:absolute;background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.15);border:1px solid #e8eaed;display:none;flex-direction:column;overflow:hidden;z-index:20}.page_visible__QvYBQ{display:flex}.page_widgetPosRight__wr1jR{bottom:90px;right:24px}.page_widgetPosCenter___trIk{bottom:90px;left:50%;transform:translateX(-50%)}.page_widgetPosLeft__FtHia{bottom:90px;left:24px}.page_widgetHeader__o3pV4{padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f1f3f4;flex-shrink:0}.page_widgetHeaderLeft__ppYni{display:flex;align-items:center;gap:.6rem}.page_widgetAvatar__lG5fd{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;background-color:#1a73e8;flex-shrink:0}.page_widgetAvatar__lG5fd svg{width:18px;height:18px}.page_widgetTitle__9Xohn{font-size:.9rem;font-weight:600;color:#202124}.page_widgetClose__ogNve{background:none;border:none;color:#5f6368;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center}.page_widgetClose__ogNve:hover{background:#f1f3f4}.page_widgetClose__ogNve svg{width:18px;height:18px}.page_widgetBody__pKVSd{flex:1;padding:1.25rem;overflow-y:auto;background:#fafafa}.page_widgetBubble__BA1JF{background:#f1f3f4;border-radius:12px 12px 12px 4px;padding:.75rem 1rem;font-size:.85rem;color:#3c4043;line-height:1.5;max-width:85%;margin-bottom:.75rem}.page_widgetBubbleUser__qh_JK{background:#e8f0fe;border-radius:12px 12px 4px 12px;margin-left:auto;color:#1a73e8}.page_widgetInputArea__Dj__G{padding:.75rem 1rem;border-top:1px solid #f1f3f4;display:flex;align-items:center;gap:.5rem;flex-shrink:0}.page_widgetInput__pwIDG{flex:1;border:1.5px solid #e8eaed;border-radius:20px;padding:.6rem 1rem;font-size:.85rem;color:#202124;font-family:inherit;outline:none;background:#fff}.page_widgetSend__Wfl4y{width:36px;height:36px;border-radius:50%;border:none;color:#fff;background-color:#1a73e8;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.page_widgetSend__Wfl4y svg{width:16px;height:16px}.page_codePanel__PbC1G{background:#fff;border:1px solid #e8eaed;border-radius:16px;padding:1.25rem 1.5rem}.page_codeHeader__2R79j{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.page_codePanelTitle__DqPh2{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#3c4043;margin:0}.page_copyBtn__I4g4e{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;background:#e8f0fe;color:#1a73e8;border:none;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}.page_copyBtn__I4g4e:hover{background:#d2e3fc}.page_codeBlock__y1aZW{background:#f8f9fa;color:#3c4043;border:1px solid #e8eaed;border-radius:10px;padding:1rem;font-family:SF Mono,Fira Code,Courier New,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin:0}.page_codeTag__yF5He{color:#1a73e8}.page_codeAttr__mEFIS{color:#4338ca}.page_codeVal__wMcZN{color:#137333}@media (max-width:1100px){.page_playgroundLayout__yzmPb{grid-template-columns:320px 1fr}}@media (max-width:900px){.page_playgroundLayout__yzmPb{grid-template-columns:1fr}.page_controlsPanel__kQ73a{position:static;max-height:none}.page_previewColumn__Q9ary{min-width:0}.page_previewUrl__37wuc{display:none}}@media (max-width:600px){.page_previewToolbar__H5ZWA{flex-wrap:wrap;gap:.5rem}.page_viewportSelect__r0rI2{font-size:.7rem}}@media (max-width:480px){.page_pageWrapper__o7IR0{padding-top:70px}.page_pageTitle__a1xHH{font-size:1.4rem}.page_controlsPanel__kQ73a{padding:1rem}.page_container__rpHzn{padding:0 12px}}