.page-container{position:relative;overflow:hidden;min-height:100vh;transition:background-color .3s,color .3s}.light-theme{--page-bg: #ffffff;--text-color: #262626;--panel-bg: rgba(255, 255, 255, .7);--panel-border: rgba(0, 0, 0, .1);--subtle-text: #525252;--accent-gradient: linear-gradient(to right, #4f46e5, #d946ef);--browser-url-bg: #e2e8f0;--browser-content-bg: rgba(241, 245, 249, .5);--input-bg: rgba(0,0,0,.05);--input-border: rgba(0,0,0,.1);--list-header-border: rgba(0,0,0,.1);--key-part1-color: #4f46e5;--key-part2-color: #d946ef;--key-separator-color: #64748b}.dark-theme{--page-bg: #0a0a0a;--text-color: #f5f5f5;--panel-bg: rgba(255, 255, 255, .05);--panel-border: rgba(255, 255, 255, .1);--subtle-text: #d4d4d4;--accent-gradient: linear-gradient(to right, #a5b4fc, #f0abfc);--browser-url-bg: rgba(255, 255, 255, .08);--browser-content-bg: rgba(255, 255, 255, .03);--input-bg: rgba(255,255,255,.08);--input-border: rgba(255,255,255,.15);--list-header-border: rgba(255,255,255,.15);--key-part1-color: #a5b4fc;--key-part2-color: #f0abfc;--key-separator-color: #94a3b8}.section-title{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin-bottom:1rem}.how-it-works-container{text-align:center}.animation-container{position:relative;min-height:295px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin-bottom:2rem}.animation-explainer{margin-bottom:1rem;min-height:1.5rem;color:var(--subtle-text)}.browser-frame{width:100%;max-width:52rem;margin:0 auto;border:1px solid var(--panel-border);background-color:var(--panel-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:1rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.browser-header{display:flex;align-items:center;padding:.75rem;border-bottom:1px solid var(--panel-border)}.browser-dots{display:flex;gap:.5rem}.browser-dot{width:.75rem;height:.75rem;border-radius:9999px}.browser-dot.red{background-color:#f87171}.browser-dot.yellow{background-color:#fbbf24}.browser-dot.green{background-color:#34d399}.browser-url-bar{flex:1;margin-left:1rem;border-radius:.375rem;padding:.25rem .75rem;font-family:monospace;font-size:1rem;display:flex;font-weight:600;align-items:center;overflow:hidden;color:var(--subtle-text);transition:background-color .3s}@media (max-width: 768px){.browser-dots{display:none}}.browser-url-bar svg{margin-right:.5rem;flex-shrink:0}.browser-url-bar .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browser-content{height:16rem;display:flex;align-items:center;justify-content:center;padding:1rem;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;background-color:var(--browser-content-bg);transition:background-color .3s}.styled-key{font-family:monospace;font-size:inherit;font-weight:500}.key-part1{color:var(--key-part1-color)}.key-part2{color:var(--key-part2-color)}.key-separator{color:var(--key-separator-color)}.url-static-part{color:var(--subtle-text)}.input-box{font-size:1.25rem;background-color:var(--input-bg);padding:.5rem 1rem;border-radius:.5rem;border:1px solid var(--input-border);margin-top:.25rem;min-height:46px;transition:all .3s}.list-view-content{width:100%;height:100%;border-radius:.375rem;padding:1rem;text-align:left}.list-header{font-size:.875rem;font-weight:700;padding-bottom:.5rem;border-bottom:1px solid var(--list-header-border)}.list-ul{margin-top:.5rem;list-style:none;padding:0;margin:0}.list-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-radius:.375rem;transition:all .7s ease-out}.list-view-content{width:100%;height:100%;padding:.75rem;text-align:left;display:flex;flex-direction:column;overflow:hidden}.add-shortcut-inline-form{display:flex;gap:.5rem;align-items:center;flex-shrink:0;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--panel-border);opacity:0;transform:translateY(-10px);transition:opacity .5s ease-out,transform .5s ease-out}.add-shortcut-inline-form.visible{opacity:1;transform:translateY(0)}.form-input-box{font-family:monospace;font-size:.8rem;background-color:var(--input-bg);padding:.4rem .6rem;border-radius:.375rem;border:1px solid var(--input-border);min-height:32px;display:flex;align-items:center}.long-url-input{flex-grow:2;flex-basis:0;color:var(--subtle-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (max-width: 768px){.long-url-input{display:none}}.key-code-input{flex-grow:1;flex-basis:0}.placeholder{color:var(--subtle-text);opacity:.6}.save-button-inline{display:flex;align-items:center;justify-content:center;padding:.4rem .8rem;border-radius:.375rem;font-weight:600;font-size:.8rem;border:none;cursor:pointer;background-image:var(--accent-gradient);color:#fff;transition:all .2s;flex-shrink:0}.save-button-inline:hover{opacity:.9}.save-button-inline.saving{opacity:.7;cursor:default}.list-ul{list-style:none;padding:0;margin:0;flex-grow:1;overflow-y:auto}.list-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .2rem;transition:all .7s ease-out}.list-item:not(:last-child){border-bottom:1px solid var(--panel-border)}.long-url-text{font-family:monospace;color:var(--subtle-text);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;padding-left:1rem;text-align:right}.list-item.animate-flash{animation:shortcut-flash 1.2s cubic-bezier(.4,0,.6,1);background:linear-gradient(90deg,rgba(127,127,127,.12) 0%,transparent 100%);box-shadow:0 0 0 2px #7f7f7f2e}@keyframes shortcut-flash{0%{background:linear-gradient(90deg,rgba(127,127,127,.12) 0%,transparent 100%);box-shadow:0 0 0 2px #7f7f7f2e}60%{background:linear-gradient(90deg,rgba(127,127,127,.12) 0%,transparent 100%);box-shadow:0 0 0 4px #7f7f7f2e}to{background:none;box-shadow:none}}.how-it-works-container{width:100%}.checklist-container-horizontal{display:flex;align-items:flex-start;justify-content:center;list-style:none;padding:0;margin:0 0 2rem}.checklist-item-horizontal{flex:0 1 180px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .4s ease-in-out}.checklist-icon{width:24px;height:24px;flex-shrink:0;color:var(--key-part1-color);display:flex;align-items:center;justify-content:center}.checklist-dot{width:10px;height:10px;border-radius:9999px;background-color:var(--panel-border);transition:all .4s ease-in-out}.checklist-item-horizontal.active .checklist-dot{background-color:var(--key-part1-color);transform:scale(1.2);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.checklist-text{margin-top:.5rem}.checklist-title{font-weight:600;font-size:1rem;transition:color .4s ease-in-out}.checklist-desc{font-size:.875rem;color:var(--subtle-text);margin-top:.125rem;min-height:2.5rem}.checklist-connector{flex:1 1 auto;height:24px;display:flex;align-items:center}.checklist-connector-line{width:100%;height:2px;background-color:var(--panel-border);position:relative}.checklist-connector-line:before{content:"";position:absolute;top:0;left:0;height:100%;width:0;background-color:var(--key-part1-color);transition:width .4s ease-in-out}.checklist-connector-line.filled:before{width:100%}.checklist-item-horizontal.upcoming{opacity:.6}.checklist-item-horizontal.upcoming .checklist-title{color:var(--subtle-text)}@media (max-width: 768px){.checklist-container-horizontal{flex-direction:column;align-items:flex-start}.checklist-connector{display:none}.checklist-item-horizontal{flex-direction:row;text-align:left;align-items:flex-start;flex-basis:auto;gap:1rem;position:relative}.checklist-desc{min-height:0}.checklist-text{margin-top:0;padding-bottom:2rem}.checklist-item-horizontal:not(:last-child):before{content:"";position:absolute;left:11px;top:1.5rem;bottom:-.5rem;width:2px;background-color:var(--panel-border);transition:background-color .4s ease-in-out}.checklist-item-horizontal.completed:before{background-color:var(--key-part1-color)}}.replay-button{border-radius:1rem;background:linear-gradient(to right,#6366f1,#d946ef);color:#fff;font-weight:500;padding:.5rem 1.25rem;border:none;cursor:pointer;transition:opacity .25s ease,transform .2s ease,box-shadow .2s ease}.replay-button:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px #6366f166}.replay-button:active{transform:translateY(0);box-shadow:0 2px 6px #6366f14d}:root{--toggle-size: 35px;--toggle-inner-size: calc(var(--toggle-size) / 2);--toggle-dot-size: calc(var(--toggle-size) / 5);--toggle-label-width: calc(var(--toggle-size) * 1.267)}.mode-login{position:relative;width:var(--toggle-size);height:var(--toggle-size);border-radius:50%;background:#000;cursor:pointer;display:flex;justify-content:center;align-items:center}.mode-login:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--toggle-inner-size);height:var(--toggle-inner-size);border-radius:50%;background-image:linear-gradient(to right,#fff 50%,#000 50.01%);border:2px solid white;transition:transform .5s ease-out}.mode-login:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--toggle-dot-size);height:var(--toggle-dot-size);border-radius:50%;background:#fff;mix-blend-mode:difference}.mode-login div{position:absolute;bottom:calc(-1 * (var(--toggle-size) * .7));width:var(--toggle-label-width);left:50%;transform:translate(-50%);font-size:14px;font-weight:500;color:#fff;line-height:18px;text-align:center;pointer-events:none}.mode-login div:after{content:"Off";font-weight:400}.mode-login.dark{background:#fff}.mode-login.dark:before{border:2px solid black;transform:translate(-50%,-50%) rotate(180deg)}.mode-login.dark div:after{content:"On"}.mode-login.scaling:after{animation:scaleInner 1s ease forwards}@keyframes scaleInner{50%{transform:translate(-50%,-50%) scale(1.8)}}