/* SYK OS — desain C3 "Spec" dengan huruf ala C1 (Instrument Serif + Geist + Geist Mono). */
:root {
  --bg: #ECEEF1; --panel: #F7F8FA; --ink: #0B0D10; --ink2: #3A4048; --muted: #545A63;
  --line: #CDD2D9; --line2: #DDE1E6; --accent: #2F6FE4; --accent-ink: #1F55BA;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h3 { font-family: var(--sans); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; color: #fff; }
.mono { font-family: var(--mono); font-size: 13px; }
.small { font-size: 12px; } .tiny { font-size: 11px; }
.muted { color: var(--muted); } .dim { color: #8E949D; } .accent { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sec { padding-top: 128px; }
@media (max-width: 720px) { .sec { padding-top: 88px; } .wrap { padding-left: 16px; padding-right: 16px; } }

/* ---------- navigasi berbentuk island ---------- */
.top { position: sticky; top: 0; z-index: 10; padding: 14px 12px 0; display: flex; justify-content: center; pointer-events: none; }
.isle { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; background: var(--ink); border-radius: 30px; padding: 6px 6px 6px 16px; max-width: 100%; box-shadow: 0 10px 30px rgba(11, 13, 16, .18); }
.isle-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }
.isle-brand:hover { color: #fff; }
.isle-link { color: #C9CDD3; font-size: 13px; text-decoration: none; }
.isle-link:hover { color: #fff; }
.isle-lang { display: flex; background: #1D2127; border-radius: 999px; padding: 3px; }
.isle-lang a { font-family: var(--mono); font-size: 12px; min-width: 44px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: #A7ADB6; text-decoration: none; }
.isle-lang a:hover { color: #fff; }
.isle-lang a[aria-current] { background: var(--bg); color: var(--ink); }
.isle-cta { background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 11px 18px; border-radius: 999px; text-decoration: none; }
.isle-cta:hover { background: var(--accent-ink); color: #fff; }
@media (max-width: 960px) { .isle-link { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding-top: 88px; }
.gridlines { position: absolute; inset: 0 24px; z-index: -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); pointer-events: none; }
.gridlines span { border-left: 1px solid var(--line2); }
.gridlines span:last-child { border-right: 1px solid var(--line2); }
.hero-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 48px; }
.hero-title { flex: 1 1 640px; }
.hero-title > .mono { margin: 0; }
.hero-side { flex: 1 1 340px; }
h1 { margin: 18px 0 0; font: 400 clamp(52px, 7.4vw, 108px)/.95 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
h1 em, .h2 em, .h3 em { font-style: italic; color: #6B717B; }
.lead { margin: 16px 0 0; max-width: 620px; font-size: 18px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }
.hero-side .lead { margin-top: 0; }
.hero-side .mono { margin: 18px 0 0; }
.actions { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; font: 500 16px var(--sans); text-decoration: none; border: 0; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-ink { background: var(--ink); color: #fff; } .btn-ink:hover { background: #262B33; color: #fff; }
.btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-ink); color: #fff; }
.btn-lg { min-height: 56px; padding: 0 32px; font-size: 17px; font-weight: 600; }
.link { font-size: 16px; color: var(--ink); }
.hero-fig { margin: 64px 0 0; }
.legend { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px 32px; font-size: 15px; color: var(--ink2); }
.legend .mono { color: var(--ink); font-size: 12px; }
.pin { position: absolute; width: 28px; height: 28px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 13px/28px var(--mono); text-align: center; box-shadow: 0 0 0 4px rgba(47, 111, 228, .22); }

/* ---------- judul ---------- */
.h2 { margin: 0; max-width: 920px; font: 400 clamp(42px, 5.4vw, 76px)/1 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.h3 { margin: 0; font: 400 34px/1.05 var(--serif); letter-spacing: -.01em; }
section > .mono:first-child { margin: 0 0 14px; }

/* ---------- RAM ---------- */
.split { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.split > .h3 { flex: 0 0 280px; }
.split-main { flex: 1 1 640px; }
.ram-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 96px; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ram-row .mono { font-size: 15px; text-align: right; }
.ram-bar { height: 12px; background: var(--line2); border-radius: 2px; display: flex; }
.ram-bar span { border-radius: 2px; }
.tone-base { background: #8E949D; } .tone-accent { background: var(--accent); } .tone-ink { background: var(--ink); }
.ram-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.6; }
@media (max-width: 560px) { .ram-row { grid-template-columns: 1fr 88px; } .ram-bar { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- keunggulan ---------- */
.adv { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 0 32px; border-bottom: 1px solid var(--line); }
.adv-item { padding: 24px 0 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 8px; }
.adv-item .mono { padding-top: 8px; }
.adv-item h3 { margin: 0; font: 400 28px/1.1 var(--serif); }
.adv-item p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink2); }

/* ---------- blok hitam SYK Island ---------- */
.sec-bleed { padding: 128px 16px 0; }
.black { max-width: 1320px; margin: 0 auto; background: var(--ink); color: #E8EAED; border-radius: 32px; padding: 80px 40px; }
.black-in { max-width: 1180px; margin: 0 auto; }
.black-in > .mono:first-child { margin: 0; }
.on-dark { margin-top: 16px; color: #F2F3F5; }
.on-dark em { color: #8E949D; }
.on-dark-2 { color: #A7ADB6; }
.states { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr)); gap: 1px; background: #262A31; border: 1px solid #262A31; border-radius: 16px; overflow: hidden; }
.states figure { margin: 0; background: var(--ink); padding: 24px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.states figcaption { align-self: flex-start; }
.gallery { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; align-items: start; }
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.gallery-col { display: flex; flex-direction: column; gap: 24px; }
.black .scroll-x { margin-top: 56px; }
@media (max-width: 720px) { .sec-bleed { padding: 88px 8px 0; } .black { padding: 56px 18px; border-radius: 24px; } }

/* ---------- tabel ---------- */
.scroll-x { overflow-x: auto; margin-top: 40px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table.wide { min-width: 600px; }
.table th, .table td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-weight: 400; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--ink); padding-top: 10px; padding-bottom: 10px; }
.table tbody th { font-weight: 500; }
.table td { color: var(--ink2); }
.table-dark thead th { color: #8E949D; border-bottom-color: #3A3F47; }
.table-dark th, .table-dark td { border-bottom-color: #22262C; }
.table-dark tbody th { color: #F2F3F5; }
.table-dark td { color: #A7ADB6; }
.cmp thead th { font: 600 16px var(--sans); color: var(--ink); }
.cmp thead th.accent { color: var(--accent); }
.cmp tbody th { width: 28%; }
.opts td { padding-top: 10px; padding-bottom: 10px; }
.opts tbody th { width: 28%; }
kbd { font: 13px var(--mono); background: #fff; border: 1px solid #C3C9D1; border-bottom: 3px solid #AEB5BF; border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.keys { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- gambar & keterangan ---------- */
figure { margin: 0; }
.figcap { margin-top: 10px; font-size: 14px; color: var(--muted); }
.figcap .mono { color: var(--ink); font-size: 12px; }
.row-figs { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 24px; }
.col-figs { flex: 1 1 600px; max-width: 760px; display: flex; flex-direction: column; gap: 24px; }
.fig-snap { flex: 0 1 400px; }
.fig-layouts { flex: 1 1 520px; max-width: 720px; }
.fig-dock { flex: 0 1 560px; }
.lock-sec { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px 48px; }
.lock-fig { flex: 1 1 560px; max-width: 760px; }
.lock-text { flex: 1 1 300px; padding-bottom: 28px; }
.extras { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 32px; }
.extras > div { border-top: 1px solid var(--line); padding: 16px 0; }
.extras h3 { margin: 0; font-size: 16px; font-weight: 600; }
.extras p { margin: 6px 0 0; font-size: 15px; color: var(--ink2); }
.tools-fig { margin: 48px auto 0; max-width: 880px; }

/* ---------- opsi ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; border: 1px solid #AEB5BF; border-radius: 999px; padding: 5px 13px 5px 9px; color: var(--ink); }
.chip i { width: 8px; height: 8px; border-radius: 999px; border: 1px solid #6B717B; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on i { background: #fff; border-color: #fff; }
.debloat { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px 32px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.card h3 { margin: 0; font: 400 28px/1.1 var(--serif); }
.card h3 .mono { font-family: var(--mono); }
.card p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink2); }
#options > p.mono { margin: 20px 0 0; line-height: 1.6; }

/* ---------- pasang ---------- */
.steps { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.steps .mono { font-size: 15px; padding-top: 8px; }
.steps h3 { margin: 0; font: 400 28px/1.15 var(--serif); }
.steps p { margin: 4px 0 0; font-size: 15px; color: var(--ink2); }
.after-fig { margin: 56px 0 0; }
.faq { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 0 32px; }
.faq > div { padding: 20px 0; border-top: 1px solid var(--line); }
.faq h3 { margin: 0; font: 400 26px/1.15 var(--serif); }
.faq p { margin: 6px 0 0; font-size: 15px; color: var(--ink2); }

/* ---------- unduh ---------- */
.dlbar { background: var(--ink); color: #fff; border-radius: 48px; padding: 20px 20px 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.dlbar dl { flex: 1 1 420px; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; }
.dlbar dt { font-size: 11px; color: #8E949D; }
.dlbar dd { margin: 2px 0 0; }
.dlbar a:not(.btn) { color: #fff; }
@media (max-width: 640px) { .dlbar { border-radius: 28px; } }

/* ---------- laporan bug ---------- */
.bug { display: flex; flex-wrap: wrap; gap: 40px 48px; padding-bottom: 128px; }
.bug-text { flex: 1 1 320px; }
.bug-form { position: relative; flex: 1.5 1 520px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.f-row { display: flex; flex-wrap: wrap; gap: 18px; }
.f { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.f label { font-size: 12px; color: var(--muted); }
.f input, .f select, .f textarea { font: 16px var(--sans); color: var(--ink); padding: 12px 14px; border: 1px solid #AEB5BF; border-radius: 8px; background: #fff; width: 100%; }
.f textarea { resize: vertical; }
.f input[type=file] { padding: 8px; font-size: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.f-status { margin: 0; font-size: 14px; color: var(--ink2); }
.f-status.ok { color: #1E6B34; } .f-status.err { color: #B42318; }
@media (max-width: 560px) { .bug-form { padding: 20px; } }

.foot { border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 32px; padding-bottom: 48px; }
.foot p { margin: 0; }

/* ---------- mockup berukuran tetap, diskalakan oleh site.js ---------- */
.fit { position: relative; width: 100%; max-width: calc(var(--w) * 1px); aspect-ratio: var(--w) / var(--h); }
.fit.grow { max-width: none; }
.fit-in { position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform: scale(var(--s, 1)); transform-origin: 0 0; }
.shadow-lg { box-shadow: 0 30px 70px rgba(11, 13, 16, .16); border-radius: 28px; }
.shadow-md { box-shadow: 0 24px 48px rgba(11, 13, 16, .16); border-radius: 14px; }
.round-28 { border-radius: 28px; overflow: hidden; }
.round-14 { border-radius: 14px; }
.bordered { border: 1px solid var(--line); }

.mk { font-family: var(--sans); color: #fff; line-height: 1.3; }
.mk b { font-weight: 600; }
.mk-dim { color: #A1A1A6; }
.mk-row { display: flex; align-items: center; gap: 12px; }
.mk-col { display: flex; flex-direction: column; }
.mk-island { width: 520px; height: 56px; display: flex; align-items: center; justify-content: center; }
.mk-pill { display: flex; align-items: center; gap: 14px; background: #000; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.mk-pill .mk-dim { font-weight: 500; }
.mk-pill--media { gap: 12px; padding: 7px 18px 7px 7px; font-weight: 400; }
.mk-pill--wide { gap: 12px; padding: 12px 20px; }
.mk-dot { width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.mk-chip { background: #1C1C1E; border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.mk-bat { display: flex; align-items: center; gap: 6px; }
.mk-bat-cell { width: 24px; height: 12px; border: 1.5px solid #fff; border-radius: 4px; padding: 1.5px; display: flex; }
.mk-bat-cell span { background: #30D158; border-radius: 1.5px; }
.mk-eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.mk-eq i { width: 3px; background: #17B6D6; border-radius: 2px; }
.mk-bar { display: flex; height: 5px; border-radius: 3px; background: #3A3A3C; }
.mk-bar span { background: #fff; border-radius: 3px; }
.mk-grow { flex: 1; height: 6px; }
.mk-card { background: #000; border-radius: 28px; display: flex; flex-direction: column; }
.mk-card > .mk-col { gap: 10px; }
.mk-title { font-size: 15px; font-weight: 600; padding: 2px 4px 0; }
.mk-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-tile { background: #1C1C1E; border-radius: 16px; padding: 12px 14px; }
.mk-tile--on { background: #2F6FE4; }
.mk-tile-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.mk-tile-s { margin-top: 4px; font-size: 12px; color: #A1A1A6; }
.mk-sub { background: #1C1C1E; border-radius: 16px; display: flex; flex-direction: column; }
.mk-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #1C1C1E; border-radius: 14px; padding: 4px; font-size: 13px; font-weight: 500; text-align: center; }
.mk-seg span { padding: 9px 0; border-radius: 10px; color: #A1A1A6; }
.mk-seg span.on { background: #3A3A3C; color: #fff; }
.mk-art { width: 60px; height: 60px; border-radius: 14px; background: #17B6D6; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mk-cal-w, .mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mk-cal-w { font-size: 11px; color: #A1A1A6; }
.mk-cal { font-size: 13px; }
.mk-cal span { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 999px; }
.mk-cal span.on { background: #2F6FE4; font-weight: 700; }
.mk-search { height: 44px; flex-shrink: 0; background: #1C1C1E; border-radius: 14px; padding: 0 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #A1A1A6; }
.mk-label { font-size: 12px; font-weight: 600; color: #A1A1A6; padding: 0 4px; }
.mk-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.mk-app { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mk-app span { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; }
.mk-app small { font-size: 11px; color: #D2D2D7; max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-file { height: 40px; border-radius: 12px; padding: 0 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mk-file + .mk-file { margin-top: -6px; }
.mk-file.on { background: #1C1C1E; }
.mk-file > span:first-child { width: 22px; height: 22px; border-radius: 6px; }
.mk-win { height: 100px; border-radius: 12px; background: #1C1C1E; overflow: hidden; display: flex; flex-direction: column; }
.mk-win.on { box-shadow: 0 0 0 2px #2F6FE4; }
.mk-win-bar { height: 16px; background: #2C2C2E; display: flex; align-items: center; padding: 0 8px; }
.mk-win-bar span { width: 6px; height: 6px; border-radius: 999px; }
.mk-win-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.mk-win-body i { height: 6px; border-radius: 3px; background: #2C2C2E; }
.mk-win-body i:first-child { background: #3A3A3C; }
.mk-desk-thumb { height: 100px; border-radius: 12px; background: #1E3A6E; position: relative; overflow: hidden; }
.mk-desk-thumb.on { box-shadow: 0 0 0 2px #2F6FE4; }
.mk-desk-thumb span { position: absolute; }
.mk-desk-new { height: 100px; border-radius: 12px; border: 1.5px dashed #48484A; display: flex; align-items: center; justify-content: center; color: #A1A1A6; }
.mk-snap { height: 68px; background: #1C1C1E; border-radius: 12px; padding: 8px; display: flex; gap: 4px; }
.mk-lock { width: 760px; height: 475px; background: #0B1530; border-radius: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mk-lock-time { margin-top: 6px; font-size: 128px; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.mk-lock-date { margin-top: 12px; font-size: 22px; font-weight: 500; color: #C7D3EC; }
.mk-tools { width: 880px; height: 540px; background: #141414; border: 1px solid #2C2C2E; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.mk-tbar { height: 36px; flex-shrink: 0; background: #1F1F1F; display: flex; align-items: center; padding-left: 14px; gap: 8px; font-size: 12px; color: #D2D2D7; }
.mk-tctl { width: 46px; display: flex; justify-content: center; }
.mk-tside { width: 220px; flex-shrink: 0; background: #191919; padding: 18px 12px; display: flex; flex-direction: column; gap: 20px; }
.mk-tside > .mk-col { gap: 4px; }
.mk-tnav { height: 36px; border-radius: 8px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.mk-tnav i { width: 3px; height: 16px; border-radius: 2px; }
.mk-tnav.on { background: #2A2A2A; } .mk-tnav.on i { background: #2F6FE4; }
.mk-tmain { flex: 1; padding: 26px 32px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-tcard { border: 1px solid #2C2C2E; border-radius: 12px; background: #1C1C1E; padding: 15px 17px; display: flex; flex-direction: column; gap: 6px; }
.mk-tcard.on { border: 2px solid #2F6FE4; padding: 14px 16px; }
.mk-tcard span { font-size: 12px; line-height: 1.5; color: #A1A1A6; }
.mk-trow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.mk-tbtn { font-size: 12px; background: #2C2C2E; border-radius: 6px; padding: 8px 14px; flex-shrink: 0; }
.mk-toggle { width: 40px; height: 22px; flex-shrink: 0; border-radius: 999px; background: #3A3A3C; display: flex; align-items: center; padding: 3px; }
.mk-toggle span { width: 16px; height: 16px; border-radius: 999px; background: #fff; }
.mk-lay { background: #111113; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.mk-lay-desk { height: 150px; border-radius: 14px; background: #2A3B5C; position: relative; overflow: hidden; }
.mk-lay-desk > span { position: absolute; }
.mk-lay-dock { bottom: 10px; left: 50%; transform: translateX(-50%); height: 26px; border-radius: 9px; background: #000; display: flex; align-items: center; gap: 5px; padding: 0 8px; }
.mk-dock { background: #000; border-radius: 20px; padding: 9px 13px; display: flex; align-items: center; gap: 10px; }
.mk-dock-btn { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.mk-dock-btn.on { background: #2C2C2E; }
.mk-dock-sep { width: 1px; height: 26px; background: #3A3A3C; }
.mk-slider { position: relative; height: 18px; }
.mk-slider i { position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: #3A3A3C; }
.mk-slider b { position: absolute; left: 0; width: 36%; top: 7px; height: 4px; border-radius: 2px; background: #2F6FE4; }
.mk-slider span { position: absolute; left: calc(36% - 9px); top: 0; width: 18px; height: 18px; border-radius: 999px; background: #fff; }
.mk-desktop { width: 1080px; height: 675px; position: relative; overflow: hidden; border-radius: 28px; }
.mk-scs { position: absolute; top: 28px; left: 24px; display: flex; flex-direction: column; gap: 20px; }
.mk-sc { width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mk-sc > span { position: relative; width: 48px; height: 48px; }
.mk-sc i { position: absolute; left: 0; bottom: 0; width: 14px; height: 14px; border-radius: 3px; background: #fff; display: flex; align-items: center; justify-content: center; }
.mk-sc small { font-size: 12px; font-weight: 500; }
.mk-desk-top, .mk-desk-panel, .mk-desk-start, .mk-desk-dock { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.mk-desk-top { top: 12px; } .mk-desk-panel { top: 80px; } .mk-desk-start { bottom: 88px; } .mk-desk-dock { bottom: 16px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }