:root {
  --font:'DM Sans',Arial,sans-serif;
  --brand:'Space Grotesk',Arial,sans-serif;
  --ink:#233048;
  --muted:#738099;
  --blue:#4469bd;
  --line:#293d6220;
  --glass:#f5f7ffdc;
  --bar:42px;
  --dock:96px;
  color-scheme:light
}
* {
  box-sizing:border-box
}
html,body {
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden
}
body {
  font:14px/1.6 var(--font);
  color:var(--ink);
  background:#252b54;
  -webkit-font-smoothing:antialiased
}
button,input,textarea,select {
  font:inherit;
  color:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button {
  cursor:pointer
}
button {
  border:0
}
a {
  color:inherit
}
img,svg {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:600
}
button:disabled {
  opacity:.45;
  cursor:default
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:3px solid #567edf;
  outline-offset:3px
}
::selection {
  background:#bed3ff
}
.skip {
  position:fixed;
  top:-100px;
  left:10px;
  z-index:10001;
  background:#fff;
  color:#203359;
  padding:10px 20px
}
.skip:focus {
  top:6px
}
.wallpaper {
  position:fixed;
  inset:0;
  background:#273362 url('mourne-waterfall-1672.webp') center/cover;
  pointer-events:none
}
/* A phone has no use for a 1672px photograph. These follow the base rule so
   they win over its background shorthand; the preload hints in index.html and
   the texture chosen in desktop-water.js use the same three breakpoints. */
@media (max-width: 767px) {
  .wallpaper { background-image:url('mourne-waterfall-768.webp'); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .wallpaper { background-image:url('mourne-waterfall-1280.webp'); }
}
.wallpaper:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#142b4920,#120c2c05)
}
.system-bar {
  height:var(--bar);
  position:relative;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#f1f5ffbd;
  border-bottom:1px solid #ffffff5c;
  backdrop-filter:blur(35px) saturate(1.45);
  padding:0 22px;
  box-shadow:0 2px 12px #16263e08;
  font-size:12px
}
.system-bar__left,.system-bar__right {
  display:flex;
  align-items:center;
  height:100%;
  gap:20px
}
.system-brand {
  display:flex;
  align-items:center;
  gap:8px;
  background:transparent;
  padding:4px 0;
  font:600 16px var(--brand);
  letter-spacing:-.65px
}
.system-brand svg {
  width:19px;
  height:19px
}
.system-nav {
  display:flex;
  gap:5px;
  height:100%;
  align-items:center
}
.system-nav :is(a,button),.system-time {
  padding:7px 10px;
  border-radius:5px;
  background:transparent;
  font-size:12px
}
.system-nav :is(a,button):hover,.system-time:hover {
  background:#ffffff60
}
.system-active {
  font-weight:650;
  font-size:12px;
  color:#3d4860;
  border-left:1px solid #20335425;
  padding-left:20px
}
.system-location {
  font-size:11px;
  color:#59677e;
  display:flex;
  align-items:center;
  gap:7px
}
.system-location:before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:#4b887f
}
.system-control {
  background:transparent;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:5px
}
.system-control:hover {
  background:#ffffff60
}
.system-control svg {
  width:17px;
  height:17px
}
.system-time {
  padding-inline:4px;
  font-variant-numeric:tabular-nums;
  font-size:11px
}
.desktop {
  position:absolute;
  inset:var(--bar) 0 var(--dock);
  isolation:isolate
}
.desktop-icons {
  position:absolute;
  left:23px;
  top:26px;
  display:grid;
  grid-template-columns:86px;
  gap:17px;
  z-index:1
}
.desktop-icon {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:transparent;
  color:white;
  border:1px solid transparent;
  border-radius:9px;
  padding:8px 3px 7px;
  width:86px;
  min-height:86px;
  font-size:11px;
  font-weight:500;
  text-shadow:0 1px 4px #0009;
  transition:background .15s,border-color .15s
}
.desktop-icon:hover,.desktop-icon:focus-visible {
  background:#ffffff14;
  border-color:#ffffff40
}
.app-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:51px;
  height:51px;
  position:relative;
  isolation:isolate;
  border-radius:15px;
  color:white;
  box-shadow:inset 0 1px 1px #ffffff85,inset 0 -1px 1px #0002,0 5px 12px #10224d2a;
  text-shadow:none;
  background:linear-gradient(145deg,var(--icon-light,#aabce8),var(--icon-dark,#6884c1))
}
.app-icon:before {
  content:'';
  position:absolute;
  inset:1px;
  border:1px solid #ffffff1f;
  border-radius:inherit;
  pointer-events:none
}
.app-icon>svg {
  width:27px;
  height:27px;
  filter:drop-shadow(0 1px 1px #0002)
}
.app-icon--studio {
  --icon-light:#52647c;
  --icon-dark:#253147
}
.app-icon--studio>svg {
  width:31px;
  height:31px
}
.app-icon--services {
  --icon-light:#79b5c0;
  --icon-dark:#39728e
}
.app-icon--work {
  --icon-light:#94aafa;
  --icon-dark:#5b6ccf
}
.app-icon--contact {
  --icon-light:#b5a3e6;
  --icon-dark:#8062ba
}
.app-icon--calculator {
  --icon-light:#92c6b3;
  --icon-dark:#4d9081
}
.app-icon--calendar {
  --icon-light:#e8b390;
  --icon-dark:#c77975
}
.app-icon--writer {
  --icon-light:#dac990;
  --icon-dark:#ad9557
}
.desktop-widget {
  position:absolute;
  right:32px;
  top:36px;
  width:238px;
  padding:23px 23px 21px;
  border:1px solid #ffffff35;
  border-radius:18px;
  background:linear-gradient(135deg,#152e4d8a,#16315065);
  color:#fff;
  box-shadow:0 15px 40px #14275418,inset 0 1px 0 #ffffff29;
  backdrop-filter:blur(25px);
  text-shadow:0 1px 5px #17264140;
  text-align:left
}
.desktop-widget:hover {
  background:#203c5b8a
}
.widget-eyebrow {
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.78
}
.widget-time {
  font:500 53px/1.2 var(--brand);
  letter-spacing:-2px;
  font-variant-numeric:tabular-nums;
  margin:7px 0 4px
}
.widget-date {
  font-size:12px;
  opacity:.9
}
.widget-rule {
  height:1px;
  background:#ffffff30;
  margin:18px 0 15px
}
.widget-location {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px
}
.widget-location:before {
  content:'';
  height:5px;
  width:5px;
  background:#c8ebe2;
  border-radius:50%
}
.desktop-note {
  position:absolute;
  right:36px;
  bottom:32px;
  text-align:right;
  color:#fff9;
  font:11px/1.8 var(--brand);
  letter-spacing:.02em;
  pointer-events:none
}
.desktop-note strong {
  font-weight:500;
  font-size:16px;
  color:#ffffffc4;
  display:block;
  letter-spacing:-.4px
}
.dock-wrap {
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  max-width:calc(100% - 24px)
}
.dock {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 13px 12px;
  border:1px solid #ffffff70;
  border-radius:23px;
  background:linear-gradient(150deg,#f0f4ff89,#e8ecff4d);
  box-shadow:0 18px 55px #0d123b3b,inset 0 1px 1px #fff9;
  backdrop-filter:blur(30px) saturate(1.55)
}
.dock-button {
  background:transparent;
  padding:0 0 5px;
  position:relative;
  flex:none;
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
  border-radius:15px
}
.dock-button:hover,.dock-button:focus-visible {
  transform:translateY(-7px)
}
.dock-button .app-icon {
  width:49px;
  height:49px;
  border-radius:14px
}
.dock-button .app-icon svg {
  width:27px;
  height:27px
}
.dock-button .app-icon--studio svg {
  width:30px;
  height:30px
}
.dock-button:after {
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  position:absolute;
  bottom:-4px;
  left:calc(50% - 2px);
  background:#283853;
  opacity:0
}
.dock-button.is-open:after {
  opacity:.85
}
.dock-button.is-active:after {
  width:12px;
  left:calc(50% - 6px);
  border-radius:4px
}
.dock-tooltip {
  position:absolute;
  left:50%;
  bottom:calc(100% + 17px);
  transform:translateX(-50%);
  background:#26334fe8;
  border:1px solid #ffffff2e;
  color:white;
  padding:5px 10px;
  white-space:nowrap;
  font-size:11px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s
}
.dock-button:hover .dock-tooltip,.dock-button:focus-visible .dock-tooltip {
  opacity:1
}
.dock-divider {
  height:38px;
  width:1px;
  background:#4c57773b;
  margin:0 3px
}
.app-window {
  position:absolute;
  display:flex;
  flex-direction:column;
  min-width:260px;
  min-height:220px;
  max-width:100%;
  max-height:100%;
  border:1px solid #ffffffa3;
  border-radius:15px;
  background:#f9faffea;
  box-shadow:0 30px 85px #0c123a35,0 4px 13px #0a163a20,inset 0 1px 0 #fff;
  overflow:hidden;
  backdrop-filter:blur(40px) saturate(1.2);
  animation:window-in .22s cubic-bezier(.2,.8,.2,1)
}
.app-window.is-active {
  box-shadow:0 40px 100px #0b103a45,0 7px 20px #0a163a25,inset 0 1px 0 #fff;
  border-color:#ffffffbf
}
.app-window.is-minimised {
  display:none
}
.window-bar {
  display:flex;
  align-items:center;
  gap:9px;
  height:44px;
  flex:none;
  padding:0 10px 0 15px;
  background:#edf1f8ca;
  border-bottom:1px solid #263c5d12;
  cursor:grab;
  touch-action:none;
  user-select:none
}
.window-bar:active {
  cursor:grabbing
}
.window-bar>svg {
  width:15px;
  height:15px;
  color:#637492
}
.window-title {
  font-size:11px;
  font-weight:600;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#4e5c73
}
.window-controls {
  display:flex;
  gap:2px;
  align-items:center;
  cursor:default
}
.window-control {
  height:29px;
  width:30px;
  display:grid;
  place-items:center;
  background:transparent;
  border-radius:6px;
  color:#69788f
}
.window-control svg {
  width:13px;
  height:13px
}
.window-control:hover {
  background:#c9d3e740;
  color:#273957
}
.window-control--close:hover {
  background:#d7687130;
  color:#a03c4e
}
.window-menu {
  position:relative
}
.window-menu>summary {
  list-style:none;
  cursor:pointer
}
.window-menu>summary::-webkit-details-marker {
  display:none
}
.window-menu__panel {
  position:absolute;
  right:0;
  top:33px;
  width:155px;
  padding:5px;
  background:#fafcff;
  border:1px solid #b9c7db70;
  box-shadow:0 12px 35px #1a2e5426;
  border-radius:8px;
  z-index:4
}
.window-menu__panel button {
  background:none;
  text-align:left;
  padding:8px 10px;
  font-size:11px;
  border-radius:4px;
  width:100%;
  display:block
}
.window-menu__panel button:hover {
  background:#e5ebf7
}
.window-content {
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  position:relative
}
.resize-handle {
  position:absolute;
  right:0;
  bottom:0;
  width:17px;
  height:17px;
  z-index:3;
  background:linear-gradient(135deg,transparent 60%,#8f9eb56b 61%,#8f9eb56b 66%,transparent 67%,transparent 76%,#8f9eb56b 77%,#8f9eb56b 82%,transparent 83%);
  cursor:nwse-resize;
  touch-action:none;
  border-radius:0 0 12px 0
}
.app-window.is-maximised {
  border-radius:10px
}
.app-window.is-maximised .resize-handle {
  display:none
}
.window-announcer {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.toast {
  position:fixed;
  bottom:113px;
  left:50%;
  transform:translateX(-50%);
  padding:11px 17px;
  border:1px solid #ffffff99;
  background:#f7f9ffef;
  color:#344760;
  border-radius:10px;
  box-shadow:0 12px 45px #19214944;
  z-index:11000;
  font-size:12px;
  max-width:calc(100% - 32px);
  text-align:center
}
.launcher {
  position:fixed;
  z-index:10001;
  left:18px;
  top:49px;
  width:294px;
  background:#f6f8ffef;
  border:1px solid #ffffffc4;
  border-radius:13px;
  padding:20px;
  box-shadow:0 20px 65px #10213f40;
  backdrop-filter:blur(30px)
}
.launcher h2 {
  font-size:14px;
  letter-spacing:-.3px;
  margin-bottom:16px
}
.launcher-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px 12px
}
.launcher-grid button {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:7px;
  background:transparent;
  padding:5px 0;
  font-size:10px;
  border-radius:7px
}
.launcher-grid button:hover {
  background:#aabdda26
}
.launcher-grid .app-icon {
  width:44px;
  height:44px;
  border-radius:12px
}
.launcher-grid .app-icon svg {
  width:25px;
  height:25px
}
.launcher-footer {
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:#6c7c95
}
.launcher-footer label {
  display:flex;
  align-items:center;
  gap:7px
}
.launcher-footer input {
  accent-color:#5375b9
}
.app-button {
  background:#e8edf6;
  border:1px solid #cad4e6;
  border-radius:7px;
  padding:10px 16px;
  font-size:12px;
  font-weight:550;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  color:#3a5279;
  transition:background .15s,border-color .15s
}
.app-button:hover {
  background:#dbe5f4;
  border-color:#acbddb
}
.app-button--primary {
  background:#4468ac;
  color:#fff;
  border-color:#4468ac;
  box-shadow:inset 0 1px 0 #ffffff20
}
.app-button--primary:hover {
  background:#355994;
  border-color:#355994
}
.app-button svg {
  width:14px;
  height:14px
}
.app-eyebrow {
  font:500 10px/1.6 var(--brand);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8291a7
}
.app-text {
  color:#75849a;
  font-size:13px;
  line-height:1.8
}
.app-heading {
  font:600 31px/1.18 var(--font);
  letter-spacing:-1.1px
}
.app-heading span {
  color:#8496b4
}
.app-section {
  padding:30px 35px
}
.app-section+.app-section {
  border-top:1px solid var(--line)
}
.studio-layout {
  display:grid;
  grid-template-columns:178px 1fr;
  min-height:100%;
  background:#fbfcff
}
.studio-sidebar {
  background:linear-gradient(155deg,#e8edf7,#f2f4fa);
  padding:27px 15px;
  display:flex;
  flex-direction:column;
  border-right:1px solid #2136580c
}
.sidebar-brand {
  font:600 19px var(--brand);
  letter-spacing:-.9px;
  padding:0 9px 5px
}
.sidebar-caption {
  font-size:9px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#8493ab;
  padding:0 9px;
  margin-bottom:25px
}
.sidebar-links {
  display:flex;
  flex-direction:column;
  gap:4px
}
.sidebar-links :is(a,button) {
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  background:transparent;
  padding:10px 11px;
  border-radius:7px;
  font-size:11px;
  color:#6d7d98
}
.sidebar-links :is(a,button) svg {
  width:16px;
  height:16px
}
.sidebar-links :is(a,button):hover,.sidebar-links :is(a,button).is-selected {
  background:#d9e2f3;
  color:#3b5683
}
.sidebar-bottom {
  margin-top:auto;
  padding:24px 10px 0;
  font-size:10px;
  color:#94a0b1;
  line-height:1.8
}
.sidebar-bottom span {
  color:#57738e;
  display:block
}
.studio-main {
  padding:35px 37px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0
}
.studio-status {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#758ba0;
  margin-bottom:17px
}
.studio-status:before {
  content:'';
  height:5px;
  width:5px;
  background:#68958c;
  border-radius:50%
}
.studio-main h1 {
  font:550 49px/1.09 var(--font);
  letter-spacing:-2.3px;
  color:#2c3e5b;
  margin:0 0 20px
}
.studio-main h1 span {
  color:#8b9bbb
}
.studio-intro {
  font-size:14px;
  line-height:1.8;
  color:#7b8ba3;
  max-width:430px
}
.studio-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0 27px
}
.studio-feature-row {
  display:flex;
  gap:0;
  padding-top:24px;
  border-top:1px solid #354f7320
}
.studio-feature {
  flex:1;
  min-width:0
}
.studio-feature+.studio-feature {
  border-left:1px solid #354f731a;
  padding-left:19px
}
.studio-feature svg {
  width:20px;
  height:20px;
  color:#839abb;
  margin-bottom:8px
}
.studio-feature strong {
  font-size:11px;
  font-weight:550;
  display:block;
  margin-bottom:3px
}
.studio-feature span {
  font-size:10px;
  color:#91a0b5;
  line-height:1.5;
  display:block
}
.studio-bottom {
  font-size:10px;
  color:#99a5b8;
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:7px
}
.studio-bottom svg {
  width:12px;
  height:12px
}
.service-app-intro {
  padding:29px 33px;
  border-bottom:1px solid var(--line)
}
.service-app-intro .app-eyebrow {
  margin-bottom:10px
}
.service-app-intro .app-text {
  margin-top:13px
}
.service-item {
  padding:24px 33px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:37px 1fr;
  gap:16px
}
.service-item>svg {
  width:24px;
  height:24px;
  color:#778eb2;
  margin-top:4px
}
.service-item h3 {
  font-size:17px;
  letter-spacing:-.35px;
  margin-bottom:8px
}
.service-item p {
  font-size:12px;
  color:#7c8ca3;
  line-height:1.8
}
.service-item__meta {
  font-size:11px;
  color:#4d6b9f;
  margin-top:11px
}
.service-app-footer {
  padding:25px 33px
}
.service-app-footer .app-text {
  margin-top:11px;
  font-size:11px
}
.work-intro,.archive-intro {
  padding:28px 32px
}
.work-intro .app-eyebrow,.archive-intro .app-eyebrow {
  margin-bottom:10px
}
.work-intro .app-text,.archive-intro .app-text {
  margin-top:13px
}
.work-switch {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:0 32px 17px
}
.segmented {
  display:flex;
  border:1px solid #cdd7e9;
  border-radius:6px;
  background:#e9eef7;
  padding:3px;
  gap:3px
}
.segmented button {
  padding:6px 12px;
  background:transparent;
  font-size:11px;
  border-radius:4px;
  color:#7b8aa2
}
.segmented button[aria-pressed=true] {
  background:#fff;
  color:#435a7f;
  box-shadow:0 1px 4px #23355113
}
.work-switch>span {
  font-size:10px;
  color:#8c9cb0
}
.work-figure,.archive-figure {
  margin:0 32px 22px
}
.work-figure img,.archive-figure img {
  border:1px solid #c8d2e3;
  border-radius:6px;
  width:100%;
  height:auto;
  background:white
}
.work-figure figcaption,.archive-figure figcaption {
  font-size:10px;
  color:#8595ad;
  margin-top:9px
}
.work-detail,.archive-detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:23px;
  padding:0 32px 27px
}
.work-detail h3,.archive-detail h3 {
  font-size:13px;
  margin-bottom:8px
}
.work-detail p,.archive-detail p {
  font-size:12px;
  color:#7c8ca3;
  line-height:1.8
}
.work-footer,.archive-footer {
  border-top:1px solid var(--line);
  padding:21px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.work-footer p,.archive-footer p {
  font-size:12px;
  color:#7689a3
}
.contact-app {
  padding:26px 31px
}
.contact-app .app-eyebrow {
  margin-bottom:9px
}
.contact-app .app-text {
  margin-top:13px
}
.contact-direct {
  font-size:13px;
  color:#5476b0;
  display:inline-block;
  text-decoration:none;
  margin-top:13px
}
.contact-direct:hover {
  text-decoration:underline
}
.contact-form {
  margin-top:23px
}
.form-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.field {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:15px
}
.field label {
  font-size:11px;
  color:#6c7d97
}
.field input,.field textarea,.field select {
  width:100%;
  background:#fff9;
  border:1px solid #cbd6e7;
  border-radius:6px;
  padding:9px 11px;
  font-size:13px;
  outline:none
}
.field input:focus,.field textarea:focus,.field select:focus {
  border-color:#7d9cd5;
  box-shadow:0 0 0 3px #8da9d71f
}
.field textarea {
  min-height:79px;
  resize:vertical
}
.field textarea::placeholder {
  color:#a4afc0
}
.form-actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.form-note {
  font-size:10px;
  line-height:1.7;
  color:#91a0b3;
  margin-top:10px
}
.form-status {
  font-size:11px;
  line-height:1.7;
  margin-top:13px;
  background:#e5edf9;
  padding:11px;
  border-radius:6px;
  color:#557196
}
.form-status a {
  color:#345f9f
}
.hp {
  position:absolute;
  left:-10000px
}
.about-content {
  padding:31px 34px
}
.about-content .app-eyebrow {
  margin-bottom:10px
}
.about-content p {
  font-size:13px;
  color:#7a8ba4;
  line-height:1.9;
  margin-top:18px
}
.about-facts {
  display:flex;
  gap:35px;
  margin:25px 0;
  border-block:1px solid var(--line);
  padding:22px 0
}
.about-facts strong {
  display:block;
  font:500 31px var(--brand);
  color:#5776aa
}
.about-facts span {
  font-size:10px;
  color:#8a9ab0
}
.about-content .app-button {
  margin-top:24px
}
.calculator {
  height:100%;
  display:flex;
  flex-direction:column;
  background:#f2f5fa;
  padding:20px;
  gap:17px
}
.calc-top {
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:right;
  padding:0 4px;
  gap:8px
}
.calc-history {
  min-height:16px;
  font-size:12px;
  color:#95a3b7;
  font-variant-numeric:tabular-nums
}
.calc-display {
  font:450 45px/1.2 var(--brand);
  letter-spacing:-1.5px;
  overflow-wrap:anywhere;
  color:#344966
}
.calc-display.is-long {
  font-size:28px
}
.calc-keys {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  flex:1;
  min-height:240px
}
.calc-key {
  border-radius:9px;
  background:#fff;
  border:1px solid #dce4ef;
  color:#4f617e;
  font-size:20px;
  box-shadow:0 2px 2px #22334f04;
  min-height:42px
}
.calc-key:hover {
  background:#e9effb;
  border-color:#b8cae5
}
.calc-key:active {
  transform:translateY(1px)
}
.calc-key--utility {
  background:#e5ebf4;
  color:#7b8ba6;
  font-size:15px
}
.calc-key--operator {
  background:#dce7f7;
  color:#5a7aad
}
.calc-key--equal {
  background:#5375af;
  color:white;
  border-color:#5375af
}
.calc-key--equal:hover {
  background:#3b619c
}
.calc-key--zero {
  grid-column:span 2
}
.calc-help {
  text-align:center;
  font-size:9px;
  color:#9ba9bd
}
.calendar-app {
  padding:25px 27px
}
.calendar-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:23px
}
.calendar-head h2 {
  font-size:22px;
  letter-spacing:-.7px
}
.calendar-controls {
  display:flex;
  gap:5px
}
.calendar-controls button {
  background:#e8eef7;
  border:1px solid #d6dfed;
  border-radius:5px;
  min-width:29px;
  height:29px;
  font-size:11px;
  padding:0 8px;
  display:grid;
  place-items:center
}
.calendar-controls button svg {
  height:12px;
  width:12px
}
.calendar-weekdays,.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px
}
.calendar-weekdays {
  margin-bottom:8px
}
.calendar-weekdays span {
  font-size:10px;
  color:#92a0b5;
  text-align:center
}
.calendar-day {
  height:36px;
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  font-size:12px;
  position:relative;
  color:#667d9d
}
.calendar-day:hover {
  background:#e8eef9
}
.calendar-day.is-today {
  border-color:#a0b9e0;
  color:#426dae
}
.calendar-day[aria-pressed=true] {
  background:#5276b1;
  color:#fff;
  border-color:#5276b1
}
.calendar-day.has-event:after {
  content:'';
  height:3px;
  width:3px;
  position:absolute;
  bottom:4px;
  left:calc(50% - 1.5px);
  background:currentColor;
  border-radius:50%
}
.calendar-selected {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:20px
}
.calendar-selected h3 {
  font-size:12px;
  color:#647c9d;
  margin-bottom:12px
}
.calendar-reminders {
  margin:0;
  padding:0;
  list-style:none
}
.calendar-reminders li {
  font-size:12px;
  border:1px solid #d5dfed;
  border-radius:6px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  background:#fff9
}
.calendar-reminders time {
  color:#8fa0b7;
  font-size:10px
}
.calendar-reminders span {
  flex:1;
  overflow-wrap:anywhere
}
.calendar-reminders button {
  background:transparent;
  padding:4px;
  color:#8b9db4
}
.calendar-empty {
  font-size:11px;
  color:#a0adc0;
  margin-bottom:13px
}
.reminder-form {
  display:grid;
  grid-template-columns:1fr 95px 32px;
  gap:7px
}
.reminder-form input {
  min-width:0;
  width:100%;
  border:1px solid #cbd6e7;
  border-radius:5px;
  padding:8px;
  font-size:11px;
  background:#fff9
}
.reminder-form button {
  background:#5578b2;
  color:white;
  border-radius:5px;
  font-size:19px
}
.calendar-note {
  font-size:9px;
  line-height:1.7;
  color:#9caabd;
  margin-top:16px
}
.writer {
  height:100%;
  display:flex;
  flex-direction:column;
  background:#eaf0f7
}
.writer-toolbar {
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 15px;
  background:#f8faff;
  border-bottom:1px solid #d7e0ec;
  flex-wrap:wrap
}
.writer-title {
  font-size:12px;
  border:0;
  background:transparent;
  padding:5px 0;
  min-width:80px;
  width:130px;
  flex:1;
  outline:none;
  color:#627896
}
.writer-title:focus {
  box-shadow:0 1px 0 #87a4d1
}
.writer-tools {
  display:flex;
  gap:3px;
  align-items:center
}
.writer-tools button {
  height:28px;
  min-width:29px;
  border:1px solid #d6dfed;
  background:#eef3fa;
  border-radius:5px;
  font-size:11px;
  padding:0 8px
}
.writer-tools button:hover {
  background:#dce7f7
}
.writer-tools .tool-bold {
  font-weight:700
}
.writer-tools .tool-italic {
  font-style:italic
}
.writer-body {
  flex:1;
  overflow:auto;
  min-height:0;
  padding:25px
}
.writer-page {
  background:#fff;
  min-height:100%;
  border:1px solid #d9e2ee;
  box-shadow:0 3px 8px #2d46600a;
  padding:35px 39px;
  outline:none;
  font-size:14px;
  line-height:1.85;
  color:#4a5c76;
  overflow-wrap:anywhere
}
.writer-page:focus {
  border-color:#adc4e5
}
.writer-page:empty:before {
  content:attr(data-placeholder);
  color:#a7b4c7;
  pointer-events:none
}
.writer-page h2 {
  font-size:23px;
  font-weight:600;
  line-height:1.4;
  margin:10px 0 16px
}
.writer-page p {
  margin:0 0 12px
}
.writer-page ul,.writer-page ol {
  padding-left:24px
}
.writer-page a {
  color:inherit
}
.writer-status {
  display:flex;
  justify-content:space-between;
  gap:15px;
  background:#f6f9fe;
  border-top:1px solid #d7e0ec;
  padding:9px 16px;
  font-size:9px;
  color:#92a1b7
}
.writer-storage-error {
  color:#ac6868
}
.noscript {
  position:fixed;
  inset:70px 20px 110px;
  background:#f6f8ff;
  padding:30px;
  border-radius:15px;
  z-index:10002;
  overflow:auto
}
.noscript h1 {
  margin-bottom:15px
}
.noscript p {
  margin-bottom:20px
}
@keyframes window-in {
  from {
    opacity:0;
    transform:translateY(9px) scale(.985)
  }
  to {
    opacity:1;
    transform:none
  }
}
@media(max-width:1150px) {
  .desktop-widget {
    width:206px;
    right:22px;
    padding:20px
  }
  .widget-time {
    font-size:45px
  }
  .system-bar {
    padding-inline:17px
  }
  .system-bar__left {
    gap:15px
  }
  .system-active {
    padding-left:15px
  }
  .system-nav {
    gap:0
  }
  .system-nav :is(a,button) {
    padding-inline:8px
  }
  .system-location {
    display:none
  }
  .studio-main {
    padding:29px
  }
  .studio-main h1 {
    font-size:44px
  }
  .studio-layout {
    grid-template-columns:160px 1fr
  }
  .studio-sidebar {
    padding-inline:12px
  }
  .desktop-note {
    right:25px
  }
  .desktop-icons {
    left:15px;
    gap:13px
  }
  .studio-feature+.studio-feature {
    padding-left:13px
  }
}
@media(max-width:850px) {
  .system-active {
    display:none
  }
  .desktop-widget {
    display:none
  }
  .system-nav :is(a,button) {
    font-size:11px
  }
  .desktop-icons {
    grid-template-columns:78px;
    left:12px;
    gap:7px;
    top:16px
  }
  .desktop-icon {
    width:78px;
    min-height:79px;
    font-size:10px
  }
  .app-icon {
    width:45px;
    height:45px;
    border-radius:13px
  }
  .desktop-note {
    font-size:10px
  }
  .studio-layout {
    grid-template-columns:140px 1fr
  }
  .studio-sidebar {
    padding:23px 8px
  }
  .sidebar-brand {
    font-size:17px
  }
  .sidebar-caption {
    font-size:8px
  }
  .sidebar-links :is(a,button) {
    padding:9px 8px;
    font-size:10px;
    gap:8px
  }
  .studio-main {
    padding:26px
  }
  .studio-main h1 {
    font-size:39px;
    letter-spacing:-1.7px
  }
  .studio-intro {
    font-size:13px
  }
  .studio-feature span {
    font-size:9px
  }
  .studio-feature strong {
    font-size:10px
  }
  .studio-actions {
    gap:8px
  }
  .studio-actions .app-button {
    padding:9px 11px;
    font-size:11px
  }
  .studio-bottom {
    font-size:9px
  }
  .system-time {
    font-size:10px
  }
  .system-bar__right {
    gap:10px
  }
}
@media(max-width:700px) {
  :root {
    --bar:44px;
    --dock:91px
  }
  .system-bar {
    padding-inline:13px;
    gap:10px
  }
  .system-brand {
    font-size:16px
  }
  .system-brand svg {
    width:18px;
    height:18px
  }
  .system-nav {
    display:none
  }
  .system-bar__left,.system-bar__right {
    gap:9px
  }
  .system-time {
    font-size:10px;
    max-width:115px;
    overflow:hidden;
    white-space:nowrap
  }
  .desktop {
    inset:var(--bar) 0 var(--dock)
  }
  .desktop-icons {
    left:17px;
    top:24px;
    grid-template-columns:82px 82px;
    gap:16px 8px
  }
  .desktop-icon {
    width:82px;
    min-height:84px;
    font-size:11px
  }
  .desktop-icon .app-icon {
    width:50px;
    height:50px;
    border-radius:14px
  }
  .desktop-note {
    bottom:20px;
    right:20px
  }
  .desktop-note strong {
    font-size:14px
  }
  .dock-wrap {
    bottom:12px;
    max-width:calc(100% - 16px)
  }
  .dock {
    gap:6px;
    padding:9px 9px 11px;
    border-radius:20px
  }
  .dock-button .app-icon {
    width:41px;
    height:41px;
    border-radius:12px
  }
  .dock-button .app-icon svg {
    width:23px;
    height:23px
  }
  .dock-button .app-icon--studio svg {
    width:27px;
    height:27px
  }
  .dock-divider {
    margin:0 1px;
    height:32px
  }
  .dock-tooltip {
    display:none
  }
  .dock-button:hover,.dock-button:focus-visible {
    transform:none
  }
  .app-window {
    left:8px!important;
    top:8px!important;
    width:calc(100% - 16px)!important;
    height:calc(100% - 13px)!important;
    min-width:0;
    border-radius:13px
  }
  .window-bar {
    height:44px;
    padding-left:12px;
    gap:8px;
    cursor:default;
    touch-action:auto
  }
  .window-controls {
    gap:1px
  }
  .window-control {
    height:32px;
    width:32px
  }
  .window-title {
    font-size:11px
  }
  .window-control--maximise,.window-menu,.resize-handle {
    display:none
  }
  .studio-layout {
    grid-template-columns:1fr;
    min-height:100%
  }
  .studio-sidebar {
    display:none
  }
  .studio-main {
    padding:29px 27px;
    justify-content:center
  }
  .studio-main h1 {
    font-size:44px;
    line-height:1.08;
    letter-spacing:-1.9px
  }
  .studio-status {
    font-size:9px;
    margin-bottom:20px
  }
  .studio-intro {
    font-size:14px;
    line-height:1.85
  }
  .studio-actions {
    margin:25px 0 27px;
    gap:9px
  }
  .studio-actions .app-button {
    font-size:11px;
    padding:10px 12px
  }
  .studio-feature-row {
    padding-top:24px;
    gap:9px
  }
  .studio-feature+.studio-feature {
    padding-left:13px
  }
  .studio-feature strong {
    font-size:10px
  }
  .studio-feature span {
    font-size:9px
  }
  .studio-bottom {
    font-size:9px;
    margin-top:25px
  }
  .service-app-intro {
    padding:26px
  }
  .app-heading {
    font-size:29px;
    letter-spacing:-1px
  }
  .service-item {
    padding:24px 26px;
    grid-template-columns:26px 1fr;
    gap:13px
  }
  .service-item h3 {
    font-size:17px
  }
  .service-item p {
    font-size:12px
  }
  .service-app-footer {
    padding:23px 26px
  }
  .work-intro,.archive-intro {
    padding:25px
  }
  .work-switch {
    margin-inline:25px
  }
  .work-switch>span {
    display:none
  }
  .work-figure,.archive-figure {
    margin-inline:25px
  }
  .work-detail,.archive-detail {
    grid-template-columns:1fr;
    gap:21px;
    padding-inline:25px
  }
  .work-footer,.archive-footer {
    padding:22px 25px;
    align-items:flex-start;
    flex-direction:column;
    gap:15px
  }
  .contact-app {
    padding:24px
  }
  .contact-direct {
    font-size:14px
  }
  .field input,.field textarea,.field select {
    font-size:16px;
    padding:10px
  }
  .field label {
    font-size:11px
  }
  .form-pair {
    gap:13px
  }
  .field textarea {
    min-height:90px
  }
  .form-note {
    font-size:10px
  }
  .about-content {
    padding:27px
  }
  .about-facts {
    gap:30px
  }
  .calculator {
    padding:22px 25px;
    max-width:430px;
    margin:auto;
    width:100%
  }
  .calc-top {
    min-height:110px
  }
  .calc-display {
    font-size:52px
  }
  .calc-keys {
    gap:9px
  }
  .calc-key {
    min-height:49px
  }
  .calendar-app {
    padding:24px
  }
  .calendar-head h2 {
    font-size:21px
  }
  .calendar-day {
    height:40px;
    font-size:13px
  }
  .calendar-weekdays span {
    font-size:10px
  }
  .calendar-selected {
    margin-top:24px;
    padding-top:20px
  }
  .calendar-note {
    font-size:10px
  }
  .reminder-form {
    grid-template-columns:1fr 88px 35px
  }
  .reminder-form input {
    font-size:13px
  }
  .writer-toolbar {
    padding:10px;
    gap:7px
  }
  .writer-title {
    flex-basis:100%;
    width:100%;
    padding:5px;
    font-size:13px
  }
  .writer-tools {
    gap:4px;
    width:100%;
    justify-content:space-between
  }
  .writer-tools button {
    height:32px;
    font-size:12px;
    min-width:34px
  }
  .writer-body {
    padding:14px
  }
  .writer-page {
    padding:25px 22px;
    font-size:16px
  }
  .writer-status {
    font-size:9px;
    gap:12px;
    padding-inline:12px
  }
  .launcher {
    top:50px;
    left:12px;
    width:285px
  }
  .toast {
    bottom:102px;
    font-size:11px
  }
}
@media(max-width:380px) {
  .dock {
    gap:4px;
    padding-inline:7px
  }
  .dock-button .app-icon {
    width:37px;
    height:37px;
    border-radius:11px
  }
  .dock-divider {
    margin:0;
    height:28px
  }
  .dock-button .app-icon svg {
    width:22px;
    height:22px
  }
  .studio-main {
    padding:24px 22px
  }
  .studio-main h1 {
    font-size:40px
  }
  .studio-actions {
    gap:7px
  }
  .studio-actions .app-button {
    font-size:10px;
    padding:10px
  }
  .studio-feature+.studio-feature {
    padding-left:10px
  }
  .contact-app {
    padding:23px 20px
  }
  .form-pair {
    grid-template-columns:1fr;
    gap:0
  }
  .calendar-app {
    padding:22px 18px
  }
  .calendar-head {
    gap:8px
  }
  .calendar-head h2 {
    font-size:19px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}

/* Welcome responds to its own window, including manual resizing. */
.app-window[data-app="studio"] .window-content { container:welcome / size; }
.studio-layout { height:100%; min-height:100%; background:transparent; }
.studio-main { padding:28px 32px; }
.studio-status { font-size:10px; margin-bottom:16px; }
.studio-main h1 { font-size:43px; line-height:1.12; letter-spacing:-1.8px; margin-bottom:18px; }
.studio-intro { font-size:14px; line-height:1.75; max-width:405px; color:#62758f; }
.studio-actions { margin:23px 0; gap:9px; }
.studio-feature-row { padding-top:20px; gap:12px; }
.studio-feature { display:flex; flex-direction:column; gap:4px; }
.studio-feature+.studio-feature { padding-left:16px; }
.studio-feature strong { font-size:11px; margin:0; }
.studio-feature svg { margin:0 0 4px; width:19px; height:19px; }
.studio-bottom { margin-top:21px; font-size:10px; color:#77869b; }
@container welcome (max-width:620px) {
  .studio-layout { grid-template-columns:1fr; }
  .studio-sidebar { display:none; }
  .studio-main { padding:24px; }
  .studio-main h1 { font-size:clamp(30px,7.5cqw,43px); }
}
@container welcome (max-height:420px) {
  .studio-main { padding:18px 24px; }
  .studio-status { margin-bottom:10px; }
  .studio-main h1 { font-size:34px; margin-bottom:12px; }
  .studio-intro { font-size:13px; line-height:1.6; }
  .studio-actions { margin:16px 0; }
  .studio-feature-row { padding-top:14px; }
  .studio-feature { flex-direction:row; align-items:center; gap:6px; }
  .studio-feature svg { width:15px; height:15px; flex:none; margin:0; }
  .studio-feature+.studio-feature { padding-left:8px; }
  .studio-feature strong { font-size:10px; }
  .studio-bottom { margin-top:15px; }
  .studio-sidebar { padding-block:18px; }
  .sidebar-bottom { padding-top:12px; }
}
@container welcome (max-width:350px) {
  .studio-main { padding:18px; }
  .studio-status { font-size:9px; }
  .studio-main h1 { font-size:31px; letter-spacing:-1.1px; }
  .studio-actions .app-button { font-size:11px; padding:10px 12px; }
  .studio-feature-row { gap:7px; }
  .studio-feature { flex-direction:column; align-items:flex-start; }
}

/* Desktop utilities use the same window chrome and a quiet shared vocabulary. */
:root { --accent:#4468ac; --accent-hover:#355994; --accent-soft:#e2eafa; --surface:#f9faffdf; }
:focus-visible { outline-color:var(--accent); }
::selection { background:var(--accent-soft); }
.app-window { background:var(--surface); }
.app-button--primary,.calc-key--equal { background:var(--accent); border-color:var(--accent); }
.app-button--primary:hover,.calc-key--equal:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.sidebar-links :is(a,button).is-selected,.calendar-day[aria-pressed="true"],.segmented button[aria-pressed="true"],.app-button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
.calendar-day.is-today { color:var(--accent); }
:root[data-surface="solid"] { --surface:#f9faff; }
:root[data-surface="solid"] .app-window { backdrop-filter:none; }
:root[data-surface="solid"] .system-bar { background:#edf2fa; backdrop-filter:none; }
:root[data-surface="solid"] .dock { background:#e9eef8; backdrop-filter:none; }
:root[data-surface="solid"] .launcher { background:#f6f8ff; backdrop-filter:none; }
.app-icon--mines { background:linear-gradient(145deg,#bee7d8,#649f99); color:#fff; }
.app-icon--clock { background:linear-gradient(145deg,#f4dfb8,#cf9872); color:#fff; }
.app-icon--settings { background:linear-gradient(145deg,#ccd6e8,#8294b0); color:#fff; }
.launcher { max-height:calc(100dvh - 65px); overflow-y:auto; }
.mines-app,.clock-app,.settings-app { padding:24px; }
.utility-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.utility-heading h2 { font:550 28px/1.3 var(--font); letter-spacing:-.8px; }
.utility-heading>svg { width:27px; height:27px; color:#8c9bb1; }
.utility-heading .app-eyebrow { margin-bottom:3px; }
.utility-note { color:#7b889b; font-size:11px; line-height:1.65; }
.mines-badge { font:500 13px var(--brand); padding:6px 10px; border:1px solid var(--line); border-radius:7px; color:#70869b; }
.mines-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:#7c8a9f; margin-bottom:15px; }
.mines-toolbar strong { color:var(--accent); font:500 22px var(--brand); margin-right:4px; }
.mines-toolbar .app-button { font-size:11px; padding:7px 11px; }
.mines-board { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; max-width:340px; margin:auto; }
.mine-cell { aspect-ratio:1; padding:0; min-width:0; border-radius:6px; background:linear-gradient(150deg,#eef2fc,#dce5f3); border:1px solid #b9c8de90; box-shadow:0 2px 2px #31466d14,inset 0 1px 0 #ffffffd0; font:650 16px var(--brand); color:var(--accent); }
.mine-cell:hover { background:var(--accent-soft); border-color:var(--accent); }
.mine-cell[data-open="true"] { background:#e8edf360; border-color:#c8d2e25c; box-shadow:none; }
.mine-cell[data-count="2"] { color:#397a6b; }
.mine-cell[data-count="3"] { color:#a87743; }
.mine-cell[data-count="4"] { color:#86649c; }
.mine-cell[data-count="5"],.mine-cell[data-count="6"],.mine-cell[data-count="7"],.mine-cell[data-count="8"] { color:#b65766; }
.mine-cell[data-flag="true"] { color:var(--accent); }
.mine-cell[data-mine="true"] { color:#a54a5b; background:#f6dce2; }
.mines-controls { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:18px 0 14px; }
.mines-controls .app-button { white-space:nowrap; font-size:11px; padding:8px 10px; }
.mines-controls p { font-size:11px; color:#6a7e97; text-align:right; }
.clock-app { display:flex; flex-direction:column; text-align:center; min-height:100%; }
.clock-tabs { align-self:center; margin-bottom:27px; }
.clock-tabs button { min-width:110px; }
.clock-eyebrow { font-size:11px; color:#7b899e; }
.clock-display { font:400 clamp(44px,5vw,66px)/1.35 var(--brand); letter-spacing:-3px; font-variant-numeric:tabular-nums; margin:7px 0 18px; color:#435b7b; white-space:nowrap; }
.clock-duration { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:18px; }
.clock-duration label { font-size:11px; color:#7b899e; display:flex; align-items:center; gap:9px; }
.clock-duration input { border:1px solid #c6d2e3; border-radius:6px; background:#ffffff80; width:65px; padding:4px 7px; font-variant-numeric:tabular-nums; }
.clock-presets { display:flex; gap:8px; }
.clock-presets button { font-size:11px; background:#e5ebf5; padding:4px 12px; border-radius:5px; }
.clock-presets button:hover { background:var(--accent-soft); color:var(--accent); }
.clock-actions { display:flex; justify-content:center; gap:10px; }
.clock-actions .app-button { min-width:100px; }
.clock-status { min-height:25px; margin:12px 0 0; font-size:12px; color:var(--accent); }
.clock-app .utility-note { max-width:310px; margin:auto auto 0; padding-top:10px; }
.wallpaper-sample { height:106px; border-radius:9px; background:#273362 url('mourne-waterfall-768.webp') center 48%/cover; border:1px solid #48557a29; margin-bottom:23px; }
.settings-group { padding:0; border:0; margin:0 0 22px; }
.settings-group legend { font-size:12px; font-weight:600; margin-bottom:12px; }
.accent-options { display:flex; gap:9px; }
.accent-options button { display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:7px; border:1px solid transparent; background:#edf1f8; font-size:11px; }
.accent-options span { width:13px; height:13px; border-radius:50%; }
.accent-options button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.settings-group .segmented { display:inline-flex; }
.settings-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:18px; }
.settings-footer .app-button { font-size:11px; padding:6px 13px; }
@media(max-width:380px) {
  .mines-app,.clock-app,.settings-app { padding:18px; }
  .mines-board { gap:4px; }
  .accent-options { gap:4px; }
  .accent-options button { padding:7px; gap:5px; }
  .mines-controls { gap:7px; }
}

@container welcome (max-height:420px) {
  .studio-feature-row { display:none; }
  .studio-actions { margin:16px 0 0; }
}
.mines-app { padding:20px; }
.mines-app .utility-heading { margin-bottom:14px; }
.mines-app .utility-heading h2 { font-size:24px; }
.mines-app .utility-heading .app-eyebrow { display:none; }
.mines-toolbar { margin-bottom:12px; }
.mines-board { max-width:294px; gap:4px; }
.mines-controls { margin:0 0 12px; }
.mines-app>.utility-note { margin-top:14px; }
.app-window[data-app="clock"] .window-content { container:clock / size; }
.clock-tabs { margin-bottom:18px; }
.clock-display { font-size:58px; margin:5px 0 12px; }
.clock-duration { gap:7px; margin-bottom:15px; }
.clock-status { margin-top:10px; }
@container clock (max-height:440px) {
  .clock-app { padding:18px; }
  .clock-tabs { margin-bottom:12px; }
  .clock-display { font-size:46px; margin:3px 0 10px; }
  .clock-duration { margin-bottom:12px; gap:6px; }
  .clock-status { margin-top:7px; min-height:20px; }
  .clock-app .utility-note { font-size:10px; padding-top:7px; }
}

/* Separate business shortcuts from the two personal desktop folders. */
.desktop-icons { inset:0; display:block; pointer-events:none; }
.desktop-group { position:absolute; pointer-events:auto; }
.desktop-group--business { top:26px; left:24px; }
.desktop-group--personal { right:32px; bottom:16px; }
.desktop-group>div { display:grid; grid-template-columns:86px; gap:13px; }
.desktop-group--personal>div { grid-template-columns:86px 86px; gap:16px; }

.app-icon:is(.app-icon--games,.app-icon--tools) {
  margin-top:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  filter:drop-shadow(0 3px 3px #10224d30);
}
.app-icon--games { --folder-art:url('folder-games-full.svg'); }
.app-icon--tools { --folder-art:url('folder-tools-full.svg'); }
.app-icon:is(.app-icon--games,.app-icon--tools)::before {
  inset:0;
  border:0;
  border-radius:0;
  background:var(--folder-art) center/contain no-repeat;
  z-index:-1;
}
.app-icon:is(.app-icon--games,.app-icon--tools)::after { content:none; }
.app-icon:is(.app-icon--games,.app-icon--tools)>svg { transform:translateY(3px); }
.app-icon--snake { background:linear-gradient(145deg,#a7c98e,#518372); }
.app-icon--memory { background:linear-gradient(145deg,#e1b1a0,#b6778b); }
.app-icon--noughts { background:linear-gradient(145deg,#b4abd9,#746cb3); }
.folder-app { min-height:100%; display:flex; flex-direction:column; }
.folder-path { display:flex; align-items:center; gap:12px; padding:15px 22px; border-bottom:1px solid var(--line); font-size:12px; color:#8291a7; }
.folder-path>span:first-child { display:flex; align-items:center; gap:7px; }
.folder-path svg { width:15px; height:15px; }
.folder-path strong { color:#4d6484; font-weight:500; }
.folder-count { margin-left:auto; font-size:11px; }
.folder-items { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; padding:22px; }
.folder-item { min-height:124px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; background:transparent; border:1px solid transparent; border-radius:10px; padding:14px 8px; }
.folder-item:hover,.folder-item:focus-visible { background:var(--accent-soft); border-color:#acbddd60; }
.folder-item strong { font-size:13px; font-weight:550; }
.folder-item>span:last-child { font-size:11px; color:#7b8da5; line-height:1.5; }
.folder-footer { margin-top:auto; padding:13px 22px; border-top:1px solid var(--line); color:#8c9ab0; font-size:11px; }
.arcade-app { padding:22px; }
.game-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:#6e819c; margin-bottom:17px; }
.game-toolbar strong { font:500 21px var(--brand); color:var(--accent); margin-inline:4px; }
.game-toolbar>div { display:flex; gap:7px; }
.game-toolbar .app-button { padding:7px 10px; font-size:11px; }
.game-status { min-height:22px; color:#5c7595; font-size:12px; text-align:center; margin:14px 0; }
.arcade-app>.utility-note { text-align:center; margin-top:13px; }
.snake-board { max-width:306px; aspect-ratio:1; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(12,1fr); gap:2px; border:1px solid #adc4bb; border-radius:9px; padding:7px; margin:0 auto; background:#e4ece7; box-shadow:inset 0 1px 5px #546d6320; }
.snake-board span { background:#dee8e160; border-radius:3px; }
.snake-board .snake-body { background:#598878; }
.snake-board .snake-head { background:#2e5f55; box-shadow:inset 0 0 0 2px #ffffff35; }
.snake-board .snake-food { background:#c78857; border-radius:50%; transform:scale(.68); }
.snake-pad { display:flex; justify-content:center; gap:7px; }
.snake-pad button { width:41px; height:34px; border:1px solid #c6d3e4; border-radius:6px; background:#e9eff8; font-size:18px; }
.snake-pad button:hover { background:var(--accent-soft); }
.memory-board { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; max-width:330px; margin:auto; }
.memory-board button { aspect-ratio:1; border:1px solid #b8c8e0; border-radius:9px; background:linear-gradient(145deg,#e7eefa,#d5e0f2); box-shadow:inset 0 1px 0 #fff8; font:400 32px var(--brand); color:#8a9cbb; }
.memory-board button:hover { border-color:var(--accent); }
.memory-board button[data-shown="true"] { background:#fdfdff; color:var(--accent); }
.memory-board button[data-matched="true"] { background:#e0eee8; border-color:#b2d1c4; color:#517e6d; }
.noughts-board { max-width:285px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:auto; }
.noughts-board button { aspect-ratio:1; border:1px solid #c5d1e4; border-radius:8px; background:#e9eef7; font:400 52px/1 var(--brand); }
.noughts-board button:hover { background:var(--accent-soft); }
.noughts-board button[data-player="X"] { color:var(--accent); }
.noughts-board button[data-player="O"] { color:#ad849e; }
.noughts-board button[data-win="true"] { background:#dcece5; border-color:#9fc7b6; }
.water-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.water-setting label { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.water-setting input { width:18px; height:18px; accent-color:var(--accent); }
.water-setting .utility-note { margin-top:6px; }
.settings-app .wallpaper-sample { height:80px; margin-bottom:18px; }
.settings-app .settings-group { margin-bottom:18px; }
@media(max-width:850px) {
  .desktop-group--personal { right:24px; }
}
@media(max-width:700px) {
  .desktop-group--business { left:16px; top:24px; }
  .desktop-group--personal { right:16px; }
  .desktop-group>div,.desktop-group--personal>div { grid-template-columns:82px; gap:12px; }
  .folder-items { padding:16px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .folder-item { padding:12px 8px; }
  .folder-item>span:last-child { font-size:11px; }
  .folder-path { padding:13px 16px; gap:8px; }
  .arcade-app { padding:18px; }
}
@media(max-height:620px) and (min-width:851px) {
  .desktop-widget { display:none; }
}

.wallpaper-playback { position:absolute; left:32px; bottom:16px; display:flex; align-items:center; gap:8px; padding:9px 13px; color:#fff; background:#183245b3; border:1px solid #ffffff4a; border-radius:9px; backdrop-filter:blur(16px); font-size:12px; box-shadow:0 3px 16px #0c18251a; }
.wallpaper-playback:hover { background:#183245e0; }
.wallpaper-playback::before { content:'Ⅱ'; font-weight:700; font-size:13px; }
.wallpaper-playback[aria-pressed="false"]::before { content:'▷'; }
@media(max-aspect-ratio:1/1) {
  .wallpaper { background-position:86% center; }
  .wallpaper-sample { background-position:86% center; }
}
@media(max-width:700px) {
  .wallpaper-playback { left:20px; bottom:15px; font-size:11px; }
}

/* ---------------------------------------------------------------------------
   The static layer.

   index.html carries the real content as plain articles. With JavaScript the
   desktop takes over and mounts each article into a window, so the layer is
   hidden. Without JavaScript it is the whole site, and needs to read like a
   normal page: one column, generous measure, nothing clever.
--------------------------------------------------------------------------- */
html.js .static-site { display:none; }


/* Without JavaScript the dock, desktop icons and launcher are never filled in,
   and the intro can never run. Hide the empty furniture and let the articles
   below be the site, on the same wallpaper. */
html:not(.js) :is(.system-bar,.desktop,.dock-wrap,.launcher,.site-intro,.toast,.window-announcer) { display:none; }
html:not(.js) { height:auto; min-height:100%; overflow-y:auto; }
html:not(.js) body { height:auto; min-height:100%; overflow:visible; padding:34px 0; }

/* The app styles are written for a window: fixed sidebar columns, horizontal
   padding, two-up grids. In one flowing column those become a 178px-wide
   paragraph, so the static layer resets the layout roots and keeps the type. */
.static-site :is(.studio-layout,.service-item,.work-detail,.archive-detail,.form-pair) { display:block; }
.static-site .studio-layout { background:none; }
.static-site .studio-main { padding:0; display:block; }
.static-site .studio-main h1 { font-size:clamp(32px,7vw,44px); letter-spacing:-1.6px; }
.static-site .studio-intro { max-width:none; font-size:15px; }
.static-site :is(.service-item,.work-intro,.work-detail,.work-footer,.about-content,.contact-app,.service-app-intro,.service-app-footer,.archive-intro,.archive-detail,.archive-footer,.work-switch,.service-reassurance,.archive-closing) { padding-left:0; padding-right:0; }
.static-site :is(.work-figure,.archive-figure,.archive-logo) { margin-left:0; margin-right:0; }
.static-site .archive-compare { padding-left:0; padding-right:0; }
.static-site .archive-era { margin-left:0; margin-right:0; }
.static-site .studio-feature-row { display:flex; flex-wrap:wrap; gap:20px; }
.static-site .studio-actions { display:flex; flex-wrap:wrap; gap:10px; }
.static-site :is(.work-detail,.archive-detail) section + section { margin-top:18px; }
.static-site .form-pair .field + .field { margin-top:14px; }
.static-site .about-facts { flex-wrap:wrap; gap:22px; }
.static-site .service-item > svg { display:none; }
.static-site .work-switch { flex-wrap:wrap; }
.static-site .app-heading { font-size:clamp(24px,5vw,30px); }

.static-site {
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 auto;
  padding:40px 22px 80px;
  color:var(--ink,#20263c);
  background:#fbfbfd;
  border-radius:18px;
  box-shadow:0 30px 90px #0e13281f;
}
.static-masthead { margin-bottom:38px; padding-bottom:20px; border-bottom:1px solid #48557a24; }
.static-brand { font-family:'Space Grotesk',system-ui,sans-serif; font-size:23px; font-weight:600; letter-spacing:-.02em; margin:0 0 4px; }
.static-masthead p:last-child { margin:0; font-size:13px; color:#5c6684; }
.static-app { margin-bottom:52px; padding-bottom:44px; border-bottom:1px solid #48557a1f; }
.static-app:last-of-type { border-bottom:0; }
.static-app .work-image { width:100%; height:auto; border-radius:10px; }
.static-app .studio-sidebar { display:none; }
.static-footer { padding-top:26px; border-top:1px solid #48557a24; font-size:13px; color:#5c6684; }
.static-footer p { margin:0 0 5px; }

/* Anchors do the work buttons used to. Keep them looking like the buttons. */
a.app-button { text-decoration:none; }
.sidebar-links a { text-decoration:none; }
.system-nav a { text-decoration:none; }

/* The archive reuses the Selected work rules above. Only the era label, which
   Selected work has no equivalent for, is its own. */
.archive-era {
  margin:0 32px 14px;
  font:500 10px/1.6 var(--brand);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8291a7
}

/* ---------------------------------------------------------------------------
   The archive: logo plate and the 2006 comparison strip.

   Both keep the Selected work gutter (32px) and the same figure treatment as
   .work-figure, so they read as part of the same window rather than additions.
--------------------------------------------------------------------------- */
/* The mark is pale grey and blue-grey on transparency: it was drawn to sit on
   a dark ground, which is why it vanishes on white. The plate uses the same
   slate the recovered screenshots are rendered on. */
.archive-logo {
  margin:0 32px 24px;
  padding:46px 30px;
  border-radius:10px;
  background:linear-gradient(165deg,#38434f,#272f3a);
  display:grid;
  place-items:center;
}
.archive-logo img { width:min(320px,68%); height:auto; display:block; }
.archive-logo figcaption {
  margin-top:26px;
  font:500 10px/1.6 var(--brand);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#93a3b8;
  text-align:center;
}

.archive-compare {
  margin-top:2px;
  padding:22px 32px 26px;
  border-top:1px solid var(--line);
}
.archive-compare h3 { font-size:13px; margin:0 0 8px; }
.archive-compare > p { margin:0 0 16px; font-size:13px; line-height:1.72; color:#75849a; }
/* Without JavaScript the three sites are a plain stacked list. With it,
   desktop-apps.js adds is-slideshow and shows one at a time. */
.archive-compare-row { display:grid; gap:20px; }
.archive-compare-row.is-slideshow { display:block; }
.archive-slide-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.archive-slide-arrows { display:flex; gap:6px; }
.archive-slide-arrows button {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:#ffffffb8;
  color:#5c6684;
  cursor:pointer;
}
.archive-slide-arrows button:hover { background:var(--accent-soft); color:var(--accent); }
.archive-slide-arrows svg { width:15px; height:15px; }
.archive-compare figcaption strong { display:block; font-weight:600; color:#3c4560; }
.archive-compare figcaption span { display:block; margin-top:2px; }
.archive-compare figcaption code { font-size:10.5px; }
.archive-verdict {
  margin:16px 0 0;
  padding:14px 16px;
  border-radius:9px;
  background:var(--accent-soft);
  font-size:13px;
  line-height:1.7;
  color:#3c4560;
}
.archive-verdict strong { color:var(--accent); }
.archive-compare figure { margin:0; }
.archive-compare img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid #c8d2e3;
  border-radius:5px;
  background:white;
}
.archive-compare figcaption { margin-top:7px; font-size:11px; color:#8291a7; }
.archive-compare-note { margin:12px 0 0; font-size:11px; line-height:1.65; color:#8291a7; }
.archive-why { border-top:1px solid var(--line); padding-top:18px; }

@media (max-width: 700px) {
  .archive-logo { margin:0 20px 18px; padding:26px 20px; }
  .archive-compare { padding:20px 20px 22px; }
  .archive-slide-controls { flex-wrap:wrap; }
}

/* A deferred image has no src yet, so it must never be laid out: it would
   render as a broken box beside its <noscript> twin. This has to outrank the
   per-component display rules above (.archive-compare img sets display:block
   at equal specificity and would otherwise win on source order), so it is
   deliberately marked important rather than relying on ordering. */
img[data-src] { display:none !important; }

/* A plain-language aside: the desktop is a demonstration, not the only thing
   on offer. It sits between the service list and the pricing footer. */
.service-reassurance {
  margin:0;
  padding:20px 33px 4px;
  font-size:13px;
  line-height:1.75;
  color:#75849a;
}
.archive-why h3 { font-size:13px; margin:0 0 8px; }
.archive-why p { margin:0 0 10px; font-size:13px; line-height:1.75; color:#75849a; }
.archive-why p:last-child { margin-bottom:0; }
/* Extra window space changes the arrangement, never the scale of the artwork.
   The Modmedia captures are 2x; the comparison captures are only 900px wide. */
.app-window[data-app="archive"] .window-content { container:archive / inline-size; }
.archive-layout { max-width:1320px; margin-inline:auto; }
.archive-layout .archive-pages {
  display:grid;
  gap:24px;
  padding:0 32px 26px;
  align-items:start;
}
.archive-layout .archive-figure { width:100%; max-width:660px; margin:0 auto; min-width:0; }
.archive-layout .archive-figure img { display:block; }
.archive-layout .archive-intro .app-text { max-width:65ch; }
.archive-compare-gallery { width:100%; max-width:600px; margin-inline:auto; min-width:0; }
.archive-compare-context { min-width:0; }
.archive-compare-context > p { font-size:13px; line-height:1.72; color:#75849a; }
.archive-compare-context .archive-compare-note { font-size:11px; }
.archive-compare-context .archive-verdict { margin-bottom:20px; }
.archive-compare-layout { display:grid; gap:24px; align-items:start; }
@container archive (min-width: 960px) {
  .archive-opening { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; padding:28px 32px; gap:32px; }
  .archive-opening .archive-intro { padding:0; }
  .archive-opening .archive-logo { margin:0; padding:28px 24px; }
  .archive-layout .archive-pages { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .archive-compare-layout { grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:28px; }
  .archive-compare-context > :first-child { margin-top:0; }
}
@container archive (max-width: 620px) {
  .archive-layout .archive-intro { padding:24px 20px; }
  .archive-layout .archive-logo { margin:0 20px 22px; padding:26px 20px; }
  .archive-layout .archive-pages { padding-inline:20px; }
  .archive-layout .archive-detail { grid-template-columns:1fr; padding-inline:20px; }
  .archive-layout .archive-compare { padding-inline:20px; }
  .archive-layout .archive-slide-controls { flex-wrap:wrap; }
  .archive-layout .archive-footer { flex-wrap:wrap; gap:16px; padding-inline:20px; }
}
.archive-closing {
  margin:0;
  padding:4px 32px 22px;
  font-size:13px;
  line-height:1.75;
  color:#75849a;
}
.about-aside {
  padding:14px 16px;
  border-radius:9px;
  background:var(--accent-soft);
  color:#3c4560;
}

/* Confirm an enquiry in the window itself, clear of the form's scroll position. */
.contact-confirmation {
  min-height:100%; padding:32px 26px; display:grid; place-content:center;
  justify-items:center; gap:15px; text-align:center;
  background:radial-gradient(ellipse at 50% 15%,#eaf3ff,transparent 65%);
}
.contact-confirmation-mark {
  display:grid; place-items:center; width:66px; height:66px; margin-bottom:6px;
  color:var(--accent); background:var(--accent-soft); border-radius:50%;
  border:1px solid #5579ad25;
}
.contact-confirmation-mark svg { width:34px; height:34px; }
.contact-confirmation h2 { font:500 clamp(30px,5vw,40px)/1.1 var(--brand); letter-spacing:-.045em; }
.contact-confirmation > p:not(.app-eyebrow) { max-width:340px; font-size:16px; line-height:1.6; color:#66768d; }
.contact-confirmation .contact-confirmation-email { font-size:14px!important; overflow-wrap:anywhere; max-width:100%; }
.contact-confirmation-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:12px; }

/* Bin occupies the last desktop position; the two folders sit above it. */
.desktop-group--recycle { right:32px; bottom:16px; }
.desktop-group--personal { bottom:118px; }
.app-icon--recycle { background:none; box-shadow:none; border-radius:0; filter:drop-shadow(0 3px 3px #15253570); }
.app-icon--recycle::before,.app-icon--recycle::after { content:none; }
.app-icon--recycle > svg { width:49px; height:49px; }
.app-icon--picture { background:linear-gradient(145deg,#b3c5dd,#6c88af); }
.bin-app { min-height:100%; display:flex; flex-direction:column; }
.bin-list-heading,.bin-file { display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:16px; align-items:center; padding:10px 22px; }
.bin-list-heading { border-bottom:1px solid var(--line); color:#73839a; font-size:12px; background:#eef2f780; }
.bin-file-list { padding:4px 0; }
.bin-file { width:100%; min-height:57px; text-align:left; background:transparent; border-bottom:1px solid #293d620a; }
.bin-file:hover,.bin-file:focus-visible { background:var(--accent-soft); }
.bin-file-name { display:flex; align-items:center; gap:12px; min-width:0; font-size:14px; }
.bin-file-name > svg { width:26px; height:26px; flex-shrink:0; color:var(--accent); }
.bin-file-name > span { overflow-wrap:anywhere; }
.bin-file-kind { color:#73839a; font-size:13px; }
.bin-note { margin:auto 0 0; padding:24px 22px 18px; font-size:14px; line-height:1.6; color:#62738b; }
.bin-status { padding:9px 22px; border-top:1px solid var(--line); font-size:12px; color:#7b8da5; }
.bin-image-app { height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.bin-image-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); flex-shrink:0; }
.bin-image-stage { position:relative; flex:1; min-height:0; overflow:auto; background:#e6ebf2; }
.bin-image-stage img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:100%; max-height:100%; padding:18px; object-fit:contain; }
.bin-image-stage.is-zoomed img { position:static; width:1024px; height:auto; max-width:none; max-height:none; padding:0; }
.bin-document-label { font-size:13px; color:#72829a; }
.bin-web-page { display:block; width:100%; flex:1; min-height:0; border:0; background:#faf9ff; }
@media(max-width:850px) { .desktop-group--recycle { right:24px; } }
@media(max-width:700px) {
  .desktop-group--recycle { right:16px; bottom:16px; }
  .bin-list-heading,.bin-file { grid-template-columns:minmax(0,1fr) 98px; gap:8px; padding-left:16px; padding-right:16px; }
  .bin-file-kind { font-size:12px; }
  .bin-note { padding:20px 16px; }
}