:root{--ink:#25222a;--muted:#747078;--pink:#b42379;--gold:#aa843b;--line:#e7e5e9;--green:#087a3d;--red:#c6273e;--international:#477aaf;--merchant:#b42379;--tax:#a88338}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#fff;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;font-size:16px}button,select{font:inherit}button,select,summary{cursor:pointer}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ca8abb;outline-offset:3px}.brand-header{max-width:1200px;padding:24px 28px 20px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:24px}.brand img{width:224px;height:52px;object-fit:contain}.brand-name{padding-left:24px;border-left:1px solid var(--line);font-size:27px;font-weight:700;letter-spacing:3px}.brand-name span{display:block;font-size:14px;letter-spacing:2px;color:var(--muted);font-weight:400;margin-top:6px}.clock{text-align:right;font-variant-numeric:tabular-nums}.clock time{display:block;font-size:18px;font-weight:600}.clock span{display:block;font-size:14px;color:var(--muted);margin-top:8px}.clock .connected{color:var(--green)}.clock .offline{color:var(--red)}main{max-width:1200px;margin:auto;padding:0 28px}.ticker{height:39px;background:#f6e598;border-top:2px solid #b29445;display:flex;justify-content:space-between;align-items:center;padding:0 20px;font-size:14px}.ticker span:first-child{font-weight:700;letter-spacing:1px}.quote-table{border-collapse:collapse;table-layout:fixed;width:100%;font-variant-numeric:tabular-nums}.quote-table th{height:52px;font-size:25px;font-weight:400;border-bottom:1px solid var(--line);background:white}.quote-table th:first-child{width:36%}.quote-table td{text-align:center;height:72px;font-weight:700;font-size:36px;line-height:1.1}.quote-table tr:nth-child(odd){background:#eeeff2}.quote-table tr:nth-child(even){background:#fff}.quote-table td:first-child{font-size:28px}.quote-table td:first-child small{font-size:12px;color:#79777d;display:block;line-height:1.5;margin-top:5px;font-weight:400}.quote-table td.price{color:var(--green)}.quote-table td.price.up{color:var(--red)}.quote-table td.price.down{color:var(--green)}.quote-table tr.stale td.price{color:#88838b}.section-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 13px;border-top:1px solid #d8d6db;border-bottom:2px solid var(--pink);margin-top:18px}.section-bar h1{font-size:25px;margin:0;font-weight:700;letter-spacing:1px}.section-bar span{font-size:14px;color:var(--muted)}.source-note{font-size:13px;color:var(--muted);margin:12px 0 0;text-align:right}.trend-section{margin-top:54px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.overline{font-size:12px;color:var(--gold);letter-spacing:1.4px;font-weight:600;margin:0 0 8px}.section-heading h2{font-size:28px;margin:0;letter-spacing:1px}.chart-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.segmented{display:flex;background:#f1eef1;padding:3px;border-radius:6px}.segmented button{border:0;background:transparent;padding:8px 18px;font-size:14px;color:#746b76;border-radius:4px}.segmented button[aria-pressed=true]{color:var(--pink);background:#fff;box-shadow:0 1px 4px #00000012;font-weight:700}.chart-controls label{font-size:14px;color:var(--muted);display:flex;gap:8px;align-items:center}select{background:white;border:1px solid #d9d3dc;border-radius:5px;padding:8px;font-size:14px;color:var(--ink)}.section-note{color:var(--muted);font-size:14px;margin:0 0 22px;line-height:1.7}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.chart-card{border:1px solid var(--line);padding:22px 20px 14px;border-radius:3px;min-width:0}.chart-card header{display:flex;justify-content:space-between;gap:12px;align-items:center}.chart-card h3{font-size:20px;margin:0}.chart-card .unit{font-size:12px;color:var(--muted);display:block;margin-top:7px}.chart-card .current-value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}.chart{width:100%;height:200px;display:block;overflow:visible;touch-action:pan-y}.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:6px 0 0;min-height:22px}.legend span:before{content:'';display:inline-block;width:16px;height:2px;background:var(--series);vertical-align:middle;margin-right:6px}.empty-chart{height:200px;display:flex;justify-content:center;align-items:center;color:var(--muted);font-size:14px}.spread-section{margin-top:48px}.spread-definition{font-size:14px;color:var(--muted)}.spread-inputs{background:#f6f3f6;border-left:3px solid var(--pink);padding:14px 18px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-size:14px;color:#635866;line-height:1.5;margin-bottom:22px}.spread-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.spread-values{display:flex;gap:28px;margin:18px 0 0}.spread-values .value{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;display:block;margin-top:5px}.spread-values .caption{font-size:13px;color:var(--muted)}.positive{color:#c14c35}.negative{color:#087a59}.spread-values small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.chart-tooltip{position:fixed;z-index:10;background:#fff;border:1px solid #ddd5df;padding:12px 14px;border-radius:5px;box-shadow:0 8px 26px #30223820;pointer-events:none;font-size:13px;line-height:1.9;max-width:290px;font-variant-numeric:tabular-nums}.chart-tooltip strong{display:block;font-size:12px;color:var(--muted)}footer{border-top:1px solid var(--line);margin:42px 0 0;padding:26px 0;color:var(--muted);font-size:13px;line-height:1.8}.footer-top{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}.footer-top strong{color:var(--ink);font-size:17px;letter-spacing:2px}details summary{font-size:14px}details p{max-width:1000px}footer>p{margin:10px 0 0}@media(min-width:1500px){main,.brand-header{max-width:1350px}.quote-table td{height:80px;font-size:40px}}@media(max-width:700px){.brand-header{padding:18px 16px;align-items:flex-start;gap:14px;flex-wrap:wrap}.brand{gap:12px}.brand img{width:190px;height:auto}.brand-name{font-size:21px;padding-left:12px;letter-spacing:1px}.brand-name span{font-size:12px;letter-spacing:1px}.clock{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left}.clock time{font-size:14px}.clock span{margin:0;font-size:12px}main{padding:0 14px}.ticker{padding:0 12px;font-size:12px}.quote-table th{height:44px;font-size:20px}.quote-table td{height:65px;font-size:26px}.quote-table td:first-child{font-size:20px}.quote-table td:first-child small{font-size:12px}.section-bar{padding:14px 10px 11px}.section-bar h1{font-size:22px}.section-bar span{font-size:12px}.section-heading{align-items:flex-start;flex-wrap:wrap}.section-heading h2{font-size:24px}.chart-controls{width:100%;justify-content:space-between;gap:10px}.trend-section{margin-top:36px}.chart-grid,.spread-grid{grid-template-columns:1fr;gap:16px}.chart-card{padding:18px 14px 12px}.chart-card h3{font-size:18px}.chart-card .current-value{font-size:22px}.chart{height:190px}.spread-section{margin-top:34px}.spread-definition{font-size:13px}.spread-inputs{font-size:13px}.spread-values{gap:24px}.spread-values .value{font-size:24px}}@media(prefers-reduced-motion:no-preference){.price{transition:color .25s}.segmented button{transition:background .15s}}

/* Domestic/international differences remain visible beside both quote sides. */
.trend-entry{display:flex;justify-content:flex-end;margin-top:16px}.trend-button{display:inline-flex;align-items:center;gap:34px;background:var(--pink);color:#fff;text-decoration:none;padding:13px 24px;border:1px solid var(--pink);font-size:16px;font-weight:600;border-radius:4px}.trend-button:hover{background:#981961}.trend-button span{font-size:20px;font-weight:400}.trend-button:focus-visible,.back-link:focus-visible{outline:3px solid #ca8abb;outline-offset:4px}.page-navigation{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:2px solid var(--gold);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}.back-link{color:var(--pink);text-decoration:none;font-weight:600;padding:6px 0}.back-link:hover{text-decoration:underline}.trends-page .trend-section{margin-top:32px}
.quote-table th:first-child{width:28%}.quote-table th:not(:first-child){width:24%}.quote-table th.spread-heading{font-size:21px}.spread-heading small{display:block;color:var(--muted);font-size:12px;line-height:1.3;margin-top:3px}.quote-table td.table-spread{font-size:20px;line-height:1.5;font-weight:400}.table-spread div{display:flex;gap:10px;align-items:center;justify-content:center}.table-spread small{font-size:12px;color:var(--muted);font-weight:400}.table-spread b{font-size:21px;font-variant-numeric:tabular-nums}.table-spread.muted{color:#aaa4ac}.chart text{font-size:13px}
@media(max-width:700px){.quote-table th{font-size:18px}.quote-table th.spread-heading{font-size:14px}.quote-table td{font-size:20px;height:88px}.quote-table td:first-child{font-size:17px}.quote-table td:first-child small{font-size:11px}.table-spread div{display:block;line-height:1.2;margin:5px 0}.table-spread small{display:block;font-size:11px;margin-bottom:2px}.table-spread b{display:block;font-size:16px}.chart text{font-size:20px}}
@media(max-width:700px){.tax-label{display:block;white-space:nowrap;font-size:14px;margin-top:4px}.quote-table td.price{padding:0 3px}}@media(max-width:420px){.quote-table td.price{font-size:18px}}
@media(max-width:700px){.currency-label{display:block;white-space:nowrap;font-size:15px;margin-top:3px}}
.international-spread{padding:10px 4px}.spread-basis{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}.converted-reference{display:block;color:var(--international);font-size:12px;margin-top:5px;font-weight:400;line-height:1.4}.converted-reference strong{font-size:14px;font-weight:600}.comparison-note{color:var(--muted);font-size:12px;line-height:1.7;margin:14px 0 0}@media(max-width:700px){.spread-basis{font-size:11px}.converted-reference strong{display:block;font-size:13px}.converted-reference>span{font-size:11px}.quote-table .international-spread{padding:10px 3px}.comparison-note{font-size:11px}}
.spread-values{flex-wrap:wrap;gap:16px 22px}.international-spread .converted-reference{margin-top:0;margin-bottom:6px}.international-spread .spread-basis{margin-bottom:6px}@media(max-width:700px){.international-spread .spread-basis{font-size:10px}.international-spread .converted-reference{line-height:1.25}}

.fx-price-label{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:6px;line-height:1.5}.fx-attribution a{color:var(--international);text-decoration:none}.fx-attribution span{display:block}.quote-table tr[data-quote=fx] td{padding-top:10px;padding-bottom:10px}@media(max-width:700px){.fx-price-label{font-size:10px}.quote-table td:first-child .fx-attribution{font-size:10px}}

/* Full-width quotation board; the trend page keeps its readable chart width. */
.quotes-page .brand-header{max-width:none;width:100%;margin:0;padding:16px 24px;position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.quotes-page .header-actions{display:flex;align-items:center;gap:28px}
.quotes-page .trend-button{min-height:50px;min-width:156px;justify-content:center;padding:12px 24px;font-size:18px;white-space:nowrap}
.quotes-page main{max-width:none;width:100%;margin:0;padding:0}
.quotes-page .ticker{height:36px;padding:0 24px}
.quotes-page .quote-table th:first-child{width:26%}
.quotes-page .quote-table th:not(:first-child){width:24%}
.quotes-page .quote-table th:last-child{width:26%}
.quotes-page .quote-table th{height:64px;font-size:clamp(25px,2.05vw,42px)}
.quotes-page .quote-table th.spread-heading{font-size:clamp(22px,1.65vw,34px)}
.quotes-page .quote-table th+th,.quotes-page .quote-table td+td{border-left:1px solid #dedfe3}
.quotes-page .quote-table td{height:clamp(84px,8.4vh,112px);padding:10px 12px;font-size:clamp(34px,2.7vw,60px)}
.quotes-page .quote-table td:first-child{font-size:clamp(27px,2.05vw,44px)}
.quotes-page .quote-table td:first-child small{font-size:13px}
.quotes-page .quote-table td.table-spread{font-size:22px;line-height:1.4}
.quotes-page .table-spread b{font-size:clamp(23px,1.65vw,34px)}
.quotes-page .table-spread small{font-size:13px}
.quotes-page .spread-basis{font-size:13px;margin-bottom:5px}
.quotes-page .converted-reference{font-size:13px;line-height:1.4;margin-bottom:4px}
.quotes-page .converted-reference strong{font-size:15px}
.quotes-page .section-bar{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;margin:0;padding:9px 24px;background:#fff;border-top:1px solid #d8d6db;border-bottom:2px solid var(--pink);min-height:54px;color:var(--ink)}
.quotes-page .section-bar h1{grid-column:2;font-size:clamp(25px,2.1vw,44px);font-weight:700;line-height:1.2;text-align:center}
.quotes-page .section-bar>span{grid-column:3;justify-self:end;color:var(--muted)}
.quotes-page .comparison-note{margin:16px 24px 0}
.quotes-page footer{margin:24px 0 0;padding:20px 24px}
.quotes-page .footer-top{margin-bottom:4px}
@media(max-width:1000px) and (min-width:701px){
  .quotes-page .brand-header{gap:16px;padding:14px 18px}
  .quotes-page .brand{gap:14px}
  .quotes-page .brand img{width:180px;height:auto}
  .quotes-page .brand-name{font-size:23px;padding-left:14px}
  .quotes-page .header-actions{gap:16px}
  .quotes-page .clock time{font-size:16px}
  .quotes-page .clock span{font-size:12px}
  .quotes-page .trend-button{min-width:132px;padding:12px 16px;font-size:16px}
}
@media(max-width:700px){
  .quotes-page .brand-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 10px;padding:12px}
  .quotes-page .brand{grid-column:1;grid-row:1;gap:10px;min-width:0}
  .quotes-page .brand img{width:130px;height:auto}
  .quotes-page .brand-name{padding-left:10px;font-size:18px;letter-spacing:0;white-space:nowrap}
  .quotes-page .brand-name span{font-size:11px;margin-top:4px}
  .quotes-page .header-actions{display:contents}
  .quotes-page .clock{grid-column:1/-1;grid-row:2;gap:12px;flex-wrap:wrap}
  .quotes-page .clock time{font-size:13px}
  .quotes-page .clock span{font-size:11px}
  .quotes-page .trend-button{grid-column:2;grid-row:1;min-width:112px;min-height:44px;padding:10px 14px;font-size:15px}
  .quotes-page .ticker{height:32px;padding:0 12px}
  .quotes-page .quote-table th{height:50px;font-size:20px}
  .quotes-page .quote-table th.spread-heading{font-size:16px}
  .quotes-page .quote-table td{height:88px;padding:10px 4px;font-size:23px}
  .quotes-page .quote-table td:first-child{font-size:19px}
  .quotes-page .quote-table td:first-child small{font-size:10px}
  .quotes-page .table-spread b{font-size:18px}
  .quotes-page .table-spread small{font-size:10px}
  .quotes-page .spread-basis{font-size:10px}
  .quotes-page .converted-reference,.quotes-page .converted-reference>span{font-size:10px}
  .quotes-page .converted-reference strong{font-size:12px}
  .quotes-page .section-bar{min-height:46px;grid-template-columns:1fr auto;padding:8px 12px;gap:8px}
  .quotes-page .section-bar h1{grid-column:1;font-size:23px;text-align:left}
  .quotes-page .section-bar>span{grid-column:2;font-size:11px}
  .quotes-page .comparison-note{margin:12px 12px 0}
  .quotes-page footer{padding:18px 12px}
}
@media(max-width:420px){
  .quotes-page .brand img{width:100px}
  .quotes-page .brand{gap:7px}
  .quotes-page .brand-name{font-size:16px;padding-left:7px}
  .quotes-page .trend-button{min-width:104px;font-size:14px;padding:10px}
  .quotes-page .quote-table td.price{font-size:17px;padding-left:2px;padding-right:2px}
  .quotes-page .quote-table td:first-child{font-size:17px}
  .quotes-page .table-spread b{font-size:16px}
}