@import url('./theme.css');
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}.skip{position:absolute;left:1rem;top:-5rem;z-index:10;background:var(--paper);color:var(--ink);padding:1rem}.skip:focus{top:1rem}
.masthead{display:flex;align-items:center;justify-content:space-between;padding-block:25px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:10px;font-size:27px;font-weight:700;letter-spacing:-1.2px;white-space:nowrap}.brand>span{font-weight:400;margin-left:-10px}.brand img{object-fit:contain;border-radius:7px}.masthead nav{display:flex;align-items:center;gap:28px;font-size:13px}.nav-console{border:1px solid #ffffff45;padding:12px 16px;border-radius:5px}
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;min-height:650px;align-items:center;padding-block:72px 90px}.hero h1{font-size:clamp(43px,4.5vw,65px);line-height:1.1;letter-spacing:-2.5px;font-weight:500;margin:0 0 28px}.hero h1 em{color:var(--accent);font-style:normal}.lede{font-size:22px;line-height:1.4;margin:0 0 16px}.intro{font-size:16px;line-height:1.8;color:var(--muted);max-width:420px}.actions{display:flex;align-items:center;gap:28px;margin-top:28px}.button{display:inline-flex;background:var(--accent);color:var(--ink);border:0;padding:15px 20px;border-radius:5px;font-size:14px;font-weight:600;cursor:pointer}.button:hover{background:#d4c0fc}.text-link{font-size:13px;color:var(--accent);text-decoration:underline;text-decoration-color:#c4a9fa55;text-underline-offset:5px}.text-link:hover{text-decoration-color:currentColor}.hero-note{font-size:12px;color:var(--muted);margin-top:25px}
.hero-art{height:435px;position:relative;isolation:isolate}.hero-art figure{margin:0;border:1px solid #ffffff30;border-radius:8px;overflow:hidden;box-shadow:0 18px 45px #0005;background:#23222c}.game-example{position:absolute;width:94%;left:-2%;top:9%;transform:rotate(-5deg)}.window-bar{display:flex;align-items:center;gap:13px;padding:10px 12px;font-size:10px;color:#c7c0d0;background:#27232e}.window-dots{font-size:6px;letter-spacing:2px;opacity:.45}.game-example>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.game-example figcaption{font-size:10px;color:var(--muted);padding:9px 12px}.app-example{position:absolute;width:43%;right:4%;top:0;transform:rotate(7deg)}.app-content{background:#f3f2f6;color:#302c38;padding:15px}.app-heading{font-size:15px;font-weight:700;display:flex;justify-content:space-between;border-bottom:1px solid #302c3820;padding-bottom:12px}.app-heading>span{font-size:7px;font-weight:400;align-self:center}.app-post{display:flex;gap:7px;padding-block:12px;font-size:8px}.avatar{width:18px;height:18px;border-radius:50%;background:#cab9db;flex-shrink:0}.avatar.second{background:#b8cdc8}.app-post>div{flex:1}.app-post b{font-size:8px}.app-post p{font-size:7px;margin:4px 0 8px;line-height:1.4}.post-thumbnail{height:44px;border-radius:3px;background:linear-gradient(155deg,#d4dce4 45%,#879e97 45% 65%,#627f77 65%)}.app-placement>span{font-size:7px;color:#777;display:block;margin-bottom:4px}.app-placement img{width:100%;height:auto;display:block;border-radius:3px}.app-post-short{padding-bottom:0}
.demo{border-top:1px solid var(--line);padding-block:64px 70px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:30px}h2{font-size:32px;line-height:1.2;letter-spacing:-.8px;font-weight:500;margin:0 0 16px}.section-heading p{color:var(--muted);font-size:14px;line-height:1.7;margin:0;max-width:620px}#network-status{font-size:12px;color:var(--muted);margin:20px 0 30px;min-height:17px}#network-status[data-state=loaded]{color:#b8d4b9}.demo-placements{display:grid;grid-template-columns:256px minmax(0,1fr);gap:40px;align-items:start}.placement{min-width:0}.placement>h3{font-size:12px;font-weight:400;color:var(--muted);margin:0 0 14px}.demo-stage>.nostr-ddspace{display:flex;align-items:center;justify-content:center;background-color:var(--panel);border:1px solid #ffffff15;border-radius:3px;position:relative;max-width:100%}.demo-portrait{width:256px;height:512px}.demo-square{width:256px;height:256px}.demo-landscape{width:512px;aspect-ratio:2}.loading-label{font-size:12px;color:#96909f}
.getting-started{padding-block:60px 70px;border-top:1px solid var(--line)}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:32px}.guide-grid article{display:flex;align-items:start;flex-direction:column;min-width:0}.getting-started h3{font-size:19px;font-weight:500;margin:0 0 13px}.getting-started p{font-size:14px;color:var(--muted);line-height:1.8;margin:0 0 22px}.guide-grid .text-link{margin-top:auto}.getting-started p a{color:var(--accent)}.web-guide{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;padding-top:55px;margin-top:48px;border-top:1px solid var(--line)}.web-guide>div{min-width:0}.downloads{display:flex;gap:22px;margin-bottom:24px}.code-panel{border:1px solid var(--line);background:var(--panel);border-radius:6px;align-self:start}.code-panel>div{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.code-panel button{background:none;border:0;color:var(--accent);cursor:pointer;font-size:12px}.code-panel pre{margin:0;padding:22px;overflow:auto;font:12px/1.9 monospace;color:#d2c0f0}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap;padding-block:30px}footer .brand{font-size:22px}footer>div{display:flex;gap:25px;font-size:12px;color:var(--muted)}
@media(max-width:1050px){.wrap{width:calc(100% - 48px)}.hero{gap:30px}.hero-art{height:350px}.hero h1{letter-spacing:-1.5px}.app-content{padding:10px}.app-heading{font-size:12px}.app-post{padding-block:8px}.post-thumbnail{height:30px}.demo-placements{gap:20px}.guide-grid{gap:25px}.web-guide{gap:40px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.masthead{padding-block:20px}.brand{font-size:24px}.masthead nav{gap:18px;font-size:12px}.masthead nav>a:nth-child(2){display:none}.nav-console{padding:10px}.hero{grid-template-columns:1fr;gap:35px;padding-block:50px 65px}.hero h1{font-size:52px}.intro{max-width:500px}.hero-art{height:420px;width:min(510px,95%);margin-inline:auto}.game-example{width:91%}.app-example{width:40%;right:0}.section-heading{align-items:start;flex-direction:column;gap:15px}.demo,.getting-started{padding-block:45px}.demo-placements{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}.placement:last-child{grid-column:auto}.demo-portrait{height:auto;aspect-ratio:1/2}.demo-square{height:auto;aspect-ratio:1}.guide-grid{grid-template-columns:1fr;gap:30px}.guide-grid article{border-bottom:1px solid var(--line);padding-bottom:26px}.guide-grid article:last-child{border:0;padding-bottom:0}.guide-grid p{max-width:550px}.web-guide{grid-template-columns:1fr;gap:28px;margin-top:35px;padding-top:35px}footer{gap:20px}footer>div{flex-wrap:wrap;gap:18px}}
@media(max-width:420px){.wrap{width:calc(100% - 32px)}.masthead nav>a:first-child{display:none}.hero h1{font-size:45px}.hero-art{height:290px;width:100%}.window-bar{padding:7px 9px;font-size:8px}.app-content{padding:8px}.app-heading{font-size:10px}.app-heading>span{display:none}.app-post-short{display:none}.post-thumbnail{height:22px}.app-post{padding-block:7px}.avatar{width:13px;height:13px}.app-post p{font-size:6px}.game-example figcaption{font-size:8px}.demo-placements{grid-template-columns:1fr;gap:28px}.placement:last-child{grid-column:auto}.demo-portrait{height:512px;aspect-ratio:auto}.demo-square{height:256px;aspect-ratio:auto}.code-panel pre{font-size:11px;padding:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.format-label{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted);margin-bottom:14px}.format-label select{background:var(--panel);color:var(--paper);border:1px solid var(--line);border-radius:4px;padding:5px 8px;font:inherit}.placement>h3{min-height:27px;display:flex;align-items:center;margin-bottom:14px}select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:600px){.demo-placements{grid-template-columns:1fr}}

.website-setup{border-top:1px solid var(--line);padding-block:60px 55px}.website-setup p{font-size:14px;line-height:1.7;color:var(--muted)}.setup-intro{margin:0 0 30px}.setup-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:20px;margin-bottom:22px}.setup-fields>div{min-width:0}.setup-fields label{display:block;font-size:13px;margin-bottom:10px}.setup-fields input,.setup-fields select{width:100%;min-width:0;background:var(--panel);color:var(--paper);border:1px solid #ffffff35;border-radius:5px;padding:13px 12px;font:14px Arial,Helvetica,sans-serif}.setup-fields input:focus-visible,.setup-fields select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.setup-fields input[aria-invalid=true]{border-color:#e6a8a8}.setup-fields p{font-size:12px;line-height:1.5;margin:10px 0 0}.website-setup .button:disabled{opacity:.65;cursor:wait}#setup-status{min-height:24px;margin:16px 0 0;overflow-wrap:anywhere}#setup-status[data-state=error]{color:#e6a8a8}#setup-status[data-state=success]{color:#b8d4b9}#website-code-result{margin-top:22px}#website-code-result>p{margin-bottom:14px}#website-code-result .code-panel{max-width:100%}.website-setup [hidden]{display:none}
@media(max-width:900px){.setup-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-key{grid-column:1/-1}}
@media(max-width:600px){.website-setup{padding-block:45px}.setup-fields{grid-template-columns:1fr}.website-setup .button{width:100%;justify-content:center}.actions{gap:24px;flex-wrap:wrap}.website-setup .code-panel pre{font-size:11px;padding:15px}}
.website-preview{margin-top:28px}.website-preview h3{font-size:17px;font-weight:500;margin:0 0 14px}#website-preview iframe{display:block;width:100%;border:1px solid var(--line);border-radius:6px;background:#fff}
#website-preview-status[data-state=error]{color:#e6a8a8}
.setup-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 30px}.setup-tabs button{border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--muted);padding:12px 18px;cursor:pointer;font-size:14px}.setup-tabs button[aria-selected=true]{background:var(--accent);color:var(--ink);border-color:var(--accent)}.website-setup [role=tabpanel]>h3{font-size:22px;font-weight:500;margin:0 0 12px}.website-setup [role=tabpanel]>p{max-width:750px;margin:0 0 25px}.website-setup .protocol-link{margin:35px 0 0;padding-top:24px;border-top:1px solid var(--line)}

.demo-controls{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center}.demo-stage{max-width:100%;overflow-x:auto;padding-bottom:2px}.demo-stage>.nostr-ddspace{max-width:none;flex-shrink:0}.demo-stage .demo-portrait{width:256px;height:512px;aspect-ratio:auto}.demo-stage .demo-square{width:256px;height:256px;aspect-ratio:auto}.demo-stage .demo-landscape{width:512px;height:256px;aspect-ratio:auto}.demo-controls .format-label{flex-wrap:wrap;gap:7px}.demo-controls select{max-width:100%}