/* DiskPearl V36.5 • Ardoise & Or — shared public-site design system */
:root{
 --display:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --body:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --mono:ui-monospace,"SF Mono",Menlo,monospace;
 --ground:#f7f5ef;--surface:#fffefa;--surface-2:#efeae0;--ink:#26323c;
 --muted:#70736d;--line:#ded8cc;--blue:#8c6633;--teal:#687b68;
 --nacre-1:#ebe8d9;--nacre-2:#f0e4cc;--nacre-3:#efe0d7;--nacre-4:#e6e3dc;
 --pearl-hi:#fffefa;--pearl-mid:#f4e5c8;--pearl-lo:#cbb88f;
 --iris-a:#8b7856;--iris-b:#ab8650;--iris-c:#8a7262;
 --shadow:0 20px 55px -30px #26323c38;--map-l:73%;--map-s:24%;
 --lane-ice:#e9dfca;--lane-sky:#d4bd95;--lane-azure:#ad956b;--lane-royal:#6e7e81;--lane-periwinkle:#afbaa5;--lane-glow:#c7af84;
}
:root[data-theme="dark"]{--ground:#171e24;--surface:#202a32;--surface-2:#29343c;--ink:#f1ede3;--muted:#b7b4aa;--line:#3e484b;--blue:#dec496;--teal:#b9c5a4;--nacre-1:#303a32;--nacre-2:#393329;--nacre-3:#3c302c;--nacre-4:#333639;--map-l:65%;--map-s:22%}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#171e24;--surface:#202a32;--surface-2:#29343c;--ink:#f1ede3;--muted:#b7b4aa;--line:#3e484b;--blue:#dec496;--teal:#b9c5a4;--nacre-1:#303a32;--nacre-2:#393329;--nacre-3:#3c302c;--nacre-4:#333639;--map-l:65%;--map-s:22%}}
body{letter-spacing:-.012em;background-color:var(--ground)}
h1,h2,h3{letter-spacing:-.045em;text-wrap:balance}
p{line-height:1.65}a,button,input,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.logo{display:inline-block!important;width:42px;height:42px;border-radius:0;background: url('./app-icon.png') center/contain no-repeat!important;box-shadow:none!important}
.wordmark{font-weight:680;letter-spacing:-.055em;white-space:nowrap}.wordmark>span{color:var(--blue)}
.top{background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}
.bar{min-height:82px;gap:22px}.brand{font-size:1.3rem}.brand small{font-size:.7rem;letter-spacing:.03em}.links a{font-size:.83rem;font-weight:500}
.btn{border-radius:12px;padding:15px 22px;letter-spacing:-.015em;transition:background .2s,transform .2s,box-shadow .2s}
.btn.primary{background:linear-gradient(135deg,#f1dfbb,#d7bd8e);border:1px solid #b99d6c;color:#26323c;box-shadow:0 4px 14px #26323c12}
.btn.nacre{background:var(--surface);border-color:var(--line);box-shadow:none}
.nacrefield{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 35%,#53606866,transparent 50%),linear-gradient(125deg,#172128,#2b3740 70%,#202b33);color:#fffaf0}
.hero{padding-block:86px 88px;gap:48px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero .eyebrow{color:#d8c39f;font-size:.7rem;letter-spacing:.18em}
.hero h1{font-size:clamp(2.8rem,5.2vw,4.25rem);line-height:1.04;font-weight:600;letter-spacing:-.065em;max-width:650px}
.hero .iris{background:linear-gradient(110deg,#fff4db,#d8c097 48%,#e4d5bd 80%);background-clip:text;-webkit-background-clip:text}
.hero .lead{color:#c1c7c6;font-size:1.03rem;line-height:1.8;max-width:35em}
.hero .fine{color:#bdc5c4;font-size:.76rem;gap:12px 20px}.hero .fine span::before{width:6px;height:6px;background:#d9c298;box-shadow:none}
.hero .btn.nacre{background:#ffffff07;border-color:#aeb9b83d;color:#f2e8d6}
.hero .btn.dl:hover,.hero .btn.dl:focus-visible{animation:none;box-shadow:0 5px 24px #d9bf8d25}
.orbstage{display:grid;place-items:center;max-width:430px;position:relative}
.hero-icon{width:100%;height:auto;position:relative;z-index:1;filter:drop-shadow(0 24px 32px #080f1466)}
.orbit{position:absolute;border:1px solid #d8c19920;border-radius:50%;inset:0;transform:rotate(-25deg) scaleX(1.07)}
.orbit-two{inset:-7%;border-color:#d8c1990d;transform:rotate(25deg) scaleY(.94)}
.pearlrule{height:1px;background:linear-gradient(90deg,transparent,#b89e71,transparent);opacity:.5}
section.wrap{padding-block:88px}.sechead{gap:16px;margin-bottom:38px}.eyebrow{font-size:.7rem;font-weight:650;letter-spacing:.16em;color:var(--blue)}
.sechead h2{font-weight:580;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.15}.sechead p{font-size:1rem}
.bigbar,.readout,.feat,.plan,.ledger,.carte{border-radius:18px;box-shadow:0 12px 36px -26px #26323c30}
.bigbar,.readout{padding:30px}.maparea{border-radius:50%;background:radial-gradient(circle,#e3d6ba22,transparent 68%)}
.core{inset:32%;gap:8px;align-content:center;justify-items:center;border-radius:50%;background:radial-gradient(ellipse at 30% 15%,#fffefa,#f2edde);border:1px solid #d9c9aa;box-shadow:inset 0 1px 3px white,0 6px 22px #26323c0e}
.center-pearl{width:clamp(30px,5vw,50px);height:clamp(30px,5vw,50px)}
.core strong{font-family:var(--body);font-weight:600;font-size:clamp(1.55rem,3vw,2.2rem);letter-spacing:-.065em;color:#26323c;line-height:1.1}
.core strong small{font:500 .45em var(--body);letter-spacing:0;color:#70736d}.core span{font-size:.67rem;color:#73766f}
.pearl{background:radial-gradient(circle at 30% 22%,#fff 0 9%,#fff6df 25%,transparent 55%),radial-gradient(ellipse at 70% 72%,#e7c6ab,transparent 50%),conic-gradient(from 30deg,#dcc398,#faedd6,#cfdbca,#e3d0d8,#e6c49c,#dcc398);box-shadow:inset -5px -7px 14px #8b754330,inset 4px 5px 8px #fff8,0 4px 10px #26323c18}
.readout .name{font-weight:600}.readout .size{font-weight:550;color:var(--blue)}.readout .hint{font-size:.73rem;text-transform:uppercase;letter-spacing:.1em}
.feat{padding:30px;gap:14px}.feat h3{font-size:1.22rem;font-weight:620;letter-spacing:-.025em}.feat p{font-size:.93rem}
.feat .ico{border-radius:13px;background:linear-gradient(145deg,var(--surface),var(--nacre-2));border:1px solid var(--line);box-shadow:none}.feat .ico svg{stroke:var(--blue)}
.feat.flash .badge{color:var(--blue);text-shadow:none;border:1px solid var(--line);box-shadow:none;background:var(--surface)}
.payload{background:#202c34;color:#f1e8d8;border:1px solid #455057}.payload .k{color:#deca9f}.payload .v{color:#c4ccb9}.payload .m{color:#e8cbb6}.payload .c,.payload .title{color:#a1afaf}
.privband{border-block:1px solid var(--line)}.plan.main{border-color:#bda475;background:linear-gradient(150deg,var(--surface) 45%,var(--nacre-2))}.plan{padding:34px}.price b{font-weight:550;letter-spacing:-.07em}
footer{background:var(--surface);padding-block:40px}.lang button[aria-pressed="true"]{background:var(--ink)}
@media(max-width:1080px){.bar{flex-wrap:wrap;gap:10px 18px;padding-block:10px}.bar nav.links{display:flex;order:4;width:100%;overflow:auto;gap:24px;white-space:nowrap;padding:8px 0 3px}.hero{gap:26px}}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-block:56px;gap:30px}.hero h1{max-width:700px}.hero .lead{max-width:40em}.orbstage{max-width:300px}.hero-icon{width:92%}.sechead{margin-bottom:28px}section.wrap{padding-block:60px}}
@media(max-width:560px){.bar{gap:6px 12px}.brand{font-size:1.15rem;gap:7px}.logo{width:36px;height:36px}.brand small{display:none}.bar nav.links{gap:21px}.hero h1{font-size:2.85rem}.hero .actions{gap:10px}.hero .btn{font-size:.88rem;padding:14px 17px}.orbstage{max-width:240px}.bigbar,.readout,.feat,.plan{padding:24px}.core{gap:6px}.core strong{font-size:1.65rem}.core span{font-size:.6rem}.center-pearl{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep decorative transforms inside the page; code samples scroll locally. */
body{overflow-x:clip}
section[id]{scroll-margin-top:104px}
.payload{min-width:0;max-width:100%;white-space:pre;overflow-x:auto}
@media(max-width:1080px){section[id]{scroll-margin-top:135px}}