/* Generated from html-standalone/timeline-webdesign.html by build-plugin.py.
   Every rule is scoped under .iwim-app so the plugin cannot leak styles
   into the surrounding theme. Do not edit by hand: edit the standalone
   file and re-run the build. */

.iwim-app{
  --bg:#F6F6F6;
    --surface:#F4F5F6;
    --surface-2:#EBEDEF;
    --line:#DCDFE3;
    --text:#14171A;
    --text-dim:#5B6168;
    --teal:#9C7A00;
    --amber:#B5680E;
    --gold-bright:#F0C349;
    --band:#14171A;
    --mono:'IBM Plex Mono', monospace;
    --display:'IBM Plex Sans', sans-serif;
    --title:'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
    --body:'IBM Plex Sans', sans-serif;
  margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden;
}
.iwim-app *{box-sizing:border-box;}
.iwim-app .shell{max-width:1280px;margin:0 auto;padding:40px 24px 80px;}
/* Breaks out of .shell so the title runs the full width of the window.
     Size is viewport-driven rather than fixed, so it keeps touching both
     edges at any screen width instead of only at one. */
/* -40px cancels .shell's top padding so the caps start at the very top. */
/* Régua de 2px fechando o topo da página, ecoando a faixa preta de baixo. */
/* 2px de respiro acima do título. Padding, não borda: o padding deixa ver o
   fundo da própria página, então funciona em todos os skins sem token algum. */
/* Full-bleed that does not assume the app is centred in the viewport.
   calc(50% - 50vw) only lands correctly when the container happens to be
   horizontally centred; drop the plugin into a theme with a sidebar and every
   full-width band slides off to one side. The JS measures the real offset and
   writes --bleed-l and --bleed-w, and these are the fallbacks for before that
   runs or if scripting is off. */
.iwim-app header.top{width:var(--bleed-w,100vw);padding:2px 0 0;margin:-40px 0 0;
             margin-left:var(--bleed-l,calc(50% - 50vw));}
/* line-height 0.73 is Archivo's cap height. Setting the line box to exactly
     that distance makes the top of the second line's capitals land precisely
     on the first line's baseline: stacked flush, no overlap, no gap. It also
     leaves almost nothing below the last baseline, so the bottom line sits
     directly on the black band. Adjust --title-size if the words don't quite
     reach both edges, it is the only number meant to be tuned by eye. */
.iwim-app header.top{--title-size:12.7vw;}
/* --title-trim used to pull the wordmark up by .06em to close the gap a line
     box leaves above all-caps text. It is 0 now, on purpose: the negative
     margin was clipping the top of the capitals, and the 2px of padding on
     header.top gives the block the breathing room it needed instead. Kept as a
     variable rather than deleted so the knob is still there if wanted. */
/* The wordmark used to be an <h1>. Via the shortcode it sits inside a page
   that already has the theme's own <h1>, which put two on the screen, so it
   is now a <p> carrying role="heading" aria-level="1": same announcement to a
   screen reader, only one h1 in the document. Both selectors are kept so the
   rule survives either markup. */
.iwim-app h1,
.iwim-app .iwim-wordmark{font-family:var(--title);font-weight:900;font-variation-settings:'wdth' 125;
     font-size:clamp(34px,var(--title-size),340px);
     --title-trim:0;
     line-height:.73;margin:calc(-1 * var(--title-trim)) 0 0;
     letter-spacing:-.02em;text-transform:uppercase;
     word-break:break-word;hyphens:none;}
.iwim-app .layout{display:grid;grid-template-columns:280px 1fr;gap:56px;margin-top:20px;}
@media (max-width:880px){
.iwim-app .layout{grid-template-columns:1fr;}
}
/* Section order: normal document order on desktop. On mobile, the
     screenshot moves up to sit right before the characteristics grid,
     since scrolling past a wall of text before seeing the site felt long. */
.iwim-app main{display:flex;flex-direction:column;min-width:0;}
.iwim-app .panel-head{order:0;}
.iwim-app .desc{order:1;}
.iwim-app .notes{order:1;}
/* ties with .desc; DOM order (desc before notes) breaks the tie */
.iwim-app .sec-characteristics{order:2;}
.iwim-app .sec-vocabulary{order:3;}
.iwim-app .sec-screenshot{order:4;}
.iwim-app .sec-subtopics{order:5;}
.iwim-app .sec-tooling{order:6;}
@media (max-width:880px){
.iwim-app .sec-screenshot{order:2;}
.iwim-app .sec-characteristics{order:3;}
.iwim-app .sec-vocabulary{order:4;}
.iwim-app .sec-subtopics{order:5;}
.iwim-app .sec-tooling{order:6;}
}
/* --- Timeline rail --- */
/* min-width:0 overrides the grid item's default auto-minimum, which
     otherwise sizes to the rail's widest unbroken content (a long movement
     name) and pushes the whole layout past the viewport on narrow screens. */
.iwim-app .rail{position:relative;min-width:0;}
.iwim-app .rail-list{list-style:none;margin:0;padding:0;}
.iwim-app .rail-item{position:relative;padding:0;border-top:1px solid var(--line);}
.iwim-app .rail-item + .rail-item{margin-top:3px;}
.iwim-app .rail-item:last-child{border-bottom:1px solid var(--line);}
.iwim-app .rail-item .era-btn{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:17px 12px;
    transition:background .15s ease;}
.iwim-app .rail-item .era-btn:hover{background:var(--surface-2);}
.iwim-app .rail-item.active .era-btn{background:var(--surface-2);}
.iwim-app .rail-year{font-family:var(--mono);font-size:12.5px;color:var(--teal);letter-spacing:.05em;}
.iwim-app .rail-item.active .rail-year{color:var(--amber);}
.iwim-app .rail-name{font-family:var(--display);font-size:16px;font-weight:600;margin-top:7px;color:var(--text);
             display:flex;align-items:center;gap:7px;}
.iwim-app .rail-caret{font-size:9px;color:var(--text-dim);transition:transform .15s ease;flex-shrink:0;opacity:0;}
.iwim-app .rail-item.has-movements .rail-caret{opacity:1;}
.iwim-app .rail-item.expanded .rail-caret{transform:rotate(90deg);}
.iwim-app .rail-alias{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);margin-top:7px;line-height:1.45;}
.iwim-app .movement-list{list-style:none;margin:0;padding:0 0 10px;display:none;}
.iwim-app .movement-group{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
                  color:var(--text-dim);opacity:.75;margin:12px 0 4px 22px;}
.iwim-app .movement-group:first-child{margin-top:6px;}
.iwim-app .rail-item.expanded .movement-list{display:block;}
.iwim-app .movement-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;width:calc(100% - 12px);margin-left:12px;padding:9px 10px;font-family:var(--body);font-size:13px;color:var(--text-dim);border-left:2px solid var(--line);transition:background .12s ease, color .12s ease, border-color .12s ease;}
.iwim-app .movement-btn::before{content:'—';font-family:var(--mono);color:var(--line);}
.iwim-app .movement-btn:hover{background:var(--surface-2);color:var(--text);}
.iwim-app .movement-btn.active{color:var(--amber);border-left-color:var(--amber);font-weight:600;background:var(--surface-2);}
.iwim-app .breadcrumb{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-bottom:14px;}
@media (max-width:880px){
.iwim-app .breadcrumb{font-size:14px;line-height:1.5;}
.iwim-app .rail-year{font-size:14px;}
.iwim-app .rail-name{font-size:18px;}
.iwim-app .rail-alias{font-size:13.5px;}
.iwim-app .movement-btn{font-size:14px;padding:11px 10px;}
}
.iwim-app .breadcrumb .crumb-sep{opacity:.45;margin:0 2px;}
.iwim-app .breadcrumb .crumb-year{color:var(--text-dim);opacity:.75;}
.iwim-app .breadcrumb button{all:unset;cursor:pointer;color:var(--teal);}
.iwim-app .breadcrumb button:hover{text-decoration:underline;}
/* --- Main panel: description + tags now lead, screenshot follows --- */
.iwim-app .panel-head{margin-bottom:6px;}
.iwim-app .panel-title{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.25;flex:1;min-width:0;}
/* Shown once, before any era is picked, see #mainContent.showing-intro
     below, which hides every other direct child of main instead of this
     needing its own display toggling in JS. */
.iwim-app .intro-screen{display:block;padding:4px 0 12px;}
.iwim-app #mainContent:not(.showing-intro) .intro-screen{display:none;}
.iwim-app #mainContent.showing-intro > *:not(.intro-screen){display:none;}
.iwim-app .intro-title{font-family:var(--display);font-weight:700;font-size:40px;line-height:1.05;
              letter-spacing:-.01em;color:var(--text);margin-bottom:22px;max-width:64ch;}
.iwim-app .intro-body p{font-size:15.5px;line-height:1.7;color:var(--text);margin:0 0 16px;max-width:64ch;}
.iwim-app .intro-body p:last-child{margin-bottom:0;}
.iwim-app .intro-term{font-family:var(--mono);font-size:13px;color:var(--teal);background:rgba(156,122,0,.08);padding:2px 6px;}
.iwim-app .desc{color:var(--text);font-size:16.5px;line-height:1.7;margin:12px 0 0;max-width:72ch;}
.iwim-app .desc b{color:var(--teal);font-weight:600;}
.iwim-app .inline-link{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(156,122,0,.38);transition:border-color .12s ease,color .12s ease;}
.iwim-app .inline-link:hover{color:var(--amber);border-bottom-color:var(--amber);}
.iwim-app .fact .note .inline-link{border-bottom-color:rgba(156,122,0,.3);}
/* Sources sit with the claim they support, not in a footnote pile, so a
     reader can see at a glance which statements are referenced and which are
     not. An unmarked fact is unreferenced, that absence is information too. */
.iwim-app .fact-src{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;line-height:1.7;}
.iwim-app .fact-src-toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
                   color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;
                   transition:color .12s ease;}
.iwim-app .fact-src-toggle:hover{color:var(--teal);}
.iwim-app .fact-src-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;}
.iwim-app .fact-src-caret{font-size:8px;transition:transform .15s ease;}
.iwim-app .fact-src.open .fact-src-caret{transform:rotate(180deg);}
.iwim-app .fact-src-list{display:none;margin-top:6px;padding-left:2px;}
.iwim-app .fact-src.open .fact-src-list{display:block;}
.iwim-app .fact-src-list a{display:block;color:var(--teal);text-decoration:none;
                   border-bottom:1px solid rgba(156,122,0,.3);width:fit-content;margin-bottom:4px;}
.iwim-app .fact-src-list a:hover{color:var(--amber);border-bottom-color:var(--amber);}
/* A third state, distinct from cited and from unmarked: a claim this site
     is making rather than reporting. No citation can support an argument, and
     dressing one up as sourced would be worse than leaving it bare. */
.iwim-app .fact-reading{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
                font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
                color:var(--text-dim);border:1px dashed var(--line);padding:3px 9px;}
.iwim-app .fact-reading::before{content:'✎';font-size:10px;opacity:.8;}
.iwim-app .section-label{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
/* --- Context notes ---
     Two different kinds of writing used to sit in the same grid: short
     characteristics ("what this era looks like") and long pieces of history
     ("who named it, and when"). In a three-column grid of equal cards the
     second kind stretches its own card to three times the height of its
     neighbours, which reads as importance it was never meant to claim.
     Anything carrying a source is background, so it runs as prose under the
     description with its own subheading, and the grid below is left holding
     only the characteristics, comparable things, comparable sizes. */
.iwim-app .notes{max-width:72ch;margin:0;}
.iwim-app .note-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.iwim-app .note-block:first-child{margin-top:22px;padding-top:0;border-top:none;}
.iwim-app .note-title{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.35;
              color:var(--text);margin-bottom:6px;}
.iwim-app .note-body{font-size:14.5px;line-height:1.7;color:var(--text);}
/* Typography library */
.iwim-app .type-intro{color:var(--text);font-size:15.5px;line-height:1.7;max-width:68ch;margin:22px 0 6px;}
.iwim-app .type-card{border-top:1px solid var(--line);padding:30px 0;}
.iwim-app .type-specimen{font-size:clamp(38px,7vw,84px);line-height:1.1;letter-spacing:-.02em;margin-bottom:4px;
                 word-break:break-word;}
.iwim-app .type-alphabet{font-size:15px;color:var(--text-dim);line-height:1.5;margin-bottom:16px;word-break:break-word;}
.iwim-app .type-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:11.5px;
             color:var(--text-dim);margin-bottom:12px;}
.iwim-app .type-meta b{color:var(--text);font-weight:500;}
.iwim-app .type-note{font-size:14.5px;line-height:1.65;color:var(--text);max-width:66ch;margin-bottom:10px;}
.iwim-app .type-links{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:11.5px;}
.iwim-app .type-links a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(156,122,0,.35);}
.iwim-app .type-links a:hover{color:var(--amber);border-bottom-color:var(--amber);}
.iwim-app .type-shot{width:100%;max-width:620px;border:1px solid var(--line);border-radius:10px;margin-top:14px;display:block;}
.iwim-app .type-render-note{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);opacity:.8;margin-top:8px;}
.iwim-app .section-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:0 0 14px;}
.iwim-app .section{margin-top:54px;}
.iwim-app .facts{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-bottom:8px;}
@media (max-width:700px){
.iwim-app .facts{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:460px){
.iwim-app .facts{grid-template-columns:1fr;}
}
.iwim-app .fact{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.iwim-app .fact .term{font-family:var(--display);font-weight:600;font-size:16px;color:var(--text);margin-bottom:6px;}
.iwim-app .fact .note{font-family:var(--body);font-size:16px;color:var(--text-dim);line-height:1.65;}
.iwim-app .term-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.iwim-app button.term-tag{all:unset;font-family:var(--mono);font-size:12px;color:var(--teal);background:rgba(156,122,0,.08);border:1px solid rgba(156,122,0,.3);padding:5px 12px;cursor:pointer;transition:background .12s ease;}
.iwim-app button.term-tag:hover{background:rgba(156,122,0,.16);}
.iwim-app button.term-tag.active{background:var(--teal);color:#fff;border-style:solid;}
.iwim-app .term-variants-panel{margin-top:12px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);}
/* The close control is positioned against the card, not laid out beside the
   title: as a flex sibling it was being squeezed until "Close ✕" wrapped. */
.iwim-app .term-variants-panel{position:relative;}
.iwim-app .term-variants-title{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;padding-right:36px;}
/* The definition comes first, because the question a clicked term raises is
     "what does this mean", not "where else does it appear". The origin links
     move underneath, where they answer the follow-up instead of the question. */
.iwim-app .term-def{font-size:14.5px;line-height:1.65;color:var(--text);max-width:70ch;margin-bottom:14px;}
.iwim-app .term-origin{margin-top:31px;padding-top:14px;border-top:1px solid var(--line);}
.iwim-app .term-origin-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
                     color:var(--text-dim);margin-bottom:8px;}
.iwim-app .term-origin-links{display:flex;flex-wrap:wrap;gap:8px;}
.iwim-app .term-origin-btn{all:unset;cursor:pointer;font-size:13px;background:var(--bg);border:1px solid var(--line);
                   padding:7px 13px;transition:border-color .12s ease,color .12s ease;}
.iwim-app .term-origin-btn:hover{border-color:var(--teal);color:var(--teal);}
.iwim-app .term-origin-btn small{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);margin-left:7px;}
.iwim-app .term-variants-title .name{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--text);}
/* white-space:nowrap and a fixed box, because a 26px-wide button holding
   anything wider than a glyph will wrap it. Pulled tight into the corner so
   the title has the whole width it needs. */
.iwim-app .term-variants-close{all:unset;cursor:pointer;position:absolute;top:6px;right:6px;
     display:flex;align-items:center;justify-content:center;
     width:30px;height:30px;flex:0 0 30px;
     white-space:nowrap;overflow:hidden;
     font-family:var(--mono);font-size:15px;line-height:1;color:var(--text-dim);border-radius:var(--r-sm);}
.iwim-app .term-variants-close:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.iwim-app .term-variants-close:hover{color:var(--text);}
.iwim-app .term-variant-row{font-size:13px;line-height:1.55;color:var(--text);margin-bottom:6px;}
.iwim-app .term-variant-row:last-child{margin-bottom:0;}
.iwim-app .term-variant-label{font-family:var(--mono);font-weight:600;font-size:11.5px;color:var(--amber);margin-right:8px;text-transform:uppercase;letter-spacing:.03em;}
.iwim-app .term-related-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:29px 0 8px;}
.iwim-app .term-related-list{display:flex;flex-wrap:wrap;gap:6px;}
.iwim-app .term-related-chip{all:unset;cursor:pointer;font-family:var(--body);font-size:12.5px;color:var(--text);background:var(--bg);border:1px solid var(--line);padding:5px 10px;display:inline-flex;align-items:center;gap:6px;transition:border-color .12s ease;}
.iwim-app .term-related-chip:hover{border-color:var(--teal);}
.iwim-app .subtopics{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:8px;}
.iwim-app .subtopic{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .12s ease;}
.iwim-app .subtopic:hover{background:var(--surface);}
.iwim-app .subtopic:last-child{border-bottom:none;}
.iwim-app .subtopic-body{flex:1;min-width:0;}
.iwim-app .subtopic-title{font-family:var(--display);font-weight:600;font-size:15px;color:var(--text);margin-bottom:5px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.iwim-app .subtopic-title:hover{color:var(--amber);}
.iwim-app .subtopic-title:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;}
.iwim-app .subtopic > .fav-btn{flex-shrink:0;align-self:flex-start;margin-top:-5px;margin-right:-6px;}
.iwim-app .subtopic-thumb{display:block;}
.iwim-app .subtopic-title .arrow{font-size:12px;color:var(--teal);opacity:0;transition:opacity .12s ease;}
.iwim-app .subtopic:hover .subtopic-title .arrow{opacity:1;}
.iwim-app .subtopic-desc{font-size:14.5px;color:var(--text-dim);line-height:1.65;margin-bottom:9px;}
.iwim-app .subtopic-ex{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-family:var(--mono);font-size:11.5px;color:var(--teal);background:rgba(156,122,0,.08);padding:4px 10px;text-decoration:none;}
.iwim-app .subtopic-ex::before{content:'Example →';color:var(--text-dim);}
.iwim-app a.subtopic-ex{transition:background .12s ease;}
.iwim-app a.subtopic-ex:hover{background:rgba(156,122,0,.18);color:var(--amber);}
.iwim-app a.subtopic-ex:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.iwim-app .subtopic-ex .inline-link{border-bottom-color:rgba(156,122,0,.5);}
.iwim-app .ex-link{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(156,122,0,.4);
           transition:color .12s ease,border-color .12s ease;}
.iwim-app .ex-link:hover{color:var(--amber);border-bottom-color:var(--amber);}
.iwim-app .ex-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.iwim-app .ex-sep{color:var(--text-dim);opacity:.55;margin:0 6px;}
.iwim-app .subtopic-thumb{flex-shrink:0;width:120px;height:76px;border-radius:8px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);}
.iwim-app .subtopic-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
@media (max-width:600px){
.iwim-app .subtopic-thumb{display:none;}
}
/* the "monitor" that ages with the timeline */
.iwim-app .monitor{border-radius:14px;overflow:hidden;background:#EDEDED;box-shadow:0 16px 40px rgba(20,23,26,.12);border:1px solid var(--line);}
.iwim-app .chrome{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;font-family:var(--mono);font-size:12px;}
.iwim-app .chrome .addr{flex:1;min-width:0;padding:5px 10px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;color:inherit;cursor:pointer;display:block;}
.iwim-app .chrome .addr:hover{text-decoration:underline;}
.iwim-app .frame-placeholder{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-dim);background:#F0F0F0;}
.iwim-app .ph-icon{font-size:26px;opacity:.5;}
.iwim-app .ph-text{font-family:var(--mono);font-size:12.5px;}
.iwim-app .open-link{font-family:var(--mono);font-size:12px;color:var(--teal);text-decoration:none;cursor:pointer;}
.iwim-app .open-link:hover{text-decoration:underline;}
.iwim-app .dots{display:flex;gap:6px;}
.iwim-app .dots span{width:9px;height:9px;border-radius:50%;display:inline-block;}
.iwim-app .frame-wrap{position:relative;background:#F0F0F0;max-height:560px;overflow-y:auto;overflow-x:hidden;}
.iwim-app .frame-wrap img{width:100%;height:auto;display:block;}
.iwim-app .frame-wrap::-webkit-scrollbar{width:10px;}
.iwim-app .frame-wrap::-webkit-scrollbar-track{background:#F0F0F0;}
.iwim-app .frame-wrap::-webkit-scrollbar-thumb{background:#C3C8CD;border-radius:20px;}
.iwim-app .scroll-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;color:#fff;background:rgba(20,23,26,.65);padding:3px 10px;pointer-events:none;opacity:0;transition:opacity .2s ease;}
.iwim-app .scroll-hint.show{opacity:1;}
@media (max-width:600px){
.iwim-app .frame-wrap{max-height:420px;}
}
.iwim-app .frame-status{position:absolute;bottom:10px;right:12px;font-family:var(--mono);font-size:10.5px;color:#fff;background:rgba(20,23,26,.65);padding:3px 8px;}
.iwim-app .spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(20,23,26,.15);border-top-color:var(--amber);animation:spin .8s linear infinite;position:absolute;}
@keyframes spin{to{transform:rotate(360deg);}}
.iwim-app .link-row{display:flex;align-items:center;gap:16px;margin-top:10px;flex-wrap:wrap;}
/* Example switcher, only rendered when a card has more than one shot */
/* --- Gallery as browser tabs ------------------------------------------------
   Sits inside .chrome as a full-width row placed before the dots, so it picks
   up whichever era skin is active without one extra rule per era. The active
   tab is filled white to read as the sheet currently in front; the inactive
   ones inherit the chrome's own text colour, which is what makes this work
   equally on the 1991 silver bar and the 2019 navy one. */
.iwim-app .chrome-tabs{flex-basis:100%;order:-1;display:flex;align-items:flex-end;gap:0;
     margin:-10px -14px 9px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none;
     border-bottom:1px solid rgba(127,127,127,.35);}
.iwim-app .chrome-tabs::-webkit-scrollbar{display:none;}
/* Real tab shapes: a visible separator between them, and a bottom edge that
   the active tab breaks through, which is the one detail that makes a row of
   rectangles read as tabs rather than as buttons. */
.iwim-app .shot-tab{all:unset;cursor:pointer;position:relative;flex:0 1 auto;min-width:0;max-width:220px;
     display:flex;align-items:center;gap:7px;
     padding:8px 15px;margin-bottom:-1px;
     border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;
     font-family:var(--body);font-size:12.5px;font-weight:500;line-height:1.3;
     color:inherit;opacity:.92;white-space:nowrap;
     transition:opacity .12s ease,background .12s ease;}
.iwim-app .shot-tab span{overflow:hidden;text-overflow:ellipsis;}
/* Divider drawn between neighbours, hidden either side of the active one. */
.iwim-app .shot-tab + .shot-tab::after{content:'';position:absolute;left:0;top:7px;bottom:7px;
     width:1px;background:currentColor;opacity:.28;}
.iwim-app .shot-tab.active::after,
.iwim-app .shot-tab.active + .shot-tab::after{display:none;}
/* Stands in for a favicon. Without it a rounded rectangle still reads as a button. */
.iwim-app .shot-tab::before{content:'';flex-shrink:0;width:8px;height:8px;border-radius:2px;
     background:currentColor;opacity:.45;}
.iwim-app .shot-tab:hover{opacity:1;background:rgba(127,127,127,.18);}
.iwim-app .shot-tab.active{opacity:1;background:var(--bg);color:var(--text);font-weight:600;
     border-color:rgba(127,127,127,.35);}
.iwim-app .shot-tab.active::before{background:var(--amber);opacity:1;}
.iwim-app .shot-tab:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-3px;}
@media (max-width:600px){
.iwim-app .shot-tab{max-width:150px;font-size:12px;padding:7px 11px;}
}

/* Star sits at the right end of the address bar, where a browser puts its
   bookmark control. */
.iwim-app .chrome .chrome-fav{flex-shrink:0;display:flex;align-items:center;margin-left:2px;}

/* --- Nav tabs --- */
/* Breaks out of .shell to run edge to edge. overflow-x:hidden on the page
     root keeps 100vw from producing a horizontal scrollbar. */
.iwim-app .tabs{width:var(--bleed-w,100vw);margin-left:var(--bleed-l,calc(50% - 50vw));margin-top:0;background:var(--band);}
/* The tab strip scrolls sideways on narrow screens, and `overflow-x:auto`
     computes `overflow-y` to `auto` as well, which silently clipped the
     search dropdown, since an absolutely-positioned child cannot escape a
     scroll container. The search therefore sits in .tabs-bar, one level up,
     which has no overflow of its own; only the buttons scroll. */
.iwim-app .tabs-bar{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:10px;}
.iwim-app .tabs-inner{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0;}
.iwim-app .tabs-inner::-webkit-scrollbar{display:none;}
@media (max-width:700px){
/* Thinner band, and no wrapping: the three labels plus the star have to sit
   on one line, so the short label comes in and the padding comes down until
   they do. Nothing scrolls and nothing touches the edge. */
.iwim-app .tabs-bar{flex-wrap:nowrap;padding:0 14px;gap:0;}
.iwim-app .tabs-inner{display:flex;align-items:center;gap:2px;min-width:0;flex:1;}
.iwim-app .tab-long{display:none;}
.iwim-app .tab-short{display:inline;}
/* Thinner band: the vertical padding is what makes it heavy, not the type.
   Horizontal padding shrinks too, and the last tab loses its right padding so
   the label ends where the bar's own padding begins instead of on the edge. */
.iwim-app .tab{padding:9px 10px;font-size:12px;letter-spacing:.02em;white-space:nowrap;}
.iwim-app .tabs-inner .tab:last-child{padding-right:2px;}
.iwim-app .tabs-inner{flex:1 1 100%;}
.iwim-app .search-wrap{flex:1 1 100%;}
.iwim-app .search-input{width:100%;font-size:16px;}
.iwim-app .search-input:focus{width:100%;}
.iwim-app .search-results{right:0;left:0;width:auto;}
}
/* Search */
.iwim-app .search-wrap{position:relative;margin-left:auto;display:flex;align-items:center;padding:0 4px;flex-shrink:0;}
.iwim-app .search-input{all:unset;font-family:var(--mono);font-size:12px;color:#fff;background:rgba(255,255,255,.08);
     /* 16px em telas de toque, abaixo disso o iOS dá zoom sozinho ao focar. */

                border:1px solid rgba(255,255,255,.14);padding:7px 14px;width:170px;
                transition:width .16s ease,background .12s ease,border-color .12s ease;}
.iwim-app .search-input::placeholder{color:#9AA1A9;}
.iwim-app .search-input:focus{width:250px;background:rgba(255,255,255,.13);border-color:var(--gold-bright);}
.iwim-app .search-results{position:absolute;top:calc(100% + 6px);right:4px;width:min(440px,92vw);z-index:60;
                  background:var(--bg);border:1px solid var(--line);border-radius:12px;
                  box-shadow:0 16px 40px rgba(0,0,0,.18);max-height:66vh;overflow-y:auto;display:none;}
.iwim-app .search-results.open{display:block;}
.iwim-app .search-group-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
                      color:var(--text-dim);padding:12px 16px 6px;}
.iwim-app .search-hit{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:9px 16px;
              border-top:1px solid var(--line);transition:background .1s ease;}
.iwim-app .search-hit:hover,.iwim-app .search-hit:focus-visible{background:var(--surface);}
.iwim-app .search-hit-title{font-family:var(--display);font-weight:600;font-size:14px;color:var(--text);}
.iwim-app .search-hit-sub{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:3px;}
.iwim-app .search-empty{padding:16px;font-family:var(--mono);font-size:12px;color:var(--text-dim);line-height:1.6;}
.iwim-app .search-suggest{padding:0 16px 14px;}
.iwim-app .search-suggest-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
                        color:var(--text-dim);margin:10px 0 8px;}
.iwim-app .search-chip{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--teal);
               border:1px solid var(--line);padding:5px 11px;margin:0 6px 6px 0;
               display:inline-block;}
.iwim-app .search-chip:hover{border-color:var(--teal);}
/* Two labels in one button: the long one reads better with room, the short
   one is what actually fits three tabs plus the star on a phone. */
.iwim-app .tab-short{display:none;}
.iwim-app .tab{all:unset;cursor:pointer;font-family:var(--mono);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
       color:#C7CDD4;padding:15px 20px;white-space:nowrap;transition:color .12s ease,background .12s ease;}
.iwim-app .tab:hover{color:#fff;}
.iwim-app .tab.active{background:var(--gold-bright);color:var(--band);font-weight:600;}
.iwim-app .tab.active:hover{color:var(--band);}
.iwim-app .tab .tab-count{font-size:11px;opacity:.75;}
.iwim-app .tab .tab-count:not(:empty){margin-left:5px;}
.iwim-app .tab-icon{display:inline-flex;align-items:center;justify-content:center;padding:15px 18px;line-height:1;}
.iwim-app .tab-icon svg{width:21px;height:21px;display:block;}
.iwim-app .icon-star path{fill:currentColor;}
.iwim-app .icon-plus path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;}
.iwim-app .view{display:none;padding-top:44px;}
.iwim-app .view.active{display:block;}
/* --- Favourite stars --- */
/* A fixed square box with a 50% radius, so the hover state is a true
     circle rather than a rounded rectangle sized by the glyph. */
.iwim-app .fav-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
           width:28px;height:28px;color:var(--amber);
           border-radius:50%;transition:background .12s ease;}
/* One shape for both states, only the fill changes, so the star cannot
     appear to resize when it is clicked. Two different characters (☆ / ★)
     could never guarantee that, since each font draws them at its own weight. */
.iwim-app .fav-btn svg{width:19px;height:19px;display:block;}
.iwim-app .fav-btn svg path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
                    transition:fill .12s ease;}
.iwim-app .fav-btn.on svg path{fill:currentColor;}
.iwim-app .fav-btn:hover{background:rgba(181,104,14,.13);}
.iwim-app .fav-btn.on{color:var(--amber);}
.iwim-app .fav-btn:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
/* Offsets below centre each star on the first line of the heading beside
     it, rather than on the whole block, which would drift when text wraps. */
.iwim-app .panel-head{display:flex;align-items:flex-start;gap:8px;}
.iwim-app .panel-head .fav-btn{width:34px;height:34px;margin-top:-2px;margin-right:-7px;flex-shrink:0;}
.iwim-app .panel-head .fav-btn svg{width:23px;height:23px;}
/* --- Favourites view --- */
.iwim-app .fav-empty{color:var(--text-dim);font-size:14.5px;line-height:1.7;max-width:56ch;margin-top:24px;}
.iwim-app .fav-group{margin-top:32px;}
.iwim-app .fav-group-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
                   color:var(--text-dim);margin-bottom:12px;}
.iwim-app .fav-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.iwim-app .fav-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);}
.iwim-app .fav-item:last-child{border-bottom:none;}
.iwim-app .fav-item-body{flex:1;min-width:0;}
.iwim-app .fav-item-title{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--text);}
.iwim-app .fav-item-sub{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);margin-top:3px;
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.iwim-app .fav-open{all:unset;cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--teal);
            border:1px solid var(--line);padding:5px 11px;}
.iwim-app .fav-open:hover{border-color:var(--teal);}
.iwim-app .fav-remove{all:unset;cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--text-dim);padding:5px 8px;}
.iwim-app .fav-remove:hover{color:#B23A3A;}
.iwim-app .fav-actions{display:flex;gap:14px;align-items:center;margin-top:26px;}
.iwim-app .fav-note{color:var(--text-dim);font-size:12.5px;font-family:var(--mono);line-height:1.6;margin-top:26px;
            padding-top:16px;border-top:1px solid var(--line);max-width:62ch;}
/* --- History view --- */
.iwim-app .history-intro{color:var(--text);font-size:15.5px;line-height:1.7;max-width:68ch;margin:22px 0 8px;}
.iwim-app .history-chapter{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:30px 0;
                   border-top:1px solid var(--line);}
@media (max-width:700px){
.iwim-app .history-chapter{grid-template-columns:1fr;gap:10px;}
}
.iwim-app .history-years{font-family:var(--mono);font-size:12.5px;color:var(--amber);padding-top:4px;}
.iwim-app .history-title{font-family:var(--display);font-size:19px;font-weight:700;margin-bottom:10px;}
.iwim-app .history-body{color:var(--text);font-size:15px;line-height:1.7;max-width:68ch;}
.iwim-app .history-body p{margin:0 0 12px;}
.iwim-app .history-body p:last-child{margin-bottom:0;}
.iwim-app .history-link{margin-top:12px;}
.iwim-app .sources-filter{display:flex;align-items:center;gap:10px;margin:20px 0 8px;}
.iwim-app .sources-filter label{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
.iwim-app .sources-filter select{font-family:var(--body);font-size:13.5px;color:var(--text);background:var(--surface);
                         border:1px solid var(--line);border-radius:8px;padding:6px 10px;max-width:260px;}
.iwim-app .sources-count{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-left:auto;}
.iwim-app .source-group{margin-top:28px;}
.iwim-app .source-group-title{font-family:var(--mono);font-size:12.5px;color:var(--amber);letter-spacing:.03em;
                      margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.iwim-app .source-row{padding:10px 0;border-bottom:1px solid var(--line);}
.iwim-app .source-row:last-child{border-bottom:none;}
.iwim-app .source-row a{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--text);text-decoration:none;}
.iwim-app .source-row a:hover{color:var(--amber);}
.iwim-app .source-claims{font-size:13px;color:var(--text-dim);margin-top:3px;line-height:1.5;max-width:68ch;}
.iwim-app .glossary-pilcrow-example{font-family:var(--mono);color:var(--teal);}
.iwim-app .glossary-controls{display:flex;align-items:center;gap:12px;margin:20px 0 8px;}
.iwim-app .glossary-controls .analyzer-input{max-width:320px;}
.iwim-app .glossary-entry{padding:12px 8px;margin:0 -8px;border-bottom:1px solid var(--line);border-radius:6px;
                  scroll-margin-top:20px;transition:background .3s ease;}
.iwim-app .glossary-entry:last-child{border-bottom:none;}
.iwim-app .glossary-term-row{display:flex;align-items:baseline;gap:8px;}
.iwim-app .glossary-term{font-family:var(--display);font-weight:600;font-size:15px;color:var(--text);}
.iwim-app .glossary-pilcrow{all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--teal);transition:color .12s ease;}
.iwim-app .glossary-pilcrow:hover{color:var(--text);}
.iwim-app .glossary-def{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin-top:4px;max-width:68ch;}
.iwim-app .glossary-entry.flash{background:rgba(156,122,0,.16);}
.iwim-app .compare-grid{display:flex;gap:24px;margin-top:20px;align-items:flex-start;}
.iwim-app .compare-col{flex:1;min-width:0;}
.iwim-app .compare-select{width:100%;font-family:var(--body);font-size:13.5px;color:var(--text);background:var(--surface);
                  border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:12px;}
.iwim-app .compare-frame{max-height:420px;}
.iwim-app .compare-caption{margin-top:10px;font-size:13px;color:var(--text-dim);}
.iwim-app .compare-caption strong{color:var(--text);font-family:var(--display);font-size:14px;}
@media (max-width:760px){
.iwim-app .compare-grid{flex-direction:column;}
}
.iwim-app .open-link{font-family:var(--mono);font-size:12px;color:var(--teal);text-decoration:none;}
.iwim-app .open-link:hover{text-decoration:underline;}
.iwim-app .retry-btn{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--text-dim);border:1px solid var(--line);padding:4px 10px;}
.iwim-app .retry-btn:hover{color:var(--text);border-color:var(--text-dim);}
/* era-specific chrome skins */
.iwim-app .era-1991 .chrome{background:#c0c0c0;color:#000;border-bottom:2px solid #808080;}
.iwim-app .era-1991 .addr{background:#fff;border:1px inset #808080;font-family:var(--mono);}
.iwim-app .era-1996 .chrome{background:linear-gradient(#7fa0cf,#3f649c);color:#fff;}
.iwim-app .era-1996 .addr{background:#fff;color:#000;border:1px solid #14385e;}
.iwim-app .era-1999 .chrome{background:#ece9d8;color:#000;border-bottom:1px solid #aca899;}
.iwim-app .era-1999 .addr{background:#fff;border:1px solid #7f9db9;}
.iwim-app .era-2006 .chrome{background:linear-gradient(#ffffff,#e2e2e2);color:#222;border-bottom:1px solid #ccc;}
.iwim-app .era-2006 .addr{background:linear-gradient(#fff,#eee);border:1px solid #bbb;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
.iwim-app .era-2007 .chrome{background:linear-gradient(#7a7a7a,#4a4a4a);color:#fff;}
.iwim-app .era-2007 .addr{background:linear-gradient(#fff,#e2e2e2);color:#000;border-radius:12px;border:1px solid #999;}
.iwim-app .era-2013 .chrome{background:#0071e3;color:#fff;}
.iwim-app .era-2013 .addr{background:#fff;color:#000;border-radius:4px;}
.iwim-app .era-2015 .chrome{background:#fafafa;color:#333;border-bottom:1px solid #e0e0e0;}
.iwim-app .era-2015 .addr{background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.iwim-app .era-2019 .chrome{background:#0a2540;color:#fff;}
.iwim-app .era-2019 .addr{background:#0f2f52;color:#a9c6ea;border-radius:6px;}
.iwim-app .era-2023 .chrome{background:rgba(20,23,26,.06);color:#14171A;backdrop-filter:blur(12px);border-bottom:1px solid rgba(20,23,26,.1);}
.iwim-app .era-2023 .addr{background:rgba(20,23,26,.06);backdrop-filter:blur(8px);color:#14171A;border-radius:10px;border:1px solid rgba(20,23,26,.12);}
/* Mode switch inside the dark band */
.iwim-app .mode-switch{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line);
               border-radius:10px;padding:3px;margin-bottom:22px;flex-wrap:wrap;}
.iwim-app .mode-btn{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--text-dim);
            padding:8px 14px;border-radius:7px;transition:background .12s ease,color .12s ease;}
.iwim-app .mode-btn:hover{color:var(--text);}
.iwim-app .mode-btn.active{background:var(--teal);color:#fff;font-weight:600;}
.iwim-app .analyze-grid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:48px;align-items:start;margin-top:8px;}
@media (max-width:900px){
.iwim-app .analyze-grid{grid-template-columns:1fr;gap:26px;}
}
.iwim-app .analyze-left{position:sticky;top:24px;}
@media (max-width:900px){
.iwim-app .analyze-left{position:static;}
}
.iwim-app .mode-panel{display:none;}
.iwim-app .mode-panel.active{display:block;}
.iwim-app .mode-note{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);margin-bottom:20px;line-height:1.6;max-width:62ch;}
/* Questionnaire */
.iwim-app .quiz{display:flex;flex-direction:column;gap:26px;max-width:820px;}
.iwim-app .quiz-q{border-top:1px solid var(--line);padding-top:18px;}
.iwim-app .quiz-q:first-child{border-top:none;padding-top:0;}
.iwim-app .quiz-num{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.08em;margin-bottom:6px;}
.iwim-app .quiz-ask{font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:12px;line-height:1.35;}
.iwim-app .quiz-opts{display:flex;flex-wrap:wrap;gap:8px;}
.iwim-app .quiz-opt{all:unset;cursor:pointer;font-family:var(--body);font-size:13.5px;color:var(--text-dim);
            background:var(--surface);border:1px solid var(--line);padding:9px 14px;
            transition:border-color .12s ease,color .12s ease,background .12s ease;}
.iwim-app .quiz-opt:hover{color:var(--text);border-color:var(--text-dim);}
.iwim-app .quiz-opt.picked{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600;}
.iwim-app .quiz-opt:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.iwim-app .quiz-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px;}
.iwim-app .quiz-progress{font-family:var(--mono);font-size:12px;color:var(--text-dim);}
.iwim-app .quiz-reset{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--text-dim);}
.iwim-app .quiz-reset:hover{color:var(--amber);}
.iwim-app .quiz-because{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.iwim-app .quiz-because-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
                      color:var(--text-dim);margin-bottom:8px;}
.iwim-app .quiz-because li{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin-bottom:4px;}
.iwim-app .quiz-because ul{margin:0;padding-left:18px;}
.iwim-app .quiz-runner{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-top:14px;line-height:1.6;}
.iwim-app .analyzer-title{font-family:var(--display);font-size:22px;font-weight:700;margin:6px 0 8px;}
.iwim-app .analyzer-sub{color:var(--text-dim);font-size:13.5px;line-height:1.6;max-width:60ch;margin-bottom:20px;}
.iwim-app .analyzer-form{display:flex;gap:10px;max-width:560px;flex-wrap:wrap;}
.iwim-app .analyzer-input{flex:1;min-width:160px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-family:var(--body);font-size:14px;color:var(--text);background:var(--surface);}
.iwim-app .analyzer-input:focus{outline:2px solid var(--teal);outline-offset:1px;}
.iwim-app .analyzer-btn{all:unset;cursor:pointer;font-family:var(--display);font-weight:600;font-size:14px;
                color:#fff;background:var(--teal);padding:11px 22px;border-radius:8px;text-align:center;}
.iwim-app .analyzer-btn:hover{background:#856800;}
.iwim-app .analyzer-btn-secondary{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);}
.iwim-app .analyzer-btn-secondary:hover{background:rgba(156,122,0,.09);}
.iwim-app .analyzer-btn:disabled{opacity:.6;cursor:default;}
.iwim-app .analyzer-or{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin:14px 0 10px;}
.iwim-app .analyzer-upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.iwim-app .analyzer-file-btn{cursor:pointer;font-family:var(--mono);font-size:12.5px;color:var(--teal);
                     border:1px dashed var(--line);padding:10px 16px;border-radius:8px;transition:border-color .12s ease;}
.iwim-app .analyzer-file-btn:hover{border-color:var(--teal);}
.iwim-app .analyzer-file-preview{width:52px;height:34px;border-radius:6px;object-fit:cover;border:1px solid var(--line);}
.iwim-app .analyzer-file-name{font-family:var(--mono);font-size:12px;color:var(--text-dim);max-width:230px;
                      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.iwim-app .analyzer-file-clear{all:unset;cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--text-dim);}
.iwim-app .analyzer-file-clear:hover{color:#B23A3A;}
.iwim-app .analyzer-shot{width:100%;max-width:260px;border-radius:8px;border:1px solid var(--line);margin-bottom:14px;display:block;}
.iwim-app .analyzer-result{margin-top:24px;max-width:720px;}
.iwim-app .analyzer-status{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);}
.iwim-app .analyzer-error{font-family:var(--mono);font-size:12.5px;color:#B23A3A;background:rgba(178,58,58,.07);border:1px solid rgba(178,58,58,.22);padding:12px 14px;border-radius:8px;line-height:1.6;}
.iwim-app .analyzer-card{border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:var(--surface);}
.iwim-app .analyzer-era{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--amber);background:rgba(181,104,14,.1);border:1px solid rgba(181,104,14,.25);padding:5px 12px;margin-bottom:12px;}
.iwim-app .analyzer-site{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:8px;}
.iwim-app .analyzer-reasoning{font-size:14px;color:var(--text);line-height:1.65;margin-bottom:16px;}
.iwim-app .analyzer-chars{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px;}
@media (max-width:600px){
.iwim-app .analyzer-chars{grid-template-columns:1fr;}
}
/* Full-bleed dark band, the same trick .tabs uses: break out of the centred
   column with 100vw, then re-centre the content inside. The two dark bands
   now bracket the page top and bottom. */
.iwim-app footer{width:var(--bleed-w,100vw);margin-left:var(--bleed-l,calc(50% - 50vw));margin-top:72px;
     background:var(--band);border-top:none;
     color:var(--footer-text);font-size:14px;font-family:var(--body);line-height:1.7;}
.iwim-app .footer-inner{max-width:1280px;margin:0 auto;padding:32px 24px 40px;
     display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px 48px;}
.iwim-app footer a{color:var(--gold-bright);}
.iwim-app footer a:hover{color:var(--footer-hover);}
.iwim-app .footer-credit{flex:1 1 240px;max-width:34ch;text-wrap:pretty;}
.iwim-app .footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
     flex:0 1 auto;text-align:left;}
.iwim-app .footer-link{all:unset;box-sizing:border-box;cursor:pointer;color:var(--gold-bright);font-family:var(--body);font-size:14px;font-weight:500;}
.iwim-app .footer-link:hover{color:var(--footer-hover);}
.iwim-app .footer-link:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:3px;}
@media (max-width:640px){
.iwim-app .footer-inner{flex-direction:column;padding:26px 16px 32px;gap:28px;}
/* On a phone the priority inverts: navigation first, the skin picker second,
   and the credit and licence last, where reference material belongs. */
.iwim-app .footer-nav{order:1;}
.iwim-app .footer-skin{order:2;}
.iwim-app .footer-credit{order:3;}
.iwim-app .footer-legal{margin-top:0;}
.iwim-app .footer-skin{max-width:none;}
}
.iwim-app .back-to-top{all:unset;box-sizing:border-box;position:fixed;right:24px;bottom:24px;z-index:40;
              width:42px;height:42px;border-radius:50%;background:var(--band);
              display:flex;align-items:center;justify-content:center;cursor:pointer;
              box-shadow:0 4px 16px rgba(20,23,26,.22);opacity:0;pointer-events:none;
              transition:opacity .2s ease;}
.iwim-app .back-to-top.visible{opacity:1;pointer-events:auto;}
.iwim-app .back-to-top svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* --- Movements strip inside the content (mobile) ---------------------------
   The rail already lists movements, but on a phone it sits above the content
   and scrolls away the instant an era is picked, so nobody discovers that an
   era has movements at all. This repeats the list where the reader actually
   is. Desktop keeps the rail and hides this entirely, so the same list never
   appears twice on one screen. */
.iwim-app .era-movements{display:none !important;}
@media (max-width:880px){
.iwim-app .era-movements{display:block !important;margin:-4px 0 20px;}
.iwim-app .era-movements-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
     text-transform:uppercase;color:var(--band);font-weight:600;opacity:1;margin-bottom:8px;}
/* Full-bleed para a tira encostar nas duas bordas e ler como rolável. */
.iwim-app .era-movements-strip{display:flex;align-items:stretch;gap:6px;overflow-x:auto;
     scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
     padding:2px 16px 8px;margin:0 -16px;}
.iwim-app .era-movements-strip::-webkit-scrollbar{display:none;}
.iwim-app .era-movements-strip{scrollbar-width:none;}
/* Retangulares, como todos os outros chips do site. O amarelo é o mesmo
   dourado da aba ativa, então a tira lê como navegação e não como conteúdo. */
.iwim-app .era-movement-chip{all:unset;box-sizing:border-box;cursor:pointer;scroll-snap-align:start;
     flex-shrink:0;max-width:72vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
     padding:9px 13px;border:1px solid var(--band);border-radius:0;
     background:var(--gold-bright);color:var(--band);
     font-family:var(--body);font-size:14px;font-weight:500;line-height:1.2;
     transition:background .12s ease,color .12s ease;}
.iwim-app .era-movement-chip:active{background:var(--amber);color:#fff;}
.iwim-app .era-movement-chip.active{background:var(--band);border-color:var(--band);color:#fff;font-weight:600;}
.iwim-app .era-movement-chip[data-back]{font-family:var(--mono);font-size:12.5px;
     background:transparent;color:var(--band);}
.iwim-app .era-movement-chip:focus-visible{outline:2px solid var(--band);outline-offset:2px;}
/* A single chevron, stuck to the right edge over a short fade of the page
   colour, so the strip reads as continuing under it rather than ending. It
   disappears once there is nothing left to scroll to, because an arrow
   pointing at nothing teaches people to ignore arrows. */
.iwim-app .era-movements-more{position:sticky;right:0;flex-shrink:0;
     display:flex;align-items:center;justify-content:flex-end;
     min-width:40px;padding-right:2px;
     color:var(--band);font-size:24px;font-weight:700;line-height:1;
     background:linear-gradient(90deg,transparent,var(--bg) 55%);
     pointer-events:none;transition:opacity .18s ease;}
.iwim-app .era-movements-strip.at-end .era-movements-more{opacity:0;}
}

/* --- Subtopics that point at a movement on this timeline ------------------
   Seven of them used to restate a movement and then link off-site. They now
   go to the entry itself, so they need to read as internal navigation: an
   arrow that points right rather than out, and a line saying where it lands. */
.iwim-app .subtopic-title-internal{all:unset;box-sizing:border-box;cursor:pointer;
     font-family:var(--display);font-weight:600;font-size:15px;color:var(--text);
     margin-bottom:5px;display:inline-flex;align-items:center;gap:6px;}
.iwim-app .subtopic-title-internal:hover{color:var(--amber);}
.iwim-app .subtopic-title-internal:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;}
.iwim-app .subtopic-internal .subtopic-thumb{all:unset;box-sizing:border-box;cursor:pointer;
     flex-shrink:0;width:120px;height:76px;border-radius:8px;overflow:hidden;
     background:var(--surface-2);border:1px solid var(--line);}
.iwim-app .subtopic-internal-note{margin-top:8px;font-family:var(--mono);font-size:12px;
     letter-spacing:.04em;color:var(--teal);opacity:.85;}
.iwim-app .subtopic-internal-note::before{content:'↳ ';opacity:.6;}
@media (max-width:600px){
.iwim-app .subtopic-internal .subtopic-thumb{display:none;}
}

/* --- Attribution and legal ------------------------------------------------
   The credit sits under the frame rather than over the image: an overlay
   would fight the screenshot it is crediting, and this needs to be legible,
   not decorative. Small, dim, and always present. */
.iwim-app .shot-credit{margin-top:9px;font-family:var(--mono);font-size:10.5px;line-height:1.55;
     color:var(--text-dim);opacity:.75;}
.iwim-app .shot-credit:empty{display:none;}

.iwim-app .footer-legal{margin-top:16px;padding-top:14px;
     border-top:1px solid var(--footer-rule);
     font-size:12.5px;line-height:1.75;color:var(--footer-dim);max-width:70ch;}
.iwim-app .footer-legal a{color:var(--footer-text);text-decoration:underline;
     text-underline-offset:2px;}
.iwim-app .footer-legal a:hover{color:var(--footer-hover);}

/* ===========================================================================
   ERA SKINS
   ---------------------------------------------------------------------------
   The site can wear each era it catalogues. Structure never moves: every skin
   only reassigns the design tokens declared at the top of this file, plus a
   handful of era-specific switches (radius, shadow, band treatment). If a skin
   needs a layout change to work, the skin is wrong.

   Typefaces cost nothing extra. The early skins use the Core fonts Microsoft
   gave away in 1996 — Times, Comic Sans, Verdana, Trebuchet, Georgia, Impact —
   which are installed locally on virtually every machine and are the actually
   period-correct choice. The later skins reuse faces the Typography tab
   already loads. No skin adds a single network request.
   =========================================================================== */

.iwim-app[data-skin]{transition:background .25s ease,color .25s ease;}

/* Shared switches skins flip. Defaults match the site's own design. */
/* O rodapé é escuro por padrão, mas os skins claros o invertem. Tudo lá
   dentro lê destes tokens, nunca de um branco fixo — foi isso que fazia o
   texto sumir em The Bare Web e Flat Design. */
.iwim-app{--r-sm:4px;--r-md:8px;--r-lg:12px;--r-pill:999px;
          --shadow:none;--chrome-weight:400;--link-deco:none;
          --footer-text:rgba(255,255,255,.72);
          --footer-dim:rgba(255,255,255,.45);
          --footer-hover:#ffffff;
          --footer-rule:rgba(255,255,255,.16);
}
.iwim-app[data-skin] .fact,
.iwim-app[data-skin] .subtopic,
.iwim-app[data-skin] .term-tag,
.iwim-app[data-skin] .tab,
.iwim-app[data-skin] .movement-btn,
.iwim-app[data-skin] .era-btn{border-radius:var(--r-sm);}
.iwim-app[data-skin] .monitor,
.iwim-app[data-skin] .intro-card{border-radius:var(--r-md);box-shadow:var(--shadow);}

/* --- 1991 · The Bare Web ------------------------------------------------- */
.iwim-app[data-skin="1991"]{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F2F2F2;--line:#000000;
  --text:#000000;--text-dim:#333333;
  --teal:#0000EE;--amber:#551A8B;--gold-bright:#0000EE;--band:#FFFFFF;
  --body:'Times New Roman',Times,serif;--display:'Times New Roman',Times,serif;
  --title:'Times New Roman',Times,serif;--mono:'Courier New',monospace;
  --r-sm:0;--r-md:0;--r-lg:0;--r-pill:0;--link-deco:underline;
}
.iwim-app[data-skin="1991"] .tabs{background:#FFF;border-bottom:1px solid #000;}
.iwim-app[data-skin="1991"] .tab{color:#0000EE;text-decoration:underline;text-transform:none;letter-spacing:0;}
.iwim-app[data-skin="1991"] .tab.active{background:transparent;color:#551A8B;font-weight:700;}
.iwim-app[data-skin="1991"]{--footer-text:#000000;--footer-dim:#333333;
  --footer-hover:#551A8B;--footer-rule:#000000;}
.iwim-app[data-skin="1991"] footer{background:#FFF;color:#000;border-top:1px solid #000;}
.iwim-app[data-skin="1991"] footer a,
.iwim-app[data-skin="1991"] .footer-link{color:#0000EE;text-decoration:underline;}
.iwim-app[data-skin="1991"] a{text-decoration:underline;}
.iwim-app[data-skin="1991"] .iwim-wordmark{font-variation-settings:normal;font-weight:700;
  text-transform:none;letter-spacing:0;line-height:1;}

/* --- 1996 · Web 1.0 / GeoCities ------------------------------------------ */
.iwim-app[data-skin="1996"]{
  /* --bg is the silver the content actually sits on; the navy is the band and
     the surround, which is where 1996 really used it. It was the other way
     round before, which had the tokens describing a page that never rendered. */
  --bg:#C0C0C0;--surface:#C0C0C0;--surface-2:#E0E0E0;--line:#808080;
  --text:#000000;--text-dim:#333333;
  --teal:#0000FF;--amber:#990099;--gold-bright:#FFFF00;--band:#000080;
  --body:'Comic Sans MS','Times New Roman',cursive;--display:'Comic Sans MS',cursive;
  --title:Impact,'Arial Black',sans-serif;--mono:'Courier New',monospace;
  --r-sm:0;--r-md:0;--r-lg:0;--r-pill:0;
}
.iwim-app[data-skin="1996"]{background:#000080;}
.iwim-app[data-skin="1996"] .shell{background:#C0C0C0;}
.iwim-app[data-skin="1996"] .tabs{background:#000080;}
.iwim-app[data-skin="1996"] .tab{color:#FFFF00;}
.iwim-app[data-skin="1996"] .tab.active{background:#FFFF00;color:#000080;}
.iwim-app[data-skin="1996"] .fact,
.iwim-app[data-skin="1996"] .subtopic{border:2px outset #C0C0C0;background:#C0C0C0;}
.iwim-app[data-skin="1996"] footer{background:#000080;color:#FFF;}
.iwim-app[data-skin="1996"] .iwim-wordmark{color:#FFFF00;-webkit-text-stroke:2px #FF00FF;}

/* --- 1999 · Dot-Com Boom -------------------------------------------------- */
.iwim-app[data-skin="1999"]{
  --bg:#FFFFFF;--surface:#F0F4F8;--surface-2:#DCE6F0;--line:#7F9DB9;
  --text:#000033;--text-dim:#334466;
  --teal:#003399;--amber:#C46A00;--gold-bright:#FF9900;--band:#003399;
  --body:Verdana,Geneva,sans-serif;--display:Verdana,Geneva,sans-serif;
  --title:'Arial Black',Arial,sans-serif;--mono:'Courier New',monospace;
  --r-sm:2px;--r-md:3px;--r-lg:3px;--r-pill:3px;
}
.iwim-app[data-skin="1999"] .tabs{background:linear-gradient(#0055CC,#003399);}
.iwim-app[data-skin="1999"] .tab.active{background:#FF9900;color:#003399;}
.iwim-app[data-skin="1999"] footer{background:linear-gradient(#003399,#001A4D);}

/* --- 2006 · Web 2.0 ------------------------------------------------------- */
.iwim-app[data-skin="2006"]{
  --bg:#FFFFFF;--surface:#F7F7F7;--surface-2:#EDEDED;--line:#CCCCCC;
  --text:#333333;--text-dim:#6E6E6E;
  --teal:#2F6DA8;--amber:#D95400;--gold-bright:#8DC63F;--band:#4A4A4A;
  --body:'Trebuchet MS','Lucida Grande',sans-serif;--display:'Trebuchet MS',sans-serif;
  --title:'Trebuchet MS','Lucida Grande',sans-serif;--mono:'Courier New',monospace;
  --r-sm:6px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --shadow:0 2px 5px rgba(0,0,0,.14);
}
.iwim-app[data-skin="2006"] .tabs{background:linear-gradient(#5A5A5A,#3A3A3A);}
.iwim-app[data-skin="2006"] .tab.active{background:linear-gradient(#A5D65C,#78B22E);color:#FFF;}
.iwim-app[data-skin="2006"] .fact,
.iwim-app[data-skin="2006"] .subtopic{background:linear-gradient(#FFF,#F2F2F2);
  box-shadow:0 1px 3px rgba(0,0,0,.12);}
.iwim-app[data-skin="2006"]{--footer-text:rgba(255,255,255,.9);--footer-dim:rgba(255,255,255,.72);}
.iwim-app[data-skin="2006"] .iwim-wordmark{font-variation-settings:normal;letter-spacing:-.03em;}

/* --- 2007 · Skeuomorphism ------------------------------------------------- */
.iwim-app[data-skin="2007"]{
  --bg:#D8D3C8;--surface:#F5F1E8;--surface-2:#E8E2D5;--line:#B0A695;
  --text:#2B2620;--text-dim:#5A5147;
  --teal:#1F5480;--amber:#9C6B2F;--gold-bright:#C9A227;--band:#3A342C;
  --body:Georgia,'Times New Roman',serif;--display:Georgia,serif;
  --title:Georgia,serif;--mono:'Courier New',monospace;
  --r-sm:6px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --shadow:0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
}
.iwim-app[data-skin="2007"] .tabs{background:linear-gradient(#4A423A,#2A241E);}
.iwim-app[data-skin="2007"] .fact,
.iwim-app[data-skin="2007"] .subtopic{background:linear-gradient(#FDFBF5,#EFE9DC);
  border:1px solid #B0A695;box-shadow:0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 #FFF;}
.iwim-app[data-skin="2007"] footer{background:linear-gradient(#3A342C,#241F19);}

/* --- 2013 · Flat Design ---------------------------------------------------
   CONTRAST: intentionally below AA, and left that way. #8E8E93 and #007AFF are
   Apple's own iOS 7 system grey and system blue, and the thin low-contrast text
   is precisely what the release was criticised for at the time. Raising it here
   would make the skin more readable and less true, and the site has a card
   arguing that this exact threshold is where a trend meets production. The
   failure is the exhibit. contrast-audit.py is told to expect it. */
.iwim-app[data-skin="2013"]{
  --bg:#FFFFFF;--surface:#F7F7F7;--surface-2:#EFEFF4;--line:#E5E5EA;
  --text:#000000;--text-dim:#8E8E93;
  --teal:#007AFF;--amber:#FF3B30;--gold-bright:#FFCC00;--band:#F7F7F7;
  --body:'Helvetica Neue',Helvetica,Arial,sans-serif;--display:'Helvetica Neue',Arial,sans-serif;
  --title:'Helvetica Neue',Arial,sans-serif;--mono:Menlo,'Courier New',monospace;
  --r-sm:0;--r-md:0;--r-lg:0;--r-pill:999px;--shadow:none;
}
.iwim-app[data-skin="2013"] .tabs{background:#F7F7F7;border-bottom:1px solid #E5E5EA;}
.iwim-app[data-skin="2013"] .tab{color:#007AFF;font-weight:300;}
.iwim-app[data-skin="2013"] .tab.active{background:#007AFF;color:#FFF;}
.iwim-app[data-skin="2013"] .fact,
.iwim-app[data-skin="2013"] .subtopic{border:1px solid #E5E5EA;box-shadow:none;}
.iwim-app[data-skin="2013"]{--footer-text:#3A3A3C;--footer-dim:#8E8E93;
  --footer-hover:#000000;--footer-rule:#D1D1D6;}
.iwim-app[data-skin="2013"] footer{background:#F7F7F7;color:#3A3A3C;border-top:1px solid #E5E5EA;}
.iwim-app[data-skin="2013"] footer a,
.iwim-app[data-skin="2013"] .footer-link{color:#007AFF;}
.iwim-app[data-skin="2013"] .iwim-wordmark{font-variation-settings:normal;font-weight:200;letter-spacing:-.01em;}

/* --- 2015 · Material Design -----------------------------------------------
   CONTRAST: #757575 is the 54%-black secondary text the Material spec itself
   prescribed. It lands at 4.41:1 here, a hair under AA, which is a real
   property of the specification rather than a slip in this file. Left as is. */
.iwim-app[data-skin="2015"]{
  --bg:#FAFAFA;--surface:#FFFFFF;--surface-2:#F5F5F5;--line:#E0E0E0;
  --text:#212121;--text-dim:#757575;
  --teal:#3F51B5;--amber:#FF4081;--gold-bright:#FFC107;--band:#3F51B5;
  --body:Roboto,Arial,sans-serif;--display:Roboto,Arial,sans-serif;
  --title:Roboto,Arial,sans-serif;--mono:'Roboto Mono','Courier New',monospace;
  --r-sm:4px;--r-md:4px;--r-lg:8px;--r-pill:999px;
  --shadow:0 1px 3px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.23);
}
.iwim-app[data-skin="2015"] .tabs{background:#3F51B5;box-shadow:0 2px 4px rgba(0,0,0,.24);}
.iwim-app[data-skin="2015"] .tab.active{background:transparent;color:#FFF;
  box-shadow:inset 0 -3px 0 #FF4081;border-radius:0;}
.iwim-app[data-skin="2015"] .fact,
.iwim-app[data-skin="2015"] .subtopic{background:#FFF;box-shadow:var(--shadow);border:none;}
.iwim-app[data-skin="2015"] footer{background:#303F9F;}
.iwim-app[data-skin="2015"] .iwim-wordmark{font-variation-settings:normal;font-weight:900;}

/* --- 2019 · Minimalism & Bold Type ----------------------------------------
   CONTRAST: #6B7C93 on white is Stripe's own slate of the period and sits at
   4.26:1. Kept, because the whole era's look depends on that soft grey; the
   cyan accent that used to sit beside it was not Stripe's and has been fixed. */
.iwim-app[data-skin="2019"]{
  --bg:#FFFFFF;--surface:#FAFAFA;--surface-2:#F4F4F5;--line:#E4E4E7;
  --text:#0A2540;--text-dim:#6B7C93;
  --teal:#635BFF;--amber:#0891B2;--gold-bright:#635BFF;--band:#0A2540;
  --body:'Space Grotesk','IBM Plex Sans',sans-serif;--display:'Sora','IBM Plex Sans',sans-serif;
  --title:'Sora','IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-pill:999px;
  --shadow:0 2px 8px rgba(10,37,64,.06);
}
.iwim-app[data-skin="2019"] .tabs{background:#0A2540;}
.iwim-app[data-skin="2019"] .tab.active{background:#635BFF;color:#FFF;}
.iwim-app[data-skin="2019"] footer{background:#0A2540;}
.iwim-app[data-skin="2019"] .iwim-wordmark{font-variation-settings:normal;font-weight:700;letter-spacing:-.045em;}

/* --- 2023 · Glassmorphism & the AI Era ------------------------------------
   The one skin that needs more than tokens, because glass is not a colour: it
   is a background showing through a blur. There has to be something behind the
   panel worth blurring, so the page gets a dark gradient with two coloured
   light sources, and every surface becomes a translucent pane over it. */
.iwim-app[data-skin="2023"]{
  --bg:#0B0D10;--surface:rgba(255,255,255,.06);--surface-2:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.14);
  --text:#F2F4F7;--text-dim:#A6B0BF;
  --teal:#A78BFA;--amber:#22D3EE;--gold-bright:#C4B5FD;--band:rgba(255,255,255,.05);
  --body:'Geist','IBM Plex Sans',sans-serif;--display:'Geist','IBM Plex Sans',sans-serif;
  --title:'Geist','IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace;
  --r-sm:10px;--r-md:18px;--r-lg:24px;--r-pill:999px;
  --shadow:0 8px 32px rgba(0,0,0,.55);
  --footer-text:rgba(255,255,255,.78);--footer-dim:rgba(255,255,255,.5);
  --footer-hover:#ffffff;--footer-rule:rgba(255,255,255,.14);
  /* Fixed, so the light sources stay put while the page scrolls past them —
     which is what makes the panes read as glass rather than as grey boxes. */
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(139,92,246,.4), transparent 60%),
    radial-gradient(900px 600px at 92% 8%, rgba(34,211,238,.26), transparent 62%),
    radial-gradient(800px 800px at 65% 105%, rgba(236,72,153,.2), transparent 60%),
    linear-gradient(170deg,#0B0D10 0%,#12151C 55%,#0A0C10 100%);
  background-attachment:fixed;
}
.iwim-app[data-skin="2023"] .shell{background:transparent;}

/* The glass recipe, applied to every surface at once: a translucent fill, a
   real backdrop blur with saturation lifted so colour bleeds through, a hairline
   border, and a bright inset top edge standing in for the lit rim of a pane. */
.iwim-app[data-skin="2023"] .fact,
.iwim-app[data-skin="2023"] .subtopic,
.iwim-app[data-skin="2023"] .monitor,
.iwim-app[data-skin="2023"] .intro-card,
.iwim-app[data-skin="2023"] .term-tag,
.iwim-app[data-skin="2023"] .tab,
.iwim-app[data-skin="2023"] .era-btn,
.iwim-app[data-skin="2023"] .movement-btn,
.iwim-app[data-skin="2023"] .footer-link,
.iwim-app[data-skin="2023"] .skin-select,
.iwim-app[data-skin="2023"] .search-input{
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 20px rgba(0,0,0,.3);
}
.iwim-app[data-skin="2023"] .term-tag,
.iwim-app[data-skin="2023"] .tab,
.iwim-app[data-skin="2023"] .footer-link{padding:8px 14px;border-radius:999px;}
.iwim-app[data-skin="2023"] .fact:hover,
.iwim-app[data-skin="2023"] .subtopic:hover,
.iwim-app[data-skin="2023"] .term-tag:hover,
.iwim-app[data-skin="2023"] .tab:hover{background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.28);}
.iwim-app[data-skin="2023"] .tabs{background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.12);}
.iwim-app[data-skin="2023"] .tab.active{background:rgba(167,139,250,.85);color:#0B0D10;
  border-color:rgba(167,139,250,.5);box-shadow:0 4px 18px rgba(167,139,250,.4);}
.iwim-app[data-skin="2023"] footer{background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.12);}
.iwim-app[data-skin="2023"] .skin-select option{background:#12151C;color:#F2F4F7;}
.iwim-app[data-skin="2023"] .iwim-wordmark{font-variation-settings:normal;font-weight:600;
  letter-spacing:-.04em;
  background:linear-gradient(100deg,#fff 15%,#C4B5FD 50%,#67E8F9 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
/* Not everyone can tolerate this much translucency. */
@media (prefers-reduced-transparency:reduce){
.iwim-app[data-skin="2023"] .fact,
.iwim-app[data-skin="2023"] .subtopic,
.iwim-app[data-skin="2023"] .monitor,
.iwim-app[data-skin="2023"] .term-tag,
.iwim-app[data-skin="2023"] .tab{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:#1A1E26;}
}

/* --- Footer: menu label and the era-skin picker --------------------------- */
.iwim-app .footer-nav-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;
     text-transform:uppercase;color:var(--footer-dim);margin-bottom:9px;display:block;}
/* Três colunas na ordem em que fazem sentido ler: quem fez, com que roupa,
   para onde ir. Sem régua: a distância entre as colunas já separa. */
.iwim-app .footer-skin{order:2;flex:1 1 260px;max-width:400px;}
.iwim-app .footer-credit{order:1;}
.iwim-app .footer-nav{order:3;}
.iwim-app .skin-select{width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;
     font-family:var(--body);font-size:13.5px;color:currentColor;
     background:color-mix(in srgb,currentColor 8%,transparent);
     border:1px solid color-mix(in srgb,currentColor 30%,transparent);
     border-radius:5px;padding:10px 34px 10px 12px;
     background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                      linear-gradient(135deg,currentColor 50%,transparent 50%);
     background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
     background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.iwim-app .skin-select:hover{background-color:color-mix(in srgb,currentColor 15%,transparent);}
.iwim-app .skin-select:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;}
.iwim-app .skin-select option{background:#14171A;color:#fff;}
.iwim-app[data-skin="1991"] .skin-select option,
.iwim-app[data-skin="2013"] .skin-select option{background:#fff;color:#000;}
.iwim-app .skin-note{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--footer-dim);}

/* --- 2023 skin: rail and reading size -------------------------------------
   Two corrections that only apply here. Panes of glass should not be welded
   together by a hairline, so the rail dividers come off and the cards get
   real space between them instead. And light text on a dark, blurred field
   reads smaller than the same size does on white, so the body copy gets a
   step up rather than staying honest to a number. */
.iwim-app[data-skin="2023"] .rail-item{border-top:none;margin-bottom:7px;}
.iwim-app[data-skin="2023"] .rail-item .era-btn{padding:15px 14px;border-radius:14px;
     background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
     -webkit-backdrop-filter:blur(14px) saturate(160%);
     backdrop-filter:blur(14px) saturate(160%);
     transition:background .14s ease,border-color .14s ease;}
.iwim-app[data-skin="2023"] .rail-item .era-btn:hover{background:rgba(255,255,255,.1);
     border-color:rgba(255,255,255,.2);}
.iwim-app[data-skin="2023"] .rail-item.active .era-btn{background:rgba(167,139,250,.16);
     border-color:rgba(167,139,250,.42);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 18px rgba(0,0,0,.35);}

.iwim-app[data-skin="2023"] .fact .note{font-size:16.5px;line-height:1.68;}
.iwim-app[data-skin="2023"] .fact .term{font-size:16.5px;}
.iwim-app[data-skin="2023"] .desc,
.iwim-app[data-skin="2023"] .subtopic-desc,
.iwim-app[data-skin="2023"] .intro-body p{font-size:15.5px;line-height:1.7;}
.iwim-app[data-skin="2023"] .panel-title{letter-spacing:-.02em;}

/* Shown when the model admits it could not see the page. The whole project
   rests on not asserting things without evidence; the analyser has to hold
   the same line, out loud, rather than presenting a guess as a reading. */
.iwim-app .analyzer-warning{margin:14px 0 0;padding:12px 14px;
     background:color-mix(in srgb,var(--amber) 12%,transparent);
     border-left:3px solid var(--amber);border-radius:0 var(--r-sm) var(--r-sm) 0;
     font-size:13px;line-height:1.55;color:var(--text);}

/* --- 1996b · Space Jam ------------------------------------------------------
   The era of exactly one site, so the skin is that site: starry navy tile,
   the ring of planet-buttons, and type that was never meant to be read at
   length. It is the one skin here that copies a page rather than a period. */
.iwim-app[data-skin="1996b"]{
  --bg:#000000;--surface:#111133;--surface-2:#1A1A4D;--line:#4444AA;
  --text:#FFFFFF;--text-dim:#CCCCFF;
  --teal:#FFFF00;--amber:#FF6600;--gold-bright:#FFFF00;--band:#000033;
  --body:'Comic Sans MS',Verdana,cursive;--display:'Comic Sans MS',cursive;
  --title:Impact,'Arial Black',sans-serif;--mono:'Courier New',monospace;
  --r-sm:0;--r-md:0;--r-lg:0;--r-pill:999px;
  --footer-text:#CCCCFF;--footer-dim:#9999DD;--footer-hover:#FFFF00;
  --footer-rule:rgba(255,255,255,.2);
  /* The starfield, drawn rather than fetched: three sizes of dot on a tile,
     which is exactly how the original did it, minus the GIF. */
  background-color:#000018;
  background-image:
    radial-gradient(1.5px 1.5px at 22px 30px, #fff, transparent),
    radial-gradient(1px 1px at 78px 62px, #ddddff, transparent),
    radial-gradient(1px 1px at 130px 18px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 168px 96px, #ccccff, transparent),
    radial-gradient(1px 1px at 46px 128px, #fff, transparent);
  background-size:200px 160px;
  background-attachment:fixed;
}
.iwim-app[data-skin="1996b"] .shell{background:transparent;}
.iwim-app[data-skin="1996b"] .tabs{background:#000033;border-bottom:2px solid #FFFF00;}
.iwim-app[data-skin="1996b"] .tab{color:#FFFF00;}
.iwim-app[data-skin="1996b"] .tab.active{background:#FFFF00;color:#000033;}
.iwim-app[data-skin="1996b"] .fact,
.iwim-app[data-skin="1996b"] .subtopic,
.iwim-app[data-skin="1996b"] .monitor{background:rgba(17,17,51,.82);
  border:2px solid #4444AA;}
/* The planet buttons: a circle with a light source top-left, which is the
   only piece of depth the 1996 page had and the reason it still reads. */
.iwim-app[data-skin="1996b"] .rail-item{border-top:none;margin-bottom:6px;}
.iwim-app[data-skin="1996b"] .rail-item .era-btn{border-radius:999px;
  background:radial-gradient(circle at 32% 28%, #5555CC, #1A1A4D 70%);
  border:2px solid #6666DD;text-align:center;}
.iwim-app[data-skin="1996b"] .rail-item.active .era-btn{
  background:radial-gradient(circle at 32% 28%, #FFDD44, #CC6600 70%);
  border-color:#FFFF00;color:#000033;}
.iwim-app[data-skin="1996b"] footer{background:#000033;border-top:2px solid #FFFF00;}
.iwim-app[data-skin="1996b"] .iwim-wordmark{color:#FFFF00;-webkit-text-stroke:2px #FF6600;
  letter-spacing:.02em;}
.iwim-app[data-skin="1996b"] .skin-select option{background:#000033;color:#fff;}

/* ===========================================================================
   READING SIZE
   ---------------------------------------------------------------------------
   Every block of running prose is 16px at 1.6, set in one place rather than
   each component carrying a number picked at a different moment. There are two
   card shapes on this site and they had drifted apart: .note-block (a sourced
   note, title plus body) and .fact (a characteristic, term plus note). Both
   now read at the same size, because from the page they look like the same
   thing and behaving differently was the whole problem.

   Labels, chips, addresses, years and captions are deliberately NOT here. They
   are scanned rather than read, and holding them to body size would flatten
   the hierarchy the layout depends on.

   Last in the file so it wins without hunting down each earlier value.
   =========================================================================== */
.iwim-app .desc,
.iwim-app .note-body,
.iwim-app .fact .note,
.iwim-app .subtopic-desc,
.iwim-app .intro-body p,
.iwim-app .history-body p,
.iwim-app .about-body p,
.iwim-app .term-def,
.iwim-app .glossary-def,
.iwim-app .analyzer-reasoning,
.iwim-app .analyzer-warning,
.iwim-app .quiz-because,
.iwim-app .quiz-runner,
.iwim-app .src-note{
  font-size:16px;
  line-height:1.6;
}

/* Note bodies carry full text colour, not the dimmed one. They are the
   substance of a card, not an aside under it. */
.iwim-app .note-body,
.iwim-app .fact .note{color:var(--text);}

/* The heading of a sourced note, one step above the body it introduces. */
.iwim-app .note-title{font-size:18px;line-height:1.35;}

/* Characteristics are a denser object than sourced notes: short observations
   read as a set rather than as prose, so they sit a step below and tighter. */
.iwim-app .fact .note{font-size:15px;line-height:1.5;}
.iwim-app .fact .term{font-size:16px;line-height:1.2;}

/* The 2023 overrides existed only because the base size was too small on a
   dark field. With a 16px base they are just inconsistency. */
.iwim-app[data-skin="2023"] .fact .note,
.iwim-app[data-skin="2023"] .note-body,
.iwim-app[data-skin="2023"] .desc,
.iwim-app[data-skin="2023"] .subtopic-desc,
.iwim-app[data-skin="2023"] .intro-body p{font-size:inherit;line-height:inherit;}
.iwim-app[data-skin="2023"] .note-title{font-size:18px;}
.iwim-app[data-skin="2023"] .fact .term{font-size:16px;}

/* ---------------------------------------------------------------------------
   FOOTER
   The band used to stop short of the window because it sits inside .shell,
   which carries 80px of bottom padding. Cancelling that padding with a
   matching negative margin lets the black run to the actual bottom edge,
   the same trick header.top uses at the top of the page.
   --------------------------------------------------------------------------- */
.iwim-app footer{margin-bottom:-80px;}
.iwim-app .footer-credit,
.iwim-app .footer-link,
.iwim-app .footer-nav-label,
.iwim-app .skin-note,
.iwim-app .skin-select{font-size:15px;}
/* The copyright and licence text stays smaller on purpose: it is reference
   material you consult, not part of the reading. */
.iwim-app .footer-legal,
.iwim-app .footer-legal p{font-size:12.5px;line-height:1.75;}

/* ===========================================================================
   HOST-THEME DEFENCE
   ---------------------------------------------------------------------------
   The plugin renders inside whatever markup the surrounding theme and editor
   put around it, and some of that markup carries styles this app never asked
   for. The specific failure that prompted this: the shortcode ended up inside
   a preformatted block, so every paragraph in the whole map inherited
   monospace and pre-wrapped whitespace, and nothing in style.css said
   otherwise because the tokens only set font-family on named components.

   These rules are not cosmetic. They re-establish the assumptions the rest of
   this file is written against, so the app looks the same in a blank theme, a
   blog theme with a sidebar, or inside a <pre>.
   =========================================================================== */
.iwim-app{
  font-family:var(--body);
  white-space:normal;
  text-align:left;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
/* <pre> and <code> set both of these on every descendant, and inheritance
   carries them straight through the app. Reset them at the top and let the
   components reassign what they actually want. */
.iwim-app *{white-space:normal;}
.iwim-app .mono,
.iwim-app [class*="addr"],
.iwim-app [class*="year"],
.iwim-app [class*="label"]{font-family:var(--mono);}
.iwim-app pre,
.iwim-app code{white-space:pre-wrap;font-family:var(--mono);}