/* ============================================================================
   OMEGA WORLD - built to Shanae's own design.

   This replaces the version I built by guessing. Her Desktop Cube Clickable
   Preview showed how wrong that guess was, and the difference matters:

     WHAT I HAD                          WHAT SHE DREW
     CSS boxes floating over a photo     cubes painted INTO the artwork
     the painting cropped to fill        the WHOLE painting, nothing cut off
     a label under each box              an invisible hit area on each cube
     her portrait nowhere                her portrait, bottom left, signed

   The cubes in her artwork are beautiful, lit, and full of real imagery. Mine
   were flat rectangles covering them up. So the artwork is now the whole of the
   picture, and the clickable parts are transparent rectangles sitting exactly on
   the cubes she already painted.

   The rule that makes it hold together: object-fit is CONTAIN, never cover. Her
   coordinates are per cent of the painting, so the moment the painting is
   cropped, every hit area slides off the thing it belongs to. Cover crops.
   Contain does not. This is not a taste decision and must not be "improved".
   ========================================================================= */

:root{
 --ow-ink:#010511;
 --ow-deep:#020718;
 --ow-gold:#F4C45D;
 --ow-gold2:#FFE7A2;
 --ow-gold-deep:#7B4B09;
 --ow-cyan:#45D8FF;
 --ow-text:#FFFFFF;
 --ow-muted:#B9C7E6;
 --ow-serif:Georgia,"Playfair Display",serif;
 --ow-body:Inter,"Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ow-ink);color:var(--ow-text);
 font-family:var(--ow-body)}
body{overflow-x:hidden}

.ow-page{
 min-height:100vh;padding:18px;
 background:radial-gradient(circle at top,#0a1637,#010511 70%);
}

/* ------------------------------------------------------------- the top bar */
.ow-toolbar{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 max-width:1600px;margin:0 auto 12px;flex-wrap:wrap;
}
.ow-brand{
 font-family:var(--ow-serif);letter-spacing:.16em;color:var(--ow-gold2);
 font-weight:700;font-size:15px;text-decoration:none;
}
.ow-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ow-btn{
 border:1px solid rgba(244,196,93,.32);background:rgba(2,7,24,.78);
 color:var(--ow-muted);border-radius:999px;cursor:pointer;padding:8px 14px;
 font:800 10px/1 var(--ow-body);letter-spacing:.16em;text-transform:uppercase;
 white-space:nowrap;text-decoration:none;display:inline-block;
}
.ow-btn:hover{color:var(--ow-gold2);border-color:var(--ow-gold)}
.ow-btn[aria-pressed="true"]{background:linear-gradient(135deg,var(--ow-gold-deep),var(--ow-gold));
 color:#160E00;border-color:var(--ow-gold)}

/* ------------------------------------------------------------ the painting
   A bounded frame, centred, with the gold edge from her drawing. The whole
   picture is inside it. Nothing is cropped, which is what keeps every hit area
   sitting on its own building.

   THIS BOX MUST BE THE SHAPE OF THE PAINTING, and getting it wrong is silent.
   Every door is placed as a percentage of THIS box, while the painting inside
   is drawn with object-fit:contain. If the two shapes disagree, the painting
   letterboxes and shrinks away from the box's edges while the doors stay glued
   to the box, so every one of them ends up somewhere it should not be with
   nothing visibly broken anywhere to find it by.

   It was 16/9 for every painting up to 2026-09-12 and the product named world
   is 4:3, which would have moved all thirty nine doors. world2.js now sets
   this from whichever scene it is showing, so the value here is only the shape
   of the first paint before the script runs. Keep it matching the scene that
   is in front, so the frame does not visibly jump on load. */
.ow-frame{
 position:relative;max-width:1600px;margin:0 auto;aspect-ratio:1448/1086;
 background:var(--ow-deep);border:1px solid rgba(244,196,93,.35);
 border-radius:18px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.5);
}
.ow-img{
 position:absolute;inset:0;width:100%;height:100%;
 object-fit:contain;            /* CONTAIN. See the note at the top. */
 background:var(--ow-deep);user-select:none;pointer-events:none;
 opacity:0;transition:opacity .5s ease;
}
.ow-img.on{opacity:1}
/* THE PAINTED WATER LAYER IS OFF, 2026-09-12, AND THIS IS A REAL BUG NOT A
   PREFERENCE.

   world2-motion.js lays a canvas over the frame and blends it with
   mix-blend-mode:screen to put moving light on the water. On the live site that
   blend was swallowing everything above it: the city itself, all twelve cubes
   and her photograph were loaded, decoded, correctly placed and clickable, and
   none of them painted. Hiding this one canvas brought all of it back
   instantly, which is how it was found.

   A blend mode forces its own compositing layer, and stacking one over a
   playing video is exactly where that goes wrong. It is not worth the risk on
   the front door of the site.

   Nothing is lost. Her film is the backdrop now and its water already moves,
   which is what this canvas was imitating. world2-motion.js is untouched for
   any other page that uses it. */
.ow-water{display:none !important}
/* The scrim is nearly gone. It was laying a dark wash over the whole city, and
   with the film underneath that was part of why she said it looked dull and
   faded. What is left is a whisper along the very bottom edge, purely so the
   frame does not end in a hard line. Nothing sits over the city itself. */
.ow-scrim{
 position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(to bottom,rgba(2,7,24,0) 86%,rgba(2,7,24,.16));
}

/* ------------------------------------------------------------- the hit areas
   Invisible until you go near them. Her cubes are already drawn, lit and full
   of imagery; putting a box on top of one would hide the very thing somebody
   came to look at. */
.ow-hot{
 position:absolute;z-index:4;border:1px solid transparent;background:transparent;
 border-radius:16px;cursor:pointer;transition:.18s ease;outline:none;
 padding:0;margin:0;
}
.ow-hot span{
 position:absolute;left:50%;bottom:3%;
 transform:translateX(-50%) translateY(6px);
 opacity:0;white-space:nowrap;padding:7px 10px;border-radius:999px;
 background:rgba(2,7,24,.88);border:1px solid rgba(244,196,93,.45);
 color:var(--ow-gold2);font-size:12px;font-weight:800;
 pointer-events:none;transition:.18s ease;
}
.ow-hot span b{
 display:block;font-weight:600;font-size:10.5px;color:var(--ow-muted);
 letter-spacing:.08em;margin-top:2px;
}
.ow-hot:hover,.ow-hot:focus-visible{
 border-color:rgba(255,230,147,.92);
 background:rgba(63,210,255,.045);
 box-shadow:0 0 0 2px rgba(69,216,255,.22),
            inset 0 0 28px rgba(88,213,255,.12),
            0 0 32px rgba(57,197,255,.32);
}
.ow-hot:hover span,.ow-hot:focus-visible span{opacity:1;transform:translateX(-50%) translateY(0)}
.ow-hot:active{transform:scale(.985)}

/* Her own debugging idea, kept because it is genuinely useful: press it and
   every hit area shows itself, so a misplaced one is obvious in a second. */
.ow-frame.ow-debug .ow-hot{border-color:rgba(244,196,93,.65);background:rgba(72,200,255,.035)}
.ow-frame.ow-debug .ow-hot span{opacity:1;transform:translateX(-50%) translateY(0)}
/* Bottom left, not top right. Top right is where her Sign in sits in the
   painting, and this button was covering it: the hit area was there, correct,
   and unreachable behind my own toggle.

   RAISED OFF THE BOTTOM EDGE, 2026-09-12, and it is the same bug again in a new
   corner. The product named world paints a row of six buttons across the very
   bottom, starting at 93 per cent of the frame, and this toggle at 12px from
   the bottom was sitting squarely on "I'm here to create". Its door was there,
   correct, and unreachable behind this button, exactly as the Sign in was.

   7.5 per cent puts it above that row rather than a fixed pixel count, so it
   stays clear at every screen size instead of only the one it was checked on.*/
.ow-grid-toggle{
 position:absolute;z-index:7;left:12px;bottom:7.5%;padding:8px 10px;border-radius:999px;
 border:1px solid rgba(255,255,255,.15);background:rgba(2,7,24,.78);
 color:#dce7ff;font-size:12px;cursor:pointer;opacity:.55;
}
.ow-grid-toggle:hover{opacity:1;border-color:var(--ow-gold)}

/* ------------------------------------------------------------- her cubes
   Cut out of her own painting and hung on the page, so the same twelve cubes
   stand on every city she rotates through instead of living inside one picture.
   They glow on hover and lift a little, which is the only thing the painted
   ones could never do. */
.ow-cube{
 display:block;overflow:visible;
 transition:transform .25s cubic-bezier(.2,.7,.3,1), filter .25s;
}
/* THE SHADOW ON THE GROUND. This is what stops a cube looking like a sticker.
   An object with nothing underneath it reads as pasted on, however good the
   object is. A soft dark ellipse under each one puts it on the terrace. */
.ow-cube::after{
 content:"";position:absolute;left:12%;right:12%;bottom:-4%;height:13%;
 border-radius:50%;pointer-events:none;
 background:radial-gradient(ellipse at center,rgba(0,0,0,.62),rgba(0,0,0,0) 72%);
 transition:.25s ease;
}
.ow-cube:hover::after,.ow-cube:focus-visible::after{
 left:18%;right:18%;bottom:-9%;height:10%;opacity:.75;
}
/* TWO SHADOWS, NOT ONE, AND THE TIGHT ONE IS THE IMPORTANT ONE.

   The city underneath moves now, and some of its frames are white water in full
   sun. A cube of clear glass on top of that disappears: still there, still
   loaded, still clickable, and invisible. The soft drop gives it weight. The
   tight dark halo is what keeps its edge readable when the waterfall behind it
   goes bright. */
.ow-cube img{
 width:100%;height:100%;object-fit:contain;display:block;
 filter:drop-shadow(0 0 9px rgba(0,0,0,.9))
        drop-shadow(0 10px 26px rgba(0,0,0,.7));
}
.ow-cube:hover,.ow-cube:focus-visible{transform:translateY(-7px) scale(1.04)}
.ow-cube:hover img,.ow-cube:focus-visible img{
 filter:drop-shadow(0 0 20px var(--ow-gold2)) drop-shadow(0 10px 26px rgba(0,0,0,.65));
}
/* the painted cube already carries its own name, so the plate would say it
   twice; it comes back only as the spoken label and the generator count */
.ow-cube > span{
 position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) translateY(100%);
 white-space:nowrap;background:rgba(8,12,28,.92);border:1px solid var(--ow-line,#2b3a63);
 border-radius:999px;padding:5px 11px;opacity:0;transition:opacity .2s;
 font:800 9px/1 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ow-gold2);pointer-events:none;
}
.ow-cube > span b{display:block;font:600 9px/1.4 Inter,Arial,sans-serif;
 letter-spacing:.04em;text-transform:none;color:#aebbd9;margin-top:3px}
.ow-cube:hover > span,.ow-cube:focus-visible > span{opacity:1}
@media (prefers-reduced-motion:reduce){ .ow-cube{transition:none} }

/* --------------------------------------------------------- under the picture */
.ow-status{
 max-width:1600px;margin:12px auto 0;display:flex;gap:12px;align-items:center;
 justify-content:space-between;color:#aebbd9;font-size:13px;flex-wrap:wrap;
}
.ow-status b{color:var(--ow-gold2)}
/* Her portrait, beside her name rather than painted into the city, so the
   background can change through the day without her face changing with it. */
.ow-founder{
 width:46px;height:46px;flex:none;border-radius:50%;object-fit:cover;
 object-position:center 28%;
 border:2px solid var(--ow-gold2);
 box-shadow:0 4px 16px rgba(0,0,0,.5);
 order:-1;
}
@media (max-width:700px){ .ow-founder{width:38px;height:38px} }

/* ----------------------------------------------------------------- the room */
.ow-modal{
 position:fixed;inset:0;display:none;place-items:center;
 background:rgba(0,3,12,.72);backdrop-filter:blur(10px);z-index:20;padding:20px;
}
.ow-modal.on{display:grid}
.ow-card{
 width:min(760px,92vw);background:linear-gradient(180deg,#071635,#020718);
 border:1px solid rgba(244,196,93,.4);border-radius:24px;padding:26px;
 box-shadow:0 35px 120px rgba(0,0,0,.7);position:relative;
 max-height:88vh;overflow:auto;
}
.ow-eyebrow{font-size:11px;letter-spacing:.18em;color:var(--ow-gold);font-weight:800}
.ow-card h2{font-family:var(--ow-serif);color:#ffe9ab;font-size:clamp(26px,4vw,40px);margin:8px 0 12px}
.ow-card p{color:#c8d4ee;line-height:1.65;margin:0 0 14px}
.ow-pills{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 20px}
.ow-pills span{padding:8px 10px;border-radius:999px;background:#08183d;
 border:1px solid rgba(66,203,255,.3);font-size:12px;color:#e4efff}
.ow-actions{display:flex;gap:10px;flex-wrap:wrap}
.ow-cta{
 padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.13);
 background:#0b1b40;color:#fff;font-weight:800;text-decoration:none;cursor:pointer;
 font-size:13px;display:inline-block;
}
.ow-cta.gold{background:linear-gradient(135deg,var(--ow-gold-deep),#f4c85f);
 color:#160e00;border-color:#f4c85f}
.ow-close{
 position:absolute;right:16px;top:14px;width:40px;height:40px;border-radius:50%;
 border:1px solid rgba(255,255,255,.14);background:#09183a;color:#fff;font-size:23px;
 cursor:pointer;line-height:1;
}

/* ------------------------------------------------------------------- phones
   The painting is gorgeous and unreadable at 390px, and a hit area sized for a
   mouse is not a tap target. So a phone gets the picture to look at and a real
   list of districts to use. */
.ow-list{max-width:1600px;margin:16px auto 0;display:none;
 grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ow-list a{
 display:block;text-decoration:none;padding:13px 14px;border-radius:14px;
 background:linear-gradient(180deg,#071635,#020718);
 border:1px solid rgba(244,196,93,.3);color:#fff;font:700 13px/1.3 var(--ow-body);
}
.ow-list a span{display:block;color:var(--ow-muted);font:600 11px/1.4 var(--ow-body);margin-top:3px}
.ow-list a:hover{border-color:var(--ow-gold)}
/* Nobody swipes something that does not look like it moves, so it says so.
   There is no reason for it on a desktop, where the whole city already fits. */
.ow-swipe{
 display:none;max-width:1600px;margin:8px auto 0;padding:0 2px;
 color:var(--ow-muted);font:600 12px/1.4 var(--ow-body);text-align:center;
}

/* ------------------------------------------------------------------ phones
   YOUR CUBES ARE TAPPABLE ON A PHONE.

   They were not. Every hit area was set to display:none below 820 pixels, so
   the painting sat there looking exactly like a menu and nothing on it answered
   a tap. The reason it had been switched off was real: at 360 pixels wide a
   cube works out at about 42 by 26 pixels, well under half the size a thumb
   can reliably hit.

   So the fix is not simply turning them back on. The painting is held at 900
   pixels on a phone, which makes a cube roughly 104 by 66 pixels, and the
   stage slides sideways so you can move across your city. The hit areas can
   come back on because now there is something worth tapping. */
@media (max-width:820px){
 .ow-stage{
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border-radius:18px;
 }
 .ow-frame{min-width:900px}
 .ow-hot{display:block}
 /* the label reads at arm's length instead of at desk distance */
 .ow-hot span{font-size:13px;padding:8px 11px}
 .ow-list{display:grid}
 .ow-grid-toggle{display:none}
 .ow-page{padding:12px}
 .ow-swipe{display:block}
}

@media (prefers-reduced-motion:reduce){
 .ow-img,.ow-hot,.ow-hot span{transition:none}
}
@media print{ .ow-hot,.ow-grid-toggle,.ow-modal{display:none !important} }


/* ------------------------------------------------------------ the simple view
   Shanae asked for a way to use the site without the painting. Some people are
   in a hurry, some are on a slow connection, and some simply want a list. The
   world is the front door, not a toll gate.

   It is the same twelve districts and the same links, so nothing is hidden from
   anyone who chooses this. The choice is remembered for next time. */
body.ow-simple .ow-frame,
body.ow-simple .ow-status{display:none}
body.ow-simple .ow-list{display:grid}
body.ow-simple .ow-simple-head{display:block}
.ow-simple-head{
 display:none;max-width:1600px;margin:0 auto 6px;
}
.ow-simple-head h1{
 font-family:var(--ow-serif);font-size:clamp(26px,4vw,40px);margin:0 0 4px;
 color:var(--ow-gold2);
}
.ow-simple-head p{margin:0 0 18px;color:var(--ow-muted);max-width:60ch}
/* on a phone the list is already the view, so the button has nothing to toggle */
@media (max-width:820px){ #owPlain{display:none} }


/* ============================================================================
   THE SIDE RAIL, THE LIVING CITY AND THE COLOURED BAR   (Shanae, 2026-09-12)

   Her three asks, in her words: put the navigation in the side rail like she
   likes it, keep the coloured bar along the bottom, have ONE account control,
   and get rid of CREATE, GENERATE, INNOVATE and BELONG.

   The four words were never HTML. They were painted into the artwork and into
   her film, which is why they kept coming back. They are gone from the page
   because the painted interface is gone, and gone from the film because the
   film is cropped past them.
   ========================================================================= */

.ow-shell{
 display:grid;grid-template-columns:246px minmax(0,1fr);gap:20px;
 max-width:1900px;margin:0 auto;align-items:start;
}
/* minmax(0,1fr) above, and this, are what stop a wide city from pushing the
   rail off the screen. A grid child defaults to min-content, not zero. */
.ow-main{min-width:0}

/* ------------------------------------------------------------------ the rail */
.ow-rail{
 position:sticky;top:18px;display:flex;flex-direction:column;gap:18px;
 padding:18px 16px;border-radius:20px;
 background:linear-gradient(180deg,rgba(9,22,54,.96),rgba(2,7,24,.96));
 border:1px solid rgba(244,196,93,.32);
 box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.ow-rail-brand{
 display:flex;align-items:center;gap:11px;text-decoration:none;
 padding-bottom:16px;border-bottom:1px solid rgba(244,196,93,.2);
}
.ow-rail-omega{
 width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;
 background:linear-gradient(140deg,var(--ow-gold-deep),var(--ow-gold));
 color:#160E00;font:700 20px/1 var(--ow-serif);
}
.ow-rail-name{
 font-family:var(--ow-serif);color:var(--ow-gold2);font-weight:700;
 font-size:14px;letter-spacing:.04em;line-height:1.25;
}
.ow-rail-name b{
 display:block;font:800 9px/1 var(--ow-body);letter-spacing:.22em;
 text-transform:uppercase;color:var(--ow-muted);margin-top:4px;
}

.ow-rail-nav{display:flex;flex-direction:column;gap:4px}
.ow-rail-link{
 display:block;padding:10px 12px;border-radius:11px;text-decoration:none;
 color:#D6E1F7;font:700 13px/1.3 var(--ow-body);
 border:1px solid transparent;transition:.16s ease;
}
.ow-rail-link:hover,.ow-rail-link:focus-visible{
 color:var(--ow-gold2);background:rgba(69,216,255,.07);
 border-color:rgba(244,196,93,.34);outline:none;
}
/* the page you are on says so, so the rail is never a guess */
.ow-rail-link.is-here{
 color:#160E00;font-weight:800;
 background:linear-gradient(135deg,var(--ow-gold-deep),var(--ow-gold));
 border-color:var(--ow-gold);
}

.ow-rail-foot{
 margin-top:auto;display:flex;flex-direction:column;gap:10px;
 padding-top:16px;border-top:1px solid rgba(244,196,93,.2);
}
/* ONE of these on the page. Not a Login and a My Account. */
.ow-rail-account{
 display:block;text-align:center;padding:11px 12px;border-radius:12px;
 text-decoration:none;border:1px solid rgba(244,196,93,.5);
 background:rgba(244,196,93,.09);color:var(--ow-gold2);
 font:800 11px/1 var(--ow-body);letter-spacing:.14em;text-transform:uppercase;
}
.ow-rail-account:hover{background:rgba(244,196,93,.18);border-color:var(--ow-gold)}
.ow-rail-toggles{display:flex;gap:7px}
.ow-rail-toggle{
 flex:1;padding:9px 6px;border-radius:11px;cursor:pointer;
 border:1px solid rgba(255,255,255,.14);background:rgba(2,7,24,.8);
 color:var(--ow-muted);font:800 9px/1.2 var(--ow-body);letter-spacing:.1em;
 text-transform:uppercase;
}
.ow-rail-toggle:hover{color:var(--ow-gold2);border-color:var(--ow-gold)}
.ow-rail-toggle[aria-pressed="true"]{
 background:linear-gradient(135deg,var(--ow-gold-deep),var(--ow-gold));
 color:#160E00;border-color:var(--ow-gold);
}

/* the city fills the space the rail leaves, instead of staying pinned to 1600 */
.ow-frame{max-width:none}

/* --------------------------------------------------------- the living city
   Her own film, cropped to the heart of the city so the old painted cubes and
   the four words she asked to lose are outside the frame. It sits under the
   cubes and over the still, fades in only once it is genuinely playing, and
   never takes a click. */
.ow-live{
 position:absolute;inset:0;z-index:1;width:100%;height:100%;
 object-fit:cover;pointer-events:none;user-select:none;
 opacity:0;transition:opacity 1.1s ease;background:var(--ow-deep);
}
.ow-live.on{opacity:1}
/* Somebody who has asked their machine for less movement gets the still city.
   This is not a nicety: for some people motion like this causes symptoms. */
@media (prefers-reduced-motion:reduce){
 .ow-live{display:none}
}

/* ------------------------------------------------------ the coloured bottom bar
   Twelve bands, one per district, in that district's own colour. Every band is
   a real door, so the whole city is reachable from the bottom of the page. */
.ow-bottombar{
 display:flex;max-width:1900px;margin:22px auto 0;border-radius:16px;
 overflow:hidden;border:1px solid rgba(244,196,93,.3);
 box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.ow-bottombar a{
 flex:1 1 0;min-width:0;position:relative;
 display:flex;align-items:flex-end;justify-content:center;
 padding:13px 6px 11px;text-decoration:none;text-align:center;
 color:#fff;font:800 9px/1.25 var(--ow-body);letter-spacing:.09em;
 text-transform:uppercase;
 background:linear-gradient(180deg,rgba(2,7,24,.15),rgba(2,7,24,.72));
 transition:.18s ease;
}
/* the colour is the band, and the band is the district */
.ow-bottombar a::before{
 content:"";position:absolute;left:0;right:0;top:0;height:5px;
 background:var(--band);
}
.ow-bottombar a:hover,.ow-bottombar a:focus-visible{
 background:linear-gradient(180deg,rgba(2,7,24,.02),rgba(2,7,24,.5));
 color:var(--ow-gold2);outline:none;
}
.ow-bottombar a:hover::before,.ow-bottombar a:focus-visible::before{height:9px}
.ow-bottombar a span{display:block}

/* ------------------------------------------------------------ narrower screens
   Below 980 the rail stops being a column and becomes a strip you can scroll
   sideways, which is the only honest way to keep a 246 pixel column and a city
   on the same phone. */
@media (max-width:980px){
 .ow-shell{grid-template-columns:1fr;gap:14px}
 .ow-rail{position:static;flex-direction:row;align-items:center;gap:12px;
  overflow-x:auto;padding:12px}
 .ow-rail-brand{padding:0 12px 0 0;border-bottom:0;
  border-right:1px solid rgba(244,196,93,.2);flex:none}
 .ow-rail-nav{flex-direction:row;gap:6px;flex:none}
 .ow-rail-link{white-space:nowrap}
 .ow-rail-foot{margin:0 0 0 auto;flex-direction:row;align-items:center;gap:8px;
  padding-top:0;border-top:0;flex:none}
 .ow-rail-toggles{flex:none}
 .ow-rail-toggle{padding:9px 10px}
 /* the bar carries twelve names, which is four too many to read at this width,
    so it keeps the colours and the doors and drops the words */
 .ow-bottombar a{font-size:0;padding:16px 4px}
 .ow-bottombar a::before{height:8px}
}
@media (max-width:560px){
 .ow-rail-name{display:none}
}