:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{color:#111827;background-color:#f9fafb;margin:0}#root{min-height:100svh}img{max-width:100%}.auth{justify-content:center;align-items:center;min-height:100svh;padding:1.5rem;display:flex}.auth__card{background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;width:100%;max-width:380px;padding:2rem}.auth__title{text-align:center;color:#111827;margin:0 0 1.5rem;font-size:1.5rem}.auth__mode-switch{gap:.5rem;margin-bottom:1.5rem;display:flex}.auth__mode-button{color:#4b5563;cursor:pointer;background-color:#f3f4f6;border:none;border-radius:8px;flex:1;padding:.5rem;font-size:.9rem;font-weight:600}.auth__mode-button--active{color:#4f46e5;background-color:#eef2ff}.auth__form{flex-direction:column;gap:.9rem;display:flex}.auth__input{border:1px solid #d0d5dd;border-radius:8px;outline:none;padding:.65rem .9rem;font-size:1rem}.auth__input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e526}.auth__error{color:#dc2626;margin:0;font-size:.9rem}.auth__submit{color:#fff;cursor:pointer;background-color:#4f46e5;border:none;border-radius:8px;padding:.65rem;font-size:1rem;font-weight:600}.auth__submit:hover:not(:disabled){background-color:#4338ca}.auth__submit:disabled{cursor:not-allowed;background-color:#a5a6f6}@media (width<=480px){.auth__card{padding:1.5rem}}.capture-step-editor{flex-direction:column;gap:.6rem;display:flex}.capture-step-editor__list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.capture-step-editor__row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.capture-step-editor__order{color:#4b5563;background-color:#f3f4f6;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.75rem;font-weight:600;display:flex}.capture-step-editor__select{background-color:#fff;border:1px solid #d0d5dd;border-radius:6px;padding:.45rem .6rem;font-size:.9rem}.capture-step-editor__input{border:1px solid #d0d5dd;border-radius:6px;flex:1;min-width:160px;padding:.45rem .6rem;font-size:.9rem}.capture-step-editor__input:focus,.capture-step-editor__select:focus{border-color:#4f46e5;outline:none;box-shadow:0 0 0 3px #4f46e526}.capture-step-editor__remove{color:#991b1b;cursor:pointer;background-color:#fee2e2;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;font-size:.8rem;display:flex}.capture-step-editor__remove:hover{background-color:#fecaca}.capture-step-editor__add{color:#4f46e5;cursor:pointer;background-color:#eef2ff;border:1px dashed #c7d2fe;border-radius:6px;align-self:flex-start;padding:.4rem .8rem;font-size:.85rem;font-weight:600}.capture-step-editor__add:hover{background-color:#e0e7ff}@media (width<=560px){.capture-step-editor__row{flex-direction:column;align-items:stretch}.capture-step-editor__order{align-self:flex-start}}.capture-form{background-color:#fff;border:1px solid #e5e7eb;border-radius:10px;flex-direction:column;gap:.9rem;padding:1rem;display:flex}.capture-form__row{align-items:flex-start;gap:.75rem;display:flex}.capture-form__input{border:1px solid #d0d5dd;border-radius:8px;outline:none;flex:1;padding:.6rem .9rem;font-size:1rem}.capture-form__input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e526}.capture-form__button{color:#fff;cursor:pointer;white-space:nowrap;background-color:#4f46e5;border:none;border-radius:8px;padding:.6rem 1.2rem;font-size:1rem;font-weight:600}.capture-form__button:hover:not(:disabled){background-color:#4338ca}.capture-form__button:disabled{cursor:not-allowed;background-color:#a5a6f6}.capture-form__error{color:#dc2626;margin:0;font-size:.9rem}@media (width<=560px){.capture-form__row{flex-direction:column;align-items:stretch}.capture-form__button{width:100%}}.capture-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.capture-list__empty{color:#6b7280;font-size:.95rem}.capture-list__item{cursor:pointer;text-align:left;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;justify-content:space-between;align-items:center;gap:.75rem;width:100%;padding:.7rem .9rem;font-size:.9rem;display:flex}.capture-list__item:hover{border-color:#4f46e5}.capture-list__item--active{background-color:#eef2ff;border-color:#4f46e5}.capture-list__url{text-overflow:ellipsis;white-space:nowrap;color:#111827;flex:1;min-width:0;overflow:hidden}.capture-list__status{border-radius:999px;flex-shrink:0;padding:.15rem .5rem;font-size:.75rem;font-weight:600}.capture-list__status--0{color:#4b5563;background-color:#f3f4f6}.capture-list__status--1{color:#92400e;background-color:#fef3c7}.capture-list__status--2{color:#065f46;background-color:#d1fae5}.capture-list__status--3{color:#991b1b;background-color:#fee2e2}.browser-frame{background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.browser-frame__toolbar{background-color:#f3f4f6;border-bottom:1px solid #e5e7eb;align-items:center;gap:.6rem;padding:.5rem .7rem;display:flex}.browser-frame__dots{flex-shrink:0;gap:.3rem;display:flex}.browser-frame__dots span{background-color:#d1d5db;border-radius:999px;width:.6rem;height:.6rem}.browser-frame__address-bar{background-color:#fff;border:1px solid #e5e7eb;border-radius:999px;flex:1;align-items:center;gap:.4rem;min-width:0;padding:.3rem .7rem;display:flex}.browser-frame__lock{flex-shrink:0;font-size:.7rem}.browser-frame__url{color:#4b5563;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.browser-frame__content{line-height:0}.capture-filmstrip{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;gap:.75rem;margin:0;padding:.75rem;list-style:none;display:flex;overflow-x:auto}.capture-filmstrip__item{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:8px;flex-direction:column;flex-shrink:0;align-items:center;gap:.35rem;width:110px;padding:.4rem;display:flex}.capture-filmstrip__item:hover{border-color:#c7d2fe}.capture-filmstrip__item--active{background-color:#eef2ff;border-color:#4f46e5}.capture-filmstrip__thumbnail{object-fit:cover;object-position:top;background-color:#fff;border:1px solid #e5e7eb;border-radius:4px;width:100%;height:70px}.capture-filmstrip__label{color:#4b5563;font-size:.75rem}@media (width<=560px){.capture-filmstrip__item{width:88px}.capture-filmstrip__thumbnail{height:56px}}.capture-viewer{flex-direction:column;gap:.75rem;display:flex}.capture-viewer--empty,.capture-viewer--error{color:#6b7280;background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;justify-content:center;align-items:center;height:320px;font-size:.95rem;display:flex}.capture-viewer--error{color:#991b1b}.capture-viewer__screenshot{width:100%;height:auto;display:block}.guide-detail{background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;min-height:320px;padding:1.25rem}.guide-detail--empty{color:#6b7280;justify-content:center;align-items:center;height:320px;font-size:.95rem;display:flex}.guide-detail__header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem;display:flex}.guide-detail__header-text{min-width:0}.guide-detail__title{color:#111827;overflow-wrap:break-word;margin:0 0 .2rem;font-size:1.25rem}.guide-detail__url{color:#4f46e5;overflow-wrap:break-word;max-width:100%;font-size:.85rem;text-decoration:none;display:inline-block}.guide-detail__url:hover{text-decoration:underline}.guide-detail__actions{flex-shrink:0;gap:.5rem;display:flex}.guide-detail__export{color:#4f46e5;white-space:nowrap;background-color:#eef2ff;border-radius:6px;padding:.4rem .8rem;font-size:.8rem;font-weight:600;text-decoration:none}.guide-detail__export:hover{background-color:#e0e7ff}.guide-detail__delete{color:#991b1b;cursor:pointer;background-color:#fee2e2;border:none;border-radius:6px;padding:.4rem .8rem;font-size:.8rem}.guide-detail__delete:hover{background-color:#fecaca}.guide-detail__description{color:#4b5563;margin:0 0 1rem;font-size:.9rem}.guide-detail__steps{flex-direction:column;gap:1.5rem;margin:0;padding:0;list-style:none;display:flex}.guide-detail__step{border-bottom:1px solid #f3f4f6;flex-direction:column;gap:.5rem;padding-bottom:1.5rem;display:flex}.guide-detail__step:last-child{border-bottom:none;padding-bottom:0}.guide-detail__step-header{align-items:flex-start;gap:.75rem;display:flex}.guide-detail__step-badge{color:#4f46e5;background-color:#eef2ff;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;font-size:.8rem;font-weight:700;display:flex}.guide-detail__step-header-text{flex-direction:column;gap:.25rem;padding-top:.1rem;display:flex}.guide-detail__step-instruction{color:#111827;margin:0;font-size:1rem;font-weight:600}.guide-detail__step-action-description{color:#6b7280;font-size:.85rem}.guide-detail__screenshot-wrapper{line-height:0;position:relative}.guide-detail__highlight{pointer-events:none;border:3px solid #ef4444;border-radius:4px;position:absolute;box-shadow:0 0 0 2px #ef444440}.guide-detail__step-screenshot{object-fit:contain;object-position:top;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;width:100%;max-height:600px;display:block}.guide-detail__step-screenshot--placeholder{color:#9ca3af;justify-content:center;align-items:center;height:160px;font-size:.9rem;display:flex}.guide-detail__step-technical{color:#9ca3af;font-size:.8rem}.guide-detail__step-technical summary{cursor:pointer;-webkit-user-select:none;user-select:none}.guide-detail__step-technical summary:hover{color:#6b7280}.guide-detail__step-meta{color:#6b7280;overflow-wrap:break-word;margin-top:.35rem;font-family:ui-monospace,Consolas,monospace;font-size:.75rem;display:block}@media (width<=560px){.guide-detail__header{flex-direction:column}.guide-detail__step-screenshot{max-height:400px}}.guide-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.guide-list__empty{color:#6b7280;font-size:.95rem}.guide-list__item{cursor:pointer;text-align:left;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;gap:.15rem;width:100%;padding:.7rem .9rem;display:flex}.guide-list__item:hover{border-color:#4f46e5}.guide-list__item--active{background-color:#eef2ff;border-color:#4f46e5}.guide-list__title{color:#111827;font-size:.9rem;font-weight:600}.guide-list__url{color:#6b7280;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;overflow:hidden}.guide-list__step-count{color:#4f46e5;font-size:.7rem}.guide-step-annotator{flex-direction:column;gap:1rem;display:flex}.guide-step-annotator__meta{flex-direction:column;gap:.5rem;display:flex}.guide-step-annotator__title-input,.guide-step-annotator__description-input{resize:vertical;border:1px solid #d0d5dd;border-radius:8px;padding:.6rem .9rem;font-family:inherit;font-size:1rem}.guide-step-annotator__title-input:focus,.guide-step-annotator__description-input:focus,.guide-step-annotator__instruction-input:focus{border-color:#4f46e5;outline:none;box-shadow:0 0 0 3px #4f46e526}.guide-step-annotator__list{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.guide-step-annotator__row{background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;gap:.6rem;padding:.75rem;display:flex}.guide-step-annotator__screenshot{object-fit:contain;object-position:top;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;width:100%;max-height:500px;display:block}.guide-step-annotator__fields{flex-direction:column;gap:.35rem;min-width:0;display:flex}.guide-step-annotator__description{color:#111827;margin:0;font-size:1rem;font-weight:600}.guide-step-annotator__technical{color:#9ca3af;font-size:.8rem}.guide-step-annotator__technical summary{cursor:pointer;-webkit-user-select:none;user-select:none}.guide-step-annotator__technical summary:hover{color:#6b7280}.guide-step-annotator__selector{color:#6b7280;overflow-wrap:break-word;margin-top:.35rem;font-family:ui-monospace,Consolas,monospace;font-size:.75rem;display:block}.guide-step-annotator__instruction-input{border:1px solid #d0d5dd;border-radius:6px;padding:.45rem .6rem;font-size:.9rem}.guide-step-annotator__error{color:#dc2626;margin:0;font-size:.9rem}.guide-step-annotator__actions{justify-content:flex-end;gap:.75rem;display:flex}.guide-step-annotator__cancel{color:#4b5563;cursor:pointer;background-color:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:.5rem 1rem;font-size:.9rem}.guide-step-annotator__save{color:#fff;cursor:pointer;background-color:#4f46e5;border:none;border-radius:8px;padding:.5rem 1.2rem;font-size:.9rem;font-weight:600}.guide-step-annotator__save:disabled,.guide-step-annotator__cancel:disabled{opacity:.6;cursor:not-allowed}@media (width<=560px){.guide-step-annotator__screenshot{max-height:320px}}.live-capture-recorder{background-color:#fff;border:1px solid #e5e7eb;border-radius:10px;flex-direction:column;gap:.9rem;padding:1rem;display:flex}.live-capture-recorder__start-row{gap:.75rem;display:flex}.live-capture-recorder__input{border:1px solid #d0d5dd;border-radius:8px;outline:none;flex:1;padding:.6rem .9rem;font-size:1rem}.live-capture-recorder__input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e526}.live-capture-recorder__button{color:#fff;cursor:pointer;white-space:nowrap;background-color:#4f46e5;border:none;border-radius:8px;padding:.6rem 1.2rem;font-size:1rem;font-weight:600}.live-capture-recorder__button:hover:not(:disabled){background-color:#4338ca}.live-capture-recorder__button:disabled{cursor:not-allowed;background-color:#a5a6f6}.live-capture-recorder__hint{color:#4b5563;margin:0;font-size:.9rem}.live-capture-recorder__stage{border:1px solid #e5e7eb;border-radius:8px;line-height:0;position:relative;overflow:hidden}.live-capture-recorder__screenshot{cursor:crosshair;width:100%;height:auto;display:block}.live-capture-recorder__overlay{color:#4f46e5;background-color:#fff9;justify-content:center;align-items:center;font-size:.95rem;font-weight:600;display:flex;position:absolute;inset:0}.live-capture-recorder__fill-prompt{background-color:#eef2ff;border:1px solid #c7d2fe;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem;display:flex}.live-capture-recorder__fill-input{border:1px solid #d0d5dd;border-radius:6px;outline:none;flex:1;padding:.5rem .75rem;font-size:.95rem}.live-capture-recorder__fill-input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e526}.live-capture-recorder__skip-button{color:#4b5563;cursor:pointer;white-space:nowrap;background-color:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:.6rem 1rem;font-size:.9rem}.live-capture-recorder__skip-button:disabled{opacity:.6;cursor:not-allowed}.live-capture-recorder__footer{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.live-capture-recorder__step-count{color:#6b7280;font-size:.85rem}.live-capture-recorder__error{color:#dc2626;margin:0;font-size:.9rem}.live-capture-recorder__success{color:#065f46;margin:0;font-size:.95rem}@media (width<=560px){.live-capture-recorder__start-row,.live-capture-recorder__footer,.live-capture-recorder__fill-prompt{flex-direction:column;align-items:stretch}}.home{flex-direction:column;gap:1.5rem;max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem;display:flex}.home__header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.home__header h1{color:#111827;margin:0 0 .25rem;font-size:1.8rem}.home__header p{color:#6b7280;margin:0}.home__logout{color:#4b5563;cursor:pointer;white-space:nowrap;background-color:#fff;border:1px solid #d0d5dd;border-radius:8px;flex-shrink:0;padding:.5rem 1rem;font-size:.85rem}.home__logout:hover{border-color:#9ca3af}.home__mode-switch{gap:.5rem;display:flex}.home__mode-button{color:#4b5563;cursor:pointer;background-color:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:.5rem 1rem;font-size:.9rem;font-weight:600}.home__mode-button:hover{border-color:#c7d2fe}.home__mode-button--active{color:#4f46e5;background-color:#eef2ff;border-color:#4f46e5}.home__content{grid-template-columns:280px 1fr;align-items:start;gap:1.5rem;display:grid}.home__sidebar,.home__main{min-width:0}@media (width<=720px){.home{gap:1.25rem;padding:1.5rem 1rem}.home__header h1{font-size:1.5rem}.home__content{grid-template-columns:1fr}}