/* Shared subpage shell. Functional player, editor and status styles stay local. */
:root{--qi-paper:#f6f5f1;--qi-panel:#fffefa;--qi-ink:#232725;--qi-muted:#71766f;--qi-line:#dfe2d8;--qi-blue:#305bea;--bg:#f6f5f1;--text:#232725;--muted:#71766f;--panel:#fffefa;--border:#dfe2d8;--primary:#305bea;--primary-strong:#2448c6;--accent:#305bea;--shadow:0 8px 24px #27352508}
html{background:var(--qi-paper)!important;scroll-padding-top:24px}.qi-page{margin:0!important;padding:0 0 40px!important;max-width:none!important;width:auto!important;min-height:100vh;background:var(--qi-paper)!important;color:var(--qi-ink)!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif!important;display:block!important;line-height:1.65;-webkit-font-smoothing:antialiased}.qi-page *{box-sizing:border-box}.qi-page a{color:var(--qi-blue)}.qi-page a:hover{text-decoration:none;color:#2448c6}.qi-page :is(a,button,input,select,textarea):focus-visible{outline:3px solid #305bea;outline-offset:3px}.qi-page :is(input,select,textarea,button){font:inherit}.qi-page :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),select,textarea){border:1px solid #d5dbce!important;border-radius:6px!important;background:#fffefa!important;color:#303730!important;padding:10px 12px;max-width:100%;box-shadow:none!important}.qi-page input::placeholder,.qi-page textarea::placeholder{color:#858d80}.qi-page textarea{line-height:1.7}.qi-page :is(button:not(.btn-close),.btn):not(.qi-plain){border-radius:6px!important;font-size:13px;min-height:40px;box-shadow:none!important;cursor:pointer;padding:9px 16px;transition:background .15s,transform .15s}.qi-page :is(.btn-primary,.btn-join,.btn-ag.btn-join,button[type=submit],#compressBtn){background:var(--qi-blue)!important;border-color:var(--qi-blue)!important;color:white!important}.qi-page :is(button,.btn):disabled{opacity:.45;cursor:not-allowed}.qi-page :is(button,.btn):not(:disabled):hover{filter:brightness(.95)}.qi-page :is(.card,.panel,.preview-box){background:var(--qi-panel);border:1px solid var(--qi-line);border-radius:10px;box-shadow:0 5px 20px #27352506}.qi-page :is(.card,.panel){background:var(--qi-panel)!important;color:var(--qi-ink);box-shadow:0 5px 20px #27352506!important;border-radius:10px!important;border-color:var(--qi-line)!important}.qi-page :is(h1,h2,h3){color:var(--qi-ink);line-height:1.4;letter-spacing:-.6px}.qi-page h1{font-size:clamp(27px,3.5vw,40px);font-weight:700}.qi-page h2{font-size:24px;font-weight:650}.qi-page h3{font-size:19px}.qi-page :is(.tag,.badge){background:#e9eedf;color:#58664b;border-radius:5px}.qi-page .back-link{color:var(--qi-muted);font-size:12px}.qi-page>.back-link{margin-left:24px}.qi-page .qi-header{display:flex!important;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:1440px;margin:0 auto!important;padding:23px 40px!important;min-height:84px;background:transparent!important;color:var(--qi-ink)!important;border-bottom:1px solid var(--qi-line);text-align:left;font-size:14px}.qi-header .qi-brand{display:flex;align-items:center;gap:10px;color:var(--qi-ink);font-size:23px;font-weight:750;letter-spacing:-1px;text-decoration:none;white-space:nowrap}.qi-brand>span{display:grid;place-items:center;width:34px;height:34px;padding-bottom:5px;background:var(--qi-ink);color:white;border-radius:9px;font-size:27px}.qi-header nav{display:flex;gap:32px;align-items:center}.qi-header nav a{color:#5d6559;font-size:13px;text-decoration:none}.qi-header nav a:hover,.qi-header nav a[aria-current=page]{color:var(--qi-blue)}.qi-header .qi-github{border:1px solid #d1d7c9;padding:8px 13px;border-radius:6px;color:var(--qi-ink);font-size:12px;text-decoration:none}.qi-context{max-width:1200px;display:flex;gap:13px;align-items:center;padding:25px 30px;margin:auto;font-size:12px;color:#7b8472}.qi-context a{color:#6a745f;text-decoration:none}.qi-skip{position:absolute;left:15px;top:-80px;padding:12px;background:white;z-index:1000}.qi-skip:focus{top:10px}.qi-page>.container,.qi-page>.page,.qi-page>.main{width:calc(100% - 60px);max-width:1140px;margin:10px auto 35px;padding:0!important}.qi-page>.container>.container-fluid{background:var(--qi-panel);border:1px solid var(--qi-line);border-radius:10px;padding:26px!important;margin-top:20px!important}.qi-page>.container>.container-fluid>h2{margin:0 0 22px;font-size:22px}.qi-page .row{row-gap:12px}.qi-page .form-control,.qi-page .form-select{min-height:44px}.qi-page label{font-size:13px;line-height:1.6}.qi-page .qi-field-label{display:block;margin:4px 0 7px;color:#64705d;font-size:12px;font-weight:600}.qi-page .qi-help{padding:18px 22px;border:1px solid var(--qi-line);border-left:3px solid #899f70;border-radius:7px;background:#edf0e6;color:#5d6855;font-size:13px;max-width:1140px;width:calc(100% - 60px);margin:0 auto 24px}.qi-page>.container>h2:first-child{margin-top:12px;margin-bottom:24px}.qi-page .controls{gap:14px;padding:16px;background:#edf0e6;border-radius:7px}.qi-page .preview{margin-top:24px;gap:18px}.qi-page .preview-box{padding:22px;min-width:0}.qi-page .preview img{max-width:100%;object-fit:contain}.qi-page .info{color:#6e7865;overflow-wrap:anywhere}.qi-page .panel-header{border-color:var(--qi-line)}.qi-page .status-bar{border-radius:6px}.qi-page .top-bar{background:#e9eddf!important;color:var(--qi-ink)!important;border-bottom:1px solid var(--qi-line);padding:14px 30px}.qi-page .top-bar a{color:var(--qi-blue)!important}.qi-page .top-bar h1,.qi-page .top-bar h2{font-size:21px}.qi-page .article-body{max-width:800px;margin:auto;color:#374032;font-size:16px;line-height:1.95}.qi-page .article-body img{max-width:100%;height:auto}.qi-page .article-body pre{overflow:auto}.qi-page .article-detail-container{max-width:860px}.qi-page .article-card{border:1px solid var(--qi-line);border-radius:9px;box-shadow:none;background:var(--qi-panel);padding:25px}.qi-page .qi-empty{padding:48px 24px;text-align:center;border:1px dashed #cdd5c3;border-radius:10px;background:#eef1e7;color:#64705b}.qi-empty h2{font-size:22px;margin:0 0 12px}.qi-empty p{font-size:14px}.qi-empty a{font-size:13px}.qi-catalog>header:not(.qi-header){background:transparent!important;color:var(--qi-ink)!important;text-align:left;max-width:1200px;margin:auto;padding:20px 30px 30px!important}.qi-catalog>header:not(.qi-header) p{color:var(--qi-muted);font-size:14px;line-height:1.9;max-width:700px;margin:12px 0 0}.qi-catalog>.container{gap:18px}.qi-catalog .card{text-align:left;padding:27px;color:var(--qi-ink)!important;text-decoration:none}.qi-catalog .card:hover{border-color:#a3b493!important;transform:translateY(-3px);box-shadow:0 9px 24px #2735250a!important}.qi-catalog .card :is(h2,h3){font-size:19px;color:var(--qi-ink)!important}.qi-catalog .card p{font-size:13px;color:var(--qi-muted);line-height:1.8}.qi-catalog .icon{background:#e9efdf;color:#546547;box-shadow:none;font-size:24px;border-radius:9px}.qi-catalog footer{font-size:12px;color:var(--qi-muted);padding:28px}.qi-reader>.container{padding:25px 0!important}.qi-reader .qi-reading-content{max-width:900px;width:calc(100% - 60px);margin:10px auto;padding:32px;background:var(--qi-panel);border:1px solid var(--qi-line);border-radius:10px;overflow-wrap:anywhere}.qi-reading-content img{max-width:100%;object-fit:contain}.qi-reading-content h2{margin-top:32px}.qi-reading-content>h2:first-child{margin-top:0}.qi-lab>.container{display:grid;grid-template-columns:220px minmax(0,1fr);height:calc(100dvh - 175px);min-height:500px;max-width:1440px;width:calc(100% - 60px);border:1px solid var(--qi-line);border-radius:10px;overflow:hidden;padding:0!important;margin-top:0}.qi-lab .sidebar{width:auto!important;background:#e9eddf!important;color:#45533b;padding:18px 12px;border-right:1px solid var(--qi-line);overflow-y:auto}.qi-lab .sidebar h2{font-size:16px;margin:5px 0 22px}.qi-lab .sidebar ul{margin:0;padding:0;list-style:none}.qi-lab .sidebar li{margin:3px 0}.qi-lab .sidebar a{font-size:12px;color:#626e57!important;padding:10px 13px!important;border-radius:5px!important;display:block}.qi-lab .sidebar a:hover{background:#dce4d0!important}.qi-lab .sidebar a.active{background:#303d29!important;color:#fff!important}.qi-lab .content{min-width:0;overflow:hidden;background:var(--qi-paper)}.qi-lab iframe{width:100%;height:100%;border:0}.qi-embedded .qi-header,.qi-embedded .qi-context,.qi-embedded .qi-skip{display:none!important}.qi-embedded .qi-page{min-height:100vh}.qi-embedded .qi-page>.container,.qi-embedded .qi-page>.main{width:calc(100% - 32px);margin-top:18px}.qi-page .qi-feedback{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 22px;background:#273225;color:#fff;border-radius:8px;z-index:2000;font-size:13px;box-shadow:0 5px 20px #0002}.qi-page.qi-clock{--strong:#273225;--muted:#707b65}.qi-clock .panel:before{display:none}.qi-clock .label,.qi-clock .description,.qi-clock .hint,.qi-clock .meta-item,.qi-clock .date-line{color:#64705b}.qi-clock .time-board{background:#eef1e7;border-color:#d5ddcb}.qi-clock .main-time{background:none;color:#273225;-webkit-text-fill-color:#273225}.qi-clock .milliseconds{background:none;color:#305bea;-webkit-text-fill-color:#305bea}.qi-clock .meta-item{background:#e4eadb;border-color:#d5ddcb}.qi-page .qi-lab-tools{display:flex;justify-content:flex-end;gap:15px;font-size:12px;margin:0 auto 12px;width:calc(100% - 60px);max-width:1380px}.qi-page .qi-lab-tools a{color:#6b775f}
@media(max-width:760px){.qi-page .qi-header{padding:18px 22px!important;gap:18px;flex-wrap:wrap;min-height:75px}.qi-header nav{order:3;width:100%;justify-content:space-between;gap:15px}.qi-header .qi-github{margin-left:auto}.qi-context{padding:20px 22px}.qi-page>.container,.qi-page>.page,.qi-page>.main,.qi-page .qi-help,.qi-reader .qi-reading-content{width:calc(100% - 36px)}.qi-page>.container>.container-fluid{padding:20px!important}.qi-page .row>.col{flex:1 0 100%;min-width:0}.qi-page .row>.col:empty{display:none}.qi-page .preview{flex-direction:column}.qi-page .controls{align-items:stretch}.qi-page .controls input{width:100%}.qi-page .layout{grid-template-columns:1fr!important}.qi-catalog>.container,.qi-catalog .grid{grid-template-columns:1fr!important}.qi-catalog>header:not(.qi-header){padding:16px 22px 25px!important}.qi-reader .qi-reading-content{padding:22px}.qi-lab>.container{grid-template-columns:1fr;grid-template-rows:auto minmax(500px,1fr);height:calc(100dvh - 225px);min-height:650px}.qi-lab .sidebar{padding:12px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--qi-line)}.qi-lab .sidebar h2{display:none}.qi-lab .sidebar ul{display:flex;gap:5px;width:max-content}.qi-lab .sidebar a{white-space:nowrap}.qi-lab .sidebar li{margin:0}.qi-page .qi-lab-tools{width:calc(100% - 36px)}.qi-page .main{display:block}.qi-page .main>.panel{margin-bottom:18px}.qi-page .time-line{flex-wrap:wrap;justify-content:flex-start}.qi-page .main-time{font-size:clamp(40px,11vw,85px)}.qi-page .milliseconds{font-size:clamp(24px,8vw,48px)}.qi-page table{display:block;max-width:100%;overflow:auto}.qi-page video,.qi-page canvas{max-width:100%}}@media(prefers-reduced-motion:reduce){.qi-page *{scroll-behavior:auto!important;transition:none!important}}
.qi-product-intro{margin:-32px -32px 32px;padding:38px 32px;background:#e9eedf;border-bottom:1px solid #d9e1ce;border-radius:10px 10px 0 0}.qi-product-intro>p{font:10px ui-monospace,monospace;letter-spacing:2px;color:#748367;margin:0 0 18px}.qi-product-intro h1{margin:0 0 12px!important;font-size:38px}.qi-product-intro>div{font-size:14px;color:#66765b;margin-bottom:24px}.qi-product-intro>a{display:inline-block;padding:10px 17px;background:#293425;color:white!important;border-radius:6px;font-size:13px;text-decoration:none}.qi-page .btn-secondary{background:#e6ecdd!important;border-color:#d2dcc7!important;color:#45583b!important}.qi-page .btn-ghost{background:#fffefa!important;border:1px solid #d5ddcc!important;color:#56684b!important}.qi-page #downloadBtn{background:#293425;color:white}.qi-page .qi-clock .panel:after{display:none}@media(max-width:760px){.qi-product-intro{margin:-22px -22px 25px;padding:30px 22px}.qi-product-intro h1{font-size:30px}}

.qi-product-icon{width:88px;height:88px;object-fit:contain;border-radius:19px;box-shadow:0 10px 22px #293b2c18;margin-bottom:22px;display:block}

/* Keep nested tool navigation in the breadcrumb, with an aligned page title. */
.qi-page>.top-bar{width:calc(100% - 60px);max-width:1140px;margin:0 auto 20px;padding:18px 24px!important;border:1px solid var(--qi-line);border-radius:8px}.qi-page>.top-bar h1{margin:0;font-size:23px}.qi-context{flex-wrap:wrap;row-gap:8px}.qi-context .qi-parent-link{font-weight:600;color:#526348}@media(max-width:760px){.qi-page>.top-bar{width:calc(100% - 36px);padding:16px 20px!important}.qi-page>.top-bar h1{font-size:20px}}