.browser-mode .app-nav{display:none}
.browser-mode .app-content{position:absolute;inset:59px 0 0;padding:0;height:auto;overflow:hidden}
.safari-browser{position:absolute;inset:0;background:#faf9fb;display:flex;flex-direction:column;color:#24232a}
.browser-header{height:35px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:#f5f4f8;border-bottom:1px solid #dfdce780}
.browser-header>button:first-child{padding:0;background:none;color:#2676d7;font-size:13px;font-weight:550;min-width:30px;text-align:left}
.browser-header>span{font-size:11px;font-weight:600;color:#676270}
.browser-header .browser-icon-button{width:27px;height:27px;padding:4px;color:#347fdb}
.browser-viewport{position:relative;flex:1;min-height:0;background:#fff;overflow:hidden}
#project-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:white;display:block}
.browser-loading{position:absolute;inset:0;background:#f8f7fa;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;transition:opacity .25s;pointer-events:none;opacity:0;visibility:hidden}
.is-loading .browser-loading{opacity:1;visibility:visible}
.browser-site-monogram{width:71px;height:71px;border-radius:19px;display:grid;place-items:center;margin-bottom:5px;font-size:32px}
.browser-site-monogram.dil{font-family:Georgia,serif;font-style:italic;background:#e5e8da;color:#344330}
.browser-site-monogram.kaya{background:#292c30;color:#e2d1b4;font-size:22px;letter-spacing:2px}
.browser-loading>strong{font-size:17px;letter-spacing:-.4px}
.browser-loading>span:nth-last-child(2){font-size:11px;color:#99919f}
.browser-spinner{width:17px;height:17px;border:2px solid #d9d6df;border-top-color:#8d849e;border-radius:50%;animation:browser-spin .8s linear infinite;margin-top:8px}
.safari-toolbar{flex-shrink:0;position:relative;padding:10px 17px 27px;background:linear-gradient(160deg,#f5f3f9e8,#e9e5f0ef);backdrop-filter:blur(30px) saturate(1.5);border-top:1px solid #d8d4e060;box-shadow:0 -4px 24px #30243c09}
.browser-address{position:relative;height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-radius:16px;background:#dcd9e77d;box-shadow:inset 0 1px 0 #fff9,0 2px 5px #33264009;overflow:hidden}
.browser-text-icon{font-size:15px;letter-spacing:-1px;color:#71697b;width:24px}
.browser-origin{display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:450;letter-spacing:-.15px;min-width:0}
.browser-origin>svg{width:9px;height:11px;stroke:#8c8397;stroke-width:1.5;fill:none}
.browser-icon-button{width:30px;height:30px;display:grid;place-items:center;padding:4px;background:none;color:#2876d5;text-decoration:none;flex-shrink:0}
.browser-icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.browser-reload{color:#6f667b;width:24px;height:30px;padding:4px}
.browser-reload svg{width:17px;height:17px}
.browser-progress{position:absolute;bottom:0;left:0;height:2px;width:0;background:#368df5;opacity:0}
.is-loading .browser-progress{opacity:1;animation:browser-progress 15s cubic-bezier(.15,.6,.1,1) forwards}
.browser-actions{display:flex;align-items:center;justify-content:space-between;margin:7px 2px -2px;height:30px}
.browser-actions>button:first-child{display:flex;align-items:center;gap:5px;background:none;padding:0;color:#2876d5;font-size:11px;min-height:30px}
.browser-actions>button:first-child>span:first-child{font-size:30px;line-height:20px;font-weight:300;margin-top:-4px}
.browser-notice{position:absolute;bottom:14px;left:13px;right:13px;border:1px solid #e4e0eb;background:#fbfafff2;backdrop-filter:blur(25px);padding:18px;border-radius:22px;box-shadow:0 10px 35px #36274528;z-index:2}
.browser-notice[hidden],.browser-tab-sheet[hidden]{display:none}
.browser-notice strong{font-size:14px}
.browser-notice p{font-size:11px;color:#8a7e98;line-height:1.6;margin:7px 0 13px}
.browser-notice>div{display:flex;justify-content:space-between;gap:10px;align-items:center}
.browser-notice button,.browser-notice a{font-size:10px;background:none;color:#2876d5;padding:0;text-decoration:none}
.browser-tab-sheet{position:absolute;inset:0;background:linear-gradient(150deg,#eee9f2f2,#d9d4e7f7);backdrop-filter:blur(30px);padding:15px 17px 30px;z-index:3;animation:spotlight-in .25s ease}
.browser-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:2px 0 25px}
.browser-sheet-header strong{font-size:22px;letter-spacing:-.8px}
.browser-sheet-header button{background:#ffffff66;border-radius:20px;padding:9px 15px;color:#2876d5;font-size:12px;box-shadow:inset 0 1px 0 #fff8}
.browser-tab-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.browser-tab-card{display:flex;flex-direction:column;text-align:left;border-radius:23px;overflow:hidden;padding:0 0 14px;background:#ffffffc2;box-shadow:0 5px 12px #5c49691a;min-width:0}
.tab-preview{height:185px;width:100%;display:grid;place-items:center;font-size:57px;letter-spacing:-3px;margin-bottom:14px}
.browser-tab-card.dil .tab-preview{background:#dce1cf;color:#344330;font-style:italic;font-family:Georgia,serif}
.browser-tab-card.kaya .tab-preview{background:#292c30;color:#e2d1b4;font-size:34px;letter-spacing:4px}
.tab-card-title{font-size:12px;font-weight:600;letter-spacing:-.2px;margin:0 11px 5px}
.tab-card-host{font-size:10px;color:#94899f;margin:0 11px}
.browser-tab-sheet>p{font-size:11px;color:#8b8096;text-align:center;margin:25px 0}
@keyframes browser-spin{to{transform:rotate(360deg)}}
@keyframes browser-progress{0%{width:3%}15%{width:38%}50%{width:68%}100%{width:92%}}
@media(max-width:500px){.safari-toolbar{padding-bottom:calc(27px + max(0px,env(safe-area-inset-bottom) - 20px))}}