:root{--color-primary: #222222;--color-primary-hover: #2E2E2E;--color-accent: #1A3A5C;--color-accent-hover: #0F2640;--color-text: #222222;--color-text-muted: #666666;--color-bg: #FFFFFF;--color-bg-muted: #F7F7F7;--color-border: #D1D1D1;--color-success: #059669;--color-success-bg: #D1FAE5;--color-error: #7F1D1D;--color-error-bg: #FEE2E2;--color-error-border: #EF4444;--color-warning: #78350F;--color-warning-bg: #FEF3C7;--color-warning-border: #F59E0B;--color-danger: var(--color-error-border);--color-danger-border: rgba(239,68,68,0.35);--color-danger-bg: rgba(239,68,68,0.08);--color-success-muted-bg: var(--color-success-bg);--color-success-muted-border: var(--color-success);--color-disabled: #A3A3A3;--color-tooltip-bg: #222222;--color-tooltip-text: #FFFFFF;--header-height: 4rem;--focus-ring: 2px solid var(--color-primary);--color-focus: #000000;--radius: 0.375rem;--radius-card: 0.75rem;--duration-fast: 0.2s;--duration-base: 0.3s;--text-xs: 0.75rem;--text-sm: 0.875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.75rem;--text-2xl: 2rem;--text-3xl: 2.25rem;--font-display: 'Manrope',-apple-system,sans-serif;--font-body: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;--font-mono: 'Space Mono','Courier New',monospace;--color-on-primary: #FFFFFF;color-scheme: light dark;--options-label-width: 8.5rem}*,*::before,*::after{margin: 0;padding: 0;box-sizing: border-box}body{font-family: var(--font-body);line-height: 1.6;color: var(--color-text);background-color: var(--color-bg);min-height: 100vh;display: flex;flex-direction: column;margin: 0;padding: 0;word-wrap: break-word;overflow-wrap: break-word;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%}h1,h2,h3,h4,h5,h6{font-family: var(--font-display);font-weight: 500;word-wrap: break-word;overflow-wrap: break-word;hyphens: auto}.visually-hidden{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0}.skip-link{position: absolute;top: -100px;left: 0;background: var(--color-primary);color: var(--color-on-primary);padding: 0.5rem 1rem;text-decoration: none;border-radius: var(--radius);z-index: 1000;transition: top 0.3s ease}.skip-link:focus{top: 0.5rem;left: 0.5rem}.header{background: var(--color-bg);height: var(--header-height);display: flex;align-items: center;margin: 0}.nav{width: 100%;max-width: 800px;margin: 0 auto;padding: 0 1rem;display: flex;justify-content: space-between;align-items: center}.logo{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 800;color: var(--color-primary);letter-spacing: 0.02em;text-transform: lowercase;text-decoration: none;transition: letter-spacing var(--duration-base) ease}.logo:hover{letter-spacing: 0.06em}.nav-actions{display: flex;gap: 0.25rem;flex-shrink: 0;margin-left: auto;margin-right: -1rem}.nav-link{font-family: var(--font-body);color: var(--color-text-muted);text-decoration: none;padding: 0.5rem 1rem;font-size: var(--text-base);font-weight: 500;transition: color var(--duration-base) ease,background-color var(--duration-base) ease;position: relative}.nav-link::after{content: '';position: absolute;bottom: 0.25rem;left: 1rem;width: 0;height: 2px;background: var(--color-primary);transition: width 0.3s ease}.nav-link:hover::after,.nav-link.active::after{width: calc(100% - 2rem)}.nav-link:hover{color: var(--color-text)}.nav-overlay{display: none}.nav-toggle{display: none;background: none;border: none;cursor: pointer;padding: 0.5rem;z-index: 1001}.nav-toggle span{display: block;width: 24px;height: 2px;background-color: var(--color-text);margin: 5px 0;transition: transform var(--duration-base) ease,opacity var(--duration-base) ease}.nav-toggle.active span:nth-child(1){transform: rotate(45deg) translate(5px,5px)}.nav-toggle.active span:nth-child(2){opacity: 0}.nav-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(5px,-5px)}@media (max-width: 600px){.nav-toggle{display: block}.nav-actions{position: fixed;top: 0;right: -100%;width: 200px;height: 100vh;background: var(--color-bg);flex-direction: column;padding: 4rem 1.5rem 2rem;gap: 0.5rem;transition: right 0.3s ease;box-shadow: -2px 0 10px rgba(0,0,0,0.1);z-index: 1000}.nav-actions.active{right: 0}.nav-link::after{display: none}.nav-link{padding: 0.625rem 0.75rem;border-radius: var(--radius)}.nav-link:hover,.nav-link.active{background-color: var(--color-bg-muted)}.nav-overlay{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 999}.nav-overlay.active{display: block}body.nav-open{overflow: hidden}}.zephr-authed a.nav-link[href="/signin"]{visibility: hidden}.nav-user-chip{display: inline-flex;align-items: center;gap: 0.4rem;padding: 0.25rem 0.625rem 0.25rem 0.25rem;border-radius: 999px;border: 1px solid var(--color-border);background: var(--color-bg-muted);transition: border-color var(--duration-base) ease,background var(--duration-base) ease}.nav-user-chip:hover{border-color: var(--color-text-muted);background: var(--color-bg)}.nav-user-chip::after{display: none}.nav-user-avatar{width: 1.375rem;height: 1.375rem;border-radius: 50%;background: var(--color-accent);color: #fff;font-size: 0.6875rem;font-weight: 700;font-family: var(--font-display);display: flex;align-items: center;justify-content: center;flex-shrink: 0;letter-spacing: 0;user-select: none}.nav-user-name{font-size: var(--text-sm);font-weight: 500;color: var(--color-text);max-width: 8rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}@media (max-width: 600px){.nav-user-chip{border: none;background: none;border-radius: var(--radius);padding: 0.625rem 0.75rem;gap: 0.625rem}.nav-user-chip:hover{background-color: var(--color-bg-muted)}.nav-user-avatar{width: 1.5rem;height: 1.5rem;font-size: 0.75rem}.nav-user-name{max-width: none}}.main{flex: 1;max-width: 800px;margin: 0 auto;padding: 2rem 1rem;width: 100%;display: flex;flex-direction: column;justify-content: center}.footer{background: var(--color-bg);border-top: 1px solid var(--color-border);padding: 2rem 0;margin-top: auto}.footer-inner{max-width: 800px;margin: 0 auto;padding: 0 1rem;display: grid;grid-template-columns: 1fr auto auto;gap: 3rem;align-items: start}.footer-logo{font-family: var(--font-display);font-size: var(--text-xl);font-weight: 800;color: var(--color-primary);letter-spacing: 0.02em;text-transform: lowercase;text-decoration: none;display: inline-block;margin-bottom: 0.5rem;transition: letter-spacing var(--duration-base) ease}.footer-logo:hover{letter-spacing: 0.06em}.footer-tagline{font-size: var(--text-sm);color: var(--color-text-muted);line-height: 1.5;max-width: 16rem}.footer-social{display: flex;gap: 0.875rem;margin-top: 1.125rem}.footer-social-link{color: var(--color-text-muted);display: flex;align-items: center;transition: color var(--duration-fast) ease;text-decoration: none}.footer-social-link:hover{color: var(--color-text)}.footer-col{display: flex;flex-direction: column;gap: 0.5rem}.footer-col-label{font-size: 0.7rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.07em;color: var(--color-text-muted);margin-bottom: 0.375rem;display: block}.footer-col a{font-size: var(--text-sm);color: var(--color-text-muted);text-decoration: none;transition: color var(--duration-fast) ease}.footer-col a:hover{color: var(--color-text)}.footer-bottom{max-width: 800px;margin: 2.5rem auto 0;padding: 1.25rem 1rem 0;border-top: 1px solid var(--color-border);display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 0.5rem}.footer-copy{font-size: var(--text-xs);color: var(--color-text-muted)}.footer-copy a{color: inherit;text-decoration: none}.footer-copy a:hover{color: var(--color-text)}@media (max-width: 600px){.footer-inner{grid-template-columns: 1fr 1fr;gap: 2rem}.footer-brand{grid-column: 1 / -1}.footer-bottom{flex-direction: column;align-items: flex-start;gap: 0.25rem}.footer-sep{display: none}.footer-line{display: block}}@media (max-width: 400px){.footer-inner{grid-template-columns: 1fr}}.btn-primary{display: block;width: 100%;background-color: var(--color-primary);color: var(--color-on-primary);border: none;border-radius: var(--radius);padding: 1rem 2rem;font-size: var(--text-lg);font-weight: 600;cursor: pointer;transition: background-color var(--duration-fast) ease,transform var(--duration-fast) ease,opacity var(--duration-fast) ease;text-decoration: none;text-align: center;box-sizing: border-box}.btn-primary:hover:not(:disabled){background-color: var(--color-primary-hover);animation: magneticPull 0.6s ease-in-out}.btn-primary:active:not(:disabled){background-color: var(--color-focus);animation: none}.btn-primary:disabled{background-color: var(--color-disabled);cursor: not-allowed;opacity: 0.6}.btn-primary:disabled .btn-text{display: none}.btn-primary:disabled .btn-loading{display: inline-flex;align-items: center;gap: 0.375rem}.btn-primary--sm{display: inline-block;width: auto;font-size: var(--text-sm);padding: 0.5rem 1.25rem}@keyframes magneticPull{0%{transform: scale(1)}50%{transform: scale(1.02)}100%{transform: scale(1)}}.btn-loading{display: none;align-items: center;gap: 0.375rem}.btn-spinner{display: inline-block;width: 14px;height: 14px;border: 2px solid rgba(255,255,255,0.35);border-top-color: rgba(255,255,255,0.9);border-radius: 50%;animation: spin 0.7s linear infinite;vertical-align: middle;flex-shrink: 0}.copy-btn{background-color: var(--color-primary);color: var(--color-on-primary);border: none;border-radius: var(--radius);padding: 0.75rem 1rem;cursor: pointer;font-weight: 600;transition: background-color var(--duration-fast) ease,transform var(--duration-fast) ease}.copy-btn:hover{background-color: var(--color-primary-hover);animation: magneticPull 0.6s ease-in-out}.copy-btn:active{background-color: var(--color-focus);animation: none}.copy-btn.copy-success{background-color: var(--color-success)}.help-tooltip{position: relative;background: none;border: 1px solid var(--color-border);border-radius: 50%;width: 20px;height: 20px;margin-left: 0.5rem;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;font-size: var(--text-xs);color: var(--color-text-muted);transition: background-color var(--duration-base) ease,border-color var(--duration-base) ease,color var(--duration-base) ease}.help-tooltip:hover{background-color: var(--color-bg);border-color: var(--color-border);color: var(--color-text-muted)}.help-icon{font-weight: 600;font-size: var(--text-xs)}.tooltip-content{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);background: var(--color-tooltip-bg);color: white;padding: 0.75rem;border-radius: var(--radius);font-size: var(--text-sm);line-height: 1.4;width: min(280px,calc(100vw - 2rem));box-shadow: 0 4px 6px rgba(0,0,0,0.1);z-index: 1000;opacity: 0;visibility: hidden;transition: opacity var(--duration-base) ease,visibility var(--duration-base) ease;margin-bottom: 0.5rem}.tooltip-content::after{content: '';position: absolute;top: 100%;left: 50%;transform: translateX(-50%);border: 6px solid transparent;border-top-color: var(--color-tooltip-bg)}.help-tooltip:hover .tooltip-content,.help-tooltip:focus .tooltip-content{opacity: 1;visibility: visible}.help-box{border: 1px solid var(--color-border);border-radius: var(--radius);margin-top: 1.5rem;text-align: left;overflow: hidden}.help-box__toggle{display: flex;align-items: center;gap: 0.375rem;padding: 0.625rem 1.25rem;font-size: var(--text-sm);font-weight: 600;color: var(--color-text-muted);cursor: pointer;list-style: none;transition: color var(--duration-fast) ease,background var(--duration-fast) ease}.help-box__toggle::-webkit-details-marker{display: none}.help-box__toggle::before{content: '';display: inline-block;width: 0.375rem;height: 0.375rem;border-right: 1.5px solid currentColor;border-bottom: 1.5px solid currentColor;transform: rotate(-45deg);transition: transform var(--duration-base) ease;flex-shrink: 0}.help-box[open] > .help-box__toggle::before{transform: rotate(45deg)}.help-box__toggle:hover{color: var(--color-text);background: var(--color-bg-muted)}.help-box__content{opacity: 0;transition: opacity var(--duration-base) ease}.help-box[open] > .help-box__content{opacity: 1}.help-box__content p{padding: 0 1.25rem;color: var(--color-text-muted);line-height: 1.5;font-size: var(--text-sm);margin: 0}.help-box__content p + p{margin-top: 0.25rem}.help-box__content p:first-child{padding-top: 0.25rem}.help-box__content p:last-child{padding-bottom: 0.75rem}.form-feedback{border-radius: var(--radius);padding: 0.875rem 1.25rem;font-weight: 500;font-size: var(--text-sm);line-height: 1.5;text-align: center}.form-feedback--error{background: var(--color-error-bg);color: var(--color-error);border: 1px solid var(--color-error-border)}.form-feedback--warning{background: var(--color-warning-bg);color: var(--color-warning);border: 1px solid var(--color-warning-border)}.error-message{background: var(--color-error-bg);border: 1px solid var(--color-error-border);border-radius: var(--radius);padding: 0.875rem 1.25rem;color: var(--color-error);font-weight: 500;font-size: var(--text-sm);line-height: 1.5}.warning{background: var(--color-warning-bg);border: 1px solid var(--color-warning-border);border-radius: var(--radius);padding: 0.875rem 1.25rem;display: flex;align-items: center;gap: 0.75rem;margin-bottom: 2rem}.warning-icon{color: var(--color-warning);font-weight: 700;font-size: var(--text-sm)}.warning span:last-child{color: var(--color-warning);font-weight: 500;font-size: var(--text-sm)}.offscreen-textarea{position: fixed;left: -9999px}.hero{text-align: center;padding: 0}body.page-home{min-height: 100dvh}.page-home .main{padding: 0}.page-home .hero:not([hidden]),.page-home .success-state:not([hidden]){flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: clamp(1.5rem,5vh,4rem) 1rem clamp(1rem,3vh,2rem)}@media (min-width: 601px){.page-home .main{min-height: calc(100dvh - var(--header-height))}.page-home .hero:not([hidden]),.page-home .success-state:not([hidden]){padding-top: clamp(3rem,8vh,6rem)}}body.page-secret{min-height: 100dvh}.page-secret .main{display: flex;flex-direction: column;justify-content: center}@media (min-width: 601px){.page-secret .main{min-height: calc(100dvh - var(--header-height))}}body.page-login{min-height: 100dvh}.page-login .main{display: flex;flex-direction: column;align-items: center;justify-content: center}@media (min-width: 601px){.page-login .main{min-height: calc(100dvh - var(--header-height))}}.hero-title{font-family: var(--font-display);font-size: clamp(2rem,5vw,3.25rem);font-weight: 800;color: var(--color-primary);margin-bottom: 0.75rem;line-height: 1.05;letter-spacing: -0.02em}.hero-subtitle{font-family: var(--font-body);font-size: var(--text-lg);font-weight: 400;color: var(--color-text-muted);margin-bottom: 2.5rem;line-height: 1.5}.hero-desc{font-size: var(--text-sm);color: var(--color-text-muted);margin-bottom: 2rem;line-height: 1.5}.mobile-break{display: none}.secret-form{width: 100%;background: var(--color-bg);border-radius: var(--radius-card);padding: 2.5rem;border: 1px solid var(--color-border);display: flex;flex-direction: column;gap: 1.5rem}.input-group{position: relative}.secret-input{width: 100%;padding: 1rem;border: 2px solid var(--color-border);border-radius: var(--radius);font-size: var(--text-base);font-family: inherit;resize: none;min-height: 120px;overflow-y: hidden;transition: border-color var(--duration-base) ease;background-color: var(--color-bg);color: var(--color-text)}.secret-input:focus{outline: none;border-color: var(--color-focus)}.char-count{display: flex;align-items: center;gap: 0.5rem;margin-top: 0.5rem;font-size: var(--text-sm);color: var(--color-text-muted)}.char-bar{flex: 1;height: 2px;background: var(--color-border);border-radius: 1px;overflow: hidden}.char-bar-fill{height: 100%;width: 0%;background: var(--color-success);border-radius: 1px;transition: width var(--duration-fast) ease,background-color var(--duration-fast) ease}.char-count-text{flex-shrink: 0;white-space: nowrap}.char-count-over .char-bar-fill{background: var(--color-error)}.char-count-over .char-count-text{color: var(--color-error)}.char-count-warning .char-bar-fill{background: var(--color-warning-border)}.char-count-warning .char-count-text{color: var(--color-warning)}.options{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1.5rem}.expiry-group,.split-group{display: flex;align-items: center;gap: 0.5rem}.options-controls{display: flex;align-items: center;gap: 0.5rem}.expiry-label{font-family: var(--font-body);font-size: var(--text-sm);color: var(--color-text-muted);text-align: left;white-space: nowrap}.expiry-seg{display: flex;border: 1px solid var(--color-border);border-radius: var(--radius);overflow: hidden}.expiry-btn{padding: 0.375rem 0.75rem;font-family: var(--font-body);font-size: var(--text-sm);font-weight: 500;background: none;border: none;border-left: 1px solid var(--color-border);color: var(--color-text-muted);cursor: pointer;transition: background-color var(--duration-fast) ease,color var(--duration-fast) ease;white-space: nowrap}.expiry-btn:first-child{border-left: none}.expiry-btn:hover:not(.expiry-btn--active){background-color: var(--color-bg-muted);color: var(--color-text)}.expiry-btn--active{background-color: var(--color-primary);color: var(--color-on-primary);font-weight: 600}.expiry-nudge{font-size: var(--text-xs);color: var(--color-text-muted);text-decoration: none;white-space: nowrap;transition: color var(--duration-fast) ease}.nudge-short{display: none}@media (max-width: 600px){.nudge-full{display: none}.nudge-short{display: inline}}.expiry-nudge:hover{color: var(--color-text)}.info-icons{margin: 0 -2.5rem -2.5rem;border-top: 1px solid var(--color-border);border-radius: 0 0 var(--radius-card) var(--radius-card);overflow: hidden;opacity: 0;animation: fadeInStrip 0.4s ease-out 0.05s forwards}@keyframes fadeInStrip{from{opacity: 0;transform: translateY(6px)}to{opacity: 1;transform: translateY(0)}}.info-disclosure{text-align: left}.info-disclosure__toggle{display: flex;align-items: center;gap: 0.375rem;padding: 0.75rem 2.5rem;font-family: var(--font-display);font-size: var(--text-sm);font-weight: 600;color: var(--color-text-muted);cursor: pointer;list-style: none;transition: color var(--duration-fast) ease,background var(--duration-fast) ease}.info-disclosure__toggle::-webkit-details-marker{display: none}.info-disclosure__toggle::before{content: '';display: inline-block;width: 0.375rem;height: 0.375rem;border-right: 1.5px solid currentColor;border-bottom: 1.5px solid currentColor;transform: rotate(-45deg);transition: transform var(--duration-base) ease;flex-shrink: 0}.info-disclosure[open] > .info-disclosure__toggle::before{transform: rotate(45deg)}.info-disclosure__toggle:hover{color: var(--color-text);background: var(--color-bg-muted)}.info-disclosure__grid{display: grid;grid-template-columns: repeat(4,1fr);opacity: 0;transition: opacity var(--duration-base) ease}.info-disclosure[open] > .info-disclosure__grid{opacity: 1}.info-disclosure__cta{margin-left: auto;font-family: var(--font-body);font-size: var(--text-xs);color: var(--color-text-muted);text-decoration: none;opacity: 0;pointer-events: none;transition: opacity var(--duration-base) ease,color var(--duration-fast) ease}.info-disclosure[open] .info-disclosure__cta{opacity: 1;pointer-events: auto}.info-disclosure__cta:hover{color: var(--color-text)}.indicator{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 1.125rem 0.5rem;color: var(--color-text-muted);cursor: default}.indicator-icon{display: flex;flex-shrink: 0;margin-bottom: 0.625rem;color: inherit}.indicator-body{display: flex;flex-direction: column;align-items: center;gap: 0.25rem}.indicator-title{font-family: var(--font-display);font-size: var(--text-sm);font-weight: 600;color: inherit;line-height: 1.2}.indicator-text{font-family: var(--font-body);font-size: var(--text-xs);font-weight: 400;color: inherit;line-height: 1.4;white-space: nowrap}.info-disclosure__grid--three-col{grid-template-columns: 1fr 1fr 1fr}.success-state:not([hidden]){animation: fadeSlideIn var(--duration-base) ease-out both}.success-card{width: 100%;background: var(--color-bg);border-radius: var(--radius-card);padding: 2.5rem;border: 1px solid var(--color-border);display: flex;flex-direction: column;gap: 1.5rem}@keyframes fadeSlideIn{from{opacity: 0;transform: translateY(12px)}to{opacity: 1;transform: translateY(0)}}.success-card h2{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 700;color: var(--color-primary);line-height: 1.1;margin: 0;text-align: center}.link-meta{display: flex;flex-direction: column;align-items: center;gap: 0.25rem;padding-top: 1rem;border-top: 1px solid var(--color-border);text-align: center}.link-meta-item{font-size: var(--text-sm);color: var(--color-text-muted);font-family: var(--font-body);margin: 0}.split-links:not([hidden]){display: flex;flex-direction: column;gap: 1.5rem}.link-group label{display: block;margin-bottom: 0.5rem;font-weight: 500;font-size: var(--text-sm);color: var(--color-text-muted)}.link-input-group{display: flex;gap: 0.5rem}.link-input{flex: 1;min-width: 0;padding: 1rem;border: 2px solid var(--color-border);border-radius: var(--radius);font-family: var(--font-mono);font-size: var(--text-sm);background-color: var(--color-bg);transition: border-color var(--duration-base) ease;color: var(--color-text)}.link-input:focus,.link-input.active{outline: none;border-color: var(--color-focus)}.link-input-group:has(.copy-btn.copy-success) .link-input{border-color: var(--color-success)}.new-secret-btn{margin: 0}.loading-state{text-align: center;padding: 4rem 2rem}.loading-animation{max-width: 400px;margin: 0 auto}.loading-animation h2{color: var(--color-primary);margin-bottom: 1.5rem;font-size: var(--text-xl)}.lock-icon{display: flex;justify-content: center;align-items: center;margin-bottom: 1rem;color: var(--color-text-muted);animation: pulse 2s infinite}@keyframes pulse{0%,100%{opacity: 1}50%{opacity: 0.5}}.loading-spinner{width: 40px;height: 40px;border: 4px solid var(--color-border);border-top: 4px solid var(--color-primary);border-radius: 50%;animation: spin 1s linear infinite;margin: 1rem auto}@keyframes spin{0%{transform: rotate(0deg)}100%{transform: rotate(360deg)}}.key-input-state{padding: 0}.key-input-state:not([hidden]) .key-input-container{animation: fadeSlideIn var(--duration-base) ease-out both}.key-input-container{background: var(--color-bg);border-radius: var(--radius-card);padding: 2.5rem;border: 1px solid var(--color-border);margin-bottom: 2rem}.key-input-container h2{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 700;color: var(--color-primary);margin-bottom: 1rem;line-height: 1.1;text-align: center}.key-input-container > p{color: var(--color-text-muted);margin-bottom: 2rem;text-align: center;line-height: 1.6}.key-form{margin-bottom: 2rem}.key-form .input-group{margin-bottom: 1.5rem}.key-form label{display: block;margin-bottom: 0.5rem;font-weight: 500;color: var(--color-text)}.key-input{width: 100%;padding: 1rem;border: 2px solid var(--color-border);border-radius: var(--radius);font-size: var(--text-base);font-family: var(--font-mono);transition: border-color var(--duration-base) ease;background-color: var(--color-bg);color: var(--color-text)}.key-input:focus{outline: none;border-color: var(--color-focus)}.secret-content{padding: 0}.secret-content:not([hidden]) .secret-container{animation: revealSecret var(--duration-base) ease-out both}@keyframes revealSecret{from{opacity: 0;transform: scale(0.97)}to{opacity: 1;transform: scale(1)}}.secret-container{background: var(--color-bg);border-radius: var(--radius-card);padding: 2.5rem;border: 1px solid var(--color-border);margin-bottom: 2rem}.secret-container h2{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 700;color: var(--color-primary);margin-bottom: 1.5rem;line-height: 1.1;text-align: center}.secret-display{position: relative;background: var(--color-bg);border: 2px solid var(--color-border);border-radius: var(--radius);padding: 1rem;margin-bottom: 1.5rem;text-align: left;transition: border-color var(--duration-base) ease}.secret-display.interactive:focus-within,.secret-display.active{border-color: var(--color-focus)}.secret-display:has(.copy-icon-btn.copy-success){border-color: var(--color-success)}.copy-icon-btn{position: absolute;top: 0.75rem;right: 0.75rem;background: none;border: none;cursor: pointer;color: var(--color-border);padding: 0.25rem;border-radius: var(--radius);transition: color var(--duration-fast) ease;line-height: 1}.copy-icon-btn:hover{color: var(--color-text-muted)}.copy-icon-btn:focus-visible{outline: var(--focus-ring);outline-offset: 2px}.copy-icon-btn.copy-success{color: var(--color-success)}.secret-text{font-family: var(--font-mono);font-size: var(--text-base);line-height: 1.6;color: var(--color-text);white-space: pre-wrap;word-break: break-word;margin: 0;padding-right: 2rem;background: none;border: none;outline: none;resize: none;width: 100%;min-height: 80px}.btn-copy-below{display: none;width: 100%;margin-top: 1rem;text-align: center}@media (max-width: 640px){.btn-copy-below{display: block}}.destruction-notice{display: flex;flex-direction: column;align-items: center;gap: 0.25rem;padding-top: 1rem;border-top: 1px solid var(--color-border);font-family: var(--font-body);font-size: var(--text-sm);color: var(--color-text-muted);text-align: center}.error-state{padding: 0;text-align: center}.error-state:not([hidden]){animation: fadeSlideIn var(--duration-base) ease-out both}.error-container{background: var(--color-bg);border-radius: var(--radius-card);padding: 2.5rem;border: 1px solid var(--color-border)}.error-icon{font-size: 3rem;margin-bottom: 1.5rem;color: var(--color-error)}.error-container h2{color: var(--color-error);margin-bottom: 1rem;font-size: var(--text-xl)}.error-container p{color: var(--color-text-muted);margin-bottom: 2rem;line-height: 1.6;font-size: var(--text-lg)}.error-actions{margin-top: 2rem}.tech-content{flex: 1;max-width: 800px;margin: 0 auto;padding: 3rem 1rem}.tech-content h1{color: var(--color-primary);margin-bottom: 2rem;font-size: var(--text-2xl);font-weight: 600}.tech-content .tldr{background: var(--color-bg-muted);border-left: 4px solid var(--color-primary);padding: 1rem 1.5rem;margin: 2rem 0;border-radius: var(--radius);font-size: var(--text-base);line-height: 1.6}.page-title-decorated{position: relative;text-align: center;margin: 2rem 0}.page-title-decorated h1{margin: 0.75rem 0;position: relative;z-index: 1;font-size: var(--text-2xl);font-weight: 600;color: var(--color-primary)}.page-title-decorated::before,.page-title-decorated::after{content: '';display: block;width: 100%;height: 3px;margin: 0;background: var(--color-primary);opacity: 0.8}.page-title-decorated::before{margin-bottom: 0.5rem}.page-title-decorated::after{margin-top: 0.5rem}.tech-section{margin-bottom: 2.5rem;scroll-margin-top: 2rem}.tech-section h2{color: var(--color-primary);margin-bottom: 2rem;margin-top: 2.5rem;font-size: clamp(1.25rem,3vw,var(--text-xl));font-weight: 600}.tech-section h2:first-child{margin-top: 1.5rem}.tech-section h3{color: var(--color-text);margin: 2rem 0 1rem 0;font-size: clamp(1rem,2.5vw,var(--text-lg));font-weight: 600}.tech-section h4{color: var(--color-primary);margin: 1.75rem 0 0.875rem 0;font-size: clamp(1rem,2.5vw,var(--text-lg));font-weight: 600;padding: 0.75rem 0 0.75rem 1rem;border-left: 3px solid var(--color-primary);background: linear-gradient(90deg,rgba(26,54,93,0.05) 0%,transparent 100%);border-radius: 0 var(--radius) var(--radius) 0;transition: background var(--duration-fast) ease,transform var(--duration-fast) ease;position: relative}.tech-section h4:hover{background: linear-gradient(90deg,rgba(26,54,93,0.08) 0%,transparent 100%);transform: translateX(2px)}.tech-section h5{color: var(--color-text);margin: 1.25rem 0 0.625rem 0;font-size: clamp(0.875rem,2vw,var(--text-base));font-weight: 600;padding: 0.5rem 0 0.5rem 0.75rem;border-left: 2px solid var(--color-border);background: rgba(113,128,150,0.08);border-radius: 0 var(--radius) var(--radius) 0;font-style: italic;transition: background var(--duration-fast) ease,border-left-color var(--duration-fast) ease;position: relative}.tech-section h5:hover{background: rgba(113,128,150,0.12);border-left-color: var(--color-text-muted)}.tech-section p{color: var(--color-text-muted);margin-bottom: 1.25rem;line-height: 1.7;font-size: clamp(0.875rem,2vw,var(--text-base))}.tech-section h2 + p,.tech-section h3 + p,.tech-section h4 + p,.tech-section h5 + p{margin-top: 0.75rem}.tech-section .code-block + h3,.tech-section .code-block + h4,.tech-section .code-block + h5{margin-top: 2.5rem}.tech-section a{color: var(--color-accent);text-decoration: underline}.tech-section a:hover{color: var(--color-accent-hover)}.tech-section ul,.tech-section ol{margin: 1rem 0;padding-left: 2rem}.tech-section li{color: var(--color-text-muted);margin-bottom: 0.5rem;line-height: 1.7;font-size: clamp(0.875rem,2vw,var(--text-base))}.tech-section code{background: var(--color-bg-muted);padding: 0.2rem 0.5rem;border-radius: var(--radius);font-family: var(--font-mono);font-size: var(--text-sm);color: var(--color-text);border: 1px solid var(--color-border)}.tech-section pre{background: var(--color-bg-muted);border: 1px solid var(--color-border);padding: clamp(0.75rem,3vw,1.25rem);border-radius: var(--radius);overflow-x: auto;margin: 1.5rem 0;box-shadow: 0 1px 2px rgba(0,0,0,0.05);position: relative}.code-disclosure{border: 1px solid var(--color-border);border-radius: var(--radius);overflow: hidden;margin: 1.5rem 0}.code-disclosure__toggle{display: flex;align-items: center;gap: 0.5rem;padding: 0.625rem 1rem;background: var(--color-bg-muted);font-family: var(--font-mono);font-size: var(--text-sm);color: var(--color-text);cursor: pointer;list-style: none;user-select: none;transition: background var(--duration-fast) ease}.code-disclosure__toggle::-webkit-details-marker{display: none}.code-disclosure__toggle::before{content: '';display: inline-block;width: 0.375rem;height: 0.375rem;border-right: 1.5px solid currentColor;border-bottom: 1.5px solid currentColor;transform: rotate(-45deg);transition: transform var(--duration-base) ease;flex-shrink: 0}.code-disclosure[open] > .code-disclosure__toggle::before{transform: rotate(45deg)}.code-disclosure__toggle:hover{background: var(--color-bg)}.code-disclosure pre{margin: 0;border: none;border-top: 1px solid var(--color-border);border-radius: 0;box-shadow: none}.tech-section pre code{background: none;padding: 0;border: none;font-size: clamp(var(--text-xs),1.8vw,var(--text-sm));line-height: 1.6;display: block}.code-block{position: relative;margin: 1.5rem 0}.code-block pre{margin: 0}.code-label{position: absolute;bottom: 0.5rem;right: 0.75rem;background: rgba(71,85,105,1);color: white;padding: 0.25rem 0.5rem;border-radius: 0.25rem;font-size: var(--text-xs);font-weight: 500;font-family: var(--font-body);text-transform: uppercase;letter-spacing: 0.025em;z-index: 10}.code-label.client{background: rgba(29,78,216,1)}.code-label.server{background: rgba(22,101,52,0.8)}.schema-box{background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: var(--radius);padding: 16px;margin: 16px 0;font-family: var(--font-mono);font-size: var(--text-xs)}.schema-box-title{font-weight: 600;margin-bottom: 12px;color: var(--color-text)}.schema-row{color: var(--color-text-muted);margin-bottom: 6px}.schema-row:last-of-type{margin-bottom: 0}.schema-row span{color: var(--color-text)}.schema-note{font-size: var(--text-xs);color: var(--color-text-muted)}.schema-footer{margin-top: 12px;font-size: var(--text-xs);color: var(--color-text-muted);font-style: italic}.diagram{margin-bottom: 2rem}.diagram-spacing{margin-top: 0;margin-bottom: 2rem}.diagram-svg{width: 100%;max-width: 900px;display: block;margin: 0 auto}.diagram-stroke{stroke: #888}.diagram-heading{fill: #444}.diagram-label{fill: #666}.diagram-arrow{fill: #888}.diagram .flow{stroke: var(--color-text-muted);stroke-dasharray: 12 8;stroke-linecap: round;animation: dashShift 1.8s linear infinite;filter: drop-shadow(0 0 6px rgba(107,114,128,0.18));transition: filter 0.3s}@keyframes dashShift{to{stroke-dashoffset: -20}}.fade-in{opacity: 0;transform: translateY(18px);transition: opacity 1.0s ease-out,transform 1.0s ease-out}.fade-in.visible{opacity: 1;transform: translateY(0)}.fade-in.visible .flow{filter: drop-shadow(0 0 10px rgba(107,114,128,0.28))}.docs-page{flex: 1;padding: 3rem 0}.docs-page .page-title-decorated{max-width: 800px;margin-left: auto;margin-right: auto;padding-left: 1rem;padding-right: 1rem}.docs-layout{display: grid;grid-template-columns: 1fr minmax(0,800px) 1fr;column-gap: 3.5rem;align-items: start}.docs-content{padding: 0 1rem;min-width: 0}.docs-content .tech-section + .tech-section{border-top: 1px solid var(--color-border);padding-top: 2.5rem;margin-top: 0}.docs-content .tech-section{scroll-margin-top: 5rem}.docs-content .tech-section h3[id]{scroll-margin-top: 5rem}.docs-content .tech-section h3{font-size: 1rem;font-weight: 700;margin: 2rem 0 0.75rem;color: var(--color-text);letter-spacing: -0.01em}.docs-toc{justify-self: end;width: 220px;position: sticky;top: 5rem;max-height: calc(100vh - 6rem);overflow-y: auto;padding: 0 0 2rem;scrollbar-width: thin}.docs-toc__label{font-size: 0.7rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.07em;color: var(--color-text-muted);margin: 0 0 0.75rem;padding: 0 0.5rem}.docs-toc ul{list-style: none;padding: 0;margin: 0}.docs-toc > ul > li{margin-bottom: 0.15rem}.docs-toc__sub{padding-left: 0.875rem;margin: 0.2rem 0 0.5rem;border-left: 1px solid var(--color-border)}.docs-toc__link{display: block;padding: 0.275rem 0.5rem;border-left: 2px solid transparent;border-radius: 0;font-size: var(--text-sm);color: var(--color-text-muted);text-decoration: none;transition: color var(--duration-fast),background var(--duration-fast),border-color var(--duration-fast);line-height: 1.4}.docs-toc__sub .docs-toc__link{font-size: var(--text-xs);padding: 0.2rem 0.5rem}.docs-toc__link:hover{color: var(--color-text);background: var(--color-bg-muted)}.docs-toc__link--active{color: var(--color-text);font-weight: 600;border-left-color: var(--color-primary);background: var(--color-bg-muted)}.method-sig{font-family: 'Space Mono',monospace;font-size: var(--text-sm);background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: var(--radius);padding: 0.75rem 1rem;margin: 0.5rem 0 1.5rem;overflow-x: auto}.http-method{display: inline-block;font-family: 'Space Mono',monospace;font-size: var(--text-xs);font-weight: 700;padding: 0.15rem 0.5rem;border-radius: 4px;margin-right: 0.5rem}.http-post{background: #dbeafe;color: #1d4ed8}.http-get{background: var(--color-success-bg);color: var(--color-success)}.endpoint-title{font-family: 'Space Mono',monospace;font-size: var(--text-base);font-weight: 600;margin: 1.5rem 0 0.5rem}.response-label{font-size: var(--text-xs);font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em;color: var(--color-text-muted);margin: 1.5rem 0 0.5rem}.response-label + .pre-wrap,.response-label + .method-sig,.response-label + .param-table,.response-label + .error-table{margin-top: 0}.pre-wrap{position: relative;margin: 1.5rem 0}.pre-wrap pre{margin: 0;transition: border-color 0.3s ease}.pre-wrap pre code{padding-right: 1.5rem}.pre-wrap:has(.copy-icon-btn.copy-success) pre{border-color: var(--color-success)}.pre-wrap .copy-icon-btn{z-index: 10;color: var(--color-text-muted)}.pre-wrap .copy-icon-btn.copy-success{color: var(--color-success)}.param-table,.error-table{width: 100%;border-collapse: collapse;font-size: var(--text-sm);margin-top: 0.5rem;margin-bottom: 1.5rem}.param-table th,.error-table th{text-align: left;padding: 0.5rem 0.75rem;border-bottom: 2px solid var(--color-border);font-weight: 600;font-size: 0.8rem;text-transform: uppercase;letter-spacing: 0.04em;color: var(--color-text-muted)}.param-table td,.error-table td{padding: 0.6rem 0.75rem;border-bottom: 1px solid var(--color-border);vertical-align: top}.param-table td:first-child,.error-table td:first-child{white-space: nowrap}.param-table td:nth-child(2){white-space: nowrap}.error-table td:nth-child(2):not(:last-child){white-space: nowrap}.param-table code,.error-table code{font-family: 'Space Mono',monospace;font-size: 0.8rem}.param-table th:nth-child(3),.param-table td:nth-child(3){text-align: center;width: 4.5rem;white-space: nowrap}.param-dot{font-size: 2rem;line-height: 1;color: var(--color-text)}@media (max-width: 1352px){.docs-layout{grid-template-columns: minmax(0,800px);justify-content: center;padding: 0 1rem}.docs-toc{width: auto;justify-self: stretch;position: sticky;top: 0;max-height: none;overflow-x: auto;overflow-y: hidden;border-bottom: 1px solid var(--color-border);padding: 0.75rem 0 0.75rem;margin-bottom: 1.5rem;background: var(--color-bg);z-index: 10}.docs-toc__label{display: none}.docs-toc > ul{display: flex;flex-wrap: nowrap;gap: 0.25rem;padding-bottom: 0.25rem}.docs-toc__sub{display: none}.docs-toc__link{white-space: nowrap;font-size: 0.8rem;padding: 0.25rem 0.6rem;border: 1px solid var(--color-border);border-left: 1px solid var(--color-border);border-radius: var(--radius)}.docs-toc__link:hover{background: var(--color-bg-muted)}.docs-toc__link--active{background: var(--color-primary);color: var(--color-bg);border-color: var(--color-primary);font-weight: 600}.docs-toc__link--active:hover{background: var(--color-primary)}}.pricing-page{padding-bottom: 1rem}.pricing-header{text-align: center;margin-bottom: 3rem}.pricing-subhead{color: var(--color-text-muted);font-size: var(--text-base);margin-bottom: 1.75rem}.billing-toggle{display: inline-flex;border: 1px solid var(--color-border);border-radius: var(--radius);overflow: hidden;padding: 0;margin: 0;min-inline-size: 0}.billing-toggle-btn{flex: 1;background: none;border: none;padding: 0.375rem 1.25rem;font-family: var(--font-body);font-size: var(--text-sm);cursor: pointer;color: var(--color-text-muted);text-align: center;white-space: nowrap;transition: background var(--duration-fast),color var(--duration-fast)}.billing-toggle-btn--active{background: var(--color-primary);color: var(--color-on-primary)}.billing-toggle-save{font-size: var(--text-xs);color: var(--color-success);margin-left: 0.25rem}.billing-toggle-btn--active .billing-toggle-save{color: var(--color-success)}.pricing-trust{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 0.375rem 0.5rem;margin-top: 1rem;font-size: var(--text-xs);color: var(--color-text-muted)}.pricing-trust-sep{color: var(--color-border)}.pricing-grid{display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: auto auto repeat(7,auto);column-gap: 1.25rem;row-gap: 0}.pricing-card{border: 1px solid var(--color-border);border-radius: var(--radius-card);padding: 1.75rem 1.5rem 1.5rem;background: var(--color-bg);position: relative;grid-row: 1 / -1;display: grid;grid-template-rows: subgrid}.pricing-card--highlight{border-color: var(--color-primary);box-shadow: 0 0 0 1px var(--color-primary);background: var(--color-bg-muted)}.pricing-card--muted{opacity: 0.72}.pricing-card-badge{position: absolute;top: -0.75rem;left: 50%;transform: translateX(-50%);background: var(--color-primary);color: var(--color-on-primary);font-size: var(--text-xs);font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;padding: 0.125rem 0.625rem;border-radius: 9999px;white-space: nowrap}.pricing-card-badge--coming{background: var(--color-bg-muted);color: var(--color-text-muted);border: 1px solid var(--color-border)}.pricing-card-header{margin-bottom: 1.25rem}.pricing-tier-name{font-family: var(--font-display);font-size: var(--text-lg);font-weight: 700;margin-bottom: 0.375rem}.pricing-amount{display: flex;align-items: baseline;gap: 0.25rem;margin-bottom: 0.5rem}.pricing-amount-value{font-family: var(--font-display);font-size: var(--text-3xl);font-weight: 800;line-height: 1}.pricing-amount-period{font-size: var(--text-sm);color: var(--color-text-muted)}.pricing-tier-desc{font-size: var(--text-sm);color: var(--color-text-muted);line-height: 1.5}.btn-pricing{display: block;width: 100%;padding: 0.625rem 1rem;border-radius: var(--radius);font-family: var(--font-body);font-size: var(--text-sm);font-weight: 600;text-align: center;cursor: pointer;border: 1px solid transparent;text-decoration: none;margin-bottom: 1.5rem;transition: background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast)}.btn-pricing--primary{background: var(--color-primary);color: var(--color-on-primary)}.btn-pricing--primary:hover{background: var(--color-primary-hover)}.btn-pricing--secondary{background: transparent;color: var(--color-text);border-color: var(--color-border)}.btn-pricing--secondary:hover{border-color: var(--color-primary)}.btn-pricing--notify{background: transparent;color: var(--color-text-muted);border-color: var(--color-border)}.btn-pricing--notify:hover{color: var(--color-text);border-color: var(--color-primary)}.pricing-card-cta{padding-bottom: 1.25rem}.pricing-card-cta .btn-pricing{margin-bottom: 0}.pricing-features{list-style: none;display: contents}.pricing-feature{display: flex;align-items: baseline;gap: 0.5rem;font-size: var(--text-sm);padding: 0.5rem 0;border-top: 1px solid var(--color-border)}.pricing-check{color: var(--color-success);font-weight: 700;flex-shrink: 0;width: 1em}.pricing-dash{color: var(--color-border);flex-shrink: 0;width: 1em}.pricing-feature--missing{color: var(--color-text-muted)}.feature-coming{font-size: var(--text-xs);background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: 9999px;padding: 0.0625rem 0.375rem;color: var(--color-text-muted);vertical-align: middle}.pricing-annual-note{font-size: var(--text-xs);color: var(--color-success);margin-top: -0.25rem;margin-bottom: 0.625rem}.pricing-notify-form{display: flex;gap: 0.5rem}.pricing-notify-input{flex: 1;min-width: 0;padding: 0.5rem 0.75rem;border: 1px solid var(--color-border);border-radius: var(--radius);font-family: var(--font-body);font-size: var(--text-sm);background: var(--color-bg);color: var(--color-text);transition: border-color var(--duration-fast)}.pricing-notify-input::placeholder{color: var(--color-disabled)}.pricing-notify-input:focus{outline: none;border-color: var(--color-primary)}.pricing-notify-form .btn-pricing{width: auto;white-space: nowrap;margin-bottom: 0}.pricing-notify-note{font-size: var(--text-xs);color: var(--color-text-muted);text-align: center;margin-top: 0.375rem}.pricing-anon-note{text-align: center;margin-top: 2.5rem;font-size: var(--text-sm);color: var(--color-text-muted)}.pricing-anon-note a{color: var(--color-success);text-decoration: none}.pricing-anon-note a:hover{text-decoration: underline}.pricing-faq{margin: 3.5rem 0 0}.pricing-faq-title{font-family: var(--font-display);font-size: var(--text-xl);font-weight: 700;margin-bottom: 1.5rem}.pricing-faq-list{display: flex;flex-direction: column;border-top: 1px solid var(--color-border)}.faq-item{border-bottom: 1px solid var(--color-border)}.faq-question{display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;font-weight: 600;font-size: var(--text-base);cursor: pointer;list-style: none;user-select: none;transition: color var(--duration-fast) ease}.faq-question::-webkit-details-marker{display: none}.faq-question::after{content: '';display: inline-block;width: 0.4rem;height: 0.4rem;border-right: 1.5px solid currentColor;border-bottom: 1.5px solid currentColor;transform: rotate(-45deg);transition: transform var(--duration-base) ease;margin-left: 1rem;flex-shrink: 0}.faq-item[open] > .faq-question::after{transform: rotate(45deg)}.faq-item[open] > .faq-question{color: var(--color-primary)}.faq-answer{font-size: var(--text-sm);color: var(--color-text-muted);line-height: 1.65;padding-bottom: 1.25rem;max-width: 72ch}.faq-answer code{font-family: var(--font-mono);font-size: 0.8125rem;background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: var(--radius);padding: 0.0625rem 0.25rem}@media (max-width: 720px){.pricing-grid{grid-template-columns: 1fr;grid-template-rows: none}.pricing-card{grid-row: auto;display: block}.pricing-features{display: flex;flex-direction: column;gap: 0.625rem;margin-top: 1.25rem}.pricing-feature{border-top: none;padding: 0}.pricing-card--muted{opacity: 1}}.login-section{display: flex;justify-content: center;padding: 2rem 1.5rem}.login-card{max-width: 420px;width: 100%;background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: var(--radius-card);padding: 2.5rem}.login-title{font-family: var(--font-display);font-size: var(--text-xl);font-weight: 700;margin-bottom: 0.5rem;color: var(--color-text)}.login-subtitle{color: var(--color-text-muted);font-size: var(--text-sm);margin-bottom: 0.75rem}.login-benefit{font-size: var(--text-sm);color: var(--color-text-muted);margin-bottom: 1.5rem;line-height: 1.5}.login-form{display: flex;flex-direction: column;gap: 0.75rem}.login-email-input{padding: 0.75rem 1rem;border-radius: var(--radius);border: 2px solid var(--color-border);background: var(--color-bg);color: var(--color-text);font-size: var(--text-base);font-family: inherit;width: 100%;box-sizing: border-box;transition: border-color var(--duration-base) ease}.login-email-input::placeholder{color: var(--color-disabled)}.login-email-input:focus{outline: none;border-color: var(--color-focus)}.login-submit-btn{width: 100%}.login-error{font-size: var(--text-sm);color: var(--color-error);margin: 0}.login-sent-msg{font-size: var(--text-base);line-height: 1.7;color: var(--color-text-muted)}.warning-box{background: var(--color-warning-bg);border: 1px solid var(--color-warning-border);border-radius: var(--radius);padding: 0.875rem 1.25rem;margin: 1.5rem 0}.warning-box p{color: var(--color-warning);font-weight: 500;font-size: var(--text-sm);line-height: 1.5;margin-bottom: 1rem}.warning-box strong{font-weight: 600}.warning-box p:last-child{margin-bottom: 0}.checklist{list-style: none;padding-left: 0}.checklist li{padding: 0.5rem 0;color: var(--color-text-muted);font-size: var(--text-base)}.page-cta{margin-top: 3rem;padding: 2rem 2.5rem;background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: var(--radius-card);text-align: center}.page-cta p{color: var(--color-text-muted);margin-bottom: 1.25rem;font-size: var(--text-base)}.not-found{display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 50vh;text-align: center;padding: 4rem 1.5rem}.not-found__code{font-family: var(--font-display);font-size: clamp(5rem,18vw,9rem);font-weight: 800;line-height: 1;color: var(--color-primary);letter-spacing: -0.04em;margin-bottom: 0.5rem}.not-found__title{font-family: var(--font-display);font-size: var(--text-xl);font-weight: 700;color: var(--color-text);margin-bottom: 2rem}.main,.tech-content,.error-container{word-wrap: break-word;overflow-wrap: break-word}.tech-section pre,.tech-section code,.tech-section a[href*="http"]{max-width: 100%;overflow-wrap: break-word;word-break: break-all}@media (max-width: 600px){.info-disclosure__grid{grid-template-columns: 1fr 1fr}}@media (max-width: 360px){.info-disclosure__grid{grid-template-columns: 1fr}}@media (max-width: 660px){.info-disclosure__grid--three-col{grid-template-columns: 1fr}}@media (max-width: 768px){.mobile-break{display: inline}.main{padding: 1rem}.page-home .main{padding: 0}.key-input-container,.secret-container,.error-container{padding: 1.5rem}.loading-state{padding: 2rem 1rem}.hero-subtitle{font-size: var(--text-base)}.tech-content{padding: 1rem 0.75rem;max-width: 100%}.tech-content h1{font-size: var(--text-2xl);margin-bottom: 1.5rem}.tech-section{margin-bottom: 1.25rem}.tech-section pre{padding: 0.875rem;margin: 1rem 0}.tech-section ul,.tech-section ol{padding-left: 1.5rem;margin: 0.875rem 0}.page-title-decorated{margin: 1.5rem 0}.page-title-decorated h1{margin: 0.5rem 0}.page-title-decorated::before{margin-bottom: 0.375rem}.page-title-decorated::after{margin-top: 0.375rem}.diagram svg{max-width: 100%;height: auto}}@media (max-width: 600px){.options{display: grid;grid-template-columns: var(--options-label-width) 1fr;gap: 0.5rem}.expiry-group,.split-group{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;align-items: center}}@media (max-width: 480px){.nav{padding: 0 0.5rem}.split-group .help-tooltip{display: none}.secret-form{padding: 1.5rem}.success-card{padding: 1.5rem}.info-icons{margin: 0 -1.5rem -1.5rem}.info-disclosure__toggle{padding-left: 1.5rem;padding-right: 1.5rem}.tech-content{padding: 0.75rem 0.5rem}.tech-content h1{font-size: var(--text-xl);margin-bottom: 1.25rem}.page-title-decorated{margin: 1rem 0}.page-title-decorated h1{margin: 0.375rem 0;font-size: var(--text-xl)}.page-title-decorated::before{margin-bottom: 0.25rem}.page-title-decorated::after{margin-top: 0.25rem}.code-label{font-size: var(--text-xs);padding: 0.125rem 0.25rem;bottom: 0.25rem;right: 0.375rem}}@media (max-width: 360px){.nav{padding: 0 0.375rem}.tech-content{padding: 0.5rem 0.375rem}.tech-content h1{font-size: var(--text-xl);line-height: 1.3}}@media (max-height: 500px) and (orientation: landscape){.tech-content{padding: 1rem 0.75rem}.tech-section{margin-bottom: 1rem}.tech-section h2{margin-top: 1.5rem;margin-bottom: 0.75rem}.tech-section h3{margin-top: 1.25rem;margin-bottom: 0.625rem}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.tech-section pre{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important}}@media (prefers-color-scheme: dark){:root{--color-primary: #F0F0F0;--color-primary-hover: #FFFFFF;--color-on-primary: #111111;--color-accent: #7EB8D4;--color-accent-hover: #A0CBDF;--color-text: #E8E8E8;--color-text-muted: #A0A0A0;--color-bg: #111111;--color-bg-muted: #1C1C1C;--color-border: #333333;--color-success: #4ADE80;--color-success-bg: #052e16;--color-error: #FCA5A5;--color-error-bg: #450a0a;--color-error-border: #F87171;--color-warning: #FDE68A;--color-warning-bg: #451a03;--color-warning-border: #FBBF24;--color-disabled: #555555;--color-tooltip-bg: #2D2D2D;--color-focus: #FFFFFF;--color-danger-border: rgba(248,113,113,0.35);--color-danger-bg: rgba(248,113,113,0.08)}.code-label{background: rgba(148,163,184,0.9);color: #111111}.code-label.client{background: rgba(96,165,250,0.9);color: #111111}.code-label.server{background: rgba(74,222,128,0.8);color: #111111}.tech-section h4{background: linear-gradient(90deg,rgba(126,184,212,0.08) 0%,transparent 100%)}.tech-section h4:hover{background: linear-gradient(90deg,rgba(126,184,212,0.12) 0%,transparent 100%)}.http-post{background: #1e3a5f;color: #93c5fd}.diagram-stroke{stroke: #666}.diagram-heading{fill: #ccc}.diagram-label{fill: #999}.diagram-arrow{fill: #666}}.account-layout{width: 100%;padding: 0 0 4rem}.account-section{margin-bottom: 2.5rem}.account-section--card{background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-card);padding: 1.5rem 1.75rem}.account-section-title{font-family: var(--font-display);font-size: var(--text-lg);font-weight: 700;color: var(--color-primary);margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 1px solid var(--color-border)}.user-info{display: flex;align-items: center;gap: 1rem;flex-wrap: wrap}.user-email{font-size: var(--text-base);color: var(--color-text);opacity: 0.85}.tier-badge{font-family: var(--font-mono);font-size: var(--text-xs);font-weight: 700;text-transform: uppercase;letter-spacing: 0.08em;padding: 0.2em 0.6em;border-radius: 4px;background: var(--color-bg-muted);color: var(--color-text-muted);border: 1px solid var(--color-border)}.tier-badge--dev{background: #eff6ff;color: #2563eb;border-color: #bfdbfe}.tier-badge--pro{background: var(--color-success-muted-bg);color: var(--color-success);border-color: var(--color-success-muted-border)}.coming-soon-badge{display: block;width: 100%;padding: 0.625rem 1rem;border-radius: var(--radius);font-family: var(--font-body);font-size: var(--text-sm);font-weight: 600;text-align: center;background: var(--color-bg-muted);color: var(--color-text-muted);border: 1px solid var(--color-border);cursor: default}@media (prefers-color-scheme: dark){.tier-badge--dev{background: #1e3a5f;color: #93c5fd;border-color: #1d4ed8}}.billing-info{font-size: var(--text-sm);color: var(--color-text-muted);margin-bottom: 1rem;min-height: 1.25rem}.billing-info strong{color: var(--color-text)}.billing-info a{color: var(--color-success);text-decoration: none}.billing-info a:hover{text-decoration: underline}.usage-bar-wrap{margin-top: 0.5rem;display: flex;align-items: center;gap: 0.75rem}.usage-bar{flex: 1;height: 6px;background: var(--color-border);border-radius: 3px;overflow: hidden}.usage-bar-fill{height: 100%;background: var(--color-success);transition: width 0.4s ease;border-radius: 3px}.usage-bar-fill--warning{background: var(--color-warning-border)}.usage-bar-fill--exceeded{background: var(--color-error-border)}.usage-stat{font-size: var(--text-sm);font-family: var(--font-mono);white-space: nowrap;color: var(--color-text)}.usage-meta{font-size: var(--text-xs);color: var(--color-text-muted);margin-top: 0.375rem}.usage-limit-cta{font-size: var(--text-sm);margin-top: 0.75rem;color: var(--color-text)}.usage-limit-cta a{color: var(--color-success);text-decoration: none;font-weight: 600}.usage-limit-cta a:hover{text-decoration: underline}.usage-warning-cta{font-size: var(--text-sm);margin-top: 0.75rem;color: var(--color-text)}.usage-warning-cta a{color: var(--color-warning-border);text-decoration: none;font-weight: 600}.usage-warning-cta a:hover{text-decoration: underline}.keys-table{width: 100%;border-collapse: collapse;font-size: var(--text-sm);table-layout: fixed}.keys-table th{text-align: left;padding: 0.5rem 0.75rem;font-weight: 600;color: var(--color-text-muted);font-size: var(--text-xs);text-transform: uppercase;letter-spacing: 0.06em;border-bottom: 1px solid var(--color-border)}.keys-table th:nth-child(1){width: auto}.keys-table th:nth-child(2){width: 8rem}.keys-table th:nth-child(3){width: 8rem}.keys-table th:nth-child(4){width: 6rem}.keys-table th:nth-child(5){width: 5.5rem}.keys-table td{padding: 0.625rem 0.75rem;border-bottom: 1px solid var(--color-border);vertical-align: middle;color: var(--color-text);overflow: hidden}.key-name{font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.key-id{font-family: var(--font-mono);font-size: var(--text-xs);color: var(--color-text-muted);margin-top: 0.125rem}.key-status-active{color: var(--color-success);font-size: var(--text-xs)}.key-status-inactive{color: var(--color-text-muted);font-size: var(--text-xs)}.revoked-toggle{background: none;border: none;padding: 0.5rem 0;font-size: var(--text-xs);color: var(--color-text-muted);cursor: pointer;text-decoration: underline}.revoked-toggle:hover{color: var(--color-text)}.btn-danger{background: none;border: 1px solid var(--color-danger-border);color: var(--color-danger);border-radius: var(--radius);padding: 0.25rem 0.6rem;font-size: var(--text-sm);cursor: pointer;transition: background var(--duration-fast);white-space: nowrap}.btn-danger:hover{background: var(--color-danger-bg)}.revoke-confirm{display: inline-flex;gap: 0.375rem;align-items: center}.btn-revoke-confirm{background: var(--color-danger);color: #fff;border: none;border-radius: var(--radius);padding: 0.25rem 0.6rem;font-size: var(--text-sm);cursor: pointer;white-space: nowrap}.btn-revoke-confirm:hover{opacity: 0.85}.btn-revoke-cancel{background: none;border: 1px solid var(--color-border);color: var(--color-text-muted);border-radius: var(--radius);padding: 0.25rem 0.6rem;font-size: var(--text-sm);cursor: pointer;white-space: nowrap}.btn-revoke-cancel:hover{color: var(--color-text);border-color: var(--color-text-muted)}.create-key-form{display: flex;gap: 0.75rem;margin-top: 1rem;flex-wrap: wrap}.create-key-form input{flex: 1;min-width: 200px;padding: 0.5rem 0.75rem;border-radius: var(--radius);border: 1px solid var(--color-border);background: var(--color-bg);color: var(--color-text);font-size: var(--text-sm);font-family: inherit;transition: border-color var(--duration-fast)}.create-key-form input:focus{outline: var(--focus-ring);border-color: var(--color-primary)}.create-key-form input::placeholder{color: var(--color-text-muted)}.upgrade-banner:not([hidden]){display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.875rem 1rem;background: var(--color-success-muted-bg);border: 1px solid var(--color-success-muted-border);border-radius: var(--radius-card);font-size: var(--text-sm)}.upgrade-banner-body{display: flex;flex-direction: column;gap: 0.125rem}.upgrade-banner-detail{color: var(--color-text-muted)}.upgrade-banner-dismiss{background: none;border: none;cursor: pointer;font-size: 1.25rem;line-height: 1;color: var(--color-text-muted);padding: 0 0.25rem;flex-shrink: 0;transition: color var(--duration-fast) ease}.upgrade-banner-dismiss:hover{color: var(--color-text)}.new-key-banner{margin-top: 1rem;padding: 0.875rem 1rem;background: var(--color-success-muted-bg);border: 1px solid var(--color-success-muted-border);border-radius: var(--radius-card);font-size: var(--text-sm)}.new-key-banner-header{display: flex;justify-content: space-between;align-items: center}.new-key-banner-actions{display: flex;gap: 0.5rem;align-items: flex-start;margin-top: 0.375rem}.key-raw{font-family: var(--font-mono);font-size: var(--text-xs);word-break: break-all;flex: 1;color: var(--color-text)}.key-warning{font-size: var(--text-xs);color: var(--color-text-muted);margin-top: 0.5rem}.banner-dismiss{background: none;border: none;cursor: pointer;font-size: var(--text-lg);color: var(--color-text-muted);padding: 0 0.25rem;line-height: 1;flex-shrink: 0;transition: color var(--duration-fast)}.banner-dismiss:hover{color: var(--color-text)}.account-error{color: var(--color-error);font-size: var(--text-sm);margin-bottom: 1rem}.empty-state{color: var(--color-text-muted);font-size: var(--text-sm);padding: 1rem 0}.logout-link{font-size: var(--text-sm);color: var(--color-text-muted);cursor: pointer;background: none;border: none;padding: 0;text-decoration: underline;transition: color var(--duration-fast)}.logout-link:hover{color: var(--color-text)}.usage-unlimited{font-size: var(--text-sm);color: var(--color-text)}.revoke-progress{font-size: var(--text-xs);color: var(--color-text-muted)}.skeleton-layout{transition: opacity 0.2s ease}.skeleton-layout.fading{opacity: 0;pointer-events: none}@keyframes shimmer{0%{background-position: -600px 0}100%{background-position: 600px 0}}.skeleton-line{height: 0.875rem;border-radius: var(--radius);background: linear-gradient( 90deg,var(--color-border) 25%,var(--color-bg-muted) 50%,var(--color-border) 75% );background-size: 1200px 100%;animation: shimmer 1.6s ease-in-out infinite;margin-bottom: 0.5rem}.skeleton-line--short{width: 40%}.skeleton-line--med{width: 65%}.skeleton-line--long{width: 90%}.skeleton-row{display: flex;gap: 1rem;margin-bottom: 0.75rem}.skeleton-row .skeleton-line{flex: 1;margin-bottom: 0}@media (prefers-reduced-motion: reduce){.skeleton-line{animation: none;background: var(--color-border)}}@view-transition{navigation: auto}::view-transition-old(root),::view-transition-new(root){animation-duration: 120ms;animation-timing-function: ease-out}@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation-duration: 0.001ms}}