/* The VIP room (vip.doorsdesk.com, AppControllerVipController): the invitation with the code and the presentation, noir and ivory with
   gold foil (the owner 24-25.10, the mockup claude.ai/artifact/SKJ4zEfxRnuXYQodfhUdwN). The fonts are on the portal (no Google in China). */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Latin Extended (the Polish ą ę ł ń ś ź ż ć, the Turkish ş ğ ı İ) - Google Fonts subset, OFL like the others */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500 600;font-display:swap;src:url(fonts/cormorant-italic-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500 600;font-display:swap;src:url(fonts/cormorant-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500 600;font-display:swap;src:url(fonts/cormorant-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/cormorant-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/cormorant-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/cormorant-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --noir:#0a0a0b; --ink:#141416; --line:#2b2a28; --ivory:#f4efe6; --paper:#fbf8f2; --sepia:#3a332b;
  --fg:#efe9de; --mute:#a59d90; --dim:#6f685e;
  --gold:#c9a36a; --gold2:#ecd3a3; --gold3:#9a7340;
  --foil:linear-gradient(115deg,#9a7340 0%,#e6c890 22%,#fff1cf 34%,#c9a36a 48%,#8d6534 66%,#e2c389 84%,#a57b45 100%);
  --serif:"Cormorant Garamond","Times New Roman",Georgia,serif; --sans:Manrope,"Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--noir);color:var(--fg);font:400 15px/1.65 var(--sans);margin:0}
.g{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1180px;margin:0 auto}
.kick{font:600 11px/1 var(--sans);letter-spacing:.38em;text-transform:uppercase;color:var(--gold)}
.serif{font-family:var(--serif);font-weight:500}
.foil{background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.cta-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border-radius:2px;font:700 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1px solid transparent;background:var(--foil);background-size:200% 100%;color:#21180c;transition:background-position .8s}
.cta-b:hover{background-position:100% 0}
.cta-b.line{background:transparent;color:var(--fg);border-color:rgba(201,163,106,.55)}
.cta-b.line:hover{border-color:var(--gold2)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ddlogo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.ddlogo img{height:30px;width:auto;display:block}
.ddlogo b{font:800 19px/1 var(--sans);letter-spacing:-.01em}.ddlogo b span{font-weight:600;color:var(--mute)}


/* ============ GATE ============ */
#gate{min-height:100vh;position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding-block:48px 100px;overflow:hidden;
  background:radial-gradient(1100px 700px at 50% 38%,#24201b 0%,#0d0c0b 60%,#050505 100%)}
.cardw{perspective:1400px;width:100%;max-width:560px}
.invite{position:relative;background:var(--paper);color:var(--sepia);padding:54px 48px 46px;text-align:center;display:grid;gap:20px;justify-items:center;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(201,163,106,.25);transform-style:preserve-3d;transition:transform .25s ease-out}
.invite:before,.invite:after{content:"";position:absolute;pointer-events:none}
.invite:before{inset:12px;border:1px solid var(--gold)}
.invite:after{inset:17px;border:.5px solid rgba(154,115,64,.45)}
.invite .stack{height:96px;width:auto}
.invite .rule{display:flex;align-items:center;gap:14px;color:var(--gold3);font:600 10px var(--sans);letter-spacing:.42em;text-transform:uppercase}
.invite .rule:before,.invite .rule:after{content:"";width:46px;height:1px;background:var(--gold)}
.invite h1{font:500 italic 46px/1.02 var(--serif);margin:0;color:#231d16}
.invite p{margin:0;color:#6c6154;max-width:36ch}
.boxes{display:flex;gap:6px;justify-content:center;align-items:center}
.boxes input{width:42px;height:54px;text-align:center;font:600 24px var(--serif);color:#231d16;background:transparent;border:0;border-bottom:1.5px solid #b9a888;border-radius:0;text-transform:uppercase}
.boxes input:focus{outline:none;border-bottom-color:var(--gold3)}
.boxes i{width:10px;height:1px;background:#b9a888;display:block;align-self:center}
.invite .gerr{color:#9b3b2c;font-size:13px;min-height:18px}
.invite small{font-size:12px;color:#8c8172}
@media (max-width:520px){.invite{padding:44px 24px 36px}.invite h1{font-size:36px}.boxes input{width:34px;height:46px;font-size:20px}.boxes{gap:4px}}

/* ============ ROOM ============ */
.topb{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(10,10,11,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topb .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.topb nav{display:flex;gap:22px;flex-wrap:wrap}
.topb nav a{color:var(--mute);text-decoration:none;font:600 11px var(--sans);letter-spacing:.22em;text-transform:uppercase}
.topb nav a:hover{color:var(--gold2)}
@media (max-width:860px){.topb nav{display:none}}

.cover{position:relative;min-height:min(88vh,860px);display:grid;align-items:end;overflow:hidden;padding-block:120px 70px}
.cover .bgph{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:saturate(.7) contrast(1.05);transform:scale(1.06);animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.14) translate(-1.5%,-1%)}}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.25) 35%,rgba(10,10,11,.92) 85%,var(--noir) 100%)}
.cover .inner{position:relative;z-index:2;width:100%}
.cover h1{font:500 clamp(54px,9vw,128px)/.92 var(--serif);margin:18px 0 22px;letter-spacing:-.01em}
.cover h1 em{display:block;font-style:italic}
.cover .meta{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.cover .meta p{margin:0;max-width:46ch;color:#d9d1c4;font-size:17px}
.toc{display:grid;grid-template-columns:repeat(5,auto);gap:26px;list-style:none;margin:0;padding:0}
.toc a{color:var(--fg);text-decoration:none;display:grid;gap:4px;font-size:13px}
.toc a b{font:500 italic 22px/1 var(--serif);color:var(--gold)}
@media (max-width:860px){.toc{grid-template-columns:repeat(3,auto)}}

section{position:relative}
.chap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:end;margin-bottom:46px}
.chap .num{font:500 italic clamp(70px,10vw,140px)/.8 var(--serif)}
.chap h2{font:500 clamp(34px,4.6vw,60px)/1.02 var(--serif);margin:12px 0 10px}
.chap p{margin:0;max-width:60ch}
.sec-d{background:var(--noir);color:var(--fg);padding-block:110px}
.sec-d .chap p{color:var(--mute)}
.sec-d .chap .num{color:#2e2922}
.sec-l{background:var(--ivory);color:var(--sepia);padding-block:110px}
.sec-l .chap p{color:#6c6154}.sec-l .kick{color:var(--gold3)}
.sec-l .chap .num{color:#d8c9ae}
.sec-l .chap h2{color:#231d16}

/* ===== I. the real wizard of the portal, dressed for the room ===== */
#app .wlz .wrap>div:first-child{display:none}
#app .wlz #exToggle,#app .wlz #appLang br,#app .wlz #steps .n,#app .wlz #exBar,#app .wlz [data-example],#app .wlz .exbtn{display:none!important}
#app .wlz #steps li:has([data-go="0"]),#app .wlz #steps li:has([data-go="4"]){display:none}
#app .wlz .phone{transform:scale(1.14);transform-origin:top center;margin-bottom:90px;box-shadow:0 60px 110px -40px rgba(58,51,43,.55),0 0 0 1px rgba(154,115,64,.35)}
#app .wlz .panel{background:var(--paper);border:1px solid #e0d5c2;border-radius:2px;box-shadow:0 30px 60px -40px rgba(58,51,43,.35)}
#app .wlz .panel h2{font:500 32px/1.1 var(--serif);color:#231d16}
#app .wlz .btn.primary{background:var(--foil);background-size:200% 100%;color:#21180c;border-color:transparent;border-radius:2px;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
#app .savednote{margin:22px 0 0;text-align:center;color:#8c8172;font-size:13px}

/* ===== II. try-on ===== */
.demo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:70px;align-items:center}
.dphone{width:330px;max-width:100%;aspect-ratio:9/18.5;border-radius:48px;background:#050505;padding:11px;position:relative;
  box-shadow:0 0 0 1px #3a342b,0 70px 120px -40px rgba(201,163,106,.28),0 40px 80px rgba(0,0,0,.7)}
.dscr{position:relative;height:100%;border-radius:38px;overflow:hidden;background:#222}
.dscr .droom{position:absolute;inset:0;background-size:cover;background-position:80% 50%}
.dscr .dbar{position:absolute;left:0;right:0;top:0;z-index:5;padding:14px 18px 10px;background:linear-gradient(#000a,#0000);color:#fff;font:700 13px var(--sans);display:flex;justify-content:space-between}
.dscr .ddoor{position:absolute;left:0;top:0;width:280px;height:596px;transform-origin:0 0;will-change:transform;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.dscr .dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;border:3px solid #8f6bff;z-index:6;box-shadow:0 2px 6px #0006;transition:opacity .4s}
.dscr .finger{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(255,255,255,.35);border:1.5px solid #fff;z-index:7;transition:opacity .3s}
.dscr .dtip{position:absolute;left:14px;right:14px;bottom:16px;z-index:8;background:rgba(10,10,11,.78);backdrop-filter:blur(6px);color:#fff;border-radius:14px;padding:10px 14px;font-size:12.5px;text-align:center}
.dchips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.dchip{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--ink);color:var(--fg);padding:8px 14px 8px 8px;border-radius:999px;cursor:pointer;font:600 13px var(--sans)}
.dchip img{width:22px;height:46px;object-fit:contain}
.dchip[aria-pressed=true]{border-color:var(--gold);background:#1d1912}
.stepsr{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.stepsr li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:baseline;border-top:1px solid var(--line);padding-top:16px;color:#a49c8f;transition:color .4s}
.stepsr li b{font:500 italic 24px var(--serif);color:#5d5446;transition:color .4s}
.stepsr li.on{color:#fff}.stepsr li.on b{color:var(--gold2)}
.dact{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* ===== III. versions ===== */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{background:var(--ink);padding:40px 34px 34px;display:grid;gap:18px;grid-template-rows:auto auto auto 1fr auto;position:relative}
.tier.crown{background:linear-gradient(180deg,#1f1a12,var(--ink) 55%)}
.tier .ord{font:500 italic 54px/1 var(--serif);color:#3a3328}
.tier.crown .ord{color:var(--gold3)}
.tier h3{font:500 28px/1.05 var(--serif);margin:0}
.tier .who{font-size:13px;color:var(--mute);margin-top:-10px}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;color:#d9d1c4;align-content:start}
.tier li{padding-left:22px;position:relative}.tier li:before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--gold)}
.tier .flag{position:absolute;top:22px;right:24px;font:600 10px var(--sans);letter-spacing:.3em;color:var(--gold2)}
.pz{position:relative;height:84px;border:1px solid rgba(201,163,106,.4);background:none;cursor:pointer;width:100%;padding:0;overflow:hidden;color:var(--fg);font:inherit}
.pz .v{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4px}
.pz .v b{font:500 40px/1 var(--serif)}
.pz .v small{font-size:10px;color:var(--mute);letter-spacing:.16em}
.pz .veil{position:absolute;inset:0;background:var(--foil);background-size:200% 100%;display:grid;place-items:center;color:#2a1f10;font:700 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;
  transition:clip-path .9s cubic-bezier(.7,0,.2,1);clip-path:inset(0 0 0 0);animation:sheen 6s ease-in-out infinite}
.pz.open .veil{clip-path:inset(0 0 0 100%)}
.sig{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center;padding:40px 34px;background:#0e0d0c;border:1px solid var(--line);border-top:0}
.sig h3{font:500 italic 34px/1.05 var(--serif);margin:8px 0 10px}
.sig p{margin:0;color:var(--mute);max-width:62ch}

/* ===== IV. passport ===== */
.passport{background:var(--paper);border:1px solid #d9cbb1;position:relative;padding:56px 54px;box-shadow:0 40px 80px -50px rgba(58,51,43,.45)}
.passport:before{content:"";position:absolute;inset:10px;border:1px solid #e3d6be;pointer-events:none}
.passport .phead{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;border-bottom:1px solid #d9cbb1;padding-bottom:22px;flex-wrap:wrap}
.passport .phead h3{font:500 italic 40px/1 var(--serif);margin:0;color:#231d16}
.passport .phead span{font:600 11px var(--sans);letter-spacing:.3em;color:var(--gold3)}
.big4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #d9cbb1}
.big4 div{padding:28px 18px 26px 0;display:grid;gap:6px}
.big4 b{font:500 46px/1 var(--serif);color:#231d16}
.big4 span{font-size:13px;color:#7a6e5f}
.rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:10px}
.rows dl{margin:0;display:grid;grid-template-columns:140px minmax(0,1fr)}
.rows dt,.rows dd{margin:0;padding:12px 0;border-bottom:1px solid #e6dccb;font-size:14px}
.rows dt{color:#9a8d7b;font:600 11px/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.rows dd{color:#2e2820}
.seal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:34px}
.seal div{border:1px solid #e0d3bb;padding:16px;font-size:13px;color:#7a6e5f;background:#fffdf8}
.seal b{display:block;font:500 italic 19px/1.2 var(--serif);color:#231d16;margin-bottom:4px}

/* ===== V. finale ===== */
.fin{position:relative;overflow:hidden;padding-block:130px 140px;text-align:center}
.fin .bgph{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.6) brightness(.45)}
.fin:after{content:"";position:absolute;inset:0;background:radial-gradient(800px 500px at 50% 50%,rgba(10,10,11,.35),var(--noir) 85%)}
.fin .inner{position:relative;z-index:2;display:grid;gap:22px;justify-items:center}
.fin h2{font:500 clamp(42px,6vw,84px)/1 var(--serif);margin:0}
.fin p{margin:0;color:#d4ccbf;max-width:54ch;font-size:17px}
.acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.letter{margin-top:30px;background:var(--paper);color:var(--sepia);max-width:520px;padding:30px 34px;text-align:left;display:grid;gap:12px;position:relative}
.letter:before{content:"";position:absolute;inset:8px;border:1px solid #e3d6be;pointer-events:none}
.letter p{color:#5e5447;font-size:15px}
.letter .sign{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.letter .sign b{font:500 italic 28px/1 var(--serif);color:#231d16}
.letter .sign small{display:block;font-size:12px;color:#8c8172;margin-top:4px}
.letter .cta-b{padding:12px 22px;color:var(--sepia);border-color:var(--gold3)}
.pfoot{border-top:1px solid var(--line);padding-block:28px 90px;color:var(--dim);font-size:13px;text-align:center}
.pfoot a{color:var(--mute)}
.mnote{margin-top:12px;font-size:12px;color:var(--dim)}

@media (max-width:960px){
  .demo{grid-template-columns:minmax(0,1fr)}.dphone{margin:0 auto}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .sig{grid-template-columns:minmax(0,1fr)}
  .big4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rows{grid-template-columns:minmax(0,1fr)}
  .seal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .passport{padding:36px 22px}
  .sec-d,.sec-l{padding-block:76px}
  .chap{grid-template-columns:minmax(0,1fr);gap:4px}
  #app .wlz .phone{transform:none;margin-bottom:0}
}
@media (max-width:460px){.rows dl{grid-template-columns:110px minmax(0,1fr)}.seal{grid-template-columns:minmax(0,1fr)}.dphone{width:290px}}

/* the portal's pages of the room: the company's logo on the cover, the links of the invitation */
.cover .clogo{display:block;max-height:72px;max-width:min(260px,60vw);width:auto;margin-bottom:22px;padding:10px 14px;background:rgba(251,248,242,.92);border-radius:2px}
.invite .gerr a,.invite small a{color:var(--gold3);text-decoration:underline;text-underline-offset:3px}