:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Serif SC", system-ui, sans-serif;
  --ink: #101615;
  --ink-soft: #17201e;
  --paper: #f2eee5;
  --paper-deep: #e3dccd;
  --gold: #c8a66b;
  --gold-bright: #e8cc91;
  --cinnabar: #9d3d32;
  --jade: #667d72;
  --text: #222b28;
  --muted: #6f7772;
  --line: rgba(73, 64, 48, .16);
  --shadow: 0 34px 90px rgba(3, 9, 8, .28);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100%; margin: 0; color: var(--text); background: #111715; }
body, button, input { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.page { position: relative; min-height: 100vh; padding-bottom: 100px; overflow: hidden; background: linear-gradient(180deg, #111715 0 650px, #d9d2c3 650px, #ebe6dc 100%); }
.page::before { content: ""; position: absolute; inset: 620px 0 0; pointer-events: none; opacity: .34; background-image: linear-gradient(rgba(55,50,39,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(55,50,39,.08) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(#000, transparent 72%); }

.header { position: absolute; top: 0; left: 50%; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: min(1320px, calc(100% - 72px)); height: 104px; transform: translateX(-50%); }
.brand { display: inline-flex; align-items: center; gap: 14px; color: #f5eee1; text-decoration: none; }
.brand__official { display:block; width:clamp(188px,18vw,232px); height:auto; filter:drop-shadow(0 8px 22px rgba(0,0,0,.32)); transition:transform .3s ease,filter .3s ease; }
.brand:hover .brand__official { transform:translateY(-2px) scale(1.018); filter:drop-shadow(0 11px 28px rgba(0,0,0,.42)); }
.header__badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border: 1px solid rgba(224,198,145,.28); border-radius: 99px; color: rgba(247,238,218,.84); background: rgba(10,17,16,.4); backdrop-filter: blur(14px); font-size: 12px; letter-spacing: .1em; }
.header__badge i { width: 6px; height: 6px; border-radius: 50%; background: #d7bd83; box-shadow: 0 0 0 5px rgba(208,178,120,.1), 0 0 15px #cda96a; }

.hero { position: relative; z-index: 1; height: 720px; overflow: hidden; background: linear-gradient(90deg, rgba(6,12,12,.8) 0, rgba(7,13,13,.56) 31%, rgba(9,14,14,.08) 62%), linear-gradient(180deg, rgba(8,13,13,.08) 58%, #111715 100%), url("/assets/yanyun/yanyun-hero.png") center 48% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cpath d='M0 90h42c25 0 31-27 48-27s23 27 48 27h42M90 0v42c0 25-27 31-27 48s27 23 27 48v42' fill='none' stroke='%23d9c08e' stroke-opacity='.12'/%3E%3C/svg%3E"); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; pointer-events: none; background: linear-gradient(transparent, #111715); }
.hero__content { position: relative; z-index: 2; width: min(1320px, calc(100% - 72px)); margin: 0 auto; padding-top: 180px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px; border: 1px solid rgba(221,194,140,.25); border-radius: 99px; color: #d7c39d; background: rgba(8,16,15,.4); backdrop-filter: blur(10px); font-size: 12px; letter-spacing: .18em; }
.hero__eyebrow i { width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero h1 { margin: 26px 0 20px; color: #f3eee5; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(66px, 6.4vw, 98px); font-weight: 500; line-height: .98; letter-spacing: .06em; text-shadow: 0 10px 42px rgba(0,0,0,.48); }
.hero h1 em { display: inline-block; margin-top: 12px; color: var(--gold-bright); font-style: normal; letter-spacing: .16em; }
.hero__content > p { margin: 0; color: rgba(238,231,215,.76); font-size: 16px; line-height: 1.9; letter-spacing: .05em; text-shadow: 0 3px 16px rgba(0,0,0,.55); }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }.hero__chips span { position: relative; padding: 9px 15px 9px 28px; border: 1px solid rgba(222,196,145,.19); color: rgba(242,233,213,.78); background: rgba(9,16,15,.38); backdrop-filter: blur(10px); font-size: 11px; letter-spacing: .12em; }.hero__chips span::before { content: ""; position: absolute; top: 50%; left: 13px; width: 5px; height: 5px; border: 1px solid var(--gold); transform: translateY(-50%) rotate(45deg); }
.hero__scroll { position: absolute; right: max(34px, calc((100vw - 1320px)/2)); bottom: 92px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(240,230,209,.66); font-size: 10px; letter-spacing: .18em; }.hero__scroll span { position: relative; width: 22px; height: 38px; border: 1px solid rgba(226,205,163,.55); border-radius: 99px; }.hero__scroll span::after { content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 8px; border-radius: 99px; background: #ddc18c; transform: translateX(-50%); animation: scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue { 0%,100%{opacity:.3;transform:translate(-50%,0)} 50%{opacity:1;transform:translate(-50%,12px)} }

.cdk-shell { position: relative; z-index: 4; width: min(1180px, calc(100vw - 40px)); margin: -74px auto 0; overflow: hidden; border: 1px solid rgba(223,209,181,.5); border-radius: 4px; background: rgba(238,233,222,.97); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.72); }
.cdk-shell::before,.cdk-shell::after { content:""; position:absolute; pointer-events:none; }.cdk-shell::before { inset: 10px; border: 1px solid rgba(113,94,62,.12); }.cdk-shell::after { top: 0; right: 0; width: 220px; height: 220px; opacity: .13; background: radial-gradient(circle, #7f6642 1px, transparent 1.5px); background-size: 12px 12px; mask-image: linear-gradient(225deg,#000,transparent 68%); }
.cdk-shell__title { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(360px,.8fr); gap: 42px; align-items: end; padding: 50px 54px 34px; border-bottom: 1px solid var(--line); }
.section-kicker,.panel-number { color: #8d724b; font: 700 10px/1.3 Georgia, serif; letter-spacing: .22em; }
.cdk-shell__title h2 { margin: 9px 0 0; color: var(--text); font-family: "STKaiti","KaiTi",serif; font-size: clamp(38px,4vw,54px); font-weight: 600; letter-spacing: .12em; }.cdk-shell__title > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.cdk-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; padding: 24px; }
.panel-card { position: relative; overflow: hidden; border: 1px solid rgba(88,75,52,.15); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }.panel-card:hover { transform: translateY(-4px); }
.convert { padding: 34px 36px 29px; background: linear-gradient(145deg,#f8f4eb,#eee7d9); box-shadow: 0 18px 40px rgba(63,52,33,.07); }.convert:hover { border-color: rgba(157,61,50,.3); box-shadow: 0 22px 50px rgba(65,51,31,.12); }
.archive { padding: 34px 32px 29px; color: #eee8db; border-color: rgba(218,192,140,.18); background: radial-gradient(circle at 95% 0,rgba(191,155,91,.12),transparent 34%), linear-gradient(150deg,#1b2825,#111817 70%); box-shadow: 0 20px 44px rgba(7,16,14,.22); }.archive:hover { border-color: rgba(215,185,126,.35); box-shadow: 0 25px 55px rgba(7,16,14,.3); }
.panel-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 15px; margin-bottom: 28px; }.panel-icon { position: relative; display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(155,111,65,.4); color: #8f3d33; background: #e7dcc6; box-shadow: inset 0 0 0 4px rgba(255,255,255,.45); font-family:"STKaiti","KaiTi",serif; font-size: 22px; }.archive .panel-icon { border-color: rgba(216,188,132,.35); color:#dec38e; background:rgba(207,177,119,.08); box-shadow:inset 0 0 0 4px rgba(215,187,134,.04); }
.panel-icon--search::before { content:""; width:15px; height:15px; border:2px solid currentColor; border-radius:50%; transform:translate(-2px,-2px); }.panel-icon--search::after { content:""; position:absolute; right:11px; bottom:11px; width:12px; height:2px; background:currentColor; transform:rotate(45deg); }
.panel-head h3,.panel-head h2 { margin:4px 0 0; font-family:"STKaiti","KaiTi",serif; font-size:27px; font-weight:600; letter-spacing:.08em; }.panel-head h3{color:var(--text)}.archive .panel-number{color:#bda475}.archive .panel-head h2{color:#f0eadf}.archive .panel-head p{margin:7px 0 0;color:rgba(233,226,210,.58);font-size:12px;line-height:1.6}
.form,.archive form{position:relative;z-index:1;display:grid;gap:18px}.field{display:grid;gap:8px}.field__label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.field label,.archive label{color:#4d514d;font-size:12px;font-weight:700;letter-spacing:.08em}.archive label{color:rgba(239,233,219,.78)}
.help-link { display:inline-flex;align-items:center;gap:7px;padding:0;border:0;color:#896d48;background:transparent;font-size:11px;letter-spacing:.05em }.help-link__icon { display:grid;width:19px;height:19px;place-items:center;border:1px solid #a88a5a;border-radius:50%;color:#8c7048;font:700 11px/1 Georgia,serif;transition:.2s ease }.help-link:hover .help-link__icon,.help-link:focus-visible .help-link__icon{color:#fff;background:#9d3d32;border-color:#9d3d32;transform:rotate(10deg)}.help-link:focus-visible{outline:2px solid rgba(157,61,50,.25);outline-offset:4px}
.input{position:relative}.input__icon{position:absolute;top:50%;left:16px;z-index:1;display:grid;width:32px;height:32px;place-items:center;border-right:1px solid rgba(109,88,54,.28);color:#907247;font:700 10px/1 Georgia,serif;transform:translateY(-50%);pointer-events:none;transition:.2s ease}.input__icon--code{font-family:"STKaiti","KaiTi",serif;font-size:15px}.input input{display:block;width:100%;height:58px;padding:0 18px 0 64px;border:1px solid rgba(82,71,51,.17);border-radius:2px;outline:0;color:#202724;background:rgba(255,253,248,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.75);font-size:15px;transition:.2s ease}.input input::placeholder{color:#9b9c95}.input input:focus{border-color:#a98551;box-shadow:0 0 0 3px rgba(179,143,86,.13),0 10px 25px rgba(54,44,28,.08);transform:translateY(-1px)}.input:focus-within .input__icon{color:#9d3d32}
.archive .input__icon{color:#c6ac78;border-color:rgba(220,194,142,.2)}.archive .input input{border-color:rgba(219,198,156,.18);color:#f1ece2;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.archive .input input::placeholder{color:rgba(235,228,211,.35)}.archive .input input:focus{border-color:rgba(219,189,129,.55);box-shadow:0 0 0 3px rgba(197,164,102,.1)}
.primary,.archive__controls button{display:flex;align-items:center;justify-content:center;gap:13px;min-height:58px;padding:0 22px;border:1px solid #8b342c;border-radius:2px;outline:0;color:#fff5e6;background:linear-gradient(135deg,#a7483b,#7e2e29);box-shadow:0 10px 24px rgba(128,48,40,.2);font-size:15px;font-weight:700;letter-spacing:.12em;transition:.18s ease}.primary b,.archive__controls button b{font-size:18px;font-weight:400;transition:transform .2s ease}.primary:hover,.archive__controls button:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 30px rgba(128,48,40,.27)}.primary:hover b,.archive__controls button:hover b{transform:translateX(4px)}.primary:active,.archive__controls button:active{transform:translateY(1px);box-shadow:0 6px 15px rgba(128,48,40,.2)}.primary:focus-visible,.archive__controls button:focus-visible{outline:3px solid rgba(193,158,96,.32);outline-offset:4px}.primary:disabled,.archive__controls button:disabled{cursor:wait;opacity:.55;transform:none}
.archive__controls{display:grid;gap:14px}.archive__controls button{color:#1a211f;border-color:#c19d60;background:linear-gradient(135deg,#dec38f,#b98d4d);box-shadow:0 10px 24px rgba(3,9,8,.25)}
.status{min-height:21px;margin:1px 0 0;color:#81847f;font-size:11px;line-height:1.55}.status>span:first-child{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#9fa29c}.status[data-kind="error"]{color:#a63e3a}.status[data-kind="error"]>span:first-child{background:#a63e3a}.status[data-kind="success"]{color:#557465}.status[data-kind="success"]>span:first-child{background:#648979;box-shadow:0 0 0 4px rgba(100,137,121,.12)}.archive .status{min-height:46px;margin-top:3px;padding:13px 14px;border:1px solid rgba(219,198,156,.12);color:rgba(232,225,209,.52);background:rgba(255,255,255,.035)}.archive .status[data-kind="error"]{color:#efb7b1;background:rgba(157,61,50,.12)}.archive .status[data-kind="success"]{color:#b8d5c5;background:rgba(75,115,95,.12)}
.cdk-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:2px 34px 28px;color:#7b7e78;font-size:11px}.cdk-footer i{display:inline-grid;width:18px;height:18px;margin-right:6px;place-items:center;border-radius:50%;color:#eee7d9;background:#647a70;font-style:normal}

.dialog,.confirm-dialog,.number-guide-dialog{width:min(calc(100vw - 28px),560px);max-height:calc(100dvh - 28px);padding:0;overflow:visible;border:0;border-radius:2px;color:var(--text);background:transparent}.dialog::backdrop,.confirm-dialog::backdrop,.number-guide-dialog::backdrop{background:rgba(5,10,9,.72);backdrop-filter:blur(10px)}.dialog[open],.confirm-dialog[open],.number-guide-dialog[open]{animation:dialogPop .28s cubic-bezier(.2,.85,.25,1.1)}@keyframes dialogPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.dialog__card,.confirm-dialog__card,.number-guide-dialog__card{position:relative;max-height:calc(100dvh - 28px);padding:40px 34px 32px;overflow:auto;border:1px solid rgba(210,188,145,.55);border-radius:2px;background:radial-gradient(circle at 100% 0,rgba(190,154,91,.14),transparent 30%),linear-gradient(145deg,#f5f0e6,#e8e0d2);box-shadow:0 34px 90px rgba(0,0,0,.42);scrollbar-width:none}.dialog__card::before,.confirm-dialog__card::before,.number-guide-dialog__card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(119,97,61,.11);pointer-events:none}
.confirm-dialog{width:min(calc(100vw - 28px),520px)}.confirm-dialog__card{padding:38px 34px 32px;text-align:center}.confirm-dialog__icon{display:grid;width:64px;height:64px;margin:0 auto 18px;place-items:center;border:1px solid #b38c55;color:#f3dfb8;background:#8c352f;box-shadow:inset 0 0 0 5px rgba(255,255,255,.08);font-family:"STKaiti","KaiTi",serif;font-size:28px}.dialog__eyebrow{display:block;margin:9px 45px;color:#93734b;font:700 9px/1.4 Georgia,serif;letter-spacing:.2em;text-align:center}.confirm-dialog h2{margin:9px 0 13px;font-family:"STKaiti","KaiTi",serif;font-size:31px;letter-spacing:.08em}.confirm-dialog p{margin:0;color:#6d716c;font-size:14px;line-height:1.8}.confirm-dialog__actions{display:grid;grid-template-columns:1fr 1.18fr;gap:12px;margin-top:27px}.confirm-dialog__actions button{min-height:54px;padding:0 18px;border-radius:2px;font-size:14px;font-weight:700;letter-spacing:.08em;transition:.16s ease}.confirm-dialog__return{border:1px solid rgba(89,80,63,.17);color:#666d68;background:#ddd8cd}.confirm-dialog__submit{border:1px solid #89332d;color:#fff0df;background:linear-gradient(135deg,#a7483b,#7e2e29);box-shadow:0 8px 20px rgba(128,48,40,.18)}.confirm-dialog__actions button:hover{filter:brightness(1.06);transform:translateY(-2px)}
.dialog__close,.number-guide-dialog__close{position:absolute;top:15px;right:16px;z-index:3;display:grid;width:38px;height:38px;padding:0;place-items:center;border:1px solid rgba(89,80,63,.13);border-radius:50%;color:#747873;background:rgba(232,226,214,.82);font:400 26px/1 Arial,sans-serif;transition:.2s ease}.dialog__close:hover,.number-guide-dialog__close:hover{color:#fff;background:#943b33;transform:rotate(8deg)}.dialog__close:focus-visible,.number-guide-dialog__close:focus-visible{outline:3px solid rgba(157,61,50,.22);outline-offset:3px}
.dialog h2{margin:0;padding:6px 42px 0;font-family:"STKaiti","KaiTi",serif;font-size:clamp(28px,6vw,38px);font-weight:600;letter-spacing:.05em;text-align:center}.dialog__feature{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:center;margin:28px 0 4px;padding:14px;border:1px solid rgba(126,99,57,.18);background:rgba(215,200,170,.28)}.dialog__feature[hidden]{display:none}.dialog__feature img{width:92px;height:92px;object-fit:cover}.dialog__feature strong{color:#8e3b33;font-size:clamp(30px,7vw,45px)}.dialog__message{position:relative;z-index:1;max-height:min(38dvh,330px);margin:24px 0 0;overflow:auto;color:#686e69;font-size:14px;line-height:1.85;white-space:pre-line;overflow-wrap:anywhere}.dialog__emphasis{margin:16px 0 0;padding:13px 15px;border-left:4px solid #9a3d34;color:#744136;background:rgba(157,61,50,.08);font-weight:700}.dialog__emphasis[hidden]{display:none}.dialog .primary{width:100%;margin-top:25px}
.number-guide-dialog{width:min(calc(100vw - 28px),780px);max-width:780px}.number-guide-dialog__card{padding:30px}.number-guide-dialog__header{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px;padding-right:45px}.number-guide-dialog__header span{color:#92734b;font:700 9px/1.3 Georgia,serif;letter-spacing:.22em}.number-guide-dialog__header h2{margin:8px 0 0;font-family:"STKaiti","KaiTi",serif;font-size:clamp(26px,4vw,35px);font-weight:600;letter-spacing:.08em}.guide-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.guide-steps article{position:relative;min-height:205px;padding:25px 19px 20px;overflow:hidden;border:1px solid rgba(91,77,54,.13);text-align:center;background:rgba(255,253,247,.48)}.guide-steps__number{position:absolute;top:11px;left:14px;color:rgba(92,77,52,.45);font-family:"STKaiti","KaiTi",serif;font-size:12px}.guide-steps i{display:grid;width:60px;height:60px;margin:11px auto 16px;place-items:center;border:1px solid rgba(161,124,71,.5);color:#f0dfbd;background:#283834;box-shadow:inset 0 0 0 4px rgba(255,255,255,.06);font-family:"STKaiti","KaiTi",serif;font-size:20px;font-style:normal;transform:rotate(-2deg)}.guide-steps article:nth-child(2) i{background:#8b3a33;transform:rotate(2deg)}.guide-steps article:nth-child(3) i{background:#6e634f}.guide-steps h3{margin:0;font-size:15px;letter-spacing:.06em}.guide-steps p{margin:9px 0 0;color:#777c77;font-size:12px;line-height:1.65}.guide-note{margin:18px 0 0;padding:13px 16px;border-left:3px solid #9a3d34;color:#715e4b;background:rgba(170,139,84,.1);font-size:12px;line-height:1.6}.guide-note strong{margin-right:9px;color:#863831}

@media(max-width:900px){.header{width:calc(100% - 36px);height:88px}.hero{height:670px;background-position:60% center}.hero__content{width:calc(100% - 44px);padding-top:150px}.hero h1{font-size:clamp(58px,10vw,78px)}.hero__scroll{display:none}.cdk-shell{width:calc(100vw - 22px);margin-top:-64px}.cdk-shell__title{display:block;padding:40px 34px 28px}.cdk-shell__title>p{margin-top:15px}.cdk-grid{grid-template-columns:1fr}.cdk-footer{padding:2px 28px 26px}}
@media(max-width:620px){.page{padding-bottom:36px;background:linear-gradient(180deg,#111715 0 540px,#ddd6c8 540px,#ebe6dc 100%)}.header{width:calc(100% - 26px);height:78px}.brand{gap:10px}.brand__seal{width:39px;height:39px;font-size:21px}.brand__copy strong{font-size:19px}.brand__copy small{font-size:6px}.header__badge{padding:7px 10px;font-size:10px}.hero{height:590px;background-position:67% center}.hero::after{height:130px}.hero__content{width:calc(100% - 34px);padding-top:122px}.hero__eyebrow{font-size:10px;padding:7px 11px}.hero h1{margin-top:20px;font-size:clamp(49px,15vw,66px);letter-spacing:.03em}.hero h1 em{letter-spacing:.1em}.hero__content>p{max-width:285px;font-size:13px;line-height:1.75}.hero__chips{max-width:285px;margin-top:19px}.hero__chips span{padding:7px 10px 7px 24px;font-size:9px}.cdk-shell{width:calc(100vw - 14px);margin-top:-48px}.cdk-shell::before{inset:7px}.cdk-shell__title{padding:31px 23px 23px}.cdk-shell__title h2{font-size:37px}.cdk-shell__title>p{font-size:12px;line-height:1.75}.cdk-grid{gap:12px;padding:12px}.convert,.archive{padding:27px 21px 24px}.panel-icon{flex-basis:44px;width:44px;height:44px}.panel-head h3,.panel-head h2{font-size:23px}.field__label-row{gap:8px}.input input,.primary,.archive__controls button{height:55px;min-height:55px;font-size:14px}.cdk-footer{display:grid;gap:8px;padding:5px 21px 23px}.dialog__card{padding:34px 22px 24px}.confirm-dialog__card{padding:32px 20px 24px}.confirm-dialog__actions{grid-template-columns:1fr}.confirm-dialog__submit{grid-row:1}.dialog h2{font-size:27px}.dialog__feature{grid-template-columns:72px 1fr;gap:12px}.dialog__feature img{width:72px;height:72px}.number-guide-dialog__card{padding:24px 18px 20px}.guide-steps{grid-template-columns:1fr}.guide-steps article{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;gap:3px 14px;align-items:center;min-height:0;padding:17px;text-align:left}.guide-steps i{grid-row:1/3;width:54px;height:54px;margin:0}.guide-steps h3,.guide-steps p{grid-column:2}.guide-steps p{margin-top:2px}.guide-steps__number{top:8px;right:10px;left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Official Yanyun identity assets. */
.confirm-dialog__icon{width:70px;height:70px;padding:8px;background:#17231f;box-shadow:inset 0 0 0 5px rgba(255,255,255,.04)}
.confirm-dialog__icon img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:620px){.brand__official{width:154px}}

/* Role ID image guide. */
.number-guide-dialog{width:min(calc(100vw - 28px),690px);max-width:690px}
.number-guide-dialog__card{background:radial-gradient(circle at 100% 0,rgba(198,165,104,.16),transparent 30%),linear-gradient(145deg,#f5f0e6,#e7dfd1)}
.number-guide-dialog__header{margin-bottom:20px}
.role-id-guide{position:relative;display:grid;gap:18px}
.role-id-step{position:relative;padding:17px 17px 18px;border:1px solid rgba(99,79,48,.16);background:rgba(255,253,247,.55);box-shadow:0 10px 28px rgba(52,41,24,.06)}
.role-id-step h3{display:flex;align-items:center;gap:11px;margin:0 0 13px;color:#303632;font-size:15px;font-weight:700;letter-spacing:.04em}
.role-id-step h3 span{display:inline-grid;flex:0 0 28px;width:28px;height:28px;place-items:center;border-radius:50%;color:#f8edda;background:linear-gradient(145deg,#ad8750,#80613a);box-shadow:0 4px 12px rgba(103,73,33,.2);font:italic 700 14px/1 Georgia,serif}
.role-id-step figure{position:relative;margin:0;overflow:hidden;border:1px solid rgba(125,98,55,.32);border-radius:8px;background:#17201d;box-shadow:0 14px 30px rgba(20,26,23,.13)}
.role-id-step figure::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,241,204,.14);border-radius:inherit;pointer-events:none}
.role-id-step img{display:block;width:100%;height:auto;aspect-ratio:521/236;object-fit:cover}
@media(max-width:620px){.number-guide-dialog{width:min(calc(100vw - 18px),690px)}.number-guide-dialog__card{padding:24px 13px 17px}.number-guide-dialog__header{margin-bottom:17px;padding:0 43px 0 6px}.number-guide-dialog__header h2{font-size:25px;letter-spacing:.04em}.role-id-guide{gap:13px}.role-id-step{padding:12px 10px 11px}.role-id-step h3{gap:9px;margin-bottom:9px;font-size:13px}.role-id-step h3 span{width:25px;height:25px;flex-basis:25px;font-size:12px}.guide-note{margin-top:13px}.number-guide-dialog__close{top:12px;right:12px}}