*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#171b18;color:#e9e8df;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid #e87954;outline-offset:4px}.desktop-header{height:88px;max-width:1210px;padding:0 48px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff12}.desktop-header>span{font:10px monospace;letter-spacing:1.6px;color:#868f86}.brand{font-size:26px;letter-spacing:-1.3px;text-decoration:none;color:inherit;font-weight:600}.brand span{font-size:11px;color:#ed7753;margin-left:4px}main{max-width:1120px;margin:38px auto;display:grid;grid-template-columns:440px 1fr;gap:76px;padding:0 32px}.viewer{display:flex;align-items:center;flex-direction:column}.phone{width:390px;height:780px;background:#f3eddd;border-radius:36px;overflow:hidden;position:relative;box-shadow:0 24px 80px #0005;border:1px solid #ffffff22;isolation:isolate}#stage-wrap{position:absolute;inset:0;overflow:hidden}#stage{width:390px;height:780px;position:absolute;top:0;left:0;transform-origin:top left;overflow:hidden}#stage *{box-sizing:border-box}.surface-label{position:absolute;top:19px;left:30px;font:8px monospace;letter-spacing:1.8px;display:flex;align-items:center;gap:7px;mix-blend-mode:difference;color:white;pointer-events:none}.live-dot{width:5px;height:5px;border-radius:50%;background:#db926d;display:inline-block}.surface-label .live-dot{background:white}#captions{position:absolute;bottom:48px;left:22px;right:22px;text-align:center;pointer-events:none;font-size:16px;line-height:1.4;letter-spacing:-.2px;color:#fff;text-shadow:0 1px 8px #0009}#captions:not(:empty){background:#172019de;border-radius:12px;padding:12px 16px;backdrop-filter:blur(16px)}#captions mark{background:none;color:#f8bc81}.phone-footer{position:absolute;bottom:20px;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;color:white;mix-blend-mode:difference;pointer-events:none}.phone-footer span:first-child{font-size:16px;font-weight:600;letter-spacing:-.7px}.phone-footer span:last-child{font:7px monospace;letter-spacing:1.6px}.enable{position:absolute;bottom:85px;left:50%;transform:translateX(-50%);border:0;border-radius:100px;white-space:nowrap;padding:16px 23px;background:#202820;color:#f4f0e4;font-size:13px;box-shadow:0 8px 25px #0002}.enable span{margin-left:15px}.enable[hidden]{display:none}.under-phone{width:390px;display:flex;justify-content:space-between;margin-top:18px;font-size:11px;color:#8c968c}.under-phone button{background:none;color:#c4c9c0;border:0;font-size:11px}.studio{padding-top:16px;min-width:0}.studio-heading .eyebrow{font:9px monospace;letter-spacing:2px;color:#cf8f70}.studio h2{font:48px/1.08 Georgia,serif;letter-spacing:-1.8px;font-weight:normal;margin:17px 0}.studio h2 i{color:#d99777}.studio-heading p{color:#a1aaa0;font-size:13px;line-height:1.8;margin:0 0 24px}.demo-tabs{display:flex;gap:8px;margin-bottom:22px}.demo-tabs button{border:1px solid #ffffff1c;border-radius:7px;background:none;color:#aab4a8;padding:8px 10px;font-size:11px}.demo-tabs button.active{color:#f1c1a8;border-color:#a36f515a;background:#bb744214}.editor-heading{display:flex;justify-content:space-between;background:#202720;border:1px solid #ffffff12;border-bottom:0;padding:12px 15px;border-radius:10px 10px 0 0;font:10px monospace;color:#d1d7cb}.editor-heading span:last-child{font-size:8px;letter-spacing:1px;color:#7d8c7b}textarea{width:100%;height:302px;display:block;resize:vertical;background:#1d231d;border:1px solid #ffffff12;border-radius:0 0 10px 10px;color:#cbd9bf;padding:17px;font:11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;tab-size:2}textarea:focus{border-color:#62705b}.actions{display:flex;align-items:center;justify-content:space-between;margin:16px 0 23px}.actions label{font-size:10px;color:#82917e}.actions select{background:#202820;color:#c1ccbb;border:0;border-radius:4px;font-size:10px;padding:6px}.actions button{background:#e5a582;color:#28251f;border:0;border-radius:7px;padding:11px 15px;font-size:11px;font-weight:600}details{border-top:1px solid #ffffff12;padding-top:16px;font-size:11px;color:#a0ae9b}summary{cursor:pointer}summary span{float:right;font:10px monospace;color:#d59774}#events{max-height:160px;overflow:auto;margin-top:12px;font:10px/1.8 monospace}.event{display:flex;gap:10px;border-bottom:1px solid #ffffff08;padding:4px 0}.event b{color:#e0a47f;min-width:42px;font-weight:normal}.event span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.api-note{display:flex;align-items:center;gap:9px;margin-top:20px;font:9px monospace;color:#7f9279;line-height:1.6}
@media(max-width:850px){main{gap:26px;grid-template-columns:390px 1fr;padding:0 20px}.studio h2{font-size:36px}.desktop-header{padding:0 25px}.actions{gap:10px;flex-wrap:wrap}}
@media(max-width:650px){html,body{height:100%;overflow:hidden;background:#f3eddd}.desktop-header,.studio,.under-phone{display:none}main{margin:0;padding:0;display:block;height:100svh}.viewer{height:100%;display:block}.phone{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}.surface-label{top:max(19px,env(safe-area-inset-top));left:26px}.phone-footer{bottom:max(20px,env(safe-area-inset-bottom));left:26px;right:26px}#captions{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 34px)}.enable{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 74px)}}