:root {
            --cream: #faf6eb;
            --forest: #2b5c46;
            --mustard: #dcb853;
            --terra: #c66c54;
            --text: #3d3b38;
            --text-light: #73706b;
            --bg-pattern: url('data:image/svg+xml;utf8,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="1.5" fill="%232b5c46" fill-opacity="0.06"/></svg>');
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: system-ui, -apple-system, sans-serif;
            background-color: var(--cream);
            background-image: var(--bg-pattern);
            color: var(--text);
            line-height: 1.6;
        }
        .serif { font-family: "Songti SC", "Noto Serif CJK SC", serif; }
        .hidden { display: none !important; }
        
        .top-badge {
            background: var(--forest);
            color: var(--cream);
            text-align: center;
            font-size: 12px;
            padding: 8px;
            letter-spacing: 2px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .pub-container, .priv-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            min-height: calc(100vh - 35px);
            display: flex;
            flex-direction: column;
        }
        .pub-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 40px 0;
        }
        .wordmark {
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--forest);
        }
        .subtitle-en {
            font-weight: 400;
            font-size: 14px;
            color: var(--text-light);
        }
        .domain-label {
            font-size: 13px;
            font-weight: 600;
            color: #8b6924;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .hero {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            padding: 20px 0;
        }
        .hero-text { flex: 0.75; max-width: 360px; min-width: 0; }
        .hero-text h1 {
            font-size: clamp(36px, 5vw, 56px);
            color: var(--forest);
            line-height: 1.2;
            margin-bottom: 24px;
        }
        .hero-sub {
            font-size: 18px;
            color: var(--text-light);
            line-height: 1.8;
        }
        .hero-illustration {
            flex: 1.5;
            max-width: 600px;
            display: flex;
            justify-content: center;
        }
        .photo-board { flex: 1.5; max-width: 720px; min-width: 0; display: grid; grid-template-columns: 1.06fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0,1fr)); gap: 18px; align-items: center; padding: 15px 5px; }
        .photo { margin: 0; padding: 7px; background: #fffefa; border: 1px solid #e5e0d2; box-shadow: 0 5px 14px rgba(43,92,70,.1); transform: rotate(2deg); }
        .photo:nth-child(3), .photo:nth-child(4) { transform: rotate(-3deg); }
        .photo img { display: block; width: 100%; height: auto; }
        .main-photo { grid-row: span 2; transform: rotate(-2deg); }
        .photo-strip { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 22px; padding: 30px 6px 0; }
        .mini-photo { margin: 0; padding: 7px; background: #fffefa; box-shadow: 0 4px 12px rgba(43,92,70,.07); transform: rotate(-2deg); align-self: center; }
        .mini-photo:nth-child(even) { transform: rotate(2deg); }
        .mini-photo img { display: block; width: 100%; height: auto; }
        @media (max-width: 768px) { .photo-board { width: 100%; flex: initial; gap: 10px; } .photo { padding: 4px; } .photo-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .hero-text h1 { margin-top: 0; } .pub-header { padding: 24px 0; } }
        button:focus-visible, [role="button"]:focus-visible { outline: 3px solid #8b6924; outline-offset: 4px; }

        .editorial-teasers {
            text-align: center;
            padding: 40px 0;
            font-size: 18px;
            color: var(--terra);
            letter-spacing: 4px;
        }
        .editorial-teasers .divider { margin: 0 16px; color: var(--mustard); }
        .pub-footer { text-align: center; padding-bottom: 48px; }

        button {
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s;
            min-height: 44px;
            min-width: 44px;
        }
        .btn-entry, .btn-primary {
            background: transparent;
            border: 1px solid rgba(43, 92, 70, 0.3);
            color: var(--forest);
            font-size: 14px;
            padding: 10px 32px;
            border-radius: 40px;
            letter-spacing: 1px;
        }
        .btn-entry:hover, .btn-primary:hover {
            background: var(--forest);
            color: var(--cream);
            border-color: var(--forest);
        }
        .btn-primary { width: 100%; margin-top: 16px; background: var(--forest); color: var(--cream); border: none; font-size: 16px; }
        .btn-primary:hover { opacity: 0.9; }

        dialog {
            border: none;
            border-radius: 16px;
            padding: 32px;
            max-width: 420px;
            width: 90%;
            background: var(--cream);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            color: var(--text);
        }
        dialog::backdrop { background: rgba(43, 92, 70, 0.5); backdrop-filter: blur(4px); }
        .dialog-content { position: relative; }
        .btn-close {
            position: absolute;
            top: -16px;
            right: -16px;
            background: none;
            border: none;
            color: var(--text-light);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .btn-close:hover { background: rgba(0,0,0,0.05); color: var(--terra); }
        .dialog-desc { font-size: 14px; color: var(--text-light); margin-bottom: 24px; background: rgba(220, 184, 83, 0.1); padding: 12px; border-radius: 8px; }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
        .form-group input { width: 100%; padding: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 16px; background: #fff; min-height: 44px; }
        .form-group input:focus { outline: none; border-color: var(--mustard); box-shadow: 0 0 0 3px rgba(220, 184, 83, 0.2); }
        .error-msg { color: var(--terra); font-size: 13px; margin-top: 8px; }

        .priv-container { max-width: 800px; }
        .priv-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 40px 0 32px 0;
            border-bottom: 1px solid rgba(43, 92, 70, 0.1);
            margin-bottom: 40px;
        }
        .priv-logo { font-size: 20px; font-weight: bold; color: var(--forest); letter-spacing: 2px; }
        .priv-nav { display: flex; gap: 8px; }
        .nav-btn {
            background: none;
            border: none;
            font-size: 15px;
            color: var(--text-light);
            padding: 8px 20px;
            border-radius: 30px;
        }
        .nav-btn.active { color: var(--forest); background: rgba(43, 92, 70, 0.08); font-weight: 500; }
        .btn-logout { background: none; border: none; color: var(--terra); font-size: 14px; padding: 0 16px; }

        .filters { display: flex; gap: 12px; margin-bottom: 48px; }
        .filter-btn { background: #fff; border: 1px solid rgba(0,0,0,0.05); padding: 8px 20px; border-radius: 30px; font-size: 14px; color: var(--text-light); box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
        .filter-btn.active { background: var(--mustard); color: #3d3b38; border-color: var(--mustard); }

        .timeline { position: relative; }
        .timeline::before { content: ''; position: absolute; left: 120px; top: 0; bottom: 0; width: 1px; background: rgba(43, 92, 70, 0.15); }

        .entry { display: flex; margin-bottom: 56px; cursor: pointer; }
        .entry-meta { width: 100px; padding-top: 24px; font-size: 14px; color: var(--text-light); text-align: right; padding-right: 32px; position: relative; }
        .entry-meta::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 28px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--mustard);
            border: 2px solid var(--cream);
            transition: transform 0.2s;
        }
        .entry:hover .entry-meta::after { transform: scale(1.3); background: var(--terra); }
        .entry-card {
            flex: 1;
            background: #fff;
            border-radius: 20px;
            padding: 24px;
            display: flex;
            gap: 32px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.02);
            border: 1px solid rgba(0,0,0,0.02);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .entry:hover .entry-card { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.05); }
        .entry-thumb {
            width: 120px; height: 120px;
            background: var(--cream);
            border-radius: 16px;
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
        }
        .entry-text { flex: 1; display: flex; flex-direction: column; justify-content: center; }
        .badge-demo {
            display: inline-block; align-self: flex-start;
            background: rgba(198, 108, 84, 0.08);
            color: var(--terra);
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 6px;
            margin-bottom: 12px;
            letter-spacing: 1px;
        }
        .entry-text h3 { margin: 0 0 12px 0; font-size: 22px; color: var(--forest); }
        .entry-text p { margin: 0; color: var(--text-light); font-size: 15px; }

        .letter-card {
            background: #fff; border-radius: 20px; padding: 40px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.02);
            border: 1px solid rgba(0,0,0,0.02);
            cursor: pointer; transition: transform 0.2s; text-align: center;
        }
        .letter-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.05); }
        .letter-card h3 { font-size: 28px; margin: 20px 0; color: var(--forest); }
        .letter-card p { color: var(--text-light); }

        .detail-body h2 { font-size: 24px; color: var(--forest); margin: 16px 0; }
        .detail-text { font-size: 16px; line-height: 1.8; color: var(--text); padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.05); }

        @media (max-width: 768px) {
            .hero { flex-direction: column-reverse; text-align: center; gap: 32px;}
            .hero-text { max-width: 100%; }
            .pub-header { flex-direction: column; align-items: center; gap: 12px; }
            .timeline::before { left: 18px; }
            .entry { flex-direction: column; margin-bottom: 40px; }
            .entry-meta { width: 100%; text-align: left; padding-left: 40px; padding-top: 0; margin-bottom: 16px; }
            .entry-meta::after { right: auto; left: 14px; top: 6px; }
            .entry-card { flex-direction: column; padding: 20px; gap: 20px; }
            .entry-thumb { width: 100%; height: 160px; }
            .priv-header { flex-direction: column; gap: 24px; padding: 24px 0; }
            .filters { overflow-x: auto; padding-bottom: 8px; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
        }
    
/* A playful scrapbook: deliberate scale, overlap and irregular rhythm. */
.photo-board { position: relative; display: block; height: 535px; padding: 0; overflow: visible; }
.photo-board .photo { position: absolute; padding: 8px 8px 16px; border-radius: 2px; box-shadow: 0 9px 16px rgba(67,60,35,.12); }
.photo-board .photo::before { content: ''; position: absolute; width: 58px; height: 18px; background: rgba(220,184,83,.48); left: calc(50% - 29px); top: -9px; transform: rotate(-8deg); z-index: 2; }
.photo-board .photo:nth-child(1) { width: 32%; left: 2%; top: 40px; transform: rotate(-8deg); z-index: 2; }
.photo-board .photo:nth-child(2) { width: 29%; left: 36%; top: 12px; transform: rotate(11deg); z-index: 3; }
.photo-board .photo:nth-child(3) { width: 30%; left: 68%; top: 87px; transform: rotate(-11deg); z-index: 2; }
.photo-board .photo:nth-child(4) { width: 32%; left: 31%; top: 273px; transform: rotate(-5deg); z-index: 4; }
.photo-board .photo:nth-child(5) { width: 27%; left: 67%; top: 323px; transform: rotate(12deg); z-index: 3; }
.photo-board .photo:nth-child(2)::before { background: rgba(99,159,179,.32); transform: rotate(6deg); }
.photo-board .photo:nth-child(4)::before { background: rgba(198,108,84,.3); }
.photo-strip { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 18px 35px; }
.photo-strip .mini-photo { flex-shrink: 0; padding: 6px 6px 12px; align-self: auto; border-radius: 2px; }
.photo-strip .mini-photo:nth-child(1) { width: 13%; margin-top: 32px; transform: rotate(-11deg); }
.photo-strip .mini-photo:nth-child(2) { width: 17%; margin-top: 0; transform: rotate(6deg); }
.photo-strip .mini-photo:nth-child(3) { width: 12%; margin-top: 56px; transform: rotate(-5deg); }
.photo-strip .mini-photo:nth-child(4) { width: 19%; margin-top: 20px; transform: rotate(-9deg); }
.photo-strip .mini-photo:nth-child(5) { width: 13%; margin-top: 47px; transform: rotate(13deg); }
.photo-strip .mini-photo:nth-child(6) { width: 12%; margin-top: 5px; transform: rotate(-7deg); }
.editorial-teasers { padding: 10px 0 35px; }
.hero { gap: 34px; }
@media (max-width: 1000px) and (min-width: 769px) { .photo-board { height: 480px; } .photo-board .photo:nth-child(4) { top: 240px; } .photo-board .photo:nth-child(5) { top: 290px; } .hero-text h1 { font-size: 43px; } }
@media (max-width: 768px) {
 .photo-board { height: 340px; width: 100%; margin: 12px 0 0; }
 .photo-board .photo { padding: 4px 4px 9px; }
 .photo-board .photo::before { width: 35px; height: 12px; left: calc(50% - 17px); top: -6px; }
 .photo-board .photo:nth-child(1) { top: 26px; left: 1%; width: 33%; }
 .photo-board .photo:nth-child(2) { top: 8px; left: 37%; width: 29%; }
 .photo-board .photo:nth-child(3) { top: 72px; left: 67%; width: 29%; }
 .photo-board .photo:nth-child(4) { top: 172px; left: 33%; width: 32%; }
 .photo-board .photo:nth-child(5) { top: 205px; left: 67%; width: 27%; }
 .hero { gap: 12px; }
 .photo-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 14px; padding: 28px 8px 35px; align-items: center; }
 .photo-strip .mini-photo:nth-child(n) { width: 100%; margin-top: 0; }
 .photo-strip .mini-photo:nth-child(2) { width: 110%; margin-left: -5%; }
 .photo-strip .mini-photo:nth-child(3) { width: 82%; justify-self: center; margin-top: 24px; }
 .photo-strip .mini-photo:nth-child(4) { width: 105%; }
 .photo-strip .mini-photo:nth-child(5) { width: 87%; justify-self: center; margin-top: 20px; }
 .photo-strip .mini-photo:nth-child(6) { width: 92%; }
}
@media (max-width: 360px) { .photo-board { height: 315px; } .photo-board .photo:nth-child(4) { top: 155px; } .photo-board .photo:nth-child(5) { top: 187px; } .hero-text h1 { font-size: 34px; } }

.teddy-entry { width: 64px; height: 68px; padding: 6px; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; }
.teddy-entry:hover { background: rgba(220,184,83,.14); color: inherit; transform: rotate(-7deg) translateY(-2px); }
.teddy-entry svg { flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .teddy-entry:hover { transform: none; } }

.priv-container { max-width: 1060px; }
.priv-header { margin-bottom: 26px; }
.archive-title { font-size: clamp(28px,4vw,42px); color: var(--forest); margin: 12px 0; }
.archive-intro { color: var(--text-light); margin: 0 0 30px; }
.archive-tools { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.archive-filters { display:flex; gap:8px; }
select,input[type=date] { font:inherit; padding:9px 12px; min-height:44px; background:#fffefa; color:var(--text); border:1px solid #d6d9ce; border-radius:8px; }
.sort-label { font-size:14px; color:var(--text-light); }
.upload-panel { border-top:1px solid #deded1; border-bottom:1px solid #deded1; padding:18px 0; margin-bottom:34px; }
.upload-panel label { display:inline-flex; gap:10px; align-items:center; margin-right:12px; }
.upload-panel p { color:var(--text-light); font-size:12px; margin:12px 0 0; }
#upload-status { font-size:13px; color:var(--forest); margin-top:8px; }
.date-group { margin-bottom:38px; }
.date-heading { display:flex; align-items:baseline; gap:12px; font-size:23px; color:var(--forest); margin:0 0 17px; }
.date-heading small { font-size:12px; font-family:system-ui,sans-serif; font-weight:normal; color:var(--text-light); }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.archive-card { min-width:0; overflow:hidden; border:1px solid #e5e0d2; background:#fffdf7; border-radius:12px; box-shadow:0 4px 14px rgba(43,92,70,.04); }
.archive-photo { display:block; border:0; padding:0; width:100%; height:220px; background:#f0eee2; border-radius:0; }
.archive-photo img { width:100%; height:100%; object-fit:contain; display:block; }
.archive-file-art { height:150px; display:flex; align-items:center; justify-content:center; background:#e9eee4; color:var(--forest); }
.archive-file-art svg { width:52px; height:64px; }
.archive-info { padding:15px; }
.archive-info h3 { font-size:15px; margin:0 0 6px; overflow-wrap:anywhere; }
.archive-info p { font-size:12px; color:var(--text-light); margin:0 0 8px; }
.archive-download { display:inline-flex; align-items:center; min-height:44px; color:var(--forest); font-size:13px; text-underline-offset:4px; }
.archive-empty { padding:40px 0; color:var(--text-light); }
.archive-footer { padding:32px 0; text-align:center; font-size:13px; color:var(--text-light); }
#detail-desc img { display:block; width:100%; max-height:65vh; object-fit:contain; }
@media(max-width:768px) { .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .archive-photo { height:175px; } .archive-info { padding:10px; } .archive-info h3 { font-size:13px; } .upload-panel label { margin-bottom:12px; } .priv-header { flex-direction:row; gap:10px; } .priv-logo { font-size:16px; } }
@media(max-width:360px) { .archive-grid { grid-template-columns:1fr; } }

.upload-panel h2 { font-size:21px; color:var(--forest); margin:0 0 18px; }
.upload-fields { display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:start; }
.upload-panel .upload-fields label { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:0; font-size:14px; }
textarea { font:inherit; color:var(--text); background:#fffefa; border:1px solid #d6d9ce; border-radius:8px; padding:12px; resize:vertical; width:100%; }
.tag-picker { border:0; padding:0; margin:18px 0; }
.tag-picker legend { font-size:13px; color:var(--text-light); margin-bottom:10px; }
.tag-picker label { display:inline-flex; align-items:center; gap:6px; margin:0 8px 8px 0; padding:8px 12px; border:1px solid #deded1; border-radius:25px; font-size:13px; min-height:44px; cursor:pointer; }
.tag-picker label:has(input:checked) { background:#e3ecdd; border-color:var(--forest); color:var(--forest); }
.tag-picker input { accent-color:var(--forest); }
.upload-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#selected-count { font-size:13px; color:var(--text-light); }
.save-record { width:auto; padding:10px 24px; margin:0 0 0 auto; border-radius:30px; font-size:14px; }
.record-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.record-tags span { padding:3px 9px; border-radius:15px; background:#e9eee4; color:var(--forest); font-size:11px; }
.archive-info h3 { font-weight:500; line-height:1.7; white-space:pre-wrap; }
@media(max-width:768px) { .upload-fields { grid-template-columns:1fr; gap:14px; } .save-record { margin-left:0; } }

.letter-editor { background:#fffdf7; padding:26px; border:1px solid #e5e0d2; border-radius:12px; margin:24px 0 34px; }
.letter-editor h2 { color:var(--forest); font-size:22px; margin:0 0 20px; }
.letter-fields { display:grid; grid-template-columns:190px 1fr; gap:20px; margin-bottom:18px; }
.letter-editor label { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.letter-fields input[type=text] { font:inherit; padding:10px 12px; min-height:44px; border:1px solid #d6d9ce; border-radius:8px; width:100%; background:#fffefa; }
.letter-body-label textarea { line-height:1.9; }
.letter-actions { display:flex; gap:12px; align-items:center; margin-top:18px; }
.letter-actions .btn-primary { width:auto; margin:0; padding:11px 24px; border-radius:30px; font-size:14px; }
.letter-demo-note { font-size:12px; color:var(--text-light); margin-bottom:0; }
#letter-status { font-size:13px; color:var(--forest); margin-top:10px; }
.saved-letter { background:#fffdf7; padding:30px; border:1px solid #e5e0d2; border-radius:12px; margin-bottom:22px; }
.saved-letter h2 { color:var(--forest); font-size:24px; margin:10px 0 20px; overflow-wrap:anywhere; }
.saved-letter time { color:var(--text-light); font-size:13px; }
.saved-letter .letter-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:2; font-family:"Songti SC","Noto Serif CJK SC",serif; }
.saved-letter button { margin-top:18px; }
@media(max-width:768px) { .priv-header { flex-wrap:wrap; } .priv-nav { order:3; width:100%; } .nav-btn { flex:1; } .letter-fields { grid-template-columns:1fr; gap:14px; } .letter-editor,.saved-letter { padding:18px; } }
.letter-delivery { font-size:14px; color:var(--forest); margin-top:20px; } .letter-delivery small { font-size:12px; color:var(--text-light); }

.top-badge {display:none} .record-delete {background:none;border:0;color:#987863;font-size:12px;margin-left:8px} .letter-email-state {font-size:12px;color:#667b58;margin-top:16px} .archive-footer {clear:both}