@charset "UTF-8";

/* One ink colour, clear paper, physical edges. The existing layout and controls remain. */
:root {
  --desk: #122ba8;
  --desk-soft: #0b207d;
  --ink: #101a35;
  --paper: #fcfcfa;
  --line: #142d9c;
  --muted: #424d65;
  --yellow: #122ba8;
  --copper: #122ba8;
  --blue: #122ba8;
  --blue-deep: #081d73;
}
body { background: var(--desk); }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline-color: #101a35; }
.draft-strip { color: #fff; }
.site-head { color: #fff; }
.brand>span { color: #fff; }
.brand>b { font-weight: 800; }
.site-head>nav>a:hover { border-color: #fff; }
.demo-link { color: var(--blue); background: #fff; border: 2px solid #fff; border-radius: 3px 3px 10px 3px; box-shadow: 3px 4px 0 var(--blue-deep); font-weight: 700; }
.demo-link:hover { background: #fff; transform: translateY(-1px); }
.skip { background: #fff; }
.opening { background: var(--paper); border: 2px solid var(--blue-deep); border-radius: 22px 3px 3px 3px; box-shadow: 8px 9px 0 var(--blue-deep); }
.opening:before { width: 7px; height: 7px; background: var(--blue); box-shadow: none; }
.eyebrow { color: var(--blue); font-weight: 700; }
.opening h1 { font-weight: 800; letter-spacing: -1.5px; }
.opening h1>span { color: var(--blue); }
.opening-copy { color: var(--ink); }
.free-note { border: 0; min-width: 335px; max-width: 365px; padding: 0; gap: 17px; }
.free-note>b { display: grid; place-items: center; width: 94px; height: 94px; flex-shrink: 0; background: #fff; color: var(--blue); border: 3px solid var(--blue); border-radius: 50%; box-shadow: 4px 4px 0 var(--blue); font-size: 47px; letter-spacing: -3px; transform: rotate(-8deg); }
.free-note>span { font-size: 15px; color: var(--ink); }
.free-note small { color: var(--muted); font-size: 11px; }
.free-note u { color: var(--blue); }

/* A substantial slider that reads as a control even in a still image. */
.scope-console { color: #fff; background: var(--blue); border: 2px solid var(--blue-deep); border-radius: 4px 18px 4px 4px; box-shadow: inset 0 2px 0 #ffffff30, 0 5px 0 var(--blue-deep); padding: 17px 23px 14px; }
.scope-heading label { font-size: 23px; font-weight: 700; }
.scope-heading p { color: #fff; font-size: 12px; }
.scope-indicator { background: #fff; color: var(--blue); border: 2px solid var(--blue-deep); border-radius: 3px; padding: 7px 12px; box-shadow: 3px 3px 0 var(--blue-deep); }
.scope-indicator>span:first-child { font-size: 36px; }
.scope-indicator>span:last-child, .scope-indicator b { color: var(--blue); font-weight: 700; }
.range-row { grid-template-columns: 39px 1fr 39px; gap: 20px; margin-top: 12px; }
.range-row>button { width: 39px; height: 39px; border: 2px solid var(--blue-deep); border-radius: 4px; background: #fff; color: var(--blue); box-shadow: 0 4px 0 var(--blue-deep); font-size: 28px; font-weight: 700; margin-top: 12px; }
.range-row>button:hover { background: #fff; box-shadow: 0 4px 0 var(--blue-deep), 0 0 0 2px #fff; }
.range-row>button:active { box-shadow: 0 1px 0 var(--blue-deep); }
.range-row>button:disabled { opacity: .65; }
.range-bed>input { height: 52px; }
.range-ticks { top: 0; left: 25px; right: 25px; }
.range-ticks>i { height: 7px; width: 2px; background: #fff; }
.range-bed>input::-webkit-slider-runnable-track { height: 22px; border-radius: 3px; border: 2px solid var(--blue-deep); background: linear-gradient(to right, #fff 0 var(--fill), var(--blue-deep) var(--fill) 100%); box-shadow: inset 0 2px 0 #ffffff50, 0 2px 0 #ffffff70; }
.range-bed>input::-webkit-slider-thumb { width: 52px; height: 48px; margin-top: -15px; border: 2px solid var(--blue-deep); border-radius: 5px; background: repeating-linear-gradient(90deg, transparent 0 4px, var(--blue) 4px 6px, transparent 6px 10px) center/30px 19px no-repeat, #fff; box-shadow: inset 0 3px 0 #fff, 0 5px 0 var(--blue-deep), 2px 8px 8px #00000035; }
.range-bed>input::-moz-range-track { height: 22px; border: 2px solid var(--blue-deep); border-radius: 3px; background: var(--blue-deep); box-shadow: 0 2px 0 #ffffff70; }
.range-bed>input::-moz-range-progress { background: #fff; height: 22px; border-radius: 3px; }
.range-bed>input::-moz-range-thumb { width: 48px; height: 44px; border: 2px solid var(--blue-deep); border-radius: 5px; background: repeating-linear-gradient(90deg, transparent 0 4px, var(--blue) 4px 6px, transparent 6px 10px) center/30px 19px no-repeat, #fff; box-shadow: 0 5px 0 var(--blue-deep); }
.scope-console input:focus-visible, .scope-console button:focus-visible { outline-color: #fff; }
.range-captions { color: #fff; font-size: 10px; }
.scope-status { border-color: #ffffff70; }
.scope-status output { color: #fff; font-size: 17px; font-weight: 700; }
.scope-status>p { color: #fff; font-size: 8px; max-width: 340px; }
.stage-status, .stage-status[data-state="growing"], .stage-status[data-state="idea"] { background: #fff; color: var(--blue); border-radius: 1px; font-size: 9px; font-weight: 700; }
.stage-status[data-state="growing"] { border: 1px dashed var(--blue); }
.stage-status[data-state="idea"] { background: var(--blue-deep); color: #fff; outline: 1px solid #fff; outline-offset: -1px; }

/* Different shapes and light/dark faces, all made from the same ink. */
.workspace-toolbar>span, .motion-choice { color: var(--blue); font-weight: 700; }
.motion-choice input { accent-color: var(--blue); }
.workspace-toolbar button { color: var(--blue); border: 2px solid var(--blue); border-radius: 4px; padding: 3px 9px; font-weight: 700; box-shadow: 2px 2px 0 var(--blue); background: #fff; }
.workspace-toolbar button:hover { color: #fff; background: var(--blue); }
.tiles { gap: 15px; }
.work-tile { background: #fff; color: var(--ink); border: 2px solid var(--blue); border-radius: 5px; box-shadow: 3px 4px 0 var(--blue); }
.work-tile:hover { border-color: var(--blue-deep); box-shadow: 3px 4px 0 var(--blue-deep); }
.work-tile[aria-pressed="true"] { outline: 3px solid var(--blue); outline-offset: 3px; }
.work-tile h2 { font-weight: 800; }
.work-tile>p { font-size: 11px; line-height: 1.6; }
.tile-meta { color: var(--blue); font-weight: 700; }
.tile-meta>i { font-weight: 700; }
.tile-bottom { color: var(--blue); }
.core-tile { background: var(--blue); color: #fff; border: 2px solid var(--blue-deep); border-radius: 26px 5px 5px 5px; box-shadow: inset 0 3px 0 #ffffff25, 4px 5px 0 var(--blue-deep); }
.core-tile:after { content: ""; box-sizing: border-box; width: 205px; height: 205px; border: 37px solid #ffffff12; border-radius: 50%; position: absolute; top: -75px; right: 0; pointer-events: none; }
.core-tile .tile-meta, .core-tile .tile-bottom { color: #fff; }
.core-tile[aria-pressed="true"] { outline: 3px solid var(--blue); outline-offset: 3px; }
.core-wordmark { color: #fff; opacity: 1; font-weight: 800; }
.core-tile>p { font-size: 13px; }
.paper-stack>span { background: #fff; border-color: var(--blue-deep); color: var(--blue); box-shadow: 2px 3px 0 var(--blue-deep); }
.paper-stack>span:first-child { background: #fff; }
.customer-tile { border-radius: 5px 20px 5px 5px; }
.customer-tile .tile-meta { color: var(--blue); }
.index-drawing>i { border: 2px solid var(--blue); color: var(--blue); background: #fff; box-shadow: 2px 2px 0 var(--blue); }
.work-tile-time, .engine-tile { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); box-shadow: inset 0 2px 0 #ffffff30, 3px 4px 0 var(--blue); }
.work-tile-time .tile-meta, .work-tile-time .tile-bottom, .engine-tile .tile-meta, .engine-tile .tile-bottom { color: #fff; }
.time-line { color: #fff; }
.time-line>i { background: #fff; border-radius: 0; }
.article-tile { background: #fff; border-color: var(--blue); box-shadow: 3px 4px 0 var(--blue); color: var(--ink); }
.article-tile .tile-meta, .article-tile .tile-bottom { color: var(--blue); }
.material-drawing { opacity: 1; }
.material-drawing>i { background: #fff; border: 2px solid var(--blue); box-shadow: 3px 2px 0 var(--blue); }
.material-drawing>span { color: var(--blue); }
.calendar-tile { background: var(--blue); border-color: var(--blue-deep); color: #fff; box-shadow: inset 0 2px 0 #ffffff25, 3px 4px 0 var(--blue-deep); border-radius: 5px 5px 20px 5px; }
.calendar-tile .tile-meta, .calendar-tile .tile-bottom, .calendar-drawing { color: #fff; }
.calendar-drawing>i { background: #fff; }
.stock-tile, .office-tile, .industry-tile { background: #fff; border-color: var(--blue); box-shadow: 3px 4px 0 var(--blue); }
.stock-drawing>i { background: #fff; border: 2px solid var(--blue); box-shadow: 3px 2px 0 var(--blue); }
.connection-drawing, .industry-drawing, .engine-drawing, .engine-drawing>b { color: var(--blue); }
.connection-drawing>i { background: var(--blue); height: 2px; }
.engine-drawing, .engine-drawing>b { color: #fff; }
.feature-detail { border-color: var(--blue); }
.feature-detail>span { color: var(--blue); font-weight: 700; }
.feature-detail p { color: var(--muted); }
.ticket-wrap:after { content: ""; position: absolute; height: 56px; width: 90%; left: 5%; top: 5px; background: repeating-linear-gradient(90deg, var(--blue) 0 2px, transparent 2px 9px); opacity: .13; z-index: 0; pointer-events: none; border-block: 2px solid var(--blue); }
.ticket { z-index: 1; color: #171b24; filter: drop-shadow(6px 9px 2px #081d7335); }
.ticket li>small { color: #3d424e; }
.ticket-rule { border-color: #747783; }
.ticket-barcode { background: repeating-linear-gradient(90deg, #171b24 0 1px, transparent 1px 3px, #171b24 3px 5px, transparent 5px 7px, #171b24 7px 8px, transparent 8px 13px); }
.ticket-caption { color: var(--blue); }
.opening-foot { border-color: var(--blue); }
.opening-foot>span { color: var(--muted); }
.opening-foot b { color: var(--blue); font-weight: 800; }
.opening-foot>a { color: var(--blue); font-weight: 700; }

/* Paper sections and printed chapter tabs. */
.old-way, .views, .information, .personal { border: 2px solid var(--blue-deep); background: #fff; box-shadow: 7px 7px 0 var(--blue-deep); }
.section-tab { color: var(--blue); font-weight: 700; }
.section-tab>span:first-child { color: #fff; background: var(--blue); border: 2px solid var(--blue); box-shadow: 2px 2px 0 var(--blue-deep); }
.old-way { border-radius: 3px 3px 28px 3px; }
.old-way-heading h2 { font-weight: 800; }
.old-way-heading h2>span { color: var(--blue); }
.import-path { border-color: var(--blue); }
.import-path>li:not(:last-child):after, .step-index { color: var(--blue); }
.source-documents>span, .source-documents>span:nth-child(2), .final-document { background: #fff; border: 2px solid var(--blue); color: var(--blue); box-shadow: 3px 3px 0 var(--blue); }
.source-documents i { border-color: var(--blue); color: var(--blue); }
.import-symbol { color: var(--blue); }
.import-symbol>b { background: var(--blue); color: #fff; border-color: var(--blue-deep); box-shadow: 3px 4px 0 var(--blue-deep); }
.final-document>b, .import-notes b { color: var(--blue); }
.margin-note { color: var(--muted); border-color: var(--blue); }

/* All six faces share one display rack. No separate real/concept galleries. */
.views { border-radius: 22px 3px 3px 3px; }
.views-heading h2 { font-size: 45px; font-weight: 800; line-height: 1.08; }
.views-heading h2>span { color: var(--blue); }
.views-heading p { color: var(--ink); }
.views-heading .views-invitation { font-size: 12px; font-weight: 700; color: var(--blue); margin-top: 18px; border-top: 1px solid var(--blue); padding-top: 12px; }
.views-invitation>span { font-size: 26px; float: right; line-height: 1; }
.views .views-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 20px; margin: 33px 0 24px; align-items: stretch; padding: 20px 0; border-block: 2px solid var(--blue); }
.views-layout figure.gui-card { padding: 0; margin: 0; background: #fff; color: var(--ink); border: 2px solid var(--blue); box-shadow: 4px 5px 0 var(--blue); transform: none; min-width: 0; }
.gui-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 43px; padding: 10px 10px; background: var(--blue); color: #fff; font: 10px/1.5 var(--mono); }
.gui-label>span { font-weight: 700; }
.gui-label>b { font-size: 9px; font-weight: 400; text-align: right; }
.gui-window { position: relative; aspect-ratio: 16/10; display: flex; align-items: center; overflow: hidden; background: #091521; border-bottom: 1px solid var(--blue); }
.gui-window:focus-visible { outline-offset: -4px; outline-color: #fff; }
.views-layout .gui-window>img { width: 100%; height: 100%; object-fit: contain; border: 0; }
.concept-crop { display: block; width: 100%; position: relative; overflow: hidden; }
.concept-crop.concept-office { aspect-ratio: 865/524; }
.concept-crop.concept-workshop { aspect-ratio: 976/448; }
.views-layout .concept-crop>img { position: absolute; max-width: none; height: auto; border: 0; }
.concept-office>img { width: 177.572%; left: -2.081%; top: -3.054%; }
.concept-workshop>img { width: 157.377%; left: -55.533%; top: -124.554%; }
.views-layout .gui-card>figcaption { display: block; padding: 13px 12px; font: 10px/1.6 var(--type); color: var(--muted); }
.gui-card figcaption>strong { color: var(--blue); display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.gui-card figcaption>span { display: block; }
.views-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px; padding-top: 3px; }
.views-footer h3 { color: var(--blue); font-size: 23px; line-height: 1.2; }
.views-footer h3>span { display: block; font-size: 50px; line-height: 1.2; }
.views-footer p { font-size: 12px; line-height: 1.8; }

.information { background: #fff; border-radius: 3px 24px 3px 3px; }
.information>h2 { font-weight: 800; }
.info-drawer { border-color: var(--blue); }
.info-drawer>summary>span { color: var(--blue); font-weight: 700; }
.info-drawer>summary>b { font-weight: 700; }
.info-drawer>summary>i { background: #fff; color: var(--blue); border: 2px solid var(--blue); border-radius: 3px; box-shadow: 2px 2px 0 var(--blue); }
.info-drawer[open]>summary>i { background: var(--blue); color: #fff; box-shadow: none; }
.info-drawer>div { background: #fff; border: 1px solid var(--blue); border-left: 5px solid var(--blue); box-shadow: none; }
.status-list>div { border-color: #9ba4c9; }
.status-list dt { color: var(--blue); font-weight: 700; }
.price-lines { border-color: var(--blue); }
.price-lines span, .price-lines small, .small { color: var(--muted); }
.personal-aside { border-color: var(--blue); }
.personal-aside>p { color: var(--blue); }
.personal-mark { color: var(--blue); }
.personal-letter h2 { font-weight: 800; }
.personal-letter blockquote { color: var(--blue); border-color: var(--blue); font-weight: 700; }
.personal-letter .signature { color: var(--blue); }
.personal-extra { border-color: var(--blue); }
.personal-extra summary { color: var(--blue); }
.last-word { color: #fff; }
.last-brand { color: #fff; }
.last-word h2>span { color: #fff; font-weight: 700; }
.site-foot, .draft-links { color: #fff; border-color: #ffffff70; }

@media(min-width:651px) {
  .opening h1 { font-size: clamp(31px, 3.3vw, 46px); }
  .eyebrow { font-size: 9px; }
  .opening-copy { font-size: 14px; }
  .scope-console { margin-top: 22px; }
  .workspace-toolbar { margin-bottom: 15px; }
}
@media(max-width:1100px) {
  .free-note { min-width: 270px; gap: 13px; }
  .free-note>b { width: 72px; height: 72px; font-size: 38px; }
  .free-note>span { font-size: 13px; }
  .free-note small { font-size: 10px; }
  .views .views-layout { gap: 20px 15px; }
  .gui-label { display: block; min-height: 56px; padding: 8px; }
  .gui-label>b { display: block; text-align: left; margin-top: 4px; }
  .gui-card figcaption>strong { font-size: 12px; }
  .views-heading h2 { font-size: 36px; }
}
@media(max-width:850px) {
  .opening-line { grid-template-columns: 1fr 265px; }
  .opening h1 { font-size: 33px; }
  .scope-heading label { font-size: 20px; }
  .views .views-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gui-label { min-height: 51px; }
  .views-footer { grid-template-columns: 1fr 1fr; }
  .views-footer h3 { grid-column: 1/-1; }
  .views-footer h3>span { display: inline; margin-left: 15px; font-size: 28px; }
}
@media(max-width:650px) {
  .opening, .old-way, .views, .information, .personal { margin-inline: 12px; box-shadow: 4px 5px 0 var(--blue-deep); padding-inline: 18px; }
  .opening-line { display: block; }
  .opening h1 { font-size: 31px; line-height: 1.17; }
  .opening-copy { font-size: 13px; }
  .free-note { min-width: 0; max-width: none; border-top: 1px solid var(--blue); padding-top: 17px; gap: 16px; }
  .free-note>b { width: 72px; height: 72px; font-size: 38px; }
  .free-note small { font-size: 10px; }
  .scope-console { padding: 16px 12px 14px; }
  .scope-heading label { font-size: 19px; }
  .scope-heading p { font-size: 10px; }
  .scope-indicator { min-width: 72px; gap: 5px; padding: 5px 7px; }
  .scope-indicator>span:first-child { font-size: 26px; }
  .scope-indicator>span:last-child { width: 34px; font-size: 5px; }
  .range-row { grid-template-columns: 27px 1fr 27px; gap: 10px; }
  .range-row>button { width: 27px; height: 35px; font-size: 22px; margin-top: 14px; }
  .range-bed>input::-webkit-slider-thumb { width: 38px; height: 46px; margin-top: -14px; background-size: 21px 17px; }
  .range-bed>input::-moz-range-thumb { width: 34px; height: 42px; background-size: 21px 17px; }
  .range-ticks { left: 18px; right: 18px; }
  .range-captions { font-size: 6px; gap: 5px; }
  .scope-status output { font-size: 15px; }
  .scope-status>p { font-size: 7px; }
  .stage-status { font-size: 7px; }
  .workspace-toolbar { align-items: center; }
  .workspace-toolbar>div { gap: 10px; }
  .workspace-toolbar button { padding: 2px 5px; font-size: 8px; }
  .workspace-toolbar button>span { font-size: 14px; }
  .tiles { gap: 13px; }
  .tiles .work-tile { border-radius: 4px; }
  .tiles .core-tile { border-radius: 20px 4px 4px 4px; }
  .tiles .work-tile:not(.core-tile)>p, .tiles[data-count="3"] .work-tile:not(.core-tile)>p { font-size: 10px; }
  .tiles .core-tile .paper-stack { opacity: 1; }
  .tiles .office-tile { grid-column: span 2!important; }
  .tiles .office-tile h2 { max-width: none!important; }
  .tiles .office-tile>p { max-width: none; }
  .import-path>li+li { border-color: var(--blue); }
  .views-heading h2 { font-size: 36px; }
  .views-heading .views-invitation { font-size: 11px; }
  .views .views-layout { margin-top: 23px; gap: 18px 14px; }
  .gui-label { font-size: 8px; padding: 7px; min-height: 65px; }
  .gui-label>b { font-size: 8px; }
  .views-layout .gui-card>figcaption { padding: 9px 7px; font-size: 9px; }
  .gui-card figcaption>strong { font-size: 11px; line-height: 1.4; }
  .views-footer { display: block; }
  .views-footer h3 { font-size: 23px; }
  .views-footer p { margin-top: 17px; font-size: 12px; }
}