:root{--paper:#fafaf8;--ink:#242726;--muted:#747974;--line:#dedfd9;--accent:#b34934;--ease:cubic-bezier(.22,.75,.2,1);font-family:'Manrope','PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit;color:inherit}button,a{touch-action:manipulation}button{border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.25;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{min-height:44px}h1,h2,p{margin:0}button svg{flex:none}[hidden]{display:none!important}.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}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-180%);z-index:100;background:var(--paper);padding:12px}.skip-link:focus{transform:none}
#site{min-height:100svh;position:relative;overflow:clip;display:flex;flex-direction:column}.site-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:26px 4%;height:98px}.header-context{font-size:12px;letter-spacing:.12em}.wordmark{font-size:17px;font-weight:500;letter-spacing:.37em;padding:10px 0 10px .37em}.header-actions{justify-self:end}.search-trigger{display:flex;align-items:center;gap:14px;font-size:14px;padding:10px 0 10px 12px}.search-trigger:hover{color:var(--accent)}
.home-view{display:flex;flex-direction:column;flex:1;position:relative}.category-nav{display:flex;justify-content:center;align-items:center;gap:24px;position:relative;padding:0 20px;height:66px;flex:none}.category-nav button{font-size:14px;color:var(--muted);padding:8px 11px;position:relative;transition:color .2s}.category-nav button:after{content:'';position:absolute;bottom:6px;left:11px;right:11px;height:1px;background:var(--ink);opacity:0;transform:scaleX(.35);transition:opacity .22s,transform .32s var(--ease)}.category-nav button[aria-pressed=true]{color:var(--ink)}.category-nav button[aria-pressed=true]:after{opacity:1;transform:scaleX(1)}
.collection-stage{height:clamp(300px,48svh,600px);min-height:300px;flex:1;position:relative;touch-action:pan-y;user-select:none;cursor:grab;perspective:1200px;isolation:isolate}.collection-stage.is-dragging{cursor:grabbing}.collection-slot{position:absolute;left:50%;top:50%;width:var(--object-size,380px);height:var(--object-size,380px);padding:0;will-change:transform;transform-origin:center;cursor:grab}.collection-slot:active{cursor:grabbing}.collectible{width:100%;height:100%;background-image:url('./assets/collection-atlas.png');background-size:200% 200%;background-repeat:no-repeat;transform:translateY(var(--lift,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .2s var(--ease);filter:drop-shadow(0 15px 10px #2427260a);pointer-events:none}.collectible--postcard{background-position:0 0}.collectible--disc{background-position:100% 0}.collectible--notebook{background-position:0 100%}.collectible--dial{background-position:100% 100%}.collection-slot:hover .collectible{--lift:-8px}.collection-stage.is-dragging .collectible{--lift:0px;transition:none}.collection-slot.is-selected{cursor:pointer}.collection-slot:focus-visible{outline-offset:0;border-radius:4px}.filter-exits{position:absolute;inset:0;pointer-events:none;z-index:2}.filter-exits .collection-slot{pointer-events:none}.selection-info{text-align:center;min-height:137px;padding:12px 22px 0}.selection-label{font-size:12px;letter-spacing:.18em;color:var(--muted)}.selection-title{font-size:clamp(23px,2vw,29px);font-weight:400;letter-spacing:.07em;line-height:1.5;margin:7px 0 4px}.selection-description{font-size:14px;color:var(--muted);line-height:1.7}.open-collection{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:var(--ink);margin-top:5px;padding:5px 8px;transition:color .2s}.open-collection:hover{color:var(--accent)}.open-collection span{transition:transform .25s}.open-collection:hover span{transform:translate(2px,-2px)}
.home-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:10px 4% 18px}.explore-hint{font-size:12px;color:var(--muted);letter-spacing:.06em}.position-controls{display:flex;justify-content:center;gap:1px;flex-wrap:wrap;max-width:360px}.position-controls button{min-width:30px;padding:10px 9px;display:grid;place-items:center}.position-controls button:after{content:'';display:block;width:12px;height:2px;background:#c8ccc6;transition:background .2s,width .2s}.position-controls button[aria-pressed=true]:after{width:5px;height:5px;border-radius:50%;background:var(--accent)}.position-controls.is-many{font-size:12px;color:var(--muted);letter-spacing:.15em;min-height:44px;align-items:center}.arrow-controls{display:flex;gap:18px;justify-self:end}.arrow-controls button{font-size:26px;min-width:44px;line-height:1;padding:4px}.arrow-controls button:hover:not(:disabled){color:var(--accent)}.site-note{border-top:1px solid #e8e9e3;display:flex;justify-content:space-between;gap:20px;padding:14px 4%;font-size:12px;letter-spacing:.06em;color:#82867f}
dialog{background:var(--paper);color:var(--ink);border:1px solid #e0e1db;border-radius:4px;padding:26px;width:min(530px,calc(100% - 36px));max-height:min(620px,85svh);overflow:auto;box-shadow:0 30px 110px #20251f20}dialog::backdrop{background:#303b3226;backdrop-filter:blur(6px)}dialog[open]{animation:dialog-in .24s var(--ease)}.search-header{display:flex;align-items:center;justify-content:space-between;gap:15px}.search-header h2{font-weight:400;font-size:20px}.close-search{font-size:27px;line-height:1;min-width:44px;padding:0}.search-header button:hover{color:var(--accent)}#search-input{display:block;width:100%;background:transparent;border:0;border-radius:0;border-bottom:1px solid var(--line);font-size:16px;margin:22px 0 10px;padding:14px 0}.search-result{display:flex;width:100%;gap:15px;align-items:center;padding:15px 8px;text-align:left;border-bottom:1px solid #eaeae4;border-radius:2px;transition:background .15s}.search-result:hover,.search-result.is-focused{background:#eeeee8}.result-cover{height:62px;width:62px;flex:none}.result-text{flex:1}.result-text strong{font-size:15px;font-weight:400;display:block}.result-text small{font-size:12px;color:var(--muted);display:block;margin-top:6px}.result-arrow{font-size:20px;color:var(--muted)}.search-empty{padding:35px 8px;color:var(--muted);text-align:center;line-height:1.8;font-size:14px}.search-empty button{display:block;color:var(--accent);margin:8px auto 0}.search-footer{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-top:19px}
.detail-view{flex:1;padding:15px 8% 50px;min-height:calc(100svh - 151px)}.detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.back-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;min-height:44px}.back-link:hover{color:var(--accent)}.detail-index{color:var(--muted);font-size:12px;letter-spacing:.13em}.detail-intro{display:grid;grid-template-columns:minmax(220px,370px) minmax(240px,1fr);gap:clamp(30px,7vw,120px);align-items:center;max-width:930px;margin:0 auto 35px}.detail-cover{width:100%;aspect-ratio:1}.detail-copy .eyebrow{font-size:12px;color:var(--muted);letter-spacing:.15em}.detail-copy h1{font-size:clamp(29px,3.3vw,43px);font-weight:400;letter-spacing:.06em;margin:16px 0 18px}.detail-copy>p{font-size:16px;line-height:1.8;color:var(--muted)}.detail-description-note{font-size:12px!important;color:#90938c!important;margin-top:20px}.empty-collection{max-width:930px;margin:0 auto;border-top:1px solid var(--line);padding-top:22px}.section-heading{display:flex;align-items:center;gap:14px;font-size:14px}.section-heading .rule{height:1px;background:var(--line);width:24px}.empty-content{padding:44px 25px 30px;text-align:center;max-width:520px;margin:auto}.empty-content h2{font-weight:400;font-size:21px;margin:0 0 12px}.empty-content p{color:var(--muted);font-size:15px;line-height:1.9}.empty-content .preparing{display:inline-block;font-size:12px;margin-bottom:15px;color:var(--accent);letter-spacing:.08em}.not-found{max-width:620px;margin:10svh auto;text-align:center;padding:25px}.not-found h1{font-weight:400;font-size:32px;margin:10px 0 16px}.not-found p{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:25px}.not-found .eyebrow{font-size:12px;letter-spacing:.2em;color:var(--accent)}.transition-cover{position:fixed;z-index:50;pointer-events:none;transform-origin:0 0}.noscript{padding:30px;text-align:center}.asset-fallback{background-image:none;display:grid;place-items:center;border:1px solid var(--line);width:76%;height:76%;margin:12%;font-size:20px;background:#f1f2ed}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.site-header{padding-left:5%;padding-right:5%}.category-nav{margin-top:20px}.home-footer{padding-bottom:30px}.selection-info{padding-top:15px}}
@media(max-width:700px){.site-header{height:80px;padding:18px 22px;gap:10px}.header-context{font-size:12px;letter-spacing:0}.wordmark{font-size:13px;letter-spacing:.25em}.search-trigger span{display:none}.category-nav{height:57px;gap:14px}.collection-stage{min-height:275px;height:37svh;flex:1}.selection-info{min-height:138px}.home-footer{padding:10px 18px 16px;grid-template-columns:1fr auto 1fr;gap:4px}.explore-hint{max-width:86px;font-size:12px;line-height:1.7}.arrow-controls{gap:0}.position-controls{max-width:150px}.position-controls button{min-width:25px;padding:10px 6px}.site-note{font-size:12px;padding:12px 22px}.site-note span:first-child{font-size:10px;letter-spacing:.05em}.detail-view{padding:5px 22px 35px}.detail-toolbar{margin-bottom:4px}.detail-intro{grid-template-columns:1fr;gap:0;margin-bottom:30px}.detail-cover{width:min(280px,80%);margin:auto}.detail-copy{text-align:center;margin-top:5px}.detail-copy h1{font-size:28px;margin:10px 0 12px}.empty-content{padding:30px 5px 15px}.empty-content h2{font-size:20px}.detail-description-note{margin-top:12px}.search-footer span{font-size:11px}}
@media(max-width:370px){.header-context{max-width:48px;line-height:1.6}.site-header{padding-left:16px;padding-right:16px}.wordmark{font-size:12px;letter-spacing:.2em}.site-note{gap:12px;padding-left:16px;padding-right:16px}.site-note span:first-child{max-width:100px}.category-nav{gap:8px}.home-footer{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.asset-error .collectible{background-image:none;display:grid;place-items:center}.asset-error .collectible:after{content:attr(data-title);font-size:16px;color:var(--muted);border-bottom:1px solid var(--line);padding:12px}.explore-hint span{display:inline-block;white-space:nowrap}
/* Fred's personal room — bounded objects, readable navigation, tactile interactions. */
.site-header{height:84px;padding-top:18px;padding-bottom:18px}.header-context{font-size:10px;letter-spacing:.16em}.wordmark{font-size:25px;letter-spacing:-.06em;font-weight:600;padding:6px}.wordmark-dot{color:var(--accent)}
.personal-intro{text-align:center;padding:18px 24px 22px;flex:none}.personal-intro .eyebrow{font-size:10px;letter-spacing:.2em;color:var(--muted)}.personal-intro h1{font-size:27px;font-weight:400;letter-spacing:.02em;margin:9px 0 9px}.personal-intro h1 span{font-size:40px;letter-spacing:-.055em;font-weight:500}.personal-intro>p:last-child{font-size:13px;color:var(--muted);line-height:1.8}.category-nav{height:52px;z-index:25;background:var(--paper);margin:0}.collection-stage{height:clamp(260px,38svh,430px);min-height:260px;flex:none;overflow:clip;perspective:none}.filter-exits{overflow:clip}.selection-info{min-height:162px;padding-top:8px;position:relative;z-index:20;background:var(--paper)}.selection-title{font-size:24px}.selection-label{font-size:10px}.selection-description{font-size:13px}.collectible--notebook{background-image:url('./assets/fred-diary.png');background-size:contain;background-position:center}.collectible--wheel{background-image:none;display:grid;place-items:center}.home-footer{margin-top:auto}.open-collection{min-width:220px;justify-content:center;min-height:46px;border:1px solid #d5d6ce;border-radius:8px;margin-top:14px;background:linear-gradient(#fffefb,#f0f0e9);box-shadow:0 2px 3px #282c2510,inset 0 1px white;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.open-collection:before{content:'';height:3px;width:65%;position:absolute;margin-top:-40px;background:#b5b7af;border-radius:50%;opacity:.35}.reader-light{width:5px;height:5px;border-radius:50%;background:#93988b;box-shadow:0 0 0 3px #93988b15}.open-collection.is-over{border-color:var(--accent);background:#f8eee6;box-shadow:0 0 0 5px #b3493412;transform:translateY(-3px)}.is-over .reader-light{background:var(--accent)}.held-object{position:fixed;pointer-events:none;z-index:60;filter:drop-shadow(0 24px 20px #282c2520);will-change:transform}.held-object .collectible{transform:rotate(-5deg) scale(.84);transition:none}.collection-slot.is-lifted{visibility:hidden}.collection-slot.is-selected{touch-action:none}.collection-stage.is-lifting{cursor:grabbing}.asset-error .collectible--wheel:after{display:none}
.choice-wheel{width:73%;height:73%;position:relative;aspect-ratio:1;border-radius:50%;padding:9px;background:#e6d6b9;box-shadow:0 6px 0 #bbaa8c,0 13px 19px #4b443a18,inset 0 1px 3px #fff8e6;border:1px solid #c8b797}.wheel-face{position:relative;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px #5048381b;overflow:hidden}.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:21px;height:28px;background:#b34934;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 2px #0003)}.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;width:21%;height:21%;display:grid;place-items:center;background:#f7f1df;box-shadow:0 3px 6px #4b443a2a,inset 0 1px white;font-size:28px;color:#71644f}.wheel-option{position:absolute;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.04em;max-width:28%;line-height:1.3;text-align:center;color:#3d443c}.result-cover .wheel-option{display:none}.result-cover .choice-wheel{padding:2px}.result-cover .wheel-hub{font-size:10px}.result-cover .wheel-pointer{width:6px;height:8px;top:-2px}.tool-intro{text-align:center;margin:25px 0 20px}.tool-intro h1{font-size:34px;font-weight:400;margin:12px 0}.tool-intro p{color:var(--muted);font-size:14px}.wheel-workbench{max-width:880px;margin:25px auto 45px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}.wheel-preview{aspect-ratio:1;display:grid;place-items:center}.wheel-preview .choice-wheel{width:90%;height:90%}.wheel-form label{display:block;font-size:18px;margin-bottom:14px}.wheel-form textarea{display:block;width:100%;resize:vertical;min-height:140px;padding:14px;font:inherit;font-size:15px;line-height:1.7;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fffefa}.wheel-help{font-size:12px;color:var(--muted);margin:10px 0 20px;line-height:1.7}.spin-button{background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:6px}.wheel-result{font-size:14px;color:var(--muted);line-height:1.7;min-height:48px;margin-top:18px}.wheel-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.site-header{height:68px}.header-context{font-size:9px;max-width:100px;line-height:1.6}.wordmark{font-size:25px}.personal-intro{padding:13px 20px 18px}.personal-intro h1{font-size:23px}.personal-intro h1 span{font-size:35px}.personal-intro>p:last-child{font-size:12px;max-width:265px;margin:auto}.personal-intro .eyebrow{font-size:9px}.collection-stage{height:clamp(235px,33svh,320px);min-height:235px}.category-nav{height:48px}.selection-info{min-height:155px}.selection-title{font-size:22px}.home-footer{padding-top:10px}.explore-hint span{display:block}.explore-hint span:last-child{font-size:0}.explore-hint span:last-child:after{content:'点击打开';font-size:12px}.wheel-workbench{grid-template-columns:1fr;gap:20px;margin:20px auto;max-width:400px}.wheel-preview{width:min(300px,90%);margin:auto}.wheel-option{font-size:11px}.wheel-hub{font-size:24px}.tool-intro{margin-top:15px}}

.open-collection{position:relative}.open-collection:before{top:-3px;margin-top:0;height:3px;width:65%;left:17.5%}