:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#24342f;background:#f5f7f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #78bca5;outline-offset:3px}.topbar{height:84px;padding:0 4.3%;display:flex;align-items:center;border-bottom:1px solid #e1e8e3;background:#fff;gap:28px}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:21px;font-weight:750}.brand-icon{background:#234c3f;color:#fff;border-radius:10px;padding:7px 9px;font:700 22px monospace}.brand-icon span{font-size:18px}.brand small{display:block;font-size:9px;letter-spacing:1.8px;margin-top:4px;color:#809087}.privacy{margin-left:auto;color:#7a8981;font-size:12px}.privacy i,.live i{display:inline-block;width:6px;height:6px;background:#59987c;border-radius:50%;margin-right:7px}.primary{border:0;background:#264f40;color:white;padding:12px 21px;border-radius:7px;font-size:13px;font-weight:600;box-shadow:0 3px 5px #264f4015}.primary:hover{background:#193e30}.primary span{font-size:20px;margin-right:8px}main{max-width:1600px;margin:auto;padding:39px 4.3% 20px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{color:#5a8570;font-size:10px;font-weight:700;letter-spacing:2.3px}h1{font-size:30px;letter-spacing:-1px;margin:10px 0 12px;font-weight:650}.intro p{font-size:13px;color:#7c8982;margin:0}.intro-note{display:flex;gap:21px;align-items:center;color:#8da096;padding-right:10px}.intro-note span{font:22px Georgia,serif;background:#eaf0eb;border:1px solid #dbe5de;border-radius:12px;width:62px;height:62px;display:grid;place-items:center;transform:rotate(-7deg)}.intro-note span:last-child{transform:rotate(7deg)}.intro-note b{font-size:19px;font-weight:400}.stylebar{display:flex;align-items:center;gap:30px;padding:19px 22px;background:#fff;border:1px solid #e0e7e1;border-radius:11px;margin-bottom:23px}.style-label{font-size:13px;font-weight:650;white-space:nowrap}.style-label>span{display:block;font-size:10px;font-weight:400;color:#94a096;margin-top:7px}.themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:1}.theme{display:flex;align-items:center;gap:11px;text-align:left;border:1px solid #e5e9e5;background:#fff;border-radius:8px;padding:10px 12px;color:#425448;font-size:12px;min-width:0}.theme:hover{border-color:#82a894}.theme.active{background:#f2f7f3;border-color:#668b74;box-shadow:0 0 0 1px #668b7410}.theme small{display:block;font-size:8px;letter-spacing:1px;color:#91a095;margin-top:5px}.theme b{margin-left:auto;color:#4e7b61;font-size:13px;visibility:hidden}.theme.active b{visibility:visible}.swatch{display:grid;place-items:center;width:36px;height:40px;flex-shrink:0;border:1px solid #e4e8e3;border-radius:4px;font:19px Georgia,serif}.minimal{background:#fff;color:#36614a}.github{background:#f0f3f6;color:#333c46;font-family:monospace}.paper{background:#f9f0df;color:#946f44}.night{background:#202d3c;color:#b9c9e5;border-color:#202d3c}.workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dce4dd;border-radius:11px;overflow:hidden;background:white;box-shadow:0 6px 24px #253e2c04}.pane{min-width:0;display:flex;flex-direction:column}.editor-pane{border-right:1px solid #e1e7e2}.pane-header{height:56px;padding:0 21px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7ece7}.pane-header h2{font-size:12px;font-weight:650;margin:0;display:flex;align-items:center;gap:8px}.pane-header h2 small{color:#8b978e;font-size:11px;font-weight:400;margin-left:3px}.pane-dot{width:7px;height:7px;background:#a6b1a8;border-radius:2px}.pane-dot.green{background:#638f73}.text-button{border:0;background:none;color:#6e8174;font-size:11px;padding:8px}.text-button:hover{color:#234f36}.live{font-size:10px;color:#8a978e}.live i{width:5px;height:5px}textarea{width:100%;height:560px;resize:vertical;min-height:340px;max-height:85vh;display:block;flex:1;border:0;outline:none;padding:27px;color:#4b5d53;font:13px/1.95 Consolas,"Microsoft YaHei",monospace;background:#fcfdfb;tab-size:2}textarea:focus{box-shadow:inset 0 0 0 2px #7ba58b66}iframe{width:100%;height:560px;flex:1;border:0;display:block;background:white}.pane-footer{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fbfcfa;border-top:1px solid #e6ebe5;color:#8d998e;font-size:10px;gap:10px}.page-footer{display:flex;justify-content:space-between;color:#96a195;font-size:10px;padding-top:18px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(min-height:1000px){textarea,iframe{height:calc(100vh - 430px)}}@media(max-width:1000px){.stylebar{display:block}.style-label>span{display:inline;margin-left:12px}.themes{margin-top:15px}.theme{padding:9px;gap:7px}.theme small{letter-spacing:0}.intro-note{display:none}}@media(max-width:650px){.topbar{height:70px;padding:0 5%;gap:10px}.privacy{display:none}.primary{margin-left:auto;padding:10px 13px}.brand{font-size:18px}.brand small{font-size:7px}main{padding:27px 5% 16px}h1{font-size:25px}.intro p{font-size:11px}.themes{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace{grid-template-columns:1fr}.editor-pane{border-right:0;border-bottom:1px solid #dce4dd}textarea{height:350px;flex:auto}iframe{height:480px;flex:auto}.page-footer{gap:15px;font-size:9px}.pane-footer{padding:0 12px;font-size:9px}}
/* Embedded mode follows breathing-478: remove page chrome, retain tool controls. */
.embedded-actions{display:none}
html[data-embedded=true]{background:transparent}
html[data-embedded=true] .topbar,html[data-embedded=true] .intro,html[data-embedded=true] .page-footer{display:none}
html[data-embedded=true] main{max-width:none;padding:12px}
html[data-embedded=true] .stylebar{flex-wrap:wrap;gap:12px;padding:14px;margin-bottom:12px}
html[data-embedded=true] .embedded-actions{display:flex;order:3;margin-left:auto}
html[data-embedded=true] .themes{flex-basis:75%}
html[data-embedded=true] .style-label{display:none}
html[data-embedded=true] textarea,html[data-embedded=true] iframe{height:clamp(340px,calc(100vh - 218px),900px)}
@media(max-width:1000px){html[data-embedded=true] .stylebar{display:flex}html[data-embedded=true] .themes{margin-top:0}}
@media(max-width:650px){html[data-embedded=true] .themes{flex-basis:100%}html[data-embedded=true] textarea{height:340px}html[data-embedded=true] iframe{height:480px}}
/* Fill the viewport; pane content scrolls inside the available workspace. */
html{min-height:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.topbar{flex-shrink:0}
main{width:100%;max-width:none;margin:0;flex:1;display:flex;flex-direction:column}
.intro,.stylebar,.page-footer{flex-shrink:0}
.workspace{flex:1;min-height:300px;grid-template-rows:minmax(0,1fr)}
.pane{min-height:0}
.pane-header,.pane-footer{flex-shrink:0}
textarea,#preview,html[data-embedded=true] textarea,html[data-embedded=true] #preview{height:0;min-height:0;max-height:none;flex:1;resize:none}
@media(min-width:651px){body{height:100vh;height:100dvh}main{min-height:0}.workspace{flex-basis:0}}
@media(max-width:650px){.workspace{min-height:620px;grid-template-rows:repeat(2,minmax(0,1fr))}main{flex-basis:auto}}
/* Palette chooser wraps without squeezing the writing panes. */
.themes{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.xiaohongshu{background:#fff;color:#e6274b;border-color:#f2dce2}
.tech{background:#faf4e8;color:#b94e10;border-color:#e7d8bd}
.girl{background:#fffaf5;color:#b74d7a;border-color:#efd5e0}
.colorful{background:#f4f1fa;color:#7850b5;border-color:#e3dbef;box-shadow:inset 0 -3px #c26717}
.duolingo{background:#eef8df;color:#408414;border-color:#d5e8bf}
.linear{background:#f6f7f9;color:#5e59c9;border-color:#dddfee}
.notion{background:#fff;color:#337ea9;border-color:#dbe7ef}
.swatch.github{color:#0969da}
@media(max-width:650px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}.theme{min-height:58px}.stylebar,html[data-embedded=true] .stylebar{max-height:310px;overflow-y:auto;overscroll-behavior:contain}}