| |
| .pw { |
| --ink: #0b0b0b; |
| --ink2: #52514e; |
| --muted: #898781; |
| --hair: #ebe9e3; |
| --axis: #c3c2b7; |
| --page: #f4f3ef; |
| --ring: rgba(11, 11, 11, 0.07); |
| --fit-low: #86b6ef; |
| --fit-medium: #2a78d6; |
| --fit-high: #104281; |
| --warn: #d99a00; |
| --warn-ink: #7a5200; |
| --warn-bg: #fff6df; |
| --ok: #006300; |
| --sans: system-ui, -apple-system, 'Segoe UI', sans-serif; |
| --serif: 'Iowan Old Style', Charter, Georgia, serif; |
| position: absolute; |
| inset: 0; |
| z-index: 299; |
| pointer-events: none; |
| overflow: hidden; |
| font-family: var(--sans); |
| font-size: 14px; |
| line-height: 1.45; |
| color: var(--ink); |
| -webkit-font-smoothing: antialiased; |
| } |
| .pw *, |
| .pw *::before, |
| .pw *::after { |
| box-sizing: border-box; |
| } |
| .pw button { |
| font: inherit; |
| color: inherit; |
| cursor: pointer; |
| } |
| .pw a { |
| color: inherit; |
| } |
| .pw .muted { |
| color: var(--muted); |
| } |
|
|
| |
| .pw-group { |
| position: absolute; |
| left: 0; |
| top: 0; |
| height: 1px; |
| transform-origin: 0 0; |
| pointer-events: none; |
| } |
| .pw-group:not(.ready) { |
| visibility: hidden; |
| } |
| .pw-slot { |
| position: absolute; |
| } |
| .pw-col { |
| position: absolute; |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| } |
| .pw-col.scroll { |
| overflow-y: auto; |
| padding: 0 10px 10px; |
| pointer-events: auto; |
| overscroll-behavior: contain; |
| } |
| .pw-lines { |
| position: absolute; |
| left: 0; |
| top: 0; |
| overflow: visible; |
| pointer-events: none; |
| transition: opacity 0.2s; |
| } |
| .pw-lines path { |
| stroke: #a8a69e; |
| stroke-width: 1.3; |
| fill: none; |
| } |
| .pw-lines .end { |
| fill: #a8a69e; |
| } |
| .pw-group.ready .pw-lines { |
| animation: pw-fade 0.35s ease backwards; |
| } |
| .pw-group.ready .w { |
| animation: pw-pop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) backwards; |
| } |
| @keyframes pw-pop { |
| from { |
| opacity: 0; |
| transform: translate(var(--fx, 0), var(--fy, 0)) scale(0.2); |
| } |
| } |
| @keyframes pw-fade { |
| from { |
| opacity: 0; |
| } |
| } |
| .pw-group.peek .w { |
| opacity: 0.06; |
| } |
| .pw-group.peek .w.peekself { |
| opacity: 0.8; |
| } |
| .pw-group.peek .pw-lines { |
| opacity: 0.12; |
| } |
|
|
| |
| .pw .w { |
| pointer-events: auto; |
| background: #fff; |
| border-radius: 14px; |
| box-shadow: 0 0 0 1px var(--ring), 0 10px 30px rgba(0, 0, 0, 0.1); |
| user-select: text; |
| -webkit-user-select: text; |
| transition: opacity 0.2s; |
| position: relative; |
| flex: none; |
| } |
| .pw .w.limited { |
| overflow-y: auto; |
| overscroll-behavior: contain; |
| } |
| .pw .wi { |
| padding: 14px 16px; |
| } |
| .pw .wh { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 11px; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| color: var(--muted); |
| font-weight: 650; |
| margin-bottom: 10px; |
| } |
| .pw .ai { |
| display: inline-block; |
| font-size: 10.5px; |
| font-weight: 700; |
| color: var(--ink2); |
| background: #efeee9; |
| border-radius: 4px; |
| padding: 0 5px; |
| margin-right: 4px; |
| letter-spacing: 0.02em; |
| text-transform: none; |
| } |
| .pw .wh .ai { |
| margin: 0; |
| } |
| .pw .wsub { |
| margin-left: auto; |
| text-transform: none; |
| letter-spacing: 0; |
| font-weight: 500; |
| font-size: 11.5px; |
| } |
| .pw .meta { |
| font-size: 13px; |
| color: var(--muted); |
| } |
| .pw .sep { |
| color: var(--axis); |
| } |
| .pw .grow { |
| flex: 1; |
| } |
| .pw .dot { |
| width: 9px; |
| height: 9px; |
| border-radius: 50%; |
| display: inline-block; |
| flex: none; |
| } |
| .pw .sw { |
| width: 11px; |
| height: 11px; |
| border-radius: 50%; |
| display: inline-block; |
| flex: none; |
| } |
| .pw .sq { |
| width: 10px; |
| height: 10px; |
| border-radius: 3px; |
| border: 2px solid var(--ink); |
| display: inline-block; |
| flex: none; |
| } |
| .pw .reading { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 12.5px; |
| color: var(--ink2); |
| margin-top: 12px; |
| } |
| .pw .reading.first { |
| margin-top: 0; |
| } |
| .pw .spin { |
| width: 12px; |
| height: 12px; |
| border: 2px solid var(--hair); |
| border-top-color: var(--ink2); |
| border-radius: 50%; |
| animation: pw-rot 0.8s linear infinite; |
| flex: none; |
| } |
| @keyframes pw-rot { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| .pw .skel { |
| height: 11px; |
| border-radius: 6px; |
| background: linear-gradient(90deg, #eeede8 25%, #f8f7f3 50%, #eeede8 75%); |
| background-size: 200% 100%; |
| animation: pw-sh 1.4s infinite; |
| margin: 8px 0; |
| } |
| @keyframes pw-sh { |
| to { |
| background-position: -200% 0; |
| } |
| } |
|
|
| |
| .pw .title-w .wi { |
| padding: 14px 18px 15px; |
| } |
| .pw .kick { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| font-size: 12.5px; |
| color: var(--ink2); |
| margin-bottom: 7px; |
| } |
| .pw .kick .flag { |
| color: var(--warn-ink); |
| font-weight: 600; |
| } |
| .pw .kick b { |
| color: var(--ink); |
| font-weight: 650; |
| } |
| .pw .ttl { |
| font-size: 18px; |
| line-height: 1.3; |
| font-weight: 650; |
| margin: 0 0 5px; |
| letter-spacing: -0.005em; |
| } |
| .pw .ttl a { |
| text-decoration: none; |
| } |
| .pw .ttl a:hover { |
| text-decoration: underline; |
| text-underline-offset: 3px; |
| } |
| .pw .title-w .meta { |
| display: flex; |
| gap: 8px; |
| align-items: baseline; |
| } |
| .pw .title-w .meta a { |
| margin-left: auto; |
| font-size: 12.5px; |
| color: var(--ink2); |
| text-decoration: none; |
| white-space: nowrap; |
| } |
| .pw .title-w .meta a:hover { |
| color: var(--ink); |
| text-decoration: underline; |
| } |
|
|
| |
| .pw .why-w { |
| overflow: hidden; |
| } |
| .pw .why-w::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 0; |
| bottom: 0; |
| width: 5px; |
| background: var(--fit); |
| z-index: 1; |
| } |
| .pw .why-w .wi { |
| padding: 15px 18px 16px 20px; |
| } |
| .pw .fitrow { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| font-size: 12.5px; |
| color: var(--ink2); |
| } |
| .pw .fitrow b { |
| color: var(--ink); |
| } |
| .pw .why { |
| font-size: 16px; |
| line-height: 1.52; |
| margin: 8px 0 0; |
| } |
| .pw .why-w .ended { |
| margin-top: 8px; |
| } |
| .pw .ev-u { |
| text-decoration: underline dotted #9a988f 1.5px; |
| text-underline-offset: 4px; |
| cursor: help; |
| border-radius: 3px; |
| transition: background 0.15s; |
| } |
| .pw .ev-u:hover { |
| background: #e6effc; |
| text-decoration-color: var(--fit-medium); |
| } |
| .pw .ev-u.unv { |
| text-decoration-color: var(--warn); |
| } |
| .pw .ev-u.unv:hover { |
| background: var(--warn-bg); |
| } |
| .pw .wmark { |
| color: var(--warn); |
| font-size: 12px; |
| margin-left: 2px; |
| } |
| .pw .linked { |
| display: flex; |
| width: calc(100% + 12px); |
| align-items: center; |
| gap: 8px; |
| padding: 7px 6px; |
| margin: 0 -6px; |
| border: 0; |
| background: none; |
| border-radius: 8px; |
| font-size: 13.5px; |
| text-align: left; |
| } |
| .pw .linked:hover { |
| background: var(--page); |
| } |
| .pw .linked .r { |
| color: var(--ink2); |
| font-size: 12.5px; |
| margin-left: auto; |
| } |
|
|
| |
| .pw .flow { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| .pw .gstep { |
| display: grid; |
| grid-template-columns: 30px 1fr auto; |
| gap: 10px; |
| align-items: start; |
| padding: 7px 6px; |
| margin: 0 -6px; |
| border-radius: 9px; |
| position: relative; |
| } |
| .pw .gstep.has-q { |
| cursor: help; |
| } |
| .pw .gstep.has-q:hover { |
| background: #eef3fb; |
| } |
| .pw .gstep:not(:last-child)::after { |
| content: ''; |
| position: absolute; |
| left: 20px; |
| top: 37px; |
| bottom: -7px; |
| width: 2px; |
| background: var(--hair); |
| } |
| .pw .gi { |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| background: var(--page); |
| color: var(--ink2); |
| display: grid; |
| place-items: center; |
| position: relative; |
| z-index: 1; |
| } |
| .pw .gi svg { |
| width: 16px; |
| height: 16px; |
| fill: none; |
| stroke: currentColor; |
| stroke-width: 1.5; |
| stroke-linecap: round; |
| } |
| .pw .gstep.fin .gi { |
| background: var(--ink); |
| color: #fff; |
| } |
| .pw .gk { |
| font-size: 10.5px; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| color: var(--muted); |
| font-weight: 650; |
| line-height: 1.2; |
| margin-top: 1px; |
| } |
| .pw .gv { |
| font-size: 13.5px; |
| line-height: 1.38; |
| margin-top: 2px; |
| } |
| .pw .gstep.fin .gv { |
| font-weight: 600; |
| } |
| .pw .gstep .s { |
| font-size: 11.5px; |
| margin-top: 1px; |
| white-space: nowrap; |
| } |
| .pw .s.same { |
| color: var(--ink); |
| } |
| .pw .s.adds { |
| color: var(--fit-medium); |
| } |
| .pw .s.other { |
| color: var(--muted); |
| } |
| .pw .gfoot { |
| font-size: 11.5px; |
| color: var(--muted); |
| margin-top: 8px; |
| padding-top: 8px; |
| border-top: 1px solid var(--hair); |
| } |
|
|
| |
| .pw .fig-w { |
| overflow: hidden; |
| } |
| .pw .fig-w .wi { |
| padding: 0; |
| } |
| .pw .figimg { |
| display: block; |
| width: 100%; |
| height: 150px; |
| padding: 0; |
| border: 0; |
| background: #fff; |
| cursor: zoom-in; |
| border-bottom: 1px solid var(--hair); |
| overflow: hidden; |
| } |
| .pw .figimg img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| object-position: top center; |
| display: block; |
| transition: transform 0.4s; |
| } |
| .pw .figimg:hover img { |
| transform: scale(1.03); |
| } |
| .pw .figimg.pending { |
| display: grid; |
| place-items: center; |
| cursor: default; |
| border-bottom: 0; |
| background: linear-gradient(90deg, #f1f0eb 25%, #f8f7f3 50%, #f1f0eb 75%); |
| background-size: 200% 100%; |
| animation: pw-sh 1.4s infinite; |
| } |
| .pw .figimg.pending .reading { |
| margin: 0; |
| } |
| .pw .nofig { |
| padding: 10px 14px; |
| font-size: 12px; |
| color: var(--muted); |
| } |
| .pw .figcap { |
| padding: 10px 14px 12px; |
| font-size: 12.5px; |
| color: var(--ink2); |
| line-height: 1.45; |
| } |
| .pw .figcap b { |
| color: var(--ink); |
| } |
| .pw .fwhy { |
| margin-top: 3px; |
| } |
| .pw .fcap { |
| margin-top: 3px; |
| display: -webkit-box; |
| -webkit-line-clamp: 3; |
| line-clamp: 3; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| |
| .pw .notes-w { |
| background: #fff3b0; |
| border-radius: 4px; |
| transform: rotate(-0.6deg); |
| } |
| .pw .notes-w .wh { |
| color: #8a7a2a; |
| } |
| .pw .nitem { |
| font-size: 13.5px; |
| line-height: 1.4; |
| padding: 2px 0 8px; |
| margin-bottom: 6px; |
| border-bottom: 1px dashed #e3d27c; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| } |
| .pw .nitem .who { |
| font-size: 11px; |
| color: var(--ink2); |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| margin-top: 4px; |
| white-space: normal; |
| } |
| .pw .nitem .who .dot { |
| width: 8px; |
| height: 8px; |
| } |
| .pw .addnote { |
| width: 100%; |
| border: 1px solid #e6d785; |
| border-radius: 8px; |
| padding: 8px 10px; |
| font: inherit; |
| font-size: 13px; |
| background: rgba(255, 255, 255, 0.75); |
| } |
| .pw .addnote:focus { |
| outline: 2px solid var(--fit-medium); |
| outline-offset: -1px; |
| } |
|
|
| |
| .pw .ev-w .wi { |
| padding-top: 0; |
| } |
| .pw .ev-w .wh { |
| position: sticky; |
| top: 0; |
| background: #fff; |
| padding: 14px 0 8px; |
| margin-bottom: 2px; |
| z-index: 1; |
| } |
| .pw .q { |
| margin: 0 0 12px; |
| } |
| .pw .q blockquote { |
| margin: 0; |
| font-family: var(--serif); |
| font-size: 13.5px; |
| line-height: 1.5; |
| padding-left: 14px; |
| border-left: 2px solid var(--ink); |
| } |
| .pw .q.unv blockquote { |
| border-left-color: var(--warn); |
| } |
| .pw .qm { |
| font-size: 12px; |
| color: var(--ink2); |
| margin: 5px 0 0 16px; |
| } |
| .pw .qm a { |
| color: var(--ink); |
| } |
| .pw .okt { |
| color: var(--ok); |
| font-weight: 600; |
| } |
| .pw .bad { |
| color: var(--warn-ink); |
| font-weight: 600; |
| } |
| .pw .h5 { |
| font-size: 11px; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| color: var(--muted); |
| margin: 12px 0 6px; |
| font-weight: 650; |
| } |
| .pw .seedlinks { |
| font-size: 13.5px; |
| } |
| .pw .seedlinks button { |
| border: 0; |
| background: none; |
| padding: 0; |
| text-decoration: underline; |
| text-decoration-color: var(--axis); |
| text-underline-offset: 3px; |
| } |
| .pw .seedlinks button:hover { |
| text-decoration-color: var(--ink); |
| } |
| .pw .gaps { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
| .pw .gaps li { |
| display: flex; |
| gap: 8px; |
| font-size: 13px; |
| color: var(--ink2); |
| padding: 2px 0; |
| } |
| .pw .gaps li::before { |
| content: '?'; |
| flex: none; |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| border: 1.5px solid var(--axis); |
| color: var(--muted); |
| font-size: 10px; |
| font-weight: 700; |
| display: grid; |
| place-items: center; |
| margin-top: 2px; |
| } |
| .pw .prov { |
| font-size: 12px; |
| color: var(--muted); |
| margin: 12px 0 0; |
| line-height: 1.6; |
| } |
|
|
| |
| .pw .dock { |
| overflow: hidden; |
| } |
| .pw .dock .wi { |
| padding: 0; |
| } |
| .pw .dbody { |
| padding: 10px 12px 12px; |
| } |
| .pw .tour { |
| background: var(--ink); |
| color: #fff; |
| padding: 10px 10px 12px 14px; |
| } |
| .pw .tour .r1 { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 11.5px; |
| color: #c3c2b7; |
| font-weight: 650; |
| letter-spacing: 0.02em; |
| } |
| .pw .tour .av { |
| width: 22px; |
| height: 22px; |
| border-radius: 50%; |
| display: grid; |
| place-items: center; |
| background: #2a2a28; |
| flex: none; |
| } |
| .pw .tour .say { |
| font-size: 14px; |
| line-height: 1.4; |
| margin-top: 6px; |
| } |
| .pw .tour .nav { |
| display: flex; |
| gap: 4px; |
| margin-left: auto; |
| } |
| .pw .tour .nav button { |
| border: 0; |
| background: rgba(255, 255, 255, 0.14); |
| color: #fff; |
| border-radius: 7px; |
| padding: 4px 10px; |
| font-size: 12.5px; |
| font-weight: 600; |
| } |
| .pw .tour .nav button:hover { |
| background: rgba(255, 255, 255, 0.26); |
| } |
| .pw .tour .nav button[disabled] { |
| opacity: 0.35; |
| cursor: default; |
| } |
| .pw .tour .dots { |
| display: flex; |
| gap: 4px; |
| } |
| .pw .tour .dots i { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.3); |
| } |
| .pw .tour .dots i.on { |
| background: #fff; |
| } |
| .pw .drow { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| } |
| .pw .more { |
| border: 0; |
| background: none; |
| color: var(--ink2); |
| font-weight: 600; |
| font-size: 13px; |
| padding: 7px 8px; |
| border-radius: 8px; |
| display: inline-flex; |
| gap: 6px; |
| align-items: center; |
| } |
| .pw .more:hover { |
| background: var(--page); |
| color: var(--ink); |
| } |
| .pw .chev { |
| display: inline-block; |
| transition: transform 0.2s; |
| } |
| .pw .more.open .chev { |
| transform: rotate(180deg); |
| } |
| .pw .btn { |
| border: 0; |
| background: var(--page); |
| border-radius: 8px; |
| padding: 7px 13px; |
| font-weight: 600; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| white-space: nowrap; |
| } |
| .pw .btn:hover { |
| background: #eae8e2; |
| } |
| .pw .btn.primary { |
| background: var(--ink); |
| color: #fff; |
| } |
| .pw .btn.primary:hover { |
| background: #2a2a28; |
| } |
| .pw .btn:disabled { |
| opacity: 0.45; |
| cursor: default; |
| } |
| .pw .votes { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 12px; |
| color: var(--ink2); |
| margin: 0 0 8px 6px; |
| flex-wrap: wrap; |
| } |
| .pw .split { |
| color: var(--warn-ink); |
| font-weight: 600; |
| } |
|
|
| |
| .pw-pop { |
| position: fixed; |
| z-index: 2; |
| width: 320px; |
| background: var(--ink); |
| color: #fff; |
| border-radius: 10px; |
| padding: 12px 14px; |
| font-size: 12.5px; |
| box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); |
| pointer-events: auto; |
| } |
| .pw-pop blockquote { |
| margin: 0 0 8px; |
| font-family: var(--serif); |
| font-size: 14px; |
| line-height: 1.45; |
| } |
| .pw-pop .pq + .pq { |
| margin-top: 10px; |
| } |
| .pw-pop .pm { |
| color: #c3c2b7; |
| } |
| .pw-pop .pm b { |
| color: #7fd17f; |
| } |
| .pw-pop .pm b.w { |
| color: #ffc94d; |
| } |
| .pw-pop .pm a { |
| color: #fff; |
| } |
| .pw-pop .seeds { |
| margin: 4px 0 8px; |
| font-size: 13.5px; |
| font-weight: 600; |
| } |
| .pw-toast { |
| position: absolute; |
| left: 50%; |
| bottom: 72px; |
| transform: translateX(-50%); |
| z-index: 4; |
| background: var(--ink); |
| color: #fff; |
| border-radius: 10px; |
| padding: 10px 14px; |
| font-size: 13px; |
| display: flex; |
| gap: 14px; |
| align-items: center; |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); |
| max-width: 560px; |
| pointer-events: auto; |
| } |
| .pw-toast button { |
| background: none; |
| border: 0; |
| color: #fff; |
| text-decoration: underline; |
| font-weight: 600; |
| padding: 0; |
| } |
| .pw-lightbox { |
| position: absolute; |
| inset: 0; |
| z-index: 3; |
| background: rgba(11, 11, 11, 0.7); |
| display: grid; |
| place-items: center; |
| padding: 32px; |
| pointer-events: auto; |
| } |
| .pw-lb { |
| background: #fff; |
| border-radius: 14px; |
| max-width: min(1100px, 94%); |
| max-height: 100%; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| position: relative; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); |
| } |
| .pw-lb img { |
| max-width: 100%; |
| max-height: 72vh; |
| object-fit: contain; |
| display: block; |
| margin: 0 auto; |
| background: #fff; |
| } |
| .pw-lbcap { |
| padding: 12px 18px 16px; |
| border-top: 1px solid var(--hair); |
| font-size: 13px; |
| color: var(--ink2); |
| max-width: 900px; |
| overflow: auto; |
| } |
| .pw-lbcap b { |
| color: var(--ink); |
| } |
| .pw-lbcap .credit { |
| margin-top: 6px; |
| font-size: 12px; |
| color: var(--muted); |
| } |
| .pw-x { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| width: 28px; |
| height: 28px; |
| border: 0; |
| background: rgba(255, 255, 255, 0.92); |
| border-radius: 50%; |
| color: var(--ink2); |
| font-size: 18px; |
| line-height: 1; |
| z-index: 2; |
| box-shadow: 0 0 0 1px var(--ring); |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .pw-group.ready .w, |
| .pw-group.ready .pw-lines, |
| .pw .spin, |
| .pw .skel, |
| .pw .figimg.pending { |
| animation: none; |
| } |
| } |
|
|
