:root{color:#102a43;background:#f1f5f9;font-family:Avenir Next,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box}body{background:#f7f9fc;min-height:100vh;margin:0}a{color:#0f766e}.page-shell{place-items:center;min-height:100vh;padding:24px;display:grid}.card{background:#fff;border:1px solid #d8e2ea;border-radius:8px;width:min(560px,100%);padding:28px;box-shadow:0 18px 42px #0f172a12}.app-heading{align-items:center;gap:16px;margin-bottom:16px;display:flex}.app-icon{background:linear-gradient(145deg,#0f766e,#2563eb);border-radius:14px;flex:none;width:58px;height:58px;position:relative;box-shadow:inset 0 1px #ffffff52}.app-icon:before{content:"";border:3px solid #ffffffeb;border-radius:50%;position:absolute;inset:13px}.app-icon:after{content:"";transform-origin:bottom;background:#fff;border-radius:999px;width:3px;height:16px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.eyebrow{color:#486581;text-transform:uppercase;letter-spacing:.04em;margin:0 0 2px;font-size:.82rem;font-weight:700}.title{margin:0;font-size:1.85rem;line-height:1.15}.subtitle{color:#4a6178;margin:0 0 16px}.button-row{flex-wrap:wrap;gap:12px;margin-top:18px;display:flex}.button{cursor:pointer;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;min-height:46px;padding:12px 17px;font-weight:600;text-decoration:none;display:inline-flex}.button-primary{color:#fff;background:#0b6f68}.button-secondary{color:#102a43;background:#eef3f8;border-color:#d8e2ea}.button-apple-test{color:#9a3412;background:#fff7ed;border-color:#fdba74}.button:disabled{opacity:.55;cursor:not-allowed}.form-grid{gap:10px;margin-top:10px;display:grid}.field-label{color:#243b53;margin:6px 0 0;font-weight:600}.text-input{width:100%;font:inherit;color:#102a43;background:#fff;border:1px solid #bcccdc;border-radius:8px;padding:11px 12px}.text-input:focus-visible{border-color:#0f766e;outline:2px solid #0f766e33}.status{color:#334e68;margin-top:12px;font-size:.95rem}.continuation-panel{background:#f8fafc;border:1px solid #bfdbfe;border-radius:8px;margin-top:18px;padding:16px}.continuation-panel summary{cursor:pointer;color:#243b53;font-weight:700}.continuation-copy{color:#334e68;margin:12px 0}.continuation-code{color:#0f172a;letter-spacing:.12em;background:#fff;border:1px solid #93c5fd;border-radius:8px;justify-content:center;align-items:center;min-width:0;padding:12px 16px;font-size:1.1rem;font-weight:700;display:inline-flex}.error{color:#b42318;margin-top:12px;font-size:.95rem;font-weight:600}.meta-list{color:#334e68;margin:16px 0 0;padding-left:20px}.code-block{background:#f8fafc;border:1px solid #dbe7f1;border-radius:8px;margin:12px 0 0;padding:14px;font-size:.9rem;overflow-x:auto}.demo-header{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.demo-nav{flex-wrap:wrap;gap:14px;margin:2px 0 18px;display:flex}.demo-nav a{color:#115e59;background:#e0f2f1;border:1px solid #99f6e4;border-radius:8px;align-items:center;padding:8px 12px;font-weight:600;text-decoration:none;display:inline-flex}.result-panel{background:#f8fafc;border:1px solid #dbe7f1;border-radius:8px;margin-top:18px;padding:14px}.result-panel h3{margin:0}.result-panel code{overflow-wrap:anywhere;word-break:break-word}.copy-row{align-items:flex-start;gap:10px;margin-top:6px;margin-bottom:12px;display:flex}.code-value{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:#fff;border:1px solid #dbe7f1;border-radius:8px;flex:1;min-width:0;max-width:100%;padding:9px 10px;display:block;overflow-x:auto}.advanced-panel{background:#f8fafc;border:1px solid #dbe7f1;border-radius:8px;gap:10px;margin-top:6px;padding:0 12px 12px;display:grid}.advanced-panel summary{cursor:pointer;color:#243b53;padding-top:10px;font-weight:600;list-style:none}.advanced-panel summary::-webkit-details-marker{display:none}.advanced-panel summary:before{content:"▸";margin-right:6px}.advanced-panel[open] summary:before{content:"▾"}.debug-panel{background:#f8fbff;border:1px dashed #93c5fd;border-radius:8px;margin-top:16px}.debug-panel summary{cursor:pointer;padding:10px 12px;font-weight:600}.debug-panel pre{white-space:pre-wrap;margin:0;padding:0 12px 12px;font-size:.8rem}@media (max-width:640px){.page-shell{padding:16px}.card{padding:20px}.app-heading{align-items:flex-start;gap:13px}.app-icon{border-radius:13px;width:52px;height:52px}.title{font-size:1.55rem}.button-row .button{width:100%}.demo-header,.copy-row{flex-direction:column}.copy-row .button{width:100%}}