:root{--font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-size: 14px;--line-height: 1.3;--text-color: #1a1a1a;--bg-color: #fafafa;--sidebar-bg: #ffffff;--sidebar-border: #e5e5e5;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-light: #2563eb12;--muted: #5d6570;--status-bg: #f3f4f6;--status-border: #e5e5e5;--challenge-accent: #d97706;--shadow: 0 1px 3px rgba(0,0,0,.05);--selection-bg: #a8d1ff;--selection-fg: #1a1a1a;--find-match-bg: rgba(255, 213, 79, .55);--find-match-current-bg: rgba(255, 152, 0, .7)}:root[data-theme=dark]{--find-match-bg: rgba(255, 213, 79, .28);--find-match-current-bg: rgba(255, 140, 0, .45)}::selection{background:var(--selection-bg);color:var(--selection-fg)}::-moz-selection{background:var(--selection-bg);color:var(--selection-fg)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;font-family:var(--font-family);background:var(--bg-color);color:var(--text-color);-webkit-tap-highlight-color:transparent}body{display:flex;flex-direction:column}#app{flex:1;display:flex;min-height:0}#editor-pane{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}#editor-stack{flex:1;position:relative;min-height:0}#editor,#search-highlights,#selection-overlay{position:absolute;inset:0;margin:0;padding:16px 20px;font-family:var(--font-family);font-size:calc(var(--font-size) * var(--editor-zoom, 1));line-height:var(--line-height);box-sizing:border-box;tab-size:4;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;scrollbar-gutter:stable}#cm-host{position:absolute;inset:0;z-index:2;display:none}#cm-host.active{display:block}#editor-pane.cm-active #editor,#editor-pane.cm-active #search-highlights,#editor-pane.cm-active #selection-overlay{display:none}#cm-host .cm-editor{height:100%}#cm-host .cm-editor.cm-focused{outline:none}#editor{border:none;outline:none;resize:none;color:var(--text-color);background:transparent;overflow-y:auto;overflow-x:hidden;z-index:1}#editor-stack{background:var(--bg-color)}#editor.no-wrap{white-space:pre;overflow-x:auto;word-wrap:normal}#search-highlights{color:transparent;pointer-events:none;user-select:none;overflow:hidden;z-index:0}#search-highlights.no-wrap{white-space:pre;word-wrap:normal}#search-highlights:after,#selection-overlay:after{content:"​"}#search-highlights mark{background:var(--find-match-bg);color:transparent;border-radius:2px}#search-highlights mark.current{background:var(--find-match-current-bg)}#selection-overlay{color:transparent;pointer-events:none;user-select:none;overflow:hidden;z-index:0}#selection-overlay.no-wrap{white-space:pre;word-wrap:normal}#selection-overlay mark{background:var(--selection-bg);color:transparent}#editor-pane.dragging:before{content:"";position:absolute;inset:8px;border:2px dashed var(--accent);border-radius:6px;pointer-events:none;z-index:3}#editor-pane.dragging:after{content:"Drop to open file";position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px;pointer-events:none;z-index:5;text-transform:uppercase}#status-bar{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:4px 16px;font-size:12px;color:var(--muted);background:var(--status-bg);border-top:1px solid var(--status-border);user-select:none}#status-bar.hidden{display:none}#status-bar .counts{flex:1}@media(max-width:300px){#status-bar .counts{display:none}}.status-select{appearance:none;-webkit-appearance:none;background:transparent;border:none;color:var(--muted);font:inherit;font-size:12px;padding:0 14px 0 0;cursor:pointer;outline:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 7px) 50%,calc(100% - 3px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;margin:0 0 0 auto}.status-select:hover{color:var(--text-color)}.status-select:focus{color:var(--text-color)}.status-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.status-select option{color:var(--text-color);background:var(--modal-bg)}.status-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--muted)}.status-icon svg{width:16px;height:16px;display:none}.status-icon.saving .icon-saving{display:block;animation:status-icon-spin .9s linear infinite}.status-icon.file:not(.saving) .icon-file{display:block}.status-icon.cloud:not(.saving) .icon-cloud{display:block}.status-icon.dirty{opacity:.4}.status-icon.dirty:hover{opacity:.7}@keyframes status-icon-spin{to{transform:rotate(360deg)}}.status-icon.flash{color:var(--text-color);animation:status-icon-flash .7s ease-out}@keyframes status-icon-flash{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}.btn{border:1px solid var(--sidebar-border);background:var(--sidebar-bg);color:var(--text-color);padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer;font-family:inherit}.btn:hover{background:var(--status-bg)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.primary:hover{background:var(--accent-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}#find-bar{order:-1;display:none;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 16px;background:var(--sidebar-bg);border-bottom:1px solid var(--sidebar-border)}#find-bar.visible{display:flex}#find-bar input{border:1px solid var(--sidebar-border);border-radius:4px;padding:4px 8px;font-size:13px;font-family:inherit;width:160px;background:var(--input-bg, #ffffff);color:var(--text-color)}#find-bar .find-info{font-size:11px;color:var(--muted);min-width:50px;text-align:center}@media(max-width:640px){#find-bar{padding:8px}#find-bar input{flex:1 1 130px;width:auto;min-width:0}}#editor-pane{position:relative;margin-top:36px}#window-actions{position:fixed;top:4px;right:7px;z-index:999999;display:flex;gap:2px;align-items:center}#window-actions button{appearance:none;background:transparent;border:1px solid transparent;color:var(--muted);width:26px;height:26px;padding:0;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}#window-actions button:hover{background:var(--status-bg);color:var(--text-color)}#window-actions button.active{background:var(--status-bg);color:var(--accent)}#window-actions svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}body.puter-app #btn-about{display:none}#about-modal{position:fixed;inset:0;margin:auto;width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:28px 32px;border:1px solid var(--sidebar-border);border-radius:12px;background:var(--sidebar-bg);color:var(--text-color);box-shadow:0 20px 60px #00000040;font-family:var(--font-family);overflow:auto}#about-modal::backdrop{background:#00000059}#about-modal #about-title{margin:0 0 12px;font-size:22px;font-weight:600}#about-modal h3{margin:20px 0 10px;font-size:15px;font-weight:600;color:var(--text-color)}#about-modal p{margin:0 0 12px;font-size:14px;line-height:1.55}#about-modal ul{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.6}#about-modal .faq{border-top:1px solid var(--status-border);padding:10px 0}#about-modal .faq:last-of-type{border-bottom:1px solid var(--status-border);margin-bottom:16px}#about-modal .faq summary{cursor:pointer;font-size:14px;font-weight:500;line-height:1.4;list-style:none;padding-right:24px;position:relative}#about-modal .faq summary::-webkit-details-marker{display:none}#about-modal .faq summary:after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:18px;line-height:1;transition:transform .15s ease}#about-modal .faq[open] summary:after{content:"−"}#about-modal .faq p{margin:8px 0 4px;color:var(--muted)}#about-modal a{color:var(--accent);text-decoration:none}:root[data-theme=dark] #about-modal a{color:#60a5fa}#about-modal a:hover{text-decoration:underline}#about-modal .about-credit{color:var(--muted);font-size:13px;margin-bottom:0}#about-modal .about-close{position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;background:transparent;color:var(--muted);font-size:16px;line-height:1;border-radius:6px;cursor:pointer}#about-modal .about-close:hover{background:var(--status-bg);color:var(--text-color)}#about-title{display:flex;align-items:center;gap:8px}@media(max-width:768px){#editor,#search-highlights,#selection-overlay{font-size:max(16px,calc(var(--font-size) * var(--editor-zoom, 1)))}#cm-host .cm-scroller,#cm-host .cm-content,#cm-host .cm-editor{font-size:max(16px,calc(var(--font-size) * .86 * var(--editor-zoom, 1)))!important}#find-bar input,.status-select{font-size:16px}}#print-root{display:none}@media print{@page{margin:.6in .6in .7in}html,body{margin:0;padding:0;height:auto;min-height:0;overflow:visible;background:#fff;display:block}body>*:not(#print-root){display:none!important}#print-root{display:block;color:#000;box-sizing:border-box;padding:0}#print-root .print-body{margin:0}}puter-ai-sidebar{--ai-bg: var(--sidebar-bg);--ai-surface: var(--status-bg);--ai-surface-active: var(--status-border);--ai-border: var(--sidebar-border);--ai-text: var(--text-color);--ai-text-muted: var(--muted);--ai-accent: var(--accent);--ai-input-bg: var(--input-bg);--ai-shadow: rgba(0, 0, 0, .08);--ai-font: var(--font-family)}:root[data-theme=dark] puter-ai-sidebar{--ai-link: #60a5fa}@media(max-width:768px){puter-menubar{transform:translateY(var(--viewport-offset-top, 0))}puter-ai-sidebar{position:fixed;left:0;right:0;bottom:var(--keyboard-inset, 0);top:auto;width:100%;--ai-width: 100vw;z-index:50;margin-bottom:-2px}#window-actions button{width:32px;height:32px}#window-actions #btn-toggle-sidebar{transform:rotate(90deg)}#window-actions svg{width:20px;height:20px}#window-actions button:hover{background-color:transparent}}body:not(.app-mode) #app,body:not(.app-mode) #window-actions,body:not(.app-mode) #about-modal,body:not(.app-mode)>puter-menubar{display:none}html.js body:not(.landing-mode) #landing,body.app-mode #landing{display:none}html:has(body:not(.app-mode)){overflow:auto}body:not(.app-mode){display:block;height:auto;min-height:100%;overflow:visible}#landing{--landing-surface: #fff;--landing-soft: var(--status-bg);--landing-border: var(--status-border);--landing-accent: var(--accent);color:var(--text-color);background:var(--bg-color);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}:root[data-theme=dark] #landing{--landing-surface: #232323;--landing-accent: #8ab4ff}#landing a{color:inherit;text-decoration:none}#landing a:hover{color:var(--landing-accent)}#landing a:focus-visible,#landing summary:focus-visible{outline:2px solid var(--landing-accent);outline-offset:5px;border-radius:4px}#landing img{max-width:100%;display:block}#landing h1,#landing h2,#landing h3{margin:0;font-weight:600;letter-spacing:-.045em;line-height:1.1}#landing h2{font-size:clamp(34px,4.2vw,52px)}#landing h3{font-size:23px;letter-spacing:-.025em;line-height:1.2}#landing p{margin:0}#landing section[id],#landing #code{scroll-margin-top:70px}#landing .landing-wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}#landing .landing-skip{position:fixed;top:12px;left:16px;z-index:100;padding:8px 16px;background:var(--landing-surface);transform:translateY(-180%)}#landing .landing-skip:focus{transform:none}#landing .landing-nav{position:sticky;top:0;z-index:50;background:var(--bg-color);background:color-mix(in srgb,var(--bg-color) 82%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--landing-border);line-height:1.5}#landing .landing-nav-inner{max-width:1024px;margin:0 auto;padding:0 22px;height:48px;display:flex;align-items:center;justify-content:space-between;font-size:14px}#landing .landing-brand{display:flex;align-items:center;gap:8px;font-weight:500;white-space:nowrap}#landing .landing-links{display:flex;align-items:center;gap:32px}#landing .landing-links>a,#landing .landing-apps-toggle{opacity:.9}#landing .landing-nav-cta{color:var(--landing-accent);white-space:nowrap}#landing .landing-apps{position:relative}#landing summary{cursor:pointer}#landing summary::-webkit-details-marker{display:none}#landing .landing-apps-toggle{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}#landing .landing-apps-toggle:hover{color:var(--landing-accent)}#landing .landing-apps-toggle .dd-ico{width:14px;height:14px;display:block;flex-shrink:0}#landing .landing-apps-toggle .dd-chevron{width:10px;height:10px;display:block;transition:transform .2s ease;flex-shrink:0}#landing .landing-apps.open .dd-chevron{transform:rotate(180deg)}#landing .landing-apps-toggle:focus-visible{outline:2px solid var(--landing-accent);outline-offset:3px;border-radius:6px}#landing .landing-apps-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:284px;max-width:calc(100vw - 32px);background:var(--landing-surface);border:1px solid var(--landing-border);border-radius:14px;box-shadow:0 16px 44px -12px #00000047;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}#landing .landing-apps.open>.landing-apps-menu,html:not(.js) #landing .landing-apps:hover>.landing-apps-menu,html:not(.js) #landing .landing-apps:focus-within>.landing-apps-menu{opacity:1;visibility:visible;transform:none}#landing .landing-apps-menu .dd-head{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:6px 10px 8px}#landing .landing-apps-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}#landing .landing-apps-menu li a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;transition:background .15s ease}#landing .landing-apps-menu li a:hover,#landing .landing-apps-menu li a:focus-visible{background:var(--landing-soft);outline:none}#landing .landing-apps-menu .dd-app-ico{width:28px;height:28px;flex-shrink:0;display:block}#landing .landing-apps-menu .dd-text{display:flex;flex-direction:column;gap:1px;min-width:0}#landing .landing-apps-menu .dd-title{font-size:14px;font-weight:500;color:var(--text-color);letter-spacing:-.01em}#landing .landing-apps-menu .dd-sub{font-size:12px;line-height:1.3;color:var(--muted)}#landing .landing-hero{padding-top:76px;text-align:center}#landing .landing-eyebrow{color:var(--muted);font-size:13px;letter-spacing:.02em;margin-bottom:20px}#landing h1{font-size:clamp(50px,6.5vw,80px);line-height:1.04;letter-spacing:-.055em}#landing h1>span{color:var(--landing-accent)}#landing .landing-intro{max-width:510px;margin:24px auto 26px;color:var(--muted);font-size:18px;line-height:1.6}#landing .landing-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:28px}#landing .landing-button{display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:13px 23px;border-radius:8px;color:#fff;background:var(--accent);font-size:15px;font-weight:500;transition:background .15s}#landing .landing-button:hover{background:var(--accent-hover);color:#fff}#landing .landing-text-link{font-size:14px}#landing .landing-text-link span{padding-left:8px}#landing .landing-reassurance{margin-top:17px;font-size:12px;color:var(--muted)}#landing-status:empty{display:none}#landing #landing-status:not(:empty),#landing .landing-noscript{margin:18px auto 0;max-width:540px;color:var(--muted)}#landing .landing-preview{margin:52px 0 0;text-align:left;border:1px solid var(--landing-border);border-radius:12px;overflow:hidden;background:var(--bg-color);box-shadow:0 24px 64px -28px #0003}#landing .landing-preview img{width:100%;height:auto}#landing .landing-preview-caption{display:flex;justify-content:space-between;margin:15px 2px 0;font-size:11px;color:var(--muted)}#landing .landing-section{padding-block:100px}#landing .landing-section-intro{margin:22px 0 36px;max-width:470px;font-size:17px;color:var(--muted)}#landing .landing-features{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}#landing .landing-card{grid-column:span 2;padding:30px;background:var(--landing-surface);border:1px solid var(--landing-border);border-radius:12px;overflow:hidden}#landing .landing-card p:not(.landing-card-detail){margin-top:14px;color:var(--muted);font-size:14px;line-height:1.7}#landing .landing-feature-icon{display:block;width:38px;height:38px;margin-bottom:26px;color:var(--landing-accent);font-size:32px;line-height:1}#landing .landing-card-detail{display:block;font-size:11px;color:var(--muted);margin-top:26px}#landing .landing-card-code{grid-column:span 4;padding:32px 0 0;background:var(--landing-soft)}#landing .landing-card-code>div{padding-inline:32px;max-width:490px}#landing .landing-card-code .landing-card-detail{margin:0 0 12px}#landing .landing-card-code img{margin:28px 0 0 32px;width:calc(100% - 32px);height:auto;border-radius:8px 0 0;border:1px solid var(--landing-border);border-right:0;border-bottom:0}#landing .landing-card-theme{display:flex;flex-direction:column;justify-content:center}#landing .landing-theme-sample{display:flex;gap:8px;margin-bottom:36px}#landing .landing-theme-sample span{display:grid;place-items:center;width:64px;height:84px;border-radius:7px;font-size:26px;font-family:Georgia,serif;border:1px solid #d6d6d6;color:#1a1a1a;background:#fafafa}#landing .landing-theme-sample span:nth-child(2){color:#e5e5e5;background:#1a1a1a;border-color:#444}#landing .landing-theme-sample span:nth-child(3){color:#3b2f1e;background:#f4ecd8;border-color:#d6c8a8}#landing .landing-card-tools,#landing .landing-card-offline{grid-column:span 3}#landing .landing-privacy{background:var(--landing-soft);padding-block:90px;border-block:1px solid var(--landing-border)}#landing .landing-privacy-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:48px}#landing .landing-privacy-points article>span{display:block;color:var(--landing-accent);font:12px ui-monospace,monospace;margin-bottom:18px}#landing .landing-privacy-points h3,#landing .landing-steps h3{font-size:21px}#landing .landing-privacy-points p,#landing .landing-steps p{color:var(--muted);font-size:14px;margin-top:12px}#landing .landing-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:48px}#landing .landing-steps article>span{display:grid;place-items:center;width:34px;height:34px;background:var(--landing-soft);border:1px solid var(--landing-border);color:var(--landing-accent);border-radius:50%;font-size:13px;margin-bottom:22px}#landing .landing-faq{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;padding-top:20px}#landing .landing-faq-list details{border-bottom:1px solid var(--landing-border);padding-block:22px}#landing .landing-faq-list details:first-child{border-top:1px solid var(--landing-border)}#landing .landing-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;list-style:none;font-size:16px;line-height:1.5;font-weight:500}#landing .landing-faq-list summary:after{content:"+";color:var(--muted);font-size:22px;font-weight:400}#landing .landing-faq-list details[open] summary:after{content:"−"}#landing .landing-faq-list p{font-size:14px;color:var(--muted);margin-top:14px}#landing .landing-final{padding:32px 0 100px;text-align:center}#landing .landing-final img{margin:0 auto 28px}#landing .landing-final p{font-size:18px;color:var(--muted);margin:20px 0 28px}#landing .landing-footer{background:var(--landing-soft);padding:40px 22px 24px;font-size:12px;line-height:1.5;color:var(--muted)}#landing .landing-footer-inner{max-width:1200px;margin:0 auto}#landing .landing-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:32px 0;border-bottom:1px solid var(--landing-border)}#landing .landing-footer-grid h3{font-size:12px;font-weight:600;color:var(--text-color);margin:0 0 12px;letter-spacing:0;line-height:1.05}#landing .landing-footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}#landing .landing-footer-grid a{color:var(--muted)}#landing .landing-footer-grid a:hover{color:var(--landing-accent);text-decoration:underline}#landing .landing-footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:18px}@media(max-width:900px){#landing .landing-links{display:none}#landing .landing-footer-grid{grid-template-columns:1fr}#landing .landing-card{padding:24px}#landing .landing-card-code{padding:24px 0 0}#landing .landing-privacy-points,#landing .landing-steps{gap:24px}#landing .landing-faq{gap:32px}#landing .landing-theme-sample{gap:5px}}@media(max-width:680px){#landing .landing-wrap{width:calc(100% - 40px)}#landing .landing-hero{padding-top:48px}#landing h1{font-size:clamp(43px,10vw,66px)}#landing .landing-intro{font-size:16px;margin-top:22px}#landing .landing-eyebrow{font-size:11px;margin-bottom:16px}#landing .landing-actions{gap:20px}#landing .landing-preview{margin-top:36px}#landing .landing-preview-caption{font-size:10px;text-align:left}#landing .landing-preview-caption>span:last-child{display:none}#landing .landing-section{padding-block:64px}#landing .landing-section-intro{font-size:15px}#landing .landing-features{grid-template-columns:1fr;gap:12px}#landing .landing-card{grid-column:auto}#landing .landing-feature-icon{margin-bottom:20px}#landing .landing-card-code>div{padding-inline:24px}#landing .landing-card-code img{margin-left:24px;width:calc(100% - 24px)}#landing .landing-theme-sample{margin-bottom:24px}#landing .landing-privacy{padding-block:60px}#landing .landing-privacy-points,#landing .landing-steps{grid-template-columns:1fr;gap:32px;margin-top:36px}#landing .landing-faq{grid-template-columns:1fr;padding-top:0}#landing .landing-faq-list summary{font-size:15px}#landing .landing-final{padding-block:0 64px}}@media print{body:not(.app-mode) #landing{display:block!important}#landing .landing-nav,#landing .landing-actions,#landing .landing-button{display:none}}