/* MA Pro typefaces and edge-to-edge colour canvas — edition 2. */
:root{font-family:'DM Sans',Arial,sans-serif;background-color:var(--color);min-height:100%;--viewport-height:100dvh}
html{width:100%;min-height:100%;background:var(--color);overscroll-behavior:none}
body{width:100%;min-height:100vh;min-height:100lvh;background:var(--color);transition:none;overscroll-behavior:none}
#colorBackdrop{position:fixed;inset:-120px;z-index:-1;background:var(--color);pointer-events:none}
#app{position:relative;height:var(--viewport-height,100dvh);min-height:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:max(12px,env(safe-area-inset-bottom,0px));padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}
h1,h2,h3,.brand{font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500;font-style:normal}
.header{border:0;height:86px;gap:26px}
.header h1{font:500 clamp(20px,2.1vw,31px)/1.25 'Manrope','DM Sans',Arial,sans-serif;letter-spacing:-.9px;margin:0;text-align:center}
.header .round{font-family:'Manrope','DM Sans',Arial,sans-serif;font-size:16px}
.toolbar{padding:10px 0 14px}
main{grid-template-columns:minmax(340px,1fr) minmax(210px,.45fr);max-width:1100px;width:100%;margin:auto;gap:45px}
.round,.search-wrap,.view-tabs,.expand-btn,.selection,.materials,.materials button,.color-card .color-sample,.guide-row{border:0}
.view-tabs{padding:0;gap:7px}
.view-tabs button{border-radius:0;padding:8px 12px;opacity:.58}
.view-tabs .active{background:none;color:inherit;opacity:1;font-weight:600}
.search-wrap{padding-right:2px}
.materials{padding:10px 0 0;gap:10px}
.materials button{opacity:.55;position:relative;background:transparent!important}
.materials button.active{opacity:1;font-weight:600}
.materials button.active small{font-weight:400}
.materials small{opacity:.85}
.neutral-section{margin:10px 0 5px;gap:22px;justify-content:center}
.neutral-strip{flex:0 1 650px;gap:8px}
.strip-label{font-size:9px;opacity:.7}
.map-panel{padding:4px 0}
#mandorla{height:100%;width:100%}
#mapContent .outline{fill:var(--color);stroke:var(--ink);stroke-opacity:.35;stroke-width:1;vector-effect:non-scaling-stroke}
#mapContent .leaf path{stroke:none}
#mapContent .leaf.selected path{stroke:var(--ink);stroke-width:1.4;stroke-opacity:.85;filter:none}
.map-controls{bottom:13px;right:-8px}
.map-controls .round{font-size:20px}
.selection{padding-left:20px}
.selection h2{font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500;font-size:30px;letter-spacing:-.7px}
.preview-leaf{height:180px}
.preview-leaf path{stroke:none}
.preview-leaf svg{filter:none}
.preview-leaf span{right:44px}
.preview-leaf:before{content:'';position:absolute;inset:0;border:0}
.expand-btn{margin-top:0;opacity:.8}
.availability{margin-bottom:10px}
.guide-row>b,dialog h2{font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500}
#guide{color-scheme:light}
#guide .notice{padding:0;background:transparent}
#guide .round{border:0}
#immersive{position:fixed;inset:0;width:100vw;height:100%;height:100dvh;min-height:100%;min-height:100dvh;max-width:none;max-height:none;background:var(--color);border:0;outline:0}
#immersive::backdrop{background:var(--color);backdrop-filter:none}
#immersive:fullscreen{width:100vw;height:100vh;min-height:100vh;background:var(--color)}
.is-immersive,.is-immersive body{overflow:hidden;background:var(--color)}
.immersive-ui{padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}
.immersive-bottom h2{font-family:'Manrope','DM Sans',Arial,sans-serif;font-weight:500}
#showControls{top:calc(22px + env(safe-area-inset-top,0px));right:max(22px,env(safe-area-inset-right,0px))}
@media(max-width:1000px) and (min-width:721px){#app{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}main{gap:22px;grid-template-columns:minmax(340px,1fr) 205px}.header h1{font-size:24px}.brand{font-size:12px}}
@media(max-width:720px){#app{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));padding-bottom:max(9px,env(safe-area-inset-bottom,0px))}.header{height:62px;gap:14px}.header h1{flex:1;font-size:16px;line-height:1.2;letter-spacing:-.4px;text-align:left;max-width:190px}.brand{font-size:9px;letter-spacing:1.2px;gap:6px}.brand svg{width:18px;height:26px}.header .round{width:28px;height:32px;font-size:15px;margin-left:auto}.toolbar{padding:5px 0 10px;flex-shrink:0}.view-tabs{gap:3px}.view-tabs button{padding:7px 5px;font-size:10px}.search-wrap{width:46%}main{gap:0;min-height:0;display:flex;max-width:none}.canvas-area,.map-panel{min-height:100px}.map-panel{padding:0}#mandorla{height:100%}.selection{padding:10px 0 7px;margin-top:3px;min-height:72px;gap:12px}.selection h2{font-size:21px;line-height:1.12;letter-spacing:-.45px;margin-bottom:3px}.preview-leaf{height:47px;width:28px}.selection #selectedCode{font-size:9px}.availability{font-size:7px;line-height:1.4;margin:4px 0 0}.selection-text .eyebrow{font-size:6px;opacity:.7}.map-controls{bottom:2px;right:-6px;gap:3px}.map-controls .round{width:26px;height:30px;font-size:19px}.neutral-section{margin:2px 0 3px;min-height:36px;gap:3px;justify-content:flex-start}.strip-label{font-size:7px;line-height:1;flex-basis:100%}.neutral-strip{flex:1 1 100%;justify-content:space-between;gap:2px;height:24px}.neutral-strip button{height:22px}.materials{padding:6px 0 0;gap:4px}.materials button{padding:6px 0;gap:4px}.materials small{font-size:7px}.immersive-ui{padding-left:max(23px,env(safe-area-inset-left,0px));padding-right:max(23px,env(safe-area-inset-right,0px))}.immersive-bottom h2{font-size:40px;letter-spacing:-1.2px}.immersive-bottom{gap:12px}.immersive-actions .round{width:36px;height:42px}}
@media(max-height:650px) and (orientation:landscape){#app{height:var(--viewport-height,100dvh);padding-top:env(safe-area-inset-top,0px);padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}.header{height:42px}.header h1{max-width:none;font-size:18px;text-align:center}.toolbar{padding:1px 0 5px}main{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px}.canvas-area,.map-panel{min-height:0}.selection{display:block;min-height:0;margin:0}.selection h2{font-size:25px}.preview-leaf{display:none}.neutral-section{display:none}.materials{padding:2px 0 0}.materials button{padding:3px;flex-direction:row}.map-controls{bottom:1px}}
@media(max-height:680px) and (orientation:portrait){.header{height:52px}.header h1{font-size:14px}.toolbar{padding-bottom:5px}.selection{min-height:64px}.materials button{padding:4px 0}.neutral-section{min-height:32px}}