@font-face{font-family:BrandEditorial;src:url('/assets/coplanar-guide/bricolage-400.ttf')}@font-face{font-family:BrandEditorial;src:url('/assets/coplanar-guide/bricolage-600.ttf');font-weight:600}@font-face{font-family:Mendl;src:url('/assets/brand-fonts/mendl-sans-dusk.otf');font-display:swap}
body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:90px}#native-guide{--nb-paper:#f6f6f2;--nb-ink:#171819;--nb-muted:#565855;--nb-line:#cecfca;--nb-dark:#3e4e42;--nb-light:#dee2c9;--nb-accent:#98481a;color-scheme:light;background:var(--nb-paper);color:var(--nb-ink);font:400 16px/1.55 BrandEditorial,Arial,sans-serif;isolation:isolate}#native-guide[data-brand=hub-18-park-sul]{--nb-dark:#121b23;--nb-light:#c6bcb5;--nb-accent:#a2333b}#native-guide *{box-sizing:border-box}#native-guide :is(h1,h2,h3,p,figure,dl,dd){margin:0}#native-guide :is(h1,h2,h3){font-family:inherit;color:inherit;line-height:1.06;font-weight:600;letter-spacing:-.045em}#native-guide a{color:inherit;text-decoration:none}#native-guide button{font:inherit;cursor:pointer;color:#171819;background:#f6f6f2;border:1px solid #b8bab4;border-radius:0;min-height:44px;padding:10px 16px}#native-guide button:hover{border-color:#171819}#native-guide :is(button,a,input,textarea):focus-visible{outline:3px solid #2961e5;outline-offset:4px}#native-guide img{display:block;max-width:100%;height:auto}#native-guide [hidden]{display:none!important}#native-guide .nb-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px;padding:12px 28px;background:#f6f6f2;color:#171819;border-bottom:1px solid var(--nb-line);font-size:14px}#native-guide .nb-top>span{color:#565855}#native-guide .nb-top nav{display:flex;gap:4px}#native-guide .nb-top nav a{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--nb-line);background:#f6f6f2;color:#171819}#native-guide .nb-top nav a[aria-current]{background:#171819;color:#fff}#native-guide .nb-layout{display:grid;grid-template-columns:210px minmax(0,1fr)}#native-guide .nb-side{position:sticky;top:70px;align-self:start;min-height:650px;padding:35px 24px;color:#171819;background:#f6f6f2}#native-guide .nb-side>strong{font-size:20px;line-height:1.2;display:block}#native-guide .nb-side>span{display:block;color:#565855;font-size:13px;margin:12px 0 40px}#native-guide .nb-side nav{display:grid;gap:6px}#native-guide .nb-side nav a{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid transparent;font-size:14px;color:#565855}#native-guide .nb-side nav a span{font-size:12px}#native-guide .nb-side nav a[aria-current],#native-guide .nb-side nav a:hover{color:#171819;border-color:#171819}#native-guide main{min-width:0;border-left:1px solid var(--nb-line)}#native-guide .nb-hero{background:var(--nb-dark);color:#fff;padding:30px 6% 44px;min-height:560px;display:flex;flex-direction:column;justify-content:space-between;gap:60px}#native-guide .nb-hero-meta{display:flex;justify-content:space-between;gap:20px;font-size:14px;color:#fff}#native-guide .nb-hero-logo{width:75%;height:230px;object-fit:contain;align-self:center}#native-guide[data-brand=hub-18-park-sul] .nb-hero-logo{filter:brightness(0) invert(1)}#native-guide .nb-hero-bottom{display:grid;grid-template-columns:1fr 1fr 45px;gap:24px;align-items:end}#native-guide .nb-hero h1{font-size:24px}#native-guide .nb-hero-bottom p{font-size:clamp(22px,2.5vw,38px);line-height:1.14;color:#fff}#native-guide .nb-hero-bottom>a{font-size:30px;text-align:right}#native-guide .nb-section{padding:88px 6%;border-bottom:1px solid var(--nb-line);scroll-margin-top:75px}#native-guide .nb-section-head{display:grid;grid-template-columns:70px minmax(0,1fr);gap:24px;margin-bottom:45px}#native-guide .nb-index{font-size:12px;color:#565855;padding-top:9px}#native-guide .nb-section-head h2{font-size:clamp(32px,4.2vw,62px);max-width:900px}#native-guide .nb-section-head p{margin-top:25px;max-width:740px;color:#565855;font-size:18px;line-height:1.55}#native-guide .nb-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:45px}#native-guide .nb-intro>p{font-size:22px;line-height:1.4}#native-guide .nb-intro dl{display:grid;gap:24px}#native-guide dt{font-size:13px;color:#565855;margin-bottom:7px}#native-guide dd{font-size:17px}#native-guide .nb-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:18px}#native-guide .nb-segments{display:flex;flex-wrap:wrap;gap:4px}#native-guide .nb-segments button{font-size:14px}#native-guide .nb-segments button[aria-pressed=true]{background:#171819;color:#fff;border-color:#171819}#native-guide .nb-logo-stage{position:relative;display:grid;place-items:center;min-height:390px;padding:65px 12%;background:var(--nb-light);color:#171819;transition:background .5s,color .5s}#native-guide .nb-active-logo{max-height:235px;max-width:90%;object-fit:contain;width:600px;transition:width .5s,filter .3s}#native-guide .nb-logo-stage[data-variant=secondary] .nb-active-logo{max-height:250px}#native-guide[data-brand=piipe] .nb-logo-stage[data-variant=secondary] .nb-active-logo{width:240px}#native-guide .nb-logo-stage[data-surface=dark]{background:var(--nb-dark);color:#fff}#native-guide[data-brand=hub-18-park-sul] .nb-logo-stage[data-surface=dark] img{filter:brightness(0) invert(1)}#native-guide[data-brand=piipe] .nb-logo-stage[data-surface=light][data-variant=secondary] img{filter:brightness(0)}#native-guide .nb-logo-stage>span{position:absolute;bottom:18px;left:22px;font-size:13px;color:inherit}#native-guide .nb-notes{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:30px}#native-guide .nb-notes h3{font-size:23px;margin-bottom:15px}#native-guide .nb-notes p{color:#565855}#native-guide .nb-palette{display:flex;min-height:310px;gap:0}#native-guide .nb-color{min-width:0;flex:1;background:var(--swatch);color:var(--swatch-ink);transition:flex .65s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.08)}#native-guide .nb-color.is-open{flex:3.1}#native-guide .nb-color .nb-color-open{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:20px;width:100%;background:transparent;color:var(--swatch-ink);border:0;padding:20px 12px;text-align:left;overflow:hidden}#native-guide .nb-color-open strong{font-size:17px;line-height:1.2;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:400}#native-guide .nb-color.is-open strong{writing-mode:horizontal-tb;transform:none;font-size:25px}#native-guide .nb-color-open>span{font-size:12px;white-space:nowrap}#native-guide .nb-color-open>span:last-child{writing-mode:vertical-rl}#native-guide .nb-color.is-open .nb-color-open>span:last-child{writing-mode:horizontal-tb}#native-guide .nb-color-detail{display:none;padding:0 12px 18px;font-size:12px}#native-guide .nb-color.is-open .nb-color-detail{display:grid;gap:12px}#native-guide .nb-color-detail button{padding:7px 0;text-align:left;min-height:36px;background:transparent;color:var(--swatch-ink);border:0;border-top:1px solid currentColor;font-size:14px}#native-guide .nb-type-board{background:#e9eae4;color:#171819;padding:35px}#native-guide .nb-type-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:35px}#native-guide .nb-type-heading h3{font-size:30px}#native-guide .nb-type-heading span{font-size:14px;color:#565855}#native-guide .nb-type-editor{display:grid;gap:20px;font-size:14px}#native-guide .nb-type-editor textarea{font-family:Mendl,Arial,sans-serif;font-size:64px;line-height:1.05;background:transparent;color:#171819;width:100%;min-height:170px;resize:vertical;border:0;border-bottom:1px solid #a8aaa2;padding:12px 0;overflow-wrap:anywhere}#native-guide .nb-size{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:25px;font-size:14px}#native-guide .nb-size input{max-width:300px;flex:1;accent-color:#171819}#native-guide .nb-alphabet{font-family:Mendl,Arial,sans-serif;font-size:26px;line-height:1.6;margin-top:35px;overflow-wrap:anywhere}#native-guide .nb-type-original{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}#native-guide .nb-type-original img{max-height:640px;object-fit:contain}#native-guide .nb-type-original h3{font-size:32px;margin-bottom:22px}#native-guide .nb-font-note{font-size:13px;margin-top:25px;color:#565855}#native-guide .nb-composition-wrap{padding:32px;background:#e5e6e0;display:grid;place-items:center}#native-guide .nb-composition{display:flex;flex-direction:column;gap:25px;justify-content:space-between;position:relative;background:var(--nb-light);color:var(--nb-dark);padding:7%;width:100%;aspect-ratio:1.6;transition:width .7s,background .5s,color .5s;overflow:hidden}#native-guide .nb-composition[data-format=square]{aspect-ratio:1;width:78%}#native-guide .nb-composition[data-format=portrait]{aspect-ratio:.8;width:64%}#native-guide .nb-composition[data-tone=dark]{background:var(--nb-dark);color:#fff}#native-guide .nb-composition-logo{max-width:32%;max-height:85px;object-fit:contain;align-self:flex-start}#native-guide .nb-composition-copy{font-size:clamp(28px,4vw,65px);max-width:650px;line-height:1.06;letter-spacing:-.03em;color:inherit;position:relative;z-index:1}#native-guide[data-brand=hub-18-park-sul] .nb-composition-copy{font-family:Mendl,Arial,sans-serif}#native-guide .nb-composition[data-format=portrait] .nb-composition-copy{font-size:clamp(27px,3vw,48px)}#native-guide .nb-composition-footer{font-size:14px;letter-spacing:.02em;color:inherit}#native-guide .nb-composition-art{height:100px;object-fit:cover;object-position:center;width:100%;mix-blend-mode:multiply}#native-guide .nb-composition[data-tone=dark] .nb-composition-art{mix-blend-mode:normal}#native-guide[data-brand=hub-18-park-sul] .nb-composition[data-tone=dark] .nb-composition-logo{filter:brightness(0) invert(1)}#native-guide .nb-caption{font-size:13px;color:#565855;margin-top:16px}#native-guide .nb-seal-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}#native-guide .nb-seal-grid img{width:100%;object-fit:contain;max-height:600px}#native-guide figcaption{margin-top:14px;padding-top:13px;border-top:1px solid var(--nb-line);font-size:14px;color:#171819}#native-guide .nb-protection{background:#fff;padding:50px 9%;min-height:380px;display:grid;place-items:center}#native-guide .nb-protection>div{position:relative;padding:16.5%;width:100%;border:1px solid transparent;transition:border-color .4s,background .4s}#native-guide .nb-protection img{width:100%}#native-guide .nb-protection span{display:none;position:absolute;left:6%;top:45%;font-size:24px;color:#171819}#native-guide .nb-protection[data-grid=on]>div{border-color:#a2333b;background:repeating-linear-gradient(0deg,transparent,transparent 29px,#f0ebe8 30px),repeating-linear-gradient(90deg,transparent,transparent 29px,#f0ebe8 30px)}#native-guide .nb-protection[data-grid=on] span{display:block}#native-guide .nb-protection[data-grid=on] img{outline:1px solid #a2333b}#native-guide .nb-gallery{display:grid;grid-template-columns:1fr 1fr;gap:40px 25px}#native-guide .nb-gallery figure:first-child{grid-column:1/-1}#native-guide .nb-enlarge{display:block;border:0;padding:0;background:transparent;width:100%}#native-guide .nb-gallery img{width:100%;height:auto}#native-guide .nb-footer{display:flex;justify-content:space-between;gap:25px;padding:40px 6%;font-size:16px}#native-guide .nb-status{position:sticky;bottom:16px;z-index:50;width:max-content;max-width:90%;margin:auto;background:#171819;color:#fff;font-size:14px}#native-guide .nb-status:not(:empty){padding:12px 20px}#native-guide .nb-dialog{padding:20px;background:#f6f6f2;color:#171819;border:0;max-width:95vw;max-height:95vh}#native-guide .nb-dialog::backdrop{background:#101010d9}#native-guide .nb-dialog>button{display:block;margin-left:auto;margin-bottom:15px}#native-guide .nb-dialog img{max-height:80vh;max-width:85vw;object-fit:contain}#native-guide .nb-reveal.is-ready{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}#native-guide .nb-reveal.is-visible{opacity:1;transform:none}
@media(min-width:1500px){#native-guide .nb-layout{grid-template-columns:240px minmax(0,1fr)}}@media(max-width:1050px){#native-guide .nb-layout{grid-template-columns:170px minmax(0,1fr)}#native-guide .nb-side{padding:30px 16px}#native-guide .nb-section-head{grid-template-columns:1fr;gap:15px}#native-guide .nb-palette{flex-wrap:wrap;gap:4px}#native-guide .nb-color{flex:1 0 16%;min-height:200px}#native-guide .nb-color.is-open{flex:2 0 30%}#native-guide .nb-color-open strong{writing-mode:horizontal-tb;transform:none;font-size:17px}#native-guide .nb-color-open>span:last-child{writing-mode:horizontal-tb}}@media(max-width:700px){#native-guide .nb-top{padding:10px 14px}#native-guide .nb-top>span{display:none}#native-guide .nb-layout{display:block}#native-guide .nb-side{position:static;min-height:0;padding:18px 20px;border-bottom:1px solid var(--nb-line)}#native-guide .nb-side>strong,#native-guide .nb-side>span{display:none}#native-guide .nb-side nav{display:flex;flex-wrap:wrap;gap:6px 20px}#native-guide .nb-side nav a{padding:6px 0;font-size:13px}#native-guide .nb-side nav a span{display:none}#native-guide main{border:0}#native-guide .nb-hero{min-height:460px;padding:25px 6% 32px;gap:40px}#native-guide .nb-hero-logo{width:90%;height:160px}#native-guide .nb-hero-bottom{grid-template-columns:1fr 30px}#native-guide .nb-hero-bottom h1{grid-column:1/-1;font-size:20px}#native-guide .nb-hero-bottom p{font-size:28px}#native-guide .nb-section{padding:55px 6%}#native-guide .nb-section-head p{font-size:16px}#native-guide .nb-intro,#native-guide .nb-notes,#native-guide .nb-type-original{grid-template-columns:1fr;gap:28px}#native-guide .nb-intro>p{font-size:20px}#native-guide .nb-logo-stage{min-height:290px;padding:50px 9%}#native-guide .nb-active-logo{max-height:170px}#native-guide .nb-type-board{padding:24px}#native-guide .nb-type-heading{flex-direction:column;gap:10px}#native-guide .nb-color{flex:1 0 25%;min-height:175px}#native-guide .nb-color.is-open{flex:2 0 45%}#native-guide .nb-color.is-open strong{font-size:21px}#native-guide .nb-composition-wrap{padding:16px}#native-guide .nb-composition{padding:8%;aspect-ratio:1.05}#native-guide .nb-composition[data-format=square]{width:100%}#native-guide .nb-composition[data-format=portrait]{width:90%}#native-guide .nb-composition-copy{font-size:32px}#native-guide .nb-composition-logo{max-width:50%;max-height:65px}#native-guide .nb-composition-art{height:65px}#native-guide .nb-composition-footer{font-size:12px}#native-guide .nb-seal-grid,#native-guide .nb-gallery{grid-template-columns:1fr}#native-guide .nb-protection{padding:20px 4%;min-height:280px}#native-guide .nb-footer{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#native-guide *,#native-guide .nb-reveal.is-ready{transition:none!important;animation:none!important;opacity:1;transform:none}}

/* Same swatch layout and interaction as the approved Coplanar case. */
#native-guide .nb-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 22px;min-height:0}
#native-guide .nb-swatch{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:0;padding:0;background:transparent;color:#171819;min-width:0}
#native-guide .nb-color-block{display:block;height:160px;width:100%;margin-bottom:15px}
#native-guide .nb-color-name{font-size:15px}
#native-guide .nb-swatch strong{font-size:24px;font-weight:400;margin:6px 0}
#native-guide .nb-swatch small{font-size:13px;color:#565855;line-height:1.8}
#native-guide .nb-copy-label{font-size:13px;margin-top:13px;border-bottom:1px solid #171819}
@media(max-width:760px){#native-guide .nb-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}#native-guide .nb-color-block{height:115px}#native-guide .nb-color-name{font-size:14px}#native-guide .nb-swatch strong{font-size:21px}}

#native-guide .nb-top nav a{background:transparent;border:0;color:#646466;font-size:13px;min-width:36px}
#native-guide .nb-top nav a[aria-current]{background:transparent;color:#171819;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}