Spaces:
Sleeping
Sleeping
| /* ══════════════════════════════════════════ | |
| StoicGPT — Design System | |
| ══════════════════════════════════════════ */ | |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #0a0908; | |
| --bg-alt: #0e0c0a; | |
| --surface: #141210; | |
| --surface-alt: #1a1714; | |
| --border: #2e2820; | |
| --border-light: #3a3228; | |
| --gold: #c9a84c; | |
| --gold-bright: #e0c060; | |
| --gold-dim: #7a6530; | |
| --gold-subtle: #2a2210; | |
| --bronze: #a0714a; | |
| --bronze-dim: #6b4a30; | |
| --text: #d4c9b0; | |
| --text-bright: #ede4d0; | |
| --text-dim: #7a7060; | |
| --text-muted: #504a3e; | |
| --font-display: 'Cinzel', serif; | |
| --font-body: 'EB Garamond', serif; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| font-size: 17px; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font-body); | |
| line-height: 1.7; | |
| overflow-x: hidden; | |
| } | |
| a { color: var(--gold); text-decoration: none; transition: color 0.2s; } | |
| a:hover { color: var(--gold-bright); } | |
| /* ── Nav ── */ | |
| .nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| background: rgba(10, 9, 8, 0.92); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| transition: background 0.3s; | |
| } | |
| .nav-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 60px; | |
| } | |
| .nav-logo { | |
| font-family: var(--font-display); | |
| font-size: 1.1rem; | |
| letter-spacing: 0.16em; | |
| color: var(--gold); | |
| font-weight: 600; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 32px; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| font-family: var(--font-display); | |
| font-size: 0.68rem; | |
| letter-spacing: 0.14em; | |
| color: var(--text-dim); | |
| transition: color 0.2s; | |
| text-transform: uppercase; | |
| } | |
| .nav-links a:hover, | |
| .nav-links a.active { color: var(--gold); } | |
| .nav-hamburger { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--text-dim); | |
| font-size: 1.4rem; | |
| cursor: pointer; | |
| } | |
| /* ── Page container ── */ | |
| .page { | |
| display: none; | |
| min-height: 100vh; | |
| padding-top: 60px; | |
| } | |
| .page.active { display: block; } | |
| /* ── Section ── */ | |
| .section { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 80px 28px; | |
| } | |
| .section-label { | |
| font-family: var(--font-display); | |
| font-size: 0.7rem; | |
| letter-spacing: 0.2em; | |
| color: var(--gold-dim); | |
| text-transform: uppercase; | |
| margin-bottom: 12px; | |
| } | |
| .section-title { | |
| font-family: var(--font-display); | |
| font-size: 1.8rem; | |
| letter-spacing: 0.08em; | |
| color: var(--text-bright); | |
| margin-bottom: 20px; | |
| } | |
| .section-text { | |
| max-width: 650px; | |
| color: var(--text); | |
| font-size: 1.05rem; | |
| line-height: 1.85; | |
| } | |
| /* ── Divider ── */ | |
| .ornament-divider { | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 1.2rem; | |
| letter-spacing: 0.5em; | |
| padding: 40px 0; | |
| } | |
| /* ══════════════════════════════════════════ | |
| HOME — Hero | |
| ══════════════════════════════════════════ */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 60px 28px 80px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(ellipse at 50% 40%, rgba(201, 168, 76, 0.06) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero-ornament { | |
| font-size: 3rem; | |
| color: var(--gold-dim); | |
| margin-bottom: 24px; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeUp 1s 0.2s forwards; | |
| } | |
| .hero h1 { | |
| font-family: var(--font-display); | |
| font-size: clamp(2.4rem, 6vw, 4rem); | |
| letter-spacing: 0.18em; | |
| color: var(--gold); | |
| margin-bottom: 16px; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeUp 1s 0.4s forwards; | |
| } | |
| .hero-subtitle { | |
| font-family: var(--font-body); | |
| font-size: 1.15rem; | |
| font-style: italic; | |
| color: var(--text-dim); | |
| max-width: 500px; | |
| line-height: 1.8; | |
| margin-bottom: 40px; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeUp 1s 0.6s forwards; | |
| } | |
| .hero-cta { | |
| display: inline-block; | |
| font-family: var(--font-display); | |
| font-size: 0.75rem; | |
| letter-spacing: 0.16em; | |
| color: var(--gold); | |
| border: 1px solid var(--gold-dim); | |
| padding: 14px 36px; | |
| border-radius: 2px; | |
| transition: background 0.3s, color 0.3s; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeUp 1s 0.8s forwards; | |
| position: relative; | |
| z-index: 2; | |
| margin-bottom: 60px; | |
| } | |
| .hero-cta:hover { | |
| background: var(--gold-dim); | |
| color: var(--bg); | |
| } | |
| .hero-scroll-hint { | |
| position: absolute; | |
| bottom: 24px; | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| letter-spacing: 0.1em; | |
| opacity: 0; | |
| animation: fadeUp 1s 1.2s forwards; | |
| pointer-events: none; | |
| } | |
| .hero-scroll-hint::after { | |
| content: ''; | |
| display: block; | |
| width: 1px; | |
| height: 30px; | |
| background: var(--border); | |
| margin: 8px auto 0; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes fadeUp { | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.3; } | |
| 50% { opacity: 0.8; } | |
| } | |
| /* ── Home: Project overview cards ── */ | |
| .overview-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-top: 32px; | |
| } | |
| .overview-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 3px; | |
| padding: 28px 24px; | |
| transition: border-color 0.3s, transform 0.3s; | |
| } | |
| .overview-card:hover { | |
| border-color: var(--gold-dim); | |
| transform: translateY(-2px); | |
| } | |
| .overview-card .card-icon { | |
| font-size: 1.6rem; | |
| margin-bottom: 14px; | |
| } | |
| .overview-card h3 { | |
| font-family: var(--font-display); | |
| font-size: 0.85rem; | |
| letter-spacing: 0.1em; | |
| color: var(--text-bright); | |
| margin-bottom: 10px; | |
| } | |
| .overview-card p { | |
| font-size: 0.92rem; | |
| color: var(--text-dim); | |
| line-height: 1.7; | |
| } | |
| /* ── Home: Stats bar ── */ | |
| .stats-bar { | |
| display: flex; | |
| justify-content: center; | |
| gap: 48px; | |
| flex-wrap: wrap; | |
| padding: 48px 0; | |
| border-top: 1px solid var(--border); | |
| border-bottom: 1px solid var(--border); | |
| margin: 48px 0; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-family: var(--font-display); | |
| font-size: 1.6rem; | |
| color: var(--gold); | |
| letter-spacing: 0.06em; | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| letter-spacing: 0.1em; | |
| margin-top: 4px; | |
| } | |
| /* ══════════════════════════════════════════ | |
| ARCHITECTURE | |
| ══════════════════════════════════════════ */ | |
| .arch-pipeline { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0; | |
| padding: 40px 0; | |
| overflow-x: auto; | |
| flex-wrap: wrap; | |
| row-gap: 12px; | |
| } | |
| .arch-block { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 3px; | |
| padding: 16px 14px; | |
| text-align: center; | |
| min-width: 110px; | |
| cursor: pointer; | |
| transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; | |
| position: relative; | |
| flex-shrink: 1; | |
| } | |
| .arch-block:hover { | |
| border-color: var(--gold); | |
| transform: translateY(-4px); | |
| box-shadow: 0 8px 24px rgba(201, 168, 76, 0.08); | |
| } | |
| .arch-block.active { | |
| border-color: var(--gold); | |
| box-shadow: 0 0 20px rgba(201, 168, 76, 0.1); | |
| } | |
| .arch-block h4 { | |
| font-family: var(--font-display); | |
| font-size: 0.7rem; | |
| letter-spacing: 0.12em; | |
| color: var(--gold); | |
| margin-bottom: 6px; | |
| } | |
| .arch-block p { | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| } | |
| .arch-arrow { | |
| color: var(--gold-dim); | |
| font-size: 1.4rem; | |
| padding: 0 8px; | |
| flex-shrink: 0; | |
| } | |
| .arch-detail { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 3px; | |
| padding: 32px; | |
| margin-top: 32px; | |
| display: none; | |
| } | |
| .arch-detail.active { display: block; } | |
| .arch-detail h3 { | |
| font-family: var(--font-display); | |
| font-size: 1rem; | |
| letter-spacing: 0.1em; | |
| color: var(--gold); | |
| margin-bottom: 16px; | |
| } | |
| .arch-detail p { | |
| color: var(--text); | |
| line-height: 1.8; | |
| margin-bottom: 12px; | |
| } | |
| .arch-detail code { | |
| background: var(--bg); | |
| color: var(--gold); | |
| padding: 2px 8px; | |
| border-radius: 2px; | |
| font-size: 0.88rem; | |
| } | |
| .arch-detail .detail-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| margin-top: 16px; | |
| } | |
| .arch-detail .detail-item { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| padding: 14px 16px; | |
| border-radius: 2px; | |
| } | |
| .arch-detail .detail-item .label { | |
| font-size: 0.72rem; | |
| letter-spacing: 0.1em; | |
| color: var(--text-dim); | |
| font-family: var(--font-display); | |
| } | |
| .arch-detail .detail-item .value { | |
| color: var(--text-bright); | |
| margin-top: 4px; | |
| } | |
| /* ── Flow animation ── */ | |
| .flow-particle { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| background: var(--gold); | |
| border-radius: 50%; | |
| opacity: 0; | |
| box-shadow: 0 0 8px rgba(201, 168, 76, 0.5); | |
| } | |
| /* ══════════════════════════════════════════ | |
| STOICISM PAGE | |
| ══════════════════════════════════════════ */ | |
| .philosophy-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 24px; | |
| margin-top: 32px; | |
| } | |
| .philosopher-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 3px; | |
| padding: 32px 28px; | |
| transition: border-color 0.3s; | |
| } | |
| .philosopher-card:hover { border-color: var(--gold-dim); } | |
| .philosopher-card h3 { | |
| font-family: var(--font-display); | |
| font-size: 1rem; | |
| letter-spacing: 0.08em; | |
| color: var(--gold); | |
| margin-bottom: 4px; | |
| } | |
| .philosopher-card .dates { | |
| font-size: 0.82rem; | |
| color: var(--text-dim); | |
| font-style: italic; | |
| margin-bottom: 14px; | |
| } | |
| .philosopher-card p { | |
| color: var(--text); | |
| line-height: 1.8; | |
| font-size: 0.95rem; | |
| } | |
| .quote-block { | |
| background: var(--surface); | |
| border-left: 2px solid var(--gold-dim); | |
| padding: 20px 24px; | |
| margin: 24px 0; | |
| font-style: italic; | |
| color: var(--text); | |
| line-height: 1.85; | |
| } | |
| .quote-block cite { | |
| display: block; | |
| margin-top: 10px; | |
| font-style: normal; | |
| font-size: 0.85rem; | |
| color: var(--gold-dim); | |
| } | |
| .principles-list { | |
| list-style: none; | |
| margin-top: 24px; | |
| } | |
| .principles-list li { | |
| padding: 16px 0; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| gap: 16px; | |
| align-items: baseline; | |
| } | |
| .principles-list li:last-child { border-bottom: none; } | |
| .principles-list .num { | |
| font-family: var(--font-display); | |
| font-size: 0.8rem; | |
| color: var(--gold-dim); | |
| letter-spacing: 0.1em; | |
| min-width: 24px; | |
| } | |
| .principles-list .content strong { | |
| color: var(--text-bright); | |
| } | |
| /* ══════════════════════════════════════════ | |
| BIBLIOGRAPHY | |
| ══════════════════════════════════════════ */ | |
| .bib-list { | |
| list-style: none; | |
| margin-top: 24px; | |
| } | |
| .bib-list li { | |
| padding: 18px 0; | |
| border-bottom: 1px solid var(--border); | |
| line-height: 1.8; | |
| } | |
| .bib-list li:last-child { border-bottom: none; } | |
| .bib-list .bib-title { | |
| color: var(--text-bright); | |
| font-style: italic; | |
| } | |
| .bib-list .bib-author { | |
| color: var(--gold); | |
| } | |
| .bib-list .bib-detail { | |
| font-size: 0.88rem; | |
| color: var(--text-dim); | |
| margin-top: 4px; | |
| } | |
| /* ══════════════════════════════════════════ | |
| ABOUT | |
| ══════════════════════════════════════════ */ | |
| .about-layout { | |
| display: flex; | |
| gap: 48px; | |
| align-items: flex-start; | |
| margin-top: 32px; | |
| } | |
| .about-photo { | |
| width: 180px; | |
| height: 180px; | |
| border-radius: 50%; | |
| border: 2px solid var(--border); | |
| background: var(--surface); | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 3rem; | |
| color: var(--gold-dim); | |
| } | |
| .about-info h2 { | |
| font-family: var(--font-display); | |
| font-size: 1.5rem; | |
| color: var(--text-bright); | |
| letter-spacing: 0.08em; | |
| margin-bottom: 8px; | |
| } | |
| .about-info .about-role { | |
| color: var(--gold-dim); | |
| font-style: italic; | |
| margin-bottom: 18px; | |
| } | |
| .about-info p { | |
| line-height: 1.85; | |
| margin-bottom: 20px; | |
| } | |
| .about-links { | |
| display: flex; | |
| gap: 16px; | |
| } | |
| .about-links a { | |
| font-family: var(--font-display); | |
| font-size: 0.72rem; | |
| letter-spacing: 0.12em; | |
| color: var(--gold); | |
| border: 1px solid var(--gold-dim); | |
| padding: 10px 20px; | |
| border-radius: 2px; | |
| transition: background 0.2s, color 0.2s; | |
| } | |
| .about-links a:hover { | |
| background: var(--gold-dim); | |
| color: var(--bg); | |
| } | |
| /* ══════════════════════════════════════════ | |
| CHAT (embedded) | |
| ══════════════════════════════════════════ */ | |
| .chat-container { | |
| max-width: 820px; | |
| margin: 0 auto; | |
| height: calc(100vh - 60px); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .chat-tabs { | |
| display: flex; | |
| justify-content: center; | |
| gap: 0; | |
| border-bottom: 1px solid var(--border); | |
| padding-top: 20px; | |
| flex-shrink: 0; | |
| } | |
| .chat-tab-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-dim); | |
| font-family: var(--font-display); | |
| font-size: 0.78rem; | |
| letter-spacing: 0.14em; | |
| padding: 12px 28px; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: color 0.3s, border-color 0.3s; | |
| } | |
| .chat-tab-btn:hover { color: var(--text); } | |
| .chat-tab-btn.active[data-tab="oracle"] { color: var(--gold); border-bottom-color: var(--gold); } | |
| .chat-tab-btn.active[data-tab="forge"] { color: var(--bronze); border-bottom-color: var(--bronze); } | |
| .chat-tab-desc { | |
| text-align: center; | |
| padding: 10px 20px 0; | |
| font-size: 0.78rem; | |
| color: var(--text-dim); | |
| font-style: italic; | |
| flex-shrink: 0; | |
| } | |
| .chat-model-stats { | |
| display: none; | |
| justify-content: center; | |
| gap: 28px; | |
| padding: 4px 20px 6px; | |
| font-size: 0.72rem; | |
| color: var(--text-dim); | |
| } | |
| .chat-model-stats.visible { display: flex; } | |
| .chat-model-stats span { color: var(--bronze); font-weight: 500; } | |
| #chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 22px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border) transparent; | |
| } | |
| .msg { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| max-width: 92%; | |
| } | |
| .msg.user { align-self: flex-end; align-items: flex-end; } | |
| .msg.bot { align-self: flex-start; align-items: flex-start; } | |
| .msg .msg-label { | |
| font-family: var(--font-display); | |
| font-size: 0.68rem; | |
| letter-spacing: 0.15em; | |
| color: var(--text-dim); | |
| } | |
| .msg.bot .msg-label { color: var(--gold-dim); } | |
| .msg.bot.forge .msg-label { color: var(--bronze); } | |
| .bubble { | |
| padding: 13px 18px; | |
| border-radius: 3px; | |
| line-height: 1.75; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .msg.user .bubble { background: var(--surface-alt); } | |
| .cursor::after { | |
| content: '\25CD'; | |
| color: var(--gold); | |
| animation: blink 0.9s step-end infinite; | |
| } | |
| .msg.bot.forge .cursor::after { color: var(--bronze); } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| .chat-divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| } | |
| .chat-divider::before, .chat-divider::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| .chat-empty { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| color: var(--text-dim); | |
| font-style: italic; | |
| text-align: center; | |
| padding: 40px; | |
| } | |
| .chat-empty .ornament { | |
| font-size: 2.2rem; | |
| line-height: 1; | |
| color: var(--gold-dim); | |
| } | |
| .chat-empty.forge .ornament { color: var(--bronze); } | |
| .chat-input-area { | |
| border-top: 1px solid var(--border); | |
| padding: 16px 20px 20px; | |
| flex-shrink: 0; | |
| background: var(--surface); | |
| } | |
| .chat-input-row { | |
| display: flex; | |
| gap: 10px; | |
| align-items: flex-end; | |
| } | |
| .chat-input-row textarea { | |
| flex: 1; | |
| background: var(--bg); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-radius: 3px; | |
| padding: 11px 14px; | |
| font-family: var(--font-body); | |
| font-size: 1rem; | |
| resize: none; | |
| outline: none; | |
| line-height: 1.6; | |
| max-height: 140px; | |
| transition: border-color 0.2s; | |
| } | |
| .chat-input-row textarea:focus { border-color: var(--gold-dim); } | |
| .chat-input-row textarea.forge-focus:focus { border-color: var(--bronze); } | |
| .chat-input-row textarea::placeholder { color: var(--text-dim); font-style: italic; } | |
| .chat-send-btn { | |
| background: transparent; | |
| border: 1px solid var(--gold-dim); | |
| color: var(--gold); | |
| font-family: var(--font-display); | |
| font-size: 0.73rem; | |
| letter-spacing: 0.12em; | |
| padding: 10px 18px; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| transition: background 0.2s, color 0.2s; | |
| white-space: nowrap; | |
| } | |
| .chat-send-btn:hover { background: var(--gold-dim); color: var(--bg); } | |
| .chat-send-btn.forge { border-color: var(--bronze); color: var(--bronze); } | |
| .chat-send-btn.forge:hover { background: var(--bronze); color: var(--bg); } | |
| .chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .chat-hint { | |
| margin-top: 8px; | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| text-align: center; | |
| font-style: italic; | |
| } | |
| /* ── Footer ── */ | |
| .footer { | |
| text-align: center; | |
| padding: 40px 28px; | |
| border-top: 1px solid var(--border); | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| /* ── Responsive ── */ | |
| @media (max-width: 768px) { | |
| .nav-links { display: none; } | |
| .nav-links.open { | |
| display: flex; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 60px; | |
| left: 0; | |
| right: 0; | |
| background: rgba(10, 9, 8, 0.98); | |
| padding: 20px 28px; | |
| gap: 16px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-hamburger { display: block; } | |
| .about-layout { flex-direction: column; align-items: center; text-align: center; } | |
| .about-links { justify-content: center; } | |
| .arch-pipeline { flex-direction: column; align-items: stretch; } | |
| .arch-arrow { transform: rotate(90deg); text-align: center; padding: 4px 0; } | |
| .arch-detail .detail-grid { grid-template-columns: 1fr; } | |
| .stats-bar { gap: 28px; } | |
| } | |