:root{--opc-yellow:#ffd500;--opc-orange:#ff4c2f;--opc-blue:#165cff;--opc-ink:#0b0b0c;--opc-line:#e9e7e1}
.opc-page{min-width:320px;color:var(--opc-ink);background:#fff}.opc-page .site-header{height:70px;grid-template-columns:280px 1fr 280px;padding:0 44px;position:relative}.opc-page .brand{font-size:31px}.opc-page .main-nav{gap:78px;font-size:18px}.opc-page .main-nav a{padding:23px 0 21px}.opc-page .main-nav a::after{bottom:10px}.opc-page .login-button{min-width:106px}.opc-page main{overflow:hidden}
.opc-hero{height:308px;position:relative;overflow:hidden;background:linear-gradient(90deg,#fffdf8 0 47%,#fff9dc 61%,#ffd500 100%)}.opc-hero::after{content:"";position:absolute;right:-80px;bottom:-34px;width:720px;height:120px;background:var(--opc-blue);transform:rotate(-8deg);opacity:.96}.opc-hero-copy{position:relative;z-index:4;width:48%;padding:61px 0 20px clamp(52px,4.7vw,80px)}.opc-hero h1{margin:0;font-family:var(--font-display);font-size:clamp(44px,3.8vw,64px);font-weight:950;line-height:1.18;letter-spacing:-4px}.opc-hero h1 span{position:relative;color:var(--opc-orange);white-space:nowrap}.opc-hero h1 span::after{content:"";position:absolute;left:3px;right:-6px;bottom:-9px;border-top:5px solid var(--opc-yellow);transform:rotate(-2deg)}.opc-hero-copy p{margin:20px 0 0;color:#666;font-size:15px;letter-spacing:.1px}.opc-hero-art{position:absolute;inset:0 0 0 37%;z-index:2;overflow:hidden}.opc-hero-art>img{position:absolute;left:auto;right:0;top:0;width:min(132%,1200px);height:100%;object-fit:cover;object-position:right 48%;mix-blend-mode:multiply}.art-sticker{position:absolute;z-index:3;padding:8px 12px;color:#111;background:#fff;font-size:11px;font-weight:900;line-height:1.25;text-align:center;box-shadow:4px 5px 0 rgba(0,0,0,.12);transform:rotate(3deg)}.sticker-blue{left:34%;top:30px;background:#37c7ed;transform:rotate(5deg)}.sticker-orange{left:54%;top:60px;color:#6b1707;background:#ff6c24;transform:rotate(8deg)}.sticker-white{right:17%;top:78px;transform:rotate(-3deg)}.sticker-black{right:2%;top:22px;color:#fff;background:#090909;transform:rotate(-4deg)}
.opc-entry-grid{max-width:1560px;margin:14px auto 0;padding:0 58px;display:grid;grid-template-columns:1fr 1.04fr;gap:18px}.opc-entry-card{height:266px;position:relative;overflow:hidden;border-radius:20px}.entry-copy{position:relative;z-index:4;padding:31px 38px}.entry-copy h2{margin:0;font-family:var(--font-display);font-size:36px;line-height:1}.entry-copy h3{margin:7px 0 0;font-size:18px}.entry-copy p{margin:12px 0;color:#50420a;font-size:14px;line-height:1.65}.entry-stats{display:block;margin:14px 0 15px;font-size:15px}.entry-stats span{font-size:16px}.entry-button{height:45px;min-width:170px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:999px;font-size:13px;font-weight:900;cursor:pointer}.entry-button b{font-size:19px;font-weight:500}.entry-button-dark{color:#fff;border:0;background:#050505}.entry-button-light{color:#111;background:#fff;border:0}.city-entry{background:linear-gradient(128deg,#ffd900 0%,#ffd400 45%,#ff6c21 100%)}.connect-entry{color:#fff;background:linear-gradient(132deg,#2368ff 0%,#0751f1 62%,#073cdc 100%);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 7px rgba(255,255,255,.15)}.connect-entry .entry-copy p{color:#e4ebff}
.opc-community-row{max-width:1560px;margin:18px auto 0;padding:0 58px 28px;display:grid;grid-template-columns:minmax(0,3fr) minmax(295px,.95fr);gap:18px}.compact-heading{min-height:39px;margin:0 0 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.compact-heading>div{display:flex;align-items:center;gap:22px}.compact-heading h2{position:relative;margin:0;font-size:21px;letter-spacing:-.7px}.compact-heading h2::after{content:"";position:absolute;left:0;bottom:-8px;width:82px;border-top:3px solid var(--opc-yellow);transform:rotate(-2deg)}.compact-heading span{color:#777;font-size:11px}.compact-heading a{color:#777;font-size:11px}.people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.opc-loading,.opc-empty{grid-column:1/-1;padding:65px;text-align:center;color:#888;border:1px dashed #ccc;border-radius:15px}.person-card{min-width:0;height:198px;padding:17px 14px 13px;display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:12px;border:1px solid var(--opc-line);border-radius:15px;background:#fff;box-shadow:0 8px 25px rgba(0,0,0,.045)}.person-avatar{grid-row:1/4;width:78px;height:78px;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:transparent;background:#e9eef8 url('/assets/opc-community-hero-v3.png') no-repeat;background-size:620px auto}.person-card:nth-child(4n+1) .person-avatar{background-position:-267px -95px}.person-card:nth-child(4n+2) .person-avatar{background-position:-386px -94px}.person-card:nth-child(4n+3) .person-avatar{background-position:-516px -107px}.person-card:nth-child(4n) .person-avatar{background-position:-267px -95px;filter:saturate(.75)}.person-avatar img{width:100%;height:100%;object-fit:cover}.person-identity{min-width:0}.person-identity h3{margin:1px 0 4px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-identity h3 span{color:#777;font-size:11px;font-weight:500}.creator-badge{width:max-content;padding:3px 7px;border-radius:4px;color:#111;background:var(--opc-yellow);font-size:9px;font-weight:900}.person-project{grid-column:2;margin:6px 0 0;overflow:hidden;color:#666;font-size:10px;line-height:1.45;white-space:nowrap;text-overflow:ellipsis}.person-tags{grid-column:1/-1;height:28px;display:flex;align-items:center;gap:6px;overflow:hidden}.person-tags span{padding:4px 8px;border-radius:7px;color:#1458d8;background:#edf3ff;font-size:9px;white-space:nowrap}.person-card>a{grid-column:1/-1;height:31px;display:flex;align-items:center;justify-content:center;border:1px solid #111;border-radius:999px;font-size:10px;font-weight:850}.person-card>a b{display:none}.hot-cities-panel{height:247px;padding:19px;border:1px solid var(--opc-line);border-radius:16px;background:#fff;box-shadow:0 8px 25px rgba(0,0,0,.04)}.hot-cities-panel .compact-heading{margin-bottom:16px}.hot-cities-panel .compact-heading h2 span{color:#111;font-size:13px}.hot-city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hot-city-grid article{height:58px;display:grid;place-items:center;align-content:center;border-radius:12px;background:#f0f1f4}.hot-city-grid article:nth-child(1){background:var(--opc-yellow)}.hot-city-grid article:nth-child(2){color:#fff;background:var(--opc-blue)}.hot-city-grid article:nth-child(3){color:#fff;background:var(--opc-orange)}.hot-city-grid strong{font-size:14px}.hot-city-grid span{margin-top:3px;color:inherit;font-size:9px}.hot-cities-panel>button{width:100%;margin-top:12px;padding:10px 0 0;border:0;border-top:1px solid var(--opc-line);background:transparent;text-align:left;font-size:10px;font-weight:800;cursor:pointer}
.opc-qr-modal[hidden], .opc-qr-modal [hidden] { display: none !important; }
.opc-qr-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; }
.opc-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15, 20, 31, .56); backdrop-filter: blur(5px); cursor: pointer; }
.opc-qr-dialog { position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 52px 32px 28px; border: 1px solid #e8e9ec; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 24px 80px rgba(0, 0, 0, .2); }
.opc-qr-dialog::before { content: ""; position: absolute; top: 24px; left: 32px; width: 32px; height: 5px; border-radius: 3px; background: var(--opc-yellow); }
.opc-modal-close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #626874; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }
.opc-modal-close:hover { color: var(--opc-ink); background: #f3f4f6; }
.opc-modal-close:focus-visible, .opc-qr-retry:focus-visible { outline: 3px solid var(--opc-blue); outline-offset: 2px; }
.opc-qr-dialog h2 { margin: 0 0 12px; font-size: 1.5rem; font-weight: 800; line-height: 1.4; letter-spacing: -.4px; overflow-wrap: anywhere; }
.opc-qr-description { max-width: 340px; margin: 0 auto; color: #737985; font-size: .875rem; line-height: 1.8; overflow-wrap: anywhere; }
.customer-qr { width: min(248px, 100%); aspect-ratio: 1; margin: 24px auto; padding: 15px; display: grid; place-items: center; border: 1px solid #e8ebf0; border-radius: 16px; background: #fff; }
.customer-qr img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.opc-qr-status { margin: 0; padding: 8px; color: #737985; font-size: .875rem; line-height: 1.7; }
.opc-qr-hint { margin: 0; padding: 12px 8px; border-radius: 12px; color: #59616f; background: #f5f7fa; font-size: .875rem; line-height: 1.6; }
.opc-qr-hint strong { color: #174db6; font-weight: 700; white-space: nowrap; }
.opc-qr-retry { padding: 10px 22px; min-height: 44px; border: 1px solid #d7e3ff; border-radius: 10px; color: #174db6; background: #f0f5ff; font-size: .875rem; font-weight: 600; cursor: pointer; }
.opc-qr-retry:hover { background: #e5edff; }
/* Login-required prompt: no QR placeholder is shown to guests. */
.opc-login-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.opc-login-actions button { min-height: 46px; padding: 12px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.opc-login-later { color: #59616f; background: #f4f5f7; }
.opc-login-later:hover { background: #e9ecf0; }
.opc-login-primary { color: #111; background: var(--opc-yellow); }
.opc-login-primary:hover { background: #f1cc00; }
.opc-login-primary span { margin-left: 10px; }
.opc-login-actions button:focus-visible { outline: 3px solid var(--opc-blue); outline-offset: 3px; }
/* End login-required prompt. */
@media (max-width: 480px) {
  .opc-qr-modal { padding: 16px; }
  .opc-qr-modal .opc-qr-dialog { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 52px 20px 24px; border-radius: 20px; }
  .opc-qr-dialog::before { left: 20px; }
  .opc-qr-modal .customer-qr { width: min(248px, 100%); height: auto; }
}
@media(max-width:1100px){.opc-page .site-header{grid-template-columns:220px 1fr 180px}.opc-page .main-nav{gap:34px}.opc-hero-art{left:42%}.art-sticker{display:none}.opc-entry-grid,.opc-community-row{padding-left:28px;padding-right:28px}.people-grid{grid-template-columns:repeat(2,1fr)}.opc-community-row{grid-template-columns:1fr}.hot-cities-panel{height:auto}}
@media(max-width:760px){.opc-page .site-header{height:auto;min-height:68px;grid-template-columns:1fr auto;padding:0 18px}.opc-page .main-nav{grid-column:1/-1;gap:27px;font-size:14px}.opc-hero{height:545px}.opc-hero-copy{width:100%;padding:39px 21px 15px}.opc-hero h1{font-size:42px;letter-spacing:-3px}.opc-hero-copy p{max-width:320px;font-size:14px;line-height:1.7}.opc-hero-art{inset:215px 0 0}.opc-hero-art>img{left:auto;right:0;width:150%;object-fit:contain;object-position:right center}.opc-entry-grid{padding:12px 14px 0;grid-template-columns:1fr;gap:12px}.opc-entry-card{height:310px}.entry-copy{padding:28px 24px}.entry-copy h2{font-size:32px}.opc-community-row{padding:38px 14px;grid-template-columns:1fr}.compact-heading{align-items:flex-start}.compact-heading>div{display:block}.compact-heading span{display:block;margin-top:12px}.people-grid{grid-template-columns:1fr}.person-card{height:185px}.hot-cities-panel{height:auto}}