.hm-page{display:flex;flex-direction:column;gap:16px}
.hm-page .hm-hero{position:relative;padding:26px 30px;border:1px solid #6f5686;border-radius:20px;background:radial-gradient(circle at 88% 20%,#f6cd6326,transparent 34%),radial-gradient(circle at 10% 110%,#8b5cf633,transparent 45%),linear-gradient(135deg,#2d2640,#242032 60%,#1d1a29)}
.hm-page .hm-eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f6cd63}
.hm-page .hm-hero h1{margin:0 0 8px}
.hm-page .hm-hero .tw-intro{margin:0;max-width:720px;color:#d8cfe6}
.hm-page .hm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.hm-page .hm-chips li{padding:5px 12px;border:1px solid #6f568699;border-radius:999px;background:#ffffff0d;font-size:13px;color:#e9e1f5}
.hm-page .hm-stats{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.hm-page .hm-stats:empty{display:none}
.hm-page .hm-stats>*{margin:0;padding:8px 14px;border-radius:12px;background:#15121f;border:1px solid #3a3150;font-size:14px}
.hm-page .hm-stats>*:last-child{color:#f6cd63;border-color:#f6cd6366}
.hm-page .hm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.hm-page .hm-seg{display:inline-flex;padding:4px;gap:4px;border:1px solid #4a3d60;border-radius:14px;background:#1b1726}
.hm-page .hm-seg button{min-height:44px;padding:0 20px;border:0;border-radius:10px;background:transparent;color:#e9e1f5;font-weight:600;cursor:pointer}
.hm-page .hm-seg button.tw-primary{background:#f6cd63;color:#231a08}
.hm-page .hm-seg button:hover{background:#ffffff14}.hm-page .hm-seg button.tw-primary:hover{background:#f8d77e}
.hm-page .hm-src{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.hm-page .hm-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 260px;gap:14px;align-items:stretch}
.hm-page .hm-pane{display:flex;flex-direction:column;gap:10px;margin:0;min-width:0}
.hm-page .hm-pane .tw-code{flex:1;margin:0;min-height:420px}
.hm-page .hm-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hm-page .hm-head label{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#cdbfe3}
.hm-page .hm-tag{padding:2px 9px;border-radius:999px;background:#8b5cf62e;color:#c9b3f5;font-size:11px;font-family:ui-monospace,Consolas,monospace}
.hm-page .hm-out{border-color:#6f5686}.hm-page .hm-out .hm-tag{background:#f6cd632b;color:#f6cd63}
.hm-page .hm-outbar{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.hm-page .hm-opts{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.hm-page .hm-opts h2{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#cdbfe3}
.hm-page .hm-opts label{align-items:flex-start!important;line-height:1.35;font-size:14px}
.hm-page .hm-opts input[type=checkbox]{flex:none;margin-top:1px}
.hm-page .hm-opts p{margin:6px 0 0;padding-top:10px;border-top:1px solid #3a3150;font-size:12.5px;line-height:1.5}
.hm-page .tw-status{margin:0}
.hm-page .hm-preview{padding:14px 18px;border:1px solid #3a3150;border-radius:14px;background:#1b1726}
.hm-page .hm-preview summary{cursor:pointer;font-weight:600}
.hm-page aside.hm-opts.tw-panel{display:flex;flex-direction:column;flex-wrap:nowrap;gap:12px;align-items:stretch}
.hm-page aside.hm-opts label{min-height:0;display:flex;gap:10px}.hm-page aside.hm-opts.tw-panel p{flex:none}
.hm-page .hm-seg button.tw-primary,.hm-page .hm-seg button.tw-primary:hover{background:#f6cd63!important;color:#231a08!important;border:0}
.hm-page .hm-hero ul.hm-chips,.hm-page .hm-hero .hm-stats:not(:empty){display:flex!important;flex-flow:row wrap!important;align-items:flex-start}.hm-page .hm-chips li,.hm-page .hm-stats>*{flex:none;width:auto}
@media(max-width:1100px){.hm-page .hm-studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hm-page .hm-opts{grid-column:1/-1}}
@media(max-width:800px){.hm-page .hm-hero{padding:20px 18px}.hm-page .hm-hero h1{font-size:26px;line-height:1.2}.hm-page .hm-studio{grid-template-columns:minmax(0,1fr)}.hm-page .hm-pane .tw-code{min-height:200px}.hm-page .hm-bar{flex-direction:column;align-items:stretch}.hm-page .hm-seg{display:flex}.hm-page .hm-seg button{flex:1}.hm-page .hm-src button,.hm-page .hm-outbar button{flex:1 1 40%}}