<commit_before><!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'/>
  <link href='/app/icon.png?<%=obj.nocache%>' rel='apple-touch-icon' />
  <link href='/ext/spectrum/spectrum.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/codemirror/codemirror.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/mapbox.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/base/base.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/app/app.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/leaflet-locationfilter/locationfilter.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/app/style.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/app/print.css?<%=obj.nocache%>' rel='stylesheet' />
  <script src='/ext/underscore-min.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/codemirror.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/runmode.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/searchcursor.js?<%=obj.nocache%>'></script>
  <script src='/ext/jquery-2.0.3.min.js?<%=obj.nocache%>'></script>
  <script src='/ext/jquery.sortable.js?<%=obj.nocache%>'></script>
  <script src='/ext/spectrum/spectrum.js?<%=obj.nocache%>'></script>
  <script src='/ext/backbone.js?<%=obj.nocache%>'></script>
  <script src='/ext/mapbox.js?<%=obj.nocache%>'></script>
  <script src='/app/cartoref.js?<%=obj.nocache%>'></script>
  <script src='/app/lib.js?<%=obj.nocache%>'></script>
  <script src='/app/print.js?<%=obj.nocache%>'></script>
  <script src='/app/style.js?<%=obj.nocache%>'></script>
  <script src='/app/atom.js?<%=obj.nocache%>'></script>
  <script src='/app/codemirror.carto.js?<%=obj.nocache%>'></script>
  <script src='/app/codemirror.carto.complete.js?<%=obj.nocache%>'></script>
  <script src='/app/codemirror.tm2.search.js?<%=obj.nocache%>'></script>
  <script src='/app/codemirror.tm2.palette.js?<%=obj.nocache%>'></script>
  <script src='/ext/sexagesimal.js?<%=obj.nocache%>'></script>
  <script src='/ext/leaflet-locationfilter/locationfilter.js?<%=obj.nocache%>'></script>
  <script src='/ext/sphericalmercator.js?<%=obj.nocache%>'></script>

  <%= this.analytics(obj) %>
  <title><%= style.name %></title>
</head>

<body id='view' class='<%= agent %> <%= style._tmp ? 'tmp' : '' %> <%= style.source.split(':')[0] === 'tmsource' ? 'local' : '' %> clip'><div id='app' class='pin-top pin-bottom mobile-cols'>
<a id='settings'></a>
<a id='layers'></a>
<a id='fonts'></a>
<a id='docs'></a>
<a id='places'></a>

<a id='user'></a>

<a id='home'></a>
<a id='xray'></a>
<a id='export'></a>

<div id='modal-content' class='modal-content animate'></div>

<div id='full' class='z1 clip animate pin-left dark fill-dark'>
  <div id='map' class='animate fill-canvas' style='background-color:<%=style.background%>;'></div>
  <div id='places' class='z10 animate pin-left fill-dark col12'>
    <div class='pin-top z10 pad1'>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
      <a href='#' class='js-show-search show-search-button icon search pin-topright button short quiet'></a>
      <form id='places-search' class='animate js-places-container places-search-container z10 col12 fill-dark offcanvas-top clearfix pin-top'>
        <input id='places-dosearch' placeholder='Search by feature, location, or OSM tag' class='small col12 clean hidden' type='text' />
        <a href='#' class='pin-right button quiet icon search short js-places-search'>Search</a>
        <a href='#' class='icon js-hide-search x pin-right keyline-left pad1 quiet'></a>
      </form>
      <div class='pad0x pin-topleft places-toggle'>
        <div class='rounded-toggle col12 clearfix strong center micro truncate js-places-toggle'>
          <input id='road' type='radio' name='rtoggle' value='road' checked='checked' class='js-places'>
          <label class='col2' for='road'>Roads</label>
          <input id='landuse' type='radio' name='rtoggle' value='landuse' class='js-places'>
          <label class='col2' for='landuse'>Landuse</label>
          <input id='natural' type='radio' name='rtoggle' value='natural' class='js-places'>
          <label class='col2' for='natural'>Natural</label>
          <input id='park' type='radio' name='rtoggle' value='park' class='js-places'>
          <label class='col2' for='park'>Parks</label>
          <input id='Major cities' type='radio' name='rtoggle' value='Major cities' class='js-places'>
          <label class='col2' for='Major cities'>Cities</label>
          <input id='bookmarks' type='radio' name='rtoggle' value='userbookmark' class='js-places'>
          <label class='col2' for='bookmarks'></span>My places</label>
        </div>
      </div>
    </div>
    <div class='space-top4 col12 pin-left scroll-hide clearfix places-list unlimiter js-places-list' id='placeslist'></div>
  </div>
  <div id='map-overlay' class='overlay'></div>
  <div id='map-errors'></div>

  <form id='search' class='z10 contain round animate search-results'>
    <input id='dosearch' type='text' class='col12 clean small round' value='' placeholder='Search' autocomplete='off' />
    <ul id='search-results' class='clip scroll-styled round-bottom'></ul>
  </form>
  <div class='map-controls pin-top row1'>
    <div class='pin-left z1 pad0 row1 truncate'>
      <div class='pill inline align-top'>
        <a href='#search' class='search-n search-button button short icon search quiet'></a><!--
     --><a href='#' class='search-y button search-button short icon active icon search quiet'></a><!--
     --><a id='' href='#full' title='Toggle fullscreen' class='button short icon fullscreen full-n quiet'></a><!--
     --><a href='#' title='Exit fillscreen' class='button short icon quiet active fullscreen full-y'></a><!--
     --><a id='zoom-in' class='button short icon plus quiet'></a><!--
     --><a id='zoom-out' class='button short icon minus quiet'></a>
      </div>
      <span class='align-top inline xray-toggle'>
        <a href='#xray' class='xray-n button short icon inspect quiet'></a>
        <a href='#home' class='xray-y button short active icon inspect quiet'></a>
      </span>
      <div class='pill inline align-top'>
        <a class='button short icon places-button marker quiet' title='places' href='#places'>Places</a><!--
        --><a class='button js-add-bookmark add-bookmark short quiet'>Add</a>
      </div>
      <div class='pill inline align-top export-controls'>
        <a href='#export' title='Reselect crop area within view' id='reselect' class='quiet icon refresh button js-reselect short'>New</a><!--
        --><a href='#export' title='Center crop area based on view' id='recenter' class='quiet icon crosshair button js-recenter short'>Center</a>
      </div>
    </div>
    <div class='pin-top text-right z0 pad0 row1'>
      <span id='map-center' class='quiet js-mapCenter inline micro strong pad0y align-top'></span>
      <div id='zoomedto' class='align-top text-right inline contain zoom<%=style.center[2]%>'></div>
    </div>
  </div>

  <!-- DEMO -->
  <div id='inspect-popup' class='top2 demo-popup col7 pin-topleft pad4 fill-blue dark round-right'>
    <a href='#' class='icon x pin-topright pad1 js-demo'></a>
    <h3>Inspecting data</h3>
    <small class='space-bottom4'>
    Mapbox Studio styles are powered by vector tiles that contain feature data and attributes. Use the <strong class='icon inspect'>inspector</strong> to see a wireframe of the raw vector data. Click the map to view details about a feature.
    </small>
    <div class='pin-bottom clearfix center'><!--
    --><a href='#home' class='small fill-darken0 pad1 col6 icon prev quiet keyline-right'>Prev</a><!--
    --><a href='#docs' class='small fill-darken0 pad1 col6 rcon next quiet'>Next</a>
    </div>
  </div>
</div>

<div id='drawers' class='animate fill-dark dark col3 offcanvas-left animate pin-left z10 clip'>

  <form id='settings-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='pin-top pad1 keyline-bottom'>
      <h3>Settings</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div class='pin-left top1 scroll-styled'>
      <fieldset class='keyline-bottom clearfix pad2y pad1x contain'>
        <div class='z10 pin-top pin-bottom col12 pad1x pad2y fill-disable on-local on-tmp on-changed'></div>
        <div class='on-tmp on-changed z10 pad0y pad1x micro center truncate pin-top fill-dark keyline-top'>
          <strong class='icon floppy'>Save project</strong> to share
        </div>
        <div class='on-local z10 pad0y pad1x micro center truncate pin-top fill-dark keyline-top'>
          Use <strong class='icon cloud'>remote source</strong> to share
        </div>
        <section class='space-bottom1'>
          <div id='mapstatus' class='contain clip'>
            <div id='mapstatus-mapid' class='pin-top pad0y pad1x center truncate round-top space small animate fill-darken1'>
              <strong>Map ID</strong>
              <a href='https://www.mapbox.com/styles/' class='quiet js-mapid' target='_blank'><%= _(style._prefs.mapid).escape() || 'Style not uploaded' %></a>
            </div>
            <div id='mapstatus-uploaded' class='pin-top pad0y pad1x center truncate round-top space small animate fill-green icon check'>
              Upload complete
            </div>
          </div>
          <a href='#settings' class='js-upload col12 short button round-bottom icon up'>Upload to Mapbox</a>
        </section>
        <section class='small center'>
          <a href='/style.tm2z?id=<%= style.id %>' class='icon package'>or download package</a>
        </section>
      </fieldset>
      <fieldset class='pad1x'>
        <section class='space-bottom1'>
          <label>Name</label>
          <input class='short small stretch' name='name' type='text' value='<%= _(style.name).escape() %>'/>
        </section>
        <section class='space-bottom1'>
          <label>Description</label>
          <textarea class='short small stretch' name='description' type='text' cols='60' rows='8'><%= style.description %></textarea>
        </section>
        <section>
          <label>Attribution</label>
          <input class='short small stretch' name='attribution' type='text' value='<%= _(style.attribution).escape() %>'></input>
        </section>
      </fieldset>
      <div class='pad1x pad2y keyline-top'>
          <section class='space-bottom1 clearfix'>
            <label class='micro inline col4'>Center</label>
            <div class='micro fill-darken1 pad0x clip col8 contain round'>
              <span class='js-savedCenter'><%= style.center[0].toFixed(4) %>,<%= style.center[1].toFixed(4) %>,<%= style.center[2] %></span>
              <a href='#settings' class='js-lockCenter icon lock pin-right round-right fill-darken2-onactive <%= !style._prefs.saveCenter ? 'active' : '' %>'></a>
            </div>
          </section>
          <section class='space-bottom1 clearfix'>
            <label class='micro inline col4'>Format</label>
            <select class='col8' name='format'>
              <% _({
                'png24': 'png (24-bit)',
                'png8:m=h': 'png (256 colors)',
                'png8:m=h:c=192': 'png (192 colors)',
                'png8:m=h:c=128': 'png (128 colors)',
                'png8:m=h:c=64': 'png (64 colors)',
                'png8:m=h:c=32': 'png (32 colors)',
                'jpeg95': 'jpeg (95%)',
                'jpeg90': 'jpeg (90%)',
                'jpeg85': 'jpeg (85%)',
                'jpeg80': 'jpeg (80%)'
              }).each(function(label, format) { %>
              <option value='<%= format %>' <% if (style.format === format) { %> selected='selected' <% } %>><%= label %></option>
              <% }); %>
            </select>
          </section>
          <section class='space-bottom0 clearfix'>
            <label class='micro inline col4'>Minzoom</label>
            <div class='col8'>
              <input id='minzoom' name='minzoom' class='min zoomrange' type='range' value='<%= style.minzoom %>' min='0' max='22' step='1' onchange='rangeHandler(this, "max", "#maxzoom");' />
              <span class='micro quiet inline range' id='minzoom-val'><%= style.minzoom %></span>
            </div>
          </section>
          <section class='space-bottom0 clearfix'>
            <label class='micro inline col4'>Maxzoom</label>
            <div class='col8'>
              <input id='maxzoom' name='maxzoom' class='max zoomrange' type='range' value='<%= style.maxzoom %>' min='0' max='22' step='1' onchange='rangeHandler(this, "min", "#minzoom");' />
              <span class='micro quiet inline range' id='maxzoom-val'><%= style.maxzoom %></span>
            </div>
          </section>
      </div>
    </div>
  </form>

  <div id='layers-drawer' class='js-layers drawer col12 animate offcanvas-left'>
    <div class='pin-top pad1 keyline-bottom'>
      <h3>Layers</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div class='pin-left top1 scroll-styled col12'>
      <div class='pad2y pad1x contain'>
        <a href='#' class='js-modalsources col12 button short icon polygon'>Change source</a>
        <% if (style.layers) { %>
          <div class='pin-top pin-bottom fill-disable'>
            <div class='z10 pad0y pad1x micro center pin-top fill-dark keyline-top'>
              <span class='icon lock'></span><strong>Source locked</strong> (custom layer order)
            </div>
          </div>
        <% } %>
      </div>
      <div id='sources' class='keyline-top js-layer-content'>
        <%
          var sourcelayers = this.sourcelayers({
            id: sources[0].id,
            name: sources[0].name,
            vector_layers: sources[0].vector_layers,
            xraycolor:this.xraycolor,
            userlayers:style.layers
          });
        %>
        <%= sourcelayers %>
      </div>
    </div>

  </div>

  <div id='fonts-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='pin-top pad1 keyline-bottom'>
      <h3>Fonts</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div id='fontfamily' class='pin-left col12 top1 scroll-styled'>
    <%= this['stylefonts'](fontsRef) %>
    </div>
  </div>

  <div id='docs-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='pin-top keyline-botom pad1 keyline-bottom'>
      <h3>Documentation</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div class='col12 pin-left top1 scroll-styled'>
      <%= this['stylereference'](cartoRef) %><commit_msg>add subtle custom font instructions<commit_after><!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'/>
  <link href='/app/icon.png?<%=obj.nocache%>' rel='apple-touch-icon' />
  <link href='/ext/spectrum/spectrum.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/codemirror/codemirror.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/mapbox.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/base/base.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/app/app.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/leaflet-locationfilter/locationfilter.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/app/style.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/app/print.css?<%=obj.nocache%>' rel='stylesheet' />
  <script src='/ext/underscore-min.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/codemirror.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/runmode.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/searchcursor.js?<%=obj.nocache%>'></script>
  <script src='/ext/jquery-2.0.3.min.js?<%=obj.nocache%>'></script>
  <script src='/ext/jquery.sortable.js?<%=obj.nocache%>'></script>
  <script src='/ext/spectrum/spectrum.js?<%=obj.nocache%>'></script>
  <script src='/ext/backbone.js?<%=obj.nocache%>'></script>
  <script src='/ext/mapbox.js?<%=obj.nocache%>'></script>
  <script src='/app/cartoref.js?<%=obj.nocache%>'></script>
  <script src='/app/lib.js?<%=obj.nocache%>'></script>
  <script src='/app/print.js?<%=obj.nocache%>'></script>
  <script src='/app/style.js?<%=obj.nocache%>'></script>
  <script src='/app/atom.js?<%=obj.nocache%>'></script>
  <script src='/app/codemirror.carto.js?<%=obj.nocache%>'></script>
  <script src='/app/codemirror.carto.complete.js?<%=obj.nocache%>'></script>
  <script src='/app/codemirror.tm2.search.js?<%=obj.nocache%>'></script>
  <script src='/app/codemirror.tm2.palette.js?<%=obj.nocache%>'></script>
  <script src='/ext/sexagesimal.js?<%=obj.nocache%>'></script>
  <script src='/ext/leaflet-locationfilter/locationfilter.js?<%=obj.nocache%>'></script>
  <script src='/ext/sphericalmercator.js?<%=obj.nocache%>'></script>

  <%= this.analytics(obj) %>
  <title><%= style.name %></title>
</head>

<body id='view' class='<%= agent %> <%= style._tmp ? 'tmp' : '' %> <%= style.source.split(':')[0] === 'tmsource' ? 'local' : '' %> clip'><div id='app' class='pin-top pin-bottom mobile-cols'>
<a id='settings'></a>
<a id='layers'></a>
<a id='fonts'></a>
<a id='docs'></a>
<a id='places'></a>

<a id='user'></a>

<a id='home'></a>
<a id='xray'></a>
<a id='export'></a>

<div id='modal-content' class='modal-content animate'></div>

<div id='full' class='z1 clip animate pin-left dark fill-dark'>
  <div id='map' class='animate fill-canvas' style='background-color:<%=style.background%>;'></div>
  <div id='places' class='z10 animate pin-left fill-dark col12'>
    <div class='pin-top z10 pad1'>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
      <a href='#' class='js-show-search show-search-button icon search pin-topright button short quiet'></a>
      <form id='places-search' class='animate js-places-container places-search-container z10 col12 fill-dark offcanvas-top clearfix pin-top'>
        <input id='places-dosearch' placeholder='Search by feature, location, or OSM tag' class='small col12 clean hidden' type='text' />
        <a href='#' class='pin-right button quiet icon search short js-places-search'>Search</a>
        <a href='#' class='icon js-hide-search x pin-right keyline-left pad1 quiet'></a>
      </form>
      <div class='pad0x pin-topleft places-toggle'>
        <div class='rounded-toggle col12 clearfix strong center micro truncate js-places-toggle'>
          <input id='road' type='radio' name='rtoggle' value='road' checked='checked' class='js-places'>
          <label class='col2' for='road'>Roads</label>
          <input id='landuse' type='radio' name='rtoggle' value='landuse' class='js-places'>
          <label class='col2' for='landuse'>Landuse</label>
          <input id='natural' type='radio' name='rtoggle' value='natural' class='js-places'>
          <label class='col2' for='natural'>Natural</label>
          <input id='park' type='radio' name='rtoggle' value='park' class='js-places'>
          <label class='col2' for='park'>Parks</label>
          <input id='Major cities' type='radio' name='rtoggle' value='Major cities' class='js-places'>
          <label class='col2' for='Major cities'>Cities</label>
          <input id='bookmarks' type='radio' name='rtoggle' value='userbookmark' class='js-places'>
          <label class='col2' for='bookmarks'></span>My places</label>
        </div>
      </div>
    </div>
    <div class='space-top4 col12 pin-left scroll-hide clearfix places-list unlimiter js-places-list' id='placeslist'></div>
  </div>
  <div id='map-overlay' class='overlay'></div>
  <div id='map-errors'></div>

  <form id='search' class='z10 contain round animate search-results'>
    <input id='dosearch' type='text' class='col12 clean small round' value='' placeholder='Search' autocomplete='off' />
    <ul id='search-results' class='clip scroll-styled round-bottom'></ul>
  </form>
  <div class='map-controls pin-top row1'>
    <div class='pin-left z1 pad0 row1 truncate'>
      <div class='pill inline align-top'>
        <a href='#search' class='search-n search-button button short icon search quiet'></a><!--
     --><a href='#' class='search-y button search-button short icon active icon search quiet'></a><!--
     --><a id='' href='#full' title='Toggle fullscreen' class='button short icon fullscreen full-n quiet'></a><!--
     --><a href='#' title='Exit fillscreen' class='button short icon quiet active fullscreen full-y'></a><!--
     --><a id='zoom-in' class='button short icon plus quiet'></a><!--
     --><a id='zoom-out' class='button short icon minus quiet'></a>
      </div>
      <span class='align-top inline xray-toggle'>
        <a href='#xray' class='xray-n button short icon inspect quiet'></a>
        <a href='#home' class='xray-y button short active icon inspect quiet'></a>
      </span>
      <div class='pill inline align-top'>
        <a class='button short icon places-button marker quiet' title='places' href='#places'>Places</a><!--
        --><a class='button js-add-bookmark add-bookmark short quiet'>Add</a>
      </div>
      <div class='pill inline align-top export-controls'>
        <a href='#export' title='Reselect crop area within view' id='reselect' class='quiet icon refresh button js-reselect short'>New</a><!--
        --><a href='#export' title='Center crop area based on view' id='recenter' class='quiet icon crosshair button js-recenter short'>Center</a>
      </div>
    </div>
    <div class='pin-top text-right z0 pad0 row1'>
      <span id='map-center' class='quiet js-mapCenter inline micro strong pad0y align-top'></span>
      <div id='zoomedto' class='align-top text-right inline contain zoom<%=style.center[2]%>'></div>
    </div>
  </div>

  <!-- DEMO -->
  <div id='inspect-popup' class='top2 demo-popup col7 pin-topleft pad4 fill-blue dark round-right'>
    <a href='#' class='icon x pin-topright pad1 js-demo'></a>
    <h3>Inspecting data</h3>
    <small class='space-bottom4'>
    Mapbox Studio styles are powered by vector tiles that contain feature data and attributes. Use the <strong class='icon inspect'>inspector</strong> to see a wireframe of the raw vector data. Click the map to view details about a feature.
    </small>
    <div class='pin-bottom clearfix center'><!--
    --><a href='#home' class='small fill-darken0 pad1 col6 icon prev quiet keyline-right'>Prev</a><!--
    --><a href='#docs' class='small fill-darken0 pad1 col6 rcon next quiet'>Next</a>
    </div>
  </div>
</div>

<div id='drawers' class='animate fill-dark dark col3 offcanvas-left animate pin-left z10 clip'>

  <form id='settings-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='pin-top pad1 keyline-bottom'>
      <h3>Settings</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div class='pin-left top1 scroll-styled'>
      <fieldset class='keyline-bottom clearfix pad2y pad1x contain'>
        <div class='z10 pin-top pin-bottom col12 pad1x pad2y fill-disable on-local on-tmp on-changed'></div>
        <div class='on-tmp on-changed z10 pad0y pad1x micro center truncate pin-top fill-dark keyline-top'>
          <strong class='icon floppy'>Save project</strong> to share
        </div>
        <div class='on-local z10 pad0y pad1x micro center truncate pin-top fill-dark keyline-top'>
          Use <strong class='icon cloud'>remote source</strong> to share
        </div>
        <section class='space-bottom1'>
          <div id='mapstatus' class='contain clip'>
            <div id='mapstatus-mapid' class='pin-top pad0y pad1x center truncate round-top space small animate fill-darken1'>
              <strong>Map ID</strong>
              <a href='https://www.mapbox.com/styles/' class='quiet js-mapid' target='_blank'><%= _(style._prefs.mapid).escape() || 'Style not uploaded' %></a>
            </div>
            <div id='mapstatus-uploaded' class='pin-top pad0y pad1x center truncate round-top space small animate fill-green icon check'>
              Upload complete
            </div>
          </div>
          <a href='#settings' class='js-upload col12 short button round-bottom icon up'>Upload to Mapbox</a>
        </section>
        <section class='small center'>
          <a href='/style.tm2z?id=<%= style.id %>' class='icon package'>or download package</a>
        </section>
      </fieldset>
      <fieldset class='pad1x'>
        <section class='space-bottom1'>
          <label>Name</label>
          <input class='short small stretch' name='name' type='text' value='<%= _(style.name).escape() %>'/>
        </section>
        <section class='space-bottom1'>
          <label>Description</label>
          <textarea class='short small stretch' name='description' type='text' cols='60' rows='8'><%= style.description %></textarea>
        </section>
        <section>
          <label>Attribution</label>
          <input class='short small stretch' name='attribution' type='text' value='<%= _(style.attribution).escape() %>'></input>
        </section>
      </fieldset>
      <div class='pad1x pad2y keyline-top'>
          <section class='space-bottom1 clearfix'>
            <label class='micro inline col4'>Center</label>
            <div class='micro fill-darken1 pad0x clip col8 contain round'>
              <span class='js-savedCenter'><%= style.center[0].toFixed(4) %>,<%= style.center[1].toFixed(4) %>,<%= style.center[2] %></span>
              <a href='#settings' class='js-lockCenter icon lock pin-right round-right fill-darken2-onactive <%= !style._prefs.saveCenter ? 'active' : '' %>'></a>
            </div>
          </section>
          <section class='space-bottom1 clearfix'>
            <label class='micro inline col4'>Format</label>
            <select class='col8' name='format'>
              <% _({
                'png24': 'png (24-bit)',
                'png8:m=h': 'png (256 colors)',
                'png8:m=h:c=192': 'png (192 colors)',
                'png8:m=h:c=128': 'png (128 colors)',
                'png8:m=h:c=64': 'png (64 colors)',
                'png8:m=h:c=32': 'png (32 colors)',
                'jpeg95': 'jpeg (95%)',
                'jpeg90': 'jpeg (90%)',
                'jpeg85': 'jpeg (85%)',
                'jpeg80': 'jpeg (80%)'
              }).each(function(label, format) { %>
              <option value='<%= format %>' <% if (style.format === format) { %> selected='selected' <% } %>><%= label %></option>
              <% }); %>
            </select>
          </section>
          <section class='space-bottom0 clearfix'>
            <label class='micro inline col4'>Minzoom</label>
            <div class='col8'>
              <input id='minzoom' name='minzoom' class='min zoomrange' type='range' value='<%= style.minzoom %>' min='0' max='22' step='1' onchange='rangeHandler(this, "max", "#maxzoom");' />
              <span class='micro quiet inline range' id='minzoom-val'><%= style.minzoom %></span>
            </div>
          </section>
          <section class='space-bottom0 clearfix'>
            <label class='micro inline col4'>Maxzoom</label>
            <div class='col8'>
              <input id='maxzoom' name='maxzoom' class='max zoomrange' type='range' value='<%= style.maxzoom %>' min='0' max='22' step='1' onchange='rangeHandler(this, "min", "#minzoom");' />
              <span class='micro quiet inline range' id='maxzoom-val'><%= style.maxzoom %></span>
            </div>
          </section>
      </div>
    </div>
  </form>

  <div id='layers-drawer' class='js-layers drawer col12 animate offcanvas-left'>
    <div class='pin-top pad1 keyline-bottom'>
      <h3>Layers</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div class='pin-left top1 scroll-styled col12'>
      <div class='pad2y pad1x contain'>
        <a href='#' class='js-modalsources col12 button short icon polygon'>Change source</a>
        <% if (style.layers) { %>
          <div class='pin-top pin-bottom fill-disable'>
            <div class='z10 pad0y pad1x micro center pin-top fill-dark keyline-top'>
              <span class='icon lock'></span><strong>Source locked</strong> (custom layer order)
            </div>
          </div>
        <% } %>
      </div>
      <div id='sources' class='keyline-top js-layer-content'>
        <%
          var sourcelayers = this.sourcelayers({
            id: sources[0].id,
            name: sources[0].name,
            vector_layers: sources[0].vector_layers,
            xraycolor:this.xraycolor,
            userlayers:style.layers
          });
        %>
        <%= sourcelayers %>
      </div>
    </div>

  </div>

  <div id='fonts-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='pin-top pad1 keyline-bottom'>
      <h3>Fonts</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div id='fontfamily' class='pin-left col12 top1 scroll-styled'>
      <%= this['stylefonts'](fontsRef) %>
      <div class='pad1 quiet small'>To use your own fonts, add them to your project folder and define a <code class='micro'>font-directory</code> on the <code class='micro'>Map</code> element.</div>
    </div>
  </div>

  <div id='docs-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='pin-top keyline-botom pad1 keyline-bottom'>
      <h3>Documentation</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div class='col12 pin-left top1 scroll-styled'>
      <%= this['stylereference'](cartoRef) %>
{'fraction_non_alphanumeric': 0.19181864666780296, 'fraction_numerical': 0.014896880859042099, 'mean_word_length': 3.1848787446504994, 'pattern_counts': {'":': 0, '<': 815, '<?xml version=': 0, '>': 815, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1638929', 'n_tokens_mistral': 10097, 'n_tokens_neox': 9654, 'n_words': 2184}