.public-demo-notice{position:relative;z-index:35;padding:10px 42px 10px 20px;background:#e5f0eb;border-bottom:1px solid #aac8ba;color:#123e35;font-size:14px;line-height:1.6}.public-demo-notice a{color:inherit;font-weight:700;margin-left:12px}.public-demo-notice strong{margin-right:8px}.public-demo-note{color:#705314}.public-demo-tour{max-width:1280px;margin:auto;padding:28px 46px 60px 24px}.demo-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}.demo-nav{position:sticky;top:20px;background:white;border:1px solid var(--line,#dfe5df);border-radius:12px;padding:18px}.demo-nav h2{font-size:18px;margin:0 0 12px}.demo-nav a{display:block;padding:11px 12px;margin:3px 0;border-radius:8px;color:#224a42;text-decoration:none;font-size:16px}.demo-nav a[aria-current="page"]{background:#176b5b;color:#fff;font-weight:700}.demo-article{min-width:0}.demo-article h1{font-size:30px;margin:0 0 12px;line-height:1.4}.demo-article p{font-size:16px;line-height:1.8}.demo-article .panel{padding:24px;margin-bottom:18px}.demo-article h2{font-size:21px;margin:0 0 12px}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.demo-grid>div{min-width:0;background:#f3f6f3;padding:16px;border-radius:8px}.demo-article details{border-top:1px solid #dfe5df;padding:15px 0}.demo-article summary{cursor:pointer;font-size:16px;font-weight:700}.demo-article .badge{font-size:14px;margin-right:6px}.demo-article .library-hash{overflow-wrap:anywhere;font-size:13px}.demo-article ul{padding-left:22px;line-height:1.8}.demo-nav-toggle{display:none}.demo-help{position:fixed;right:0;top:45%;z-index:50;background:#165f4f;color:white;border:0;border-radius:12px 0 0 12px;width:34px;padding:16px 8px;writing-mode:vertical-rl;letter-spacing:4px;font-size:14px;cursor:pointer}.demo-dialog{max-width:560px;width:calc(100% - 50px);padding:28px;border:1px solid #becdc6;border-radius:16px;line-height:1.8}.demo-dialog::backdrop{background:#152f2a99}.demo-dialog h2{margin-top:0}.demo-dialog button{padding:10px 24px}.demo-article a{color:#176b5b}.demo-article .btn.primary{color:white}.demo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.demo-tabs button[aria-pressed="true"]{background:#176b5b;color:#fff}.demo-article :focus-visible,.demo-nav :focus-visible{outline:3px solid #ad4b31;outline-offset:4px}@media(max-width:900px){.demo-layout{grid-template-columns:1fr}.demo-nav{position:static;padding:12px}.demo-nav-toggle{display:block;width:100%;text-align:left;font-size:16px;font-weight:700;border:0;background:none;padding:8px;color:#174f43}.demo-nav h2{display:none}.demo-nav nav[hidden]{display:none}}@media(max-width:600px){.public-demo-tour{padding:20px 40px 40px 16px}.demo-article h1{font-size:25px}.demo-article .panel{padding:18px}.demo-grid{grid-template-columns:1fr}.public-demo-notice{padding-left:16px}.public-demo-notice a{display:inline-block;margin-left:0;margin-right:10px}}

.public-demo-notice{position:sticky;top:0}.sidebar{top:var(--demo-notice-height,44px);height:calc(100vh - var(--demo-notice-height,44px))}

.guide-demo-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px}.guide-demo-steps{display:flex;flex-direction:column;gap:10px;align-self:start;position:sticky;top:calc(var(--demo-notice-height,80px) + 20px)}.guide-demo-steps .btn{text-align:left;white-space:normal;min-height:48px}.guide-demo-body{min-width:0}.guide-demo-form{display:grid;gap:16px}.guide-demo-form label{display:grid;gap:7px;font-size:14px}.guide-demo-form textarea,.guide-demo-form input:not([type=checkbox]),.guide-demo-form select{font-size:16px;padding:10px;border:1px solid #bdcdbf;border-radius:7px;width:100%;box-sizing:border-box;min-width:0}.guide-demo-form textarea{min-height:82px}.guide-demo-form details{padding:12px;border:1px solid #d6dfcf;border-radius:8px}.guide-demo-form summary{padding:8px;cursor:pointer;color:#146359;font-weight:600}.guide-demo-form details[open]{display:grid;gap:12px}.guide-demo-form pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.8;background:#f5f7ee;padding:14px}.guide-demo-form .guide-check{display:flex;align-items:center;min-height:44px;gap:12px}.guide-check input{width:20px;height:20px}.guide-demo-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.guide-demo-form .btn{white-space:normal;max-width:100%}
@media(max-width:1100px){.guide-demo-layout{grid-template-columns:1fr}.guide-demo-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:static}.guide-demo-steps p{grid-column:1/-1;margin:0}.guide-demo-steps .btn{padding:10px;font-size:13px}.guide-demo-body h2{font-size:22px}}

.change-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}.change-steps .btn{white-space:normal;text-align:left;min-height:52px;font-size:16px}.change-preview{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.8;max-width:100%;background:#f3f6f3;padding:16px;border-radius:8px}.change-path{padding-left:24px;line-height:1.8}.change-path li{margin:12px 0}.change-state{border-left:4px solid #bf8d29;padding:12px 16px;background:#fff8e9}.demo-nav{top:calc(var(--demo-notice-height,80px) + 16px);max-height:calc(100vh - var(--demo-notice-height,80px) - 40px);overflow-y:auto}.guide-demo-form .guide-check{display:flex;flex-direction:row;align-items:center}.guide-demo-form .guide-check input{width:20px;height:20px;flex:0 0 20px}.demo-article details a{overflow-wrap:anywhere}@media(max-width:900px){.demo-nav{max-height:none;overflow:visible}}@media(max-width:500px){.change-steps{grid-template-columns:1fr}.demo-article .btn{white-space:normal;max-width:100%}}

.demo-nav nav a{display:flex;align-items:center;gap:8px}.demo-nav .nav-icon{flex-shrink:0}.demo-nav .nav-new-window{font-size:10px}

/* The public notice must not cover the official logo in the fixed admin rail. */
@media(min-width:701px){.admin-sidebar{top:var(--demo-notice-height,44px);height:calc(100vh - var(--demo-notice-height,44px))}}