body[data-output=browser] #result{border-top:1px solid #171717;padding-top:24px;scroll-margin-top:24px}
body[data-output=browser] .section-head{gap:20px;margin-bottom:24px}
body[data-output=browser] .section-head h2{font-size:36px;letter-spacing:-1px;line-height:1.15;margin:0 0 8px}
.preview-description{margin:0;color:#575861;font-size:16px;line-height:1.5}
body[data-output=browser] .kit-actions{flex-wrap:nowrap;gap:10px}
body[data-output=browser] .kit-actions>*{white-space:nowrap;font-size:14px;min-height:46px;padding:11px 20px}
.kit-browser{border:1px solid #cccdd0;border-radius:8px;overflow:hidden;box-shadow:0 8px 28px #25221b12;background:#faf9f5}
.kit-browser-tabs{height:42px;background:#e2e4e8;display:flex;align-items:flex-end;gap:16px;padding:0 18px}
.window-lights{display:flex;align-items:center;gap:7px;height:42px;flex-shrink:0}
.window-lights i{width:10px;height:10px;border-radius:50%;background:#f15e58}.window-lights i:nth-child(2){background:#edbb3d}.window-lights i:nth-child(3){background:#54b960}
.kit-browser-tab{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border-radius:8px 8px 0 0;height:34px;min-width:190px;max-width:350px;font:12px/1.2 Jost,Arial,sans-serif}
.kit-browser-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.kit-browser-tab>img{width:15px;height:15px;object-fit:contain}
.kit-browser-tab .chrome-close{width:14px;height:14px;margin-left:12px;opacity:.55}.chrome-plus{width:17px;height:17px;transform:rotate(45deg);margin-bottom:9px;opacity:.6}
.kit-browser-address{display:flex;align-items:center;gap:16px;padding:9px 18px;background:#fff;border-bottom:1px solid #d8d7d2}
.chrome-arrows{display:flex;gap:14px}.chrome-arrows img{width:17px;height:17px;transform:rotate(225deg);opacity:.4}.chrome-arrows img+img{transform:rotate(45deg);opacity:.22}
.preview-address{display:flex;align-items:center;gap:12px;background:#f0f1f3;border-radius:7px;padding:6px 9px;color:#484b54;font-size:12px;flex:1;min-width:0}
.preview-badge{background:#d4e5fc;color:#194b8f;font-weight:700;font-size:11px;letter-spacing:.7px;text-transform:uppercase;border-radius:3px;padding:3px 7px}
body[data-output=browser] #preview{margin:0;border:0;box-shadow:none;background:#faf9f5;min-height:300px;width:100%;display:block}
.kit-preview-end{display:flex;align-items:center;gap:16px;padding:14px 5% 24px;color:#686970;font-size:12px;font-weight:500}
.kit-preview-end::before,.kit-preview-end::after{content:'';height:1px;flex:1;background:#d8d7d2}
.kit-below{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0;color:#56575b;font-size:13px}
.kit-below #startAgain{border:0;padding:2px;min-height:30px;font-size:13px;text-decoration:underline;text-underline-offset:4px}
body[data-output=browser] #result>details:last-child{margin-top:16px;font-size:13px}
#kitShareDialog{max-width:520px;width:calc(100% - 32px);border:1px solid #171717;border-radius:6px;background:#f4f1e9;padding:32px;color:#171717;box-shadow:0 20px 80px #0003}
#kitShareDialog::backdrop{background:#17171770}#kitShareDialog h2{margin:18px 0 12px;font-size:32px}#kitShareDialog p{font-size:16px;line-height:1.5}.share-close{float:right;min-height:34px;padding:6px 10px}.share-link-note{border-top:1px solid #c8c5bd;margin-top:26px;padding-top:20px}.share-link-note strong{font-size:15px}.share-link-note p{color:#575861;font-size:14px!important;margin:8px 0 0}
@media(max-width:700px){body[data-output=browser] .section-head{align-items:flex-start;flex-direction:column;gap:18px}body[data-output=browser] .section-head h2{font-size:30px}body[data-output=browser] .kit-actions{width:100%}body[data-output=browser] .kit-actions>*{flex:1;padding:10px 12px}.kit-browser-tabs{gap:12px;padding:0 12px}.kit-browser-tab{min-width:0;max-width:calc(100% - 70px);flex:1}.chrome-plus,.chrome-arrows{display:none}.kit-browser-address{padding:9px 12px}.kit-below{align-items:flex-start;font-size:12px}.kit-below #startAgain{font-size:12px;white-space:nowrap}.kit-preview-end{gap:10px;font-size:11px}.preview-description{font-size:15px}}
.sharing-status{font-size:14px;color:#51525b;line-height:1.5}.sharing-status[role=alert]{color:#a42b20}
#kitShareDialog{max-height:calc(100dvh - 48px);overflow:auto;max-width:650px}#kitShareDialog label{display:block;font-size:14px;font-weight:600;margin:16px 0 8px}#kitShareDialog input,#kitShareDialog textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #aaa89f;background:#fff;color:#171717;border-radius:2px;font:14px/1.5 Jost,Arial,sans-serif;margin-top:7px}#kitShareDialog textarea{overflow-wrap:anywhere;resize:vertical}.share-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.share-actions a{text-decoration:none;display:inline-flex;align-items:center}.share-preview-note,.share-fixed-note{font-size:12px!important;color:#575861}.share-fixed-note{margin-top:24px!important}.share-option{border-top:1px solid #b5b3ac;margin-top:16px}.share-option summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none}.share-option summary::-webkit-details-marker{display:none}.share-option summary strong{display:block;font-size:16px}.share-option summary small{display:block;font-size:12px;color:#575861;font-weight:400;margin-top:3px}.share-plus{font-size:25px}.share-option[open] .share-plus{transform:rotate(45deg)}.share-option-content{padding:0 0 18px;font-size:14px}.share-option-content ol{padding-left:22px}.share-option-content li{margin:10px 0}.share-option-content button{margin:10px 8px 0 0}.share-embed-preview{height:380px;width:100%;border:1px solid #aaa;margin-top:20px;background:#fff}
.snapshot-bookmark-wrap{position:relative;padding-top:52px;max-width:100%;display:inline-flex}.snapshot-bookmark{display:inline-flex;align-items:center;gap:10px;border:2px dotted #86774e;border-radius:3px;box-shadow:3px 3px #c9ba77;background:#fffef7;color:#171717;padding:10px 16px;min-height:46px;text-decoration:none;font-size:14px;font-weight:600;cursor:grab;user-select:none;max-width:100%}.snapshot-bookmark:active{cursor:grabbing}.snapshot-bookmark span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snapshot-bookmark img{width:20px;height:20px;object-fit:contain;pointer-events:none}.bookmark-grip{font-size:22px;line-height:1;color:#4f4735;pointer-events:none}.snapshot-drag-note{position:absolute;width:200px;height:90px;object-fit:contain;left:-12px;top:-18px;pointer-events:none;opacity:.66}.kit-actions>.snapshot-bookmark-wrap{padding:52px 0 0!important;min-height:0!important}.share-option-content .snapshot-bookmark-wrap{margin-top:12px}
.shared-kit .intro,.shared-kit .extract-hero,.shared-kit .steps-heading,.shared-kit .steps,.shared-kit #examples,.shared-kit .kit-below,.shared-kit #flowStatus{display:none!important}.shared-kit #result{padding-top:12px!important;border-top:0!important}.shared-kit main{padding-top:0}.kit-viewer .kit-browser-tabs,.kit-viewer .kit-browser-address,.kit-viewer .kit-preview-end{display:none}.kit-viewer .kit-browser{border:0;box-shadow:none}.kit-viewer #resultTitle{font-size:30px!important}.kit-embed>header,.kit-embed .section-head,.kit-embed .sharing-status,.kit-embed .creator-credit,.kit-embed #result>details{display:none!important}.kit-embed main{max-width:none;padding:0}.kit-embed #result{margin:0;padding:0!important}.kit-embed #preview{min-height:100px}.shared-kit .section-head{flex-wrap:wrap}.shared-kit .kit-actions{flex-wrap:wrap!important;align-items:flex-end}
@media(max-width:700px){body[data-output=browser] .kit-actions{flex-wrap:wrap}.shared-kit .kit-actions>*{flex:1 1 auto}#kitShareDialog{padding:20px}.share-actions>*{flex:1;text-align:center;justify-content:center}.snapshot-bookmark-wrap{justify-content:flex-start}.snapshot-drag-note{left:0}}
#kitShareDialog .share-option summary{text-decoration:none}

.snapshot-drag-note{position:absolute;width:190px;height:auto;left:12px;top:0;bottom:auto;overflow:visible;pointer-events:none;user-select:none;white-space:normal;color:#bf7770;font:italic 15px/1.15 "Bradley Hand","Segoe Print","Comic Sans MS",cursive;letter-spacing:0;font-weight:400;transform:rotate(-5deg);transform-origin:left bottom;opacity:1;text-align:left}
.snapshot-drag-note::after{content:"";display:block;width:25px;height:21px;margin:0 0 0 7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 23'%3E%3Cpath d='M5 1C1 9 5 17 20 19M15 13L20 19L12 21' fill='none' stroke='%23bf7770' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}