/* Safari chrome at the demo's 375 × 816.25 logical screen size. */
.sf-icon{display:block;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.safari-browser-toolbar{position:absolute;bottom:31px;left:13px;right:13px;height:46px;display:flex;gap:7px;align-items:center;z-index:9;opacity:0;color:#111}
.sf-toolbar-circle,.sf-address{background:#f8f8facf;border:.7px solid #d5d5d8;box-shadow:inset 0 1px 2px #fff,0 4px 15px #00000005;backdrop-filter:blur(20px)}
.sf-toolbar-circle{height:46px;width:46px;flex:none;border-radius:50%;display:grid;place-items:center}.sf-back{color:#c3c3c8}
.sf-address{height:46px;flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-radius:28px}.sf-address b{font-size:16px;font-weight:550}.sf-address .sf-icon{width:19px;height:19px}
.safari-page-menu{position:absolute;left:78px;bottom:31px;width:231px;padding:9px 22px 8px;z-index:10;color:#111;background:#fafafbed;backdrop-filter:blur(24px);border:.7px solid #ccc;border-radius:31px;box-shadow:0 8px 32px #0002;transform-origin:35px bottom;opacity:0}
.sf-menu-row{display:flex;align-items:center;gap:13px;min-height:39px;text-align:left;font-size:16px;line-height:19px;letter-spacing:-.25px}.sf-menu-row>.sf-icon{width:19px;height:19px}.sf-menu-row>span{flex:1}.sf-menu-row>.sf-icon:last-child:not(:first-child){width:14px;height:14px}.safari-page-menu hr{border:0;border-top:.7px solid #dedee0;margin:10px 0}.safari-page-menu .sf-menu-row:has(br){height:53px}
.safari-share-sheet{position:absolute;left:10px;right:10px;bottom:8px;height:360px;padding:24px 16px 18px;z-index:10;overflow:hidden;color:#111;background:#ffffffed;backdrop-filter:blur(25px);border:.7px solid #d0d0d2;border-radius:40px;box-shadow:0 -4px 32px #00000013;opacity:0}
.sf-share-heading{height:94px;padding:0 12px;display:flex;gap:15px;align-items:flex-start;text-align:left}.sf-share-heading>img{width:60px;height:60px;flex:none;border-radius:15px;box-shadow:0 2px 7px #0002}.sf-share-heading strong{display:block;font-size:15px;line-height:19px}.sf-share-heading small{display:block;font-size:14px;color:#909093;line-height:20px}.sf-options{display:flex;align-items:center;gap:5px;font-size:14px;background:#f6f6f8;border-radius:20px;padding:5px 10px;margin-top:9px;width:max-content}.sf-options .sf-icon{width:11px;height:11px;color:#777}
.sf-share-close{position:absolute;right:12px;top:8px;width:42px;height:42px;border:.7px solid #d3d3d5;border-radius:50%;display:grid;place-items:center;background:#fafafb;opacity:0}.sf-share-close>.sf-icon{width:25px;height:25px}
.sf-app-tiles,.sf-action-tiles{height:112px;margin:0 12px;border-top:.7px solid #ddd;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:14px}.sf-tile{text-align:center;min-width:0}.sf-tile>span{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 7px;background:#fff;border-radius:15px}.sf-app-tiles .sf-tile>span{box-shadow:0 1px 5px #0001;border:1px solid #e1e1e3}.sf-tile>small{font-size:11px;line-height:14px;display:block;color:#111}.sf-app-tiles .sf-icon{width:33px;height:33px;color:#73757d}.sf-generic-notes>span{background:#f2e9d8}.sf-generic-lists>span{background:#e5ebf4}.sf-generic-browser>span{background:#dfece7}
.sf-action-tiles .sf-tile>span{border-radius:50%;background:#e8e8e9}.sf-action-tiles .sf-icon{width:31px;height:31px;stroke-width:1.8}.sf-view-more .sf-expand-icon .sf-icon{transform:rotate(var(--expand-angle,0deg))}
.sf-extra-actions{margin-top:14px}.sf-action-group{border-radius:23px;background:#ececed;overflow:hidden;margin-bottom:20px}.sf-action-group .sf-menu-row{height:47px;min-height:47px;padding:0 18px;gap:13px;position:relative}.sf-action-group .sf-menu-row+.sf-menu-row:before{content:"";position:absolute;left:52px;right:16px;top:0;border-top:.7px solid #d5d5d7}.sf-action-group .sf-menu-row>.sf-icon{width:21px;height:21px}.sf-edit-actions{display:block;width:max-content;margin:0 auto;padding:6px 12px;border:1px solid #e6e6e8;border-radius:22px;font-size:14px}
.safari-dimmer{position:absolute;inset:0;background:#0004;z-index:9;opacity:0;pointer-events:none}
.safari-add-sheet{position:absolute;left:0;right:0;bottom:0;height:758px;z-index:10;overflow:hidden;color:#111;background:#f2f2f7;border-radius:36px 36px 0 0;opacity:0;text-align:left}
.sf-add-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:.7px solid #dddde2}.sf-add-header b{font-size:16px;font-weight:650;letter-spacing:-.3px}.sf-close{width:42px;height:42px;display:grid;place-items:center;border:.7px solid #c7c7cb;border-radius:50%;background:#f8f8fb}.sf-close>.sf-icon{width:26px;height:26px}.sf-add-button{height:42px;width:61px;border-radius:25px;background:#009aff;color:white;display:grid;place-items:center;font-size:16px;font-weight:550}
.sf-site-record{height:89px;display:flex;align-items:center;gap:14px;padding:0 14px;background:white}.sf-site-record>img{width:56px;height:56px;border-radius:15px;border:.7px solid #ddd}.sf-site-record>div{flex:1;min-width:0}.sf-name{height:39px;font-size:17px;display:flex;align-items:center;border-bottom:.7px solid #e4e4e7;gap:1px}.sf-name>i{height:20px;width:1.5px;background:#009aff}.sf-name>span{margin-left:auto;width:16px;height:16px;border-radius:50%;background:#ceced0;color:white;display:grid;place-items:center}.sf-name .sf-icon{width:10px;height:10px;stroke-width:2.3}.sf-url{height:36px;display:flex;align-items:center;color:#bdbdc3;font-size:15px;white-space:nowrap;overflow:hidden}
.sf-webapp-option{margin-top:34px;background:white;height:47px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font-size:16px}.sf-switch{width:58px;height:26px;border-radius:16px;background:#00c94f;position:relative}.sf-switch:after{content:"";position:absolute;right:2px;top:2px;width:34px;height:22px;border-radius:15px;background:white;box-shadow:0 1px 2px #0001}.sf-add-note{font-size:12px;line-height:15px;color:#8d8d95;padding:8px 18px;margin:0}
.sf-system-keyboard{position:absolute;left:0;right:0;bottom:0;height:306px;background:#e1e1e9;border-radius:28px 28px 0 0;border-top:.7px solid #d0d0da;padding:0 5px}.sf-predictions{height:48px;display:flex;align-items:center;font-size:15px;color:#55565b}.sf-predictions>span{flex:1;text-align:center;line-height:22px}.sf-predictions>span+span{border-left:1px solid #d1d1da}.sf-key-row{display:flex;gap:5px;height:40px;margin-bottom:10px}.sf-key{height:40px;min-width:0;flex:1;background:white;border-radius:7px;display:grid;place-items:center;font-size:26px;line-height:1;color:#090909}.sf-second-row{margin-left:18px;margin-right:18px}.sf-third-row{gap:5px}.sf-key.sf-shift,.sf-key.sf-delete{flex:1.25}.sf-shift{margin-right:10px}.sf-delete{margin-left:10px}.sf-key>.sf-icon{width:21px;height:21px;stroke-width:1.8}.sf-key.sf-numbers{flex:none;width:43px;font-size:16px}.sf-key.sf-emoji{flex:none;width:39px}.sf-key.sf-space{position:relative}.sf-space small{font-size:10px;color:#ccc;position:absolute;bottom:4px;right:5px}.sf-key.sf-done{flex:none;width:68px;background:#0088ff;color:white}.sf-done>.sf-icon{width:24px;height:24px}.sf-key-footer{display:flex;align-items:center;justify-content:space-between;padding:7px 22px 0}.sf-key-footer>.sf-icon{width:25px;height:25px}