koishi-plugin-group-analysis-mx 1.0.1

package/resources/scrapbook/css/style.css

@@ -0,0 +1,1094 @@
+/* 卡通手账调色板 */
+:root {
+    --bg-paper: #fdfbf7;
+    --ink-primary: #5d4037;
+    /* 像铅笔/墨水的深褐色 */
+    --ink-secondary: #8d6e63;
+
+    --color-yellow: #fff9c4;
+    --color-pink: #ffccbc;
+    --color-blue: #b3e5fc;
+    --color-green: #c8e6c9;
+    --color-purple: #e1bee7;
+
+    --accent-orange: #ff7043;
+
+    /* MBTI 专属高对比色 */
+    --mbti-bg: #ede7f6;
+    --mbti-border: #9575cd;
+    --mbti-text: #512da8;
+
+    /* 称号专属色 */
+    --title-bg: #fffde7;
+    --title-border: #ffb74d;
+    --title-text: #bf360c;
+
+    --font-title: 'ZCOOL KuaiLe', cursive;
+    /* 标题字体 */
+    --font-hand: 'Patrick Hand', "KaiTi", "STKaiti", serif;
+    /* 手写体 */
+    --font-body: 'Noto Sans SC', sans-serif;
+    /* 正文体 */
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font-body);
+    color: var(--ink-primary);
+    background-color: var(--bg-paper);
+    /* 点阵纸背景纹理 */
+    background-image: radial-gradient(#ddd 2px, transparent 2px);
+    background-size: 20px 20px;
+    min-height: 100vh;
+    padding: 40px 20px;
+    line-height: 1.6;
+}
+
+/* SVG 图标通用样式 */
+.doodle {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+    position: relative;
+    background: #fff;
+    border: 2px solid var(--ink-primary);
+    border-radius: 20px;
+    padding: 40px;
+    /* Stacked "Paper" Effect: Blue Shadow -> Pink Shadow -> Soft Drop Shadow */
+    box-shadow:
+        8px 8px 0 var(--color-blue),
+        16px 16px 0 var(--color-pink),
+        0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+/* Stitching Effect */
+.container::before {
+    content: "";
+    position: absolute;
+    top: 12px;
+    bottom: 12px;
+    left: 12px;
+    right: 12px;
+    border: 2px dashed var(--ink-secondary);
+    border-radius: 15px;
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+/* ==================== 1. 头部设计 ==================== */
+.header {
+    text-align: center;
+    margin-bottom: 50px;
+    position: relative;
+    padding-top: 20px;
+}
+
+.title-sticker {
+    display: inline-block;
+    background: #fff;
+    padding: 20px 60px;
+    border: 3px dashed var(--ink-primary);
+    border-radius: 15px;
+    box-shadow: 5px 5px 0 var(--color-blue);
+    transform: rotate(-2deg);
+    position: relative;
+}
+
+.title-sticker h1 {
+    font-family: var(--font-title);
+    font-size: 3.2rem;
+    color: var(--accent-orange);
+    margin: 0;
+    -webkit-text-stroke: 1px var(--ink-primary);
+}
+
+.date-badge {
+    position: absolute;
+    bottom: -15px;
+    right: -20px;
+    background: var(--color-yellow);
+    padding: 5px 15px;
+    font-family: var(--font-hand);
+    font-size: 1.2rem;
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
+    transform: rotate(5deg);
+    border: 1px solid var(--ink-primary);
+}
+
+.tape {
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 25px;
+    background: rgba(255, 171, 145, 0.7);
+    opacity: 0.8;
+    mask-image: radial-gradient(circle at 5px, transparent 4px, black 5px);
+    mask-size: 10px 100%;
+    mask-repeat: repeat-x;
+}
+
+/* ==================== 2. 统计邮票 ==================== */
+.stats-wrapper {
+    display: flex;
+    gap: 25px;
+    margin-bottom: 40px;
+    align-items: stretch;
+}
+
+.stats-grid {
+    flex: 2;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.stamp {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    padding: 15px;
+    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
+    border: 2px solid var(--ink-primary);
+    border-radius: 12px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+}
+
+/* 装饰性背景纹理 */
+.stamp::after {
+    content: "";
+    position: absolute;
+    top: 5px;
+    bottom: 5px;
+    left: 5px;
+    right: 5px;
+    border: 1px dotted #e0e0e0;
+    border-radius: 8px;
+    pointer-events: none;
+}
+
+.stamp:hover {
+    transform: translateY(-2px);
+}
+
+.stamp-inner {
+    text-align: center;
+    z-index: 1;
+}
+
+.stamp-num {
+    font-family: var(--font-title);
+    font-size: 1.8rem;
+    color: var(--accent-orange);
+    line-height: 1;
+    margin: 5px 0;
+}
+
+.stamp-label {
+    font-family: var(--font-hand);
+    font-size: 1rem;
+    color: var(--ink-secondary);
+}
+
+/* ==================== 布局容器 ==================== */
+.grid-layout {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 30px;
+}
+
+.section-title {
+    font-family: var(--font-title);
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.section-title .doodle {
+    color: var(--accent-orange);
+    font-size: 1.3em;
+}
+
+/* ==================== 3. 活跃时段 (Highlight) ==================== */
+.highlight-section {
+    flex: 1;
+    background: var(--color-yellow);
+    padding: 20px;
+    border: 2px solid var(--ink-primary);
+    border-radius: 20px;
+    box-shadow: 6px 6px 0 var(--color-pink);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 10px, transparent 10px, transparent 20px);
+}
+
+.tape-top {
+    width: 60px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.5);
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.time-big {
+    font-family: var(--font-title);
+    font-size: 2.5rem;
+    color: var(--ink-primary);
+    margin: 10px 0;
+}
+
+.time-desc {
+    font-family: var(--font-hand);
+    color: var(--ink-secondary);
+    font-size: 1.5rem;
+}
+
+/* ==================== 4. 24H 活跃图表 (横向底部) ==================== */
+.chart-section-bottom {
+    margin-top: 40px;
+    padding: 20px;
+    background: #fff;
+    border: 2px solid var(--ink-primary);
+    border-radius: 12px;
+    /* Soft shadow + line border look */
+    box-shadow: 5px 5px 0 var(--color-purple);
+    position: relative;
+    /* Graph paper background */
+    background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+    background-size: 20px 20px;
+}
+
+.chart-header {
+    font-family: var(--font-title);
+    font-size: 1.4rem;
+    color: var(--ink-primary);
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.chart-container-horizontal {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    height: 180px;
+    /* Chart height */
+    padding-bottom: 5px;
+    gap: 4px;
+}
+
+.chart-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+    position: relative;
+}
+
+.bar-value-top {
+    font-family: var(--font-hand);
+    font-size: 0.8rem;
+    color: var(--ink-secondary);
+    margin-bottom: 4px;
+    opacity: 0;
+    /* Hide by default to avoid clutter, or show only if > 0 */
+}
+
+/* Show value if needed, or maybe only for peaks */
+.chart-column:hover .bar-value-top,
+.chart-column.show-value .bar-value-top {
+    opacity: 1;
+}
+
+.bar-vertical {
+    width: 60%;
+    min-width: 6px;
+    max-width: 14px;
+    border: 1px solid var(--ink-primary);
+    border-bottom: none;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-color: var(--color-blue);
+    /* Crayon-like texture overlay */
+    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4L4 0' stroke='rgba(0,0,0,0.1)' stroke-width='1'/%3E%3C/svg%3E");
+    transition: height 0.5s ease;
+}
+
+.bar-label-x {
+    margin-top: 6px;
+    font-family: var(--font-hand);
+    font-size: 0.75rem;
+    color: var(--ink-primary);
+    transform: rotate(-45deg);
+    transform-origin: center top;
+    white-space: nowrap;
+}
+
+/* ==================== 5. 话题列表 ==================== */
+.topic-section {
+    grid-column: span 12;
+    background: #fff;
+    padding: 30px 30px 30px 50px;
+    border: 1px solid #ddd;
+    background-image: repeating-linear-gradient(transparent, transparent 39px, #b2ebf2 39px, #b2ebf2 40px);
+    line-height: 40px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
+    position: relative;
+}
+
+.paper-holes {
+    position: absolute;
+    left: 15px;
+    top: 0;
+    bottom: 0;
+    width: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+.hole {
+    width: 12px;
+    height: 12px;
+    background: var(--bg-paper);
+    border-radius: 50%;
+    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.topic-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 0;
+    padding-top: 4px;
+}
+
+.check-box {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--ink-primary);
+    margin-right: 15px;
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    flex-shrink: 0;
+}
+
+.check-tick {
+    width: 14px;
+    height: 14px;
+    background: var(--accent-orange);
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+.topic-content {
+    line-height: 1.5;
+    padding-top: 6px;
+    flex: 1;
+}
+
+.topic-title {
+    font-family: var(--font-title);
+    font-size: 1.5rem;
+    margin-right: 10px;
+    background: linear-gradient(transparent 60%, var(--color-pink) 60%);
+    display: inline-block;
+}
+
+.topic-detail {
+    font-family: var(--font-hand);
+    color: #666;
+    font-size: 1.2rem;
+    margin-top: 8px;
+    line-height: 1.4;
+}
+
+/* ==================== 6. 群友画像 ==================== */
+.user-section {
+    grid-column: span 12;
+    margin-top: 20px;
+}
+
+.masonry-grid {
+    column-count: 2;
+    column-gap: 25px;
+}
+
+.user-card {
+    break-inside: avoid;
+    background: #fff;
+    border: 2px solid var(--ink-primary);
+    border-radius: 16px;
+    padding: 24px;
+    margin-bottom: 30px;
+    /* Muted Blue-Grey Shadow */
+    box-shadow: 6px 6px 0 rgba(70, 80, 100, 0.15), 6px 6px 0 1px var(--ink-primary);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.2s;
+    /* Very subtle grain */
+    background-color: #fff;
+    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
+}
+
+.user-card:hover {
+    transform: translateY(-4px) rotate(1deg);
+    z-index: 5;
+    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15), 8px 8px 0 2px var(--ink-primary);
+}
+
+.card-tape {
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%) rotate(-2deg);
+    width: 80px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.4);
+    /* Fallback */
+    background-color: var(--color-blue);
+    opacity: 0.8;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* Jagged edges for tape look */
+    mask-image: linear-gradient(135deg, transparent 5px, black 0) top left, linear-gradient(-135deg, transparent 5px, black 0) top right, linear-gradient(45deg, transparent 5px, black 0) bottom left, linear-gradient(-45deg, transparent 5px, black 0) bottom right;
+    mask-size: 51% 51%;
+    mask-repeat: no-repeat;
+    -webkit-mask-image: radial-gradient(circle at 2px 2px, transparent 2px, black 2.5px);
+    -webkit-mask-size: 100% 100%;
+    border-left: 2px dashed rgba(255, 255, 255, 0.3);
+    border-right: 2px dashed rgba(255, 255, 255, 0.3);
+}
+
+.user-card:nth-child(2n) .card-tape {
+    background-color: var(--color-pink);
+    transform: translateX(-50%) rotate(3deg);
+}
+
+.user-card:nth-child(3n) .card-tape {
+    background-color: var(--color-green);
+    transform: translateX(-50%) rotate(-1deg);
+}
+
+.user-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    margin-bottom: 15px;
+    border-bottom: 2px dashed #f0f0f0;
+    padding-bottom: 15px;
+}
+
+.u-avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    border: 2px solid var(--ink-primary);
+    background: #eee;
+    flex-shrink: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #aaa;
+}
+
+.u-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.u-name {
+    font-family: var(--font-title);
+    font-size: 1.25rem;
+    line-height: 1.2;
+    word-break: break-all;
+    overflow-wrap: break-word;
+}
+
+.badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.badge {
+    font-size: 0.85rem;
+    padding: 2px 8px;
+    border-radius: 6px;
+    font-family: var(--font-hand);
+    white-space: nowrap;
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+}
+
+.badge.title {
+    background: var(--title-bg);
+    color: var(--title-text);
+    border: 1px solid var(--title-border);
+}
+
+.badge.mbti {
+    background: var(--mbti-bg);
+    color: var(--mbti-text);
+    border: 1px solid var(--mbti-border);
+    font-weight: bold;
+    letter-spacing: 0.5px;
+}
+
+.u-reason {
+    font-family: var(--font-hand);
+    font-size: 1.05rem;
+    color: #444;
+    line-height: 1.6;
+
+    /* Quote Block Style */
+    background: #f8fbff;
+    border-left: 4px solid var(--color-blue);
+    padding: 12px 15px;
+    margin-top: 15px;
+    border-radius: 4px;
+    position: relative;
+    word-break: break-all;
+    overflow-wrap: break-word;
+}
+
+/* ==================== 7. 每日回响 ==================== */
+.quotes-section {
+    grid-column: span 12;
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+    margin-top: 20px;
+}
+
+.quote-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 90%;
+    position: relative;
+}
+
+.q-flex-container {
+    display: flex;
+    gap: 15px;
+    align-items: flex-start;
+}
+
+.q-user-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    width: 70px;
+}
+
+.q-avatar-box {
+    position: relative;
+    margin-bottom: 5px;
+}
+
+.q-avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    border: 3px solid #fff;
+    background: #fff;
+    object-fit: cover;
+    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* Left/Odd: Blue Shadow */
+.quote-wrapper:nth-child(odd) .q-avatar {
+    box-shadow: 0 0 0 2px var(--color-blue);
+}
+
+/* Right/Even: Orange Shadow */
+.quote-wrapper:nth-child(even) .q-avatar {
+    box-shadow: 0 0 0 2px var(--accent-orange);
+}
+
+.q-content-col {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    align-items: flex-start;
+}
+
+.q-sender-name {
+    font-family: var(--font-hand);
+    font-size: 1.25rem;
+    color: var(--ink-primary);
+    margin-bottom: 2px;
+    margin-left: 10px;
+    line-height: 1.2;
+    position: relative;
+    display: inline-block;
+}
+
+/* Underline Element */
+.q-sender-name::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 4px;
+    background: var(--color-blue);
+    opacity: 0.4;
+    border-radius: 2px;
+    margin-top: -6px;
+}
+
+/* Right-aligned layout for even items */
+.quote-wrapper:nth-child(even) {
+    align-self: flex-end;
+    align-items: flex-end;
+}
+
+.quote-wrapper:nth-child(even) .q-flex-container {
+    flex-direction: row-reverse;
+}
+
+.quote-wrapper:nth-child(even) .q-content-col {
+    align-items: flex-end;
+}
+
+.quote-wrapper:nth-child(even) .q-sender-name {
+    margin-left: 0;
+    margin-right: 15px;
+    text-align: right;
+}
+
+.quote-wrapper:nth-child(even) .q-sender-name::after {
+    background: var(--accent-orange);
+}
+
+.q-bubble {
+    background: #fff;
+    border: 2px solid var(--ink-primary);
+    padding: 15px 25px;
+    border-radius: 20px;
+    box-shadow: 4px 4px 0 var(--color-blue);
+    position: relative;
+    z-index: 2;
+    width: fit-content;
+    max-width: 100%;
+}
+
+.quote-wrapper:nth-child(odd) .q-bubble {
+    border-top-left-radius: 4px;
+}
+
+.quote-wrapper:nth-child(even) .q-bubble {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 20px;
+    background: var(--color-yellow);
+    box-shadow: -4px 4px 0 var(--color-pink);
+    text-align: right;
+    border-bottom-left-radius: 20px;
+}
+
+.q-content {
+    font-family: var(--font-title);
+    font-size: 1.3rem;
+    line-height: 1.4;
+    margin-bottom: 5px;
+    position: relative;
+}
+
+.q-quote-mark {
+    display: none;
+}
+
+.q-analysis-note {
+    background: #fffde7;
+    padding: 10px 15px;
+    font-size: 0.9rem;
+    color: #666;
+    width: fit-content;
+    max-width: 100%;
+    margin-top: -5px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ddd;
+    position: relative;
+    z-index: 1;
+    font-family: var(--font-body);
+    line-height: 1.5;
+    border-radius: 0 0 10px 10px;
+}
+
+.quote-wrapper:nth-child(odd) .q-analysis-note {
+    transform: rotate(-1deg) translateX(10px);
+    border-radius: 0 0 10px 10px;
+}
+
+.quote-wrapper:nth-child(even) .q-analysis-note {
+    transform: rotate(1deg) translateX(-10px);
+    text-align: left;
+    background: #f3e5f5;
+    border-radius: 0 0 10px 10px;
+}
+
+.note-label {
+    font-weight: bold;
+    color: var(--accent-orange);
+    display: block;
+    margin-bottom: 4px;
+    font-family: var(--font-title);
+}
+
+/* Footer */
+.footer {
+    margin-top: 60px;
+    text-align: center;
+    font-family: var(--font-hand);
+    color: var(--ink-secondary);
+    border-top: 2px dashed var(--ink-secondary);
+    padding-top: 20px;
+    font-size: 1.05rem;
+    opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+    .grid-layout {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .masonry-grid {
+        column-count: 1;
+    }
+
+    .stamp {
+        width: 100%;
+    }
+
+    .quote-wrapper {
+        max-width: 100%;
+    }
+}
+
+/* ==================== 8. 用户画像特定样式 (User Persona) ==================== */
+
+/* Header Area */
+.persona-header {
+    display: flex;
+    gap: 40px;
+    margin-bottom: 30px;
+    align-items: center;
+}
+
+.polaroid-wrapper {
+    position: relative;
+    transform: rotate(-3deg);
+    flex-shrink: 0;
+}
+
+.polaroid {
+    background: #fff;
+    padding: 15px 15px 40px 15px;
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
+    border: 1px solid #ddd;
+}
+
+.polaroid-inner {
+    width: 150px;
+    height: 150px;
+    overflow: hidden;
+    background: #eee;
+    border: 1px solid #bbb;
+}
+
+.polaroid-inner img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.tape-corner {
+    position: absolute;
+    top: -15px;
+    left: 35%;
+    width: 50px;
+    height: 25px;
+    background: rgba(255, 235, 59, 0.6);
+    transform: rotate(-5deg);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    /* mask tape edges */
+    mask-image: linear-gradient(135deg, transparent 2px, black 0) top left, linear-gradient(-135deg, transparent 2px, black 0) top right, linear-gradient(45deg, transparent 2px, black 0) bottom left, linear-gradient(-45deg, transparent 2px, black 0) bottom right;
+    mask-size: 51% 51%;
+    mask-repeat: no-repeat;
+}
+
+.header-info {
+    flex: 1;
+}
+
+.persona-username {
+    font-family: var(--font-title);
+    font-size: 2.8rem;
+    color: var(--ink-primary);
+    margin-bottom: 5px;
+    line-height: 1.2;
+}
+
+.analysis-date {
+    font-family: var(--font-hand);
+    font-size: 1.1rem;
+    color: #999;
+    margin-bottom: 20px;
+}
+
+.summary-note-wrapper {
+    position: relative;
+    padding-left: 10px;
+}
+
+.sticky-note {
+    background: var(--color-yellow);
+    padding: 20px 25px;
+    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1);
+    transform: rotate(1deg);
+    font-family: var(--font-hand);
+    font-size: 1.2rem;
+    color: var(--ink-primary);
+    position: relative;
+    max-width: 90%;
+}
+
+.sticky-note::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.05) 50%);
+}
+
+.pin {
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 16px;
+    height: 16px;
+    background: var(--accent-orange);
+    border-radius: 50%;
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
+    z-index: 2;
+}
+
+.pin::after {
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 4px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+}
+
+.divider-dashed {
+    border-top: 3px dashed var(--ink-secondary);
+    opacity: 0.3;
+    margin: 40px 0;
+}
+
+/* Traits & Interests */
+.tags-section {
+    display: flex;
+    gap: 40px;
+    margin-bottom: 40px;
+}
+
+.tag-group {
+    flex: 1;
+}
+
+.section-label {
+    font-family: var(--font-title);
+    font-size: 1.4rem;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--ink-primary);
+}
+
+.tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.washi-tape-tag {
+    background: #fff;
+    padding: 8px 16px;
+    font-family: var(--font-hand);
+    font-size: 1.1rem;
+    position: relative;
+    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
+    /* Pattern */
+    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0, 0, 0, 0.03) 5px, rgba(0, 0, 0, 0.03) 10px);
+}
+
+/* Tape ends effect using clip-path for jagged edges */
+.washi-tape-tag {
+    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
+}
+
+/* Color variations */
+.washi-tape-tag.c1 {
+    background-color: var(--color-blue);
+}
+
+.washi-tape-tag.c2 {
+    background-color: var(--color-pink);
+}
+
+.washi-tape-tag.c3 {
+    background-color: var(--color-green);
+}
+
+.washi-tape-tag.c4 {
+    background-color: var(--color-purple);
+}
+
+/* Communication Style */
+.notebook-paper {
+    background: #fff;
+    border: 1px solid #ddd;
+    /* Background lines geometry */
+    background-image: linear-gradient(transparent 35px, #b3e5fc 35px);
+    background-size: 100% 36px;
+    background-attachment: local;
+
+    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05);
+    margin-bottom: 40px;
+    position: relative;
+
+    /* Reset container properties to avoid phantom space */
+    padding: 0;
+    white-space: normal;
+}
+
+.notebook-paper p {
+    margin: 0;
+    /* Geometry Sync */
+    line-height: 36px;
+    font-family: var(--font-hand);
+    font-size: 1.2rem;
+    color: #444;
+
+    /* Padding to align first baseline and provide side spacing */
+    /* 8px top aligns text baseline to the 35px underline */
+    padding: 8px 30px 10px 30px;
+
+    /* Preserve exact text formatting including newlines */
+    white-space: pre-wrap;
+}
+
+
+
+/* Evidence Board */
+.evidence-section {
+    background: #f4ecdf;
+    /* Cork color */
+    padding: 30px;
+    border: 8px solid #a1887f;
+    border-radius: 4px;
+    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+
+.corkboard-grid {
+    column-count: 2;
+    column-gap: 20px;
+}
+
+.evidence-card-pin {
+    break-inside: avoid;
+    background: #fff;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
+    font-family: var(--font-body);
+    font-size: 0.95rem;
+    line-height: 1.5;
+    position: relative;
+    transform: rotate(var(--rot));
+}
+
+.evidence-card-pin::before {
+    content: "";
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 12px;
+    height: 12px;
+    background: #f44336;
+    /* Red pin */
+    border-radius: 50%;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+    z-index: 5;
+}
+
+@media (max-width: 600px) {
+    .persona-header {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .polaroid-wrapper {
+        transform: rotate(0);
+    }
+
+    .tags-section {
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .corkboard-grid {
+        column-count: 1;
+    }
+}