@import url("./refinements.css");
/* Visual system implemented strictly from 颜色要求.txt: Kawaii Pixel / Y2K pink diary */
:root{--hot-pink:#ff69b4;--strawberry:#ff9dcd;--unicorn:#caa4ff;--sky:#add8e6;--vanilla:#fffdd0;--pixel-ink:#4b3150;--neon:#79ffb3}
body{color:var(--pixel-ink);background-color:#fce7f2;background-image:radial-gradient(#fffdd0 1.2px,transparent 1.5px),radial-gradient(#caa4ff 1px,transparent 1.5px),linear-gradient(135deg,#ffc3df 0%,#ffe8f4 48%,#bdeafa 100%);background-position:0 0,15px 17px,0 0;background-size:24px 24px,31px 31px,100% 100%;overflow-x:hidden}body::before,body::after{content:'♥';position:fixed;z-index:-1;font:42px/1 var(--mono);color:#ff69b44d;pointer-events:none;animation:float-pixel 8s ease-in-out infinite}body::before{top:14%;left:2%}body::after{right:2%;bottom:12%;color:#caa4ff59;animation-delay:-3s}
.site-header{height:82px;border:3px solid var(--pixel-ink);border-width:0 0 3px;background:linear-gradient(90deg,#ff83c1,#ffc4df 51%,#b9e9fa);box-shadow:0 4px 0 #fffdd0;backdrop-filter:none}.brand{font-family:var(--mono);color:var(--pixel-ink);text-shadow:1px 1px #fff}.brand-mark{border:2px solid var(--pixel-ink);border-radius:8px 8px 2px 2px;background:linear-gradient(135deg,#ff69b4,#caa4ff);box-shadow:3px 3px 0 #fffdd0}.primary-nav{background:#fff9fd;border:2px solid var(--pixel-ink);border-radius:999px;padding:5px 14px;gap:18px;box-shadow:3px 3px 0 #caa4ff}.primary-nav a{color:var(--pixel-ink);font-family:var(--mono);font-size:10px}.primary-nav a:hover{color:#fff;background:#ff69b4;border-radius:99px;padding:2px 5px;margin:-2px -5px}.button{border:2px solid var(--pixel-ink);border-radius:11px;background:linear-gradient(135deg,#ff5cac,#ff95ca 52%,#caa4ff);box-shadow:4px 4px 0 var(--pixel-ink),6px 6px 0 #fffdd0;font-family:var(--mono);letter-spacing:.02em}.button:hover{box-shadow:2px 2px 0 var(--pixel-ink),4px 4px 0 #fffdd0}.button::before{content:'✦';font-size:10px;color:#fffdd0}.button-outline{border-color:var(--pixel-ink);background:linear-gradient(135deg,#fffdd0,#add8e6);box-shadow:4px 4px 0 var(--hot-pink),6px 6px 0 var(--pixel-ink)}
.hero{max-width:1208px;min-height:590px;margin:44px auto 50px;padding:84px 54px 48px;gap:54px;border:4px solid var(--pixel-ink);border-radius:22px 22px 10px 10px;background:linear-gradient(105deg,#fff7fc 0%,#fff0f7 50%,#e1f6ff 100%);box-shadow:12px 12px 0 #ff69b4,18px 18px 0 #caa4ff;isolation:isolate;overflow:visible}.hero::before{content:'NTRMAN.exe  ·  MY PINK PIXEL DIARY';position:absolute;left:-4px;right:-4px;top:-4px;height:35px;display:flex;align-items:center;padding:0 13px;border:4px solid var(--pixel-ink);border-bottom:2px solid var(--pixel-ink);border-radius:22px 22px 0 0;background:linear-gradient(90deg,#ff69b4,#caa4ff 55%,#add8e6);color:#fff;font:11px var(--mono);letter-spacing:.07em;z-index:3;text-shadow:1px 1px #653c6d}.hero::after{content:'✦  ♥  ✦';position:absolute;right:17px;top:6px;color:#fffdd0;font:13px var(--mono);z-index:4;text-shadow:1px 1px #653c6d}.hero-copy{position:relative;z-index:1}.eyebrow{font-family:var(--mono);color:#b13b7c;letter-spacing:.08em}.pixel-heart{width:24px;height:24px;border-radius:5px;background:var(--hot-pink);box-shadow:2px 2px 0 var(--pixel-ink)}.hero h1{font-family:var(--mono);font-size:clamp(38px,4.7vw,63px);letter-spacing:-.05em;color:#5a315b;text-shadow:4px 4px 0 #fffdd0,7px 7px 0 #ffb4d8}.hero-lead{color:#74335f}.hero-text{color:#745e70}.hero-meta{border-top:2px dashed #ff9dc8;color:#9c6784;font-family:var(--mono)}.hero-visual{z-index:1;padding:11px 11px 36px;border:4px solid var(--pixel-ink);border-radius:10px;background:#fffdd0;box-shadow:7px 7px 0 #caa4ff,11px 11px 0 var(--pixel-ink);transform:rotate(1.1deg);transition:transform .25s,filter .25s}.hero-visual:hover{transform:rotate(-.4deg) translateY(-4px);filter:saturate(1.12)}.hero-visual>img{border:2px solid var(--pixel-ink);filter:saturate(.94) contrast(1.03)}.image-caption{position:absolute;bottom:8px;left:13px;color:#725167;font-family:var(--mono)}.caption-dot{background:#ff69b4;border:2px solid var(--pixel-ink);border-radius:0}.sticker{right:-25px;top:-31px;border-radius:50% 50% 45% 50%;background:linear-gradient(145deg,#fffdd0,#ffd8ec);box-shadow:4px 4px 0 var(--pixel-ink);font-family:var(--mono)}.hero-window-label{top:48px;right:31px;font-family:var(--mono);color:#9f5b85}.secret-heart{position:absolute;bottom:-32px;right:-23px;z-index:4;width:86px;height:86px;border:3px solid var(--pixel-ink);border-radius:50% 50% 48% 48%;background:linear-gradient(145deg,#ff4fa5,#ff8fc6);box-shadow:4px 4px 0 #caa4ff,7px 7px 0 var(--pixel-ink);color:#fffdd0;cursor:pointer;transform:rotate(9deg);transition:transform .2s,filter .2s}.secret-heart:hover{transform:rotate(-8deg) scale(1.06);filter:brightness(1.08)}.secret-heart span{display:block;font:26px/22px var(--mono);text-shadow:2px 2px #8d2b62}.secret-heart small{display:block;margin-top:3px;font:7px/1.15 var(--mono);letter-spacing:.02em}.secret-revealed .secret-heart{background:linear-gradient(145deg,#39483c,#79ffb3);filter:drop-shadow(0 0 10px #79ffb3)}.secret-revealed .secret-heart span{animation:heart-crack .5s steps(2) infinite}.secret-revealed .hero-visual>img{filter:hue-rotate(80deg) saturate(1.25) contrast(1.15)}.pixel-floaters span{position:absolute;z-index:5;font-family:var(--mono);color:var(--hot-pink);text-shadow:2px 2px #fffdd0;animation:float-pixel 4s ease-in-out infinite}.pixel-floaters span:nth-child(1){left:-19px;bottom:86px;font-size:28px}.pixel-floaters span:nth-child(2){right:-30px;bottom:130px;font-size:32px;animation-delay:-1.2s}.pixel-floaters span:nth-child(3){left:47%;bottom:-27px;font-size:24px;color:#caa4ff;animation-delay:-2.4s}
.fact-strip{max-width:1208px;margin:0 auto 30px;padding:14px 24px;border:3px solid var(--pixel-ink);border-radius:10px;background:linear-gradient(90deg,#fffdd0,#fff6fc,#add8e6);box-shadow:6px 6px 0 var(--pixel-ink)}.fact-strip>div{border-left:2px dotted #d67ca7}.fact-label,.panel-index,.work-no,.step-num{font-family:var(--mono);color:#a63e77}.fact-strip strong{font-family:var(--mono);color:#5c385c}.section{max-width:1208px;padding:76px 34px}.section-heading h2,.highlight-copy h2,.friends-heading h2,.update-section h2{font-family:var(--mono);color:#613c62;text-shadow:3px 3px #fffdd0}.section-heading>p{color:#745e70}.image-frame{border:4px solid var(--pixel-ink);border-radius:10px;background:#ffb9db;box-shadow:7px 7px 0 #caa4ff}.image-frame img{border-bottom:2px solid var(--pixel-ink)}.image-frame figcaption{font-family:var(--mono);background:linear-gradient(90deg,#ff69b4cc,#caa4ffcc)}.summary-panel{position:relative;border:3px solid var(--pixel-ink);border-radius:10px;background:repeating-linear-gradient(-45deg,#fffdd0 0 9px,#fff6ba 9px 11px);box-shadow:6px 6px 0 #ff69b4}.summary-panel::after{content:'♥';position:absolute;right:18px;top:14px;color:#ff69b4;font:26px var(--mono)}.summary-panel h3{font-family:var(--mono);color:#6b3d65}.summary-panel p{color:#684d60}.work-grid{gap:26px}.work-card{position:relative;overflow:visible;border:3px solid var(--pixel-ink);border-radius:12px;background:linear-gradient(145deg,#ffc5df,#fff8fc 58%,#ccefff);box-shadow:7px 7px 0 var(--pixel-ink),11px 11px 0 #ff9cca;transform:rotate(-.6deg);transition:transform .2s}.work-card:nth-child(2){transform:rotate(.7deg);background:linear-gradient(145deg,#fffdd0,#fff8fc 58%,#d7c4ff)}.work-card:nth-child(3){transform:rotate(-.25deg);background:linear-gradient(145deg,#c9ecfa,#fff8fc 58%,#ffc5df)}.work-card:hover{transform:rotate(0) translateY(-7px)}.work-card::before{content:'♥';position:absolute;z-index:3;right:11px;bottom:11px;width:25px;height:25px;display:grid;place-items:center;border:2px solid var(--pixel-ink);border-radius:6px;background:#ff69b4;color:#fffdd0;font:15px var(--mono);box-shadow:2px 2px 0 var(--pixel-ink)}.work-image{margin:10px 10px 0;border:2px solid var(--pixel-ink);border-radius:6px}.work-image img{height:190px}.work-tag{top:9px;left:9px;border:2px solid var(--pixel-ink);border-radius:4px;background:#fffdd0;font-family:var(--mono);color:#70445e}.work-body{padding:15px 18px 20px}.work-title-row h3{font-family:var(--mono);color:#673d64}.work-body p{color:#715b70}.steps-grid{border:0;gap:16px}.steps-grid article{position:relative;margin:0;padding:24px 18px 19px;border:3px solid var(--pixel-ink);border-radius:10px;background:#fffdd0;box-shadow:4px 4px 0 #ff69b4}.steps-grid article:nth-child(even){background:#cfeffd;box-shadow:4px 4px 0 #caa4ff}.steps-grid article::after{content:'✦';position:absolute;right:11px;top:7px;color:#ff69b4;font:14px var(--mono)}.steps-grid h3{font-family:var(--mono);color:#663b65}.steps-grid p{color:#725b70}.highlight-image:before{background:#ff69b4}.highlight-image img{border:4px solid var(--pixel-ink);border-radius:10px;box-shadow:7px 7px 0 #caa4ff}.highlight-copy{padding:25px;border:3px solid var(--pixel-ink);border-radius:12px;background:#fffdd0;box-shadow:7px 7px 0 #ff9cca}.highlight-copy>p:not(.eyebrow){color:#725b70}.resource-list{border:3px solid var(--pixel-ink);border-bottom:0;border-radius:10px 10px 0 0;background:#fffaff;box-shadow:7px 7px 0 #caa4ff}.resource-list>a{border-bottom:2px dashed #dda5c2}.resource-list>a:hover{background:#fff1f8}.resource-icon{border:2px solid var(--pixel-ink);border-radius:7px;background:linear-gradient(135deg,#ff99cb,#caa4ff);font-family:var(--mono);color:#fffdd0;box-shadow:2px 2px 0 var(--pixel-ink)}.resource-list strong{font-family:var(--mono);color:#623961}.update-section{max-width:1208px;margin-top:30px;margin-bottom:30px;border:3px solid var(--pixel-ink);border-radius:12px;background:linear-gradient(100deg,#ffb9dc,#fffdd0,#add8e6);box-shadow:7px 7px 0 var(--pixel-ink)}.faq-preview details,.question-list details{border:3px solid var(--pixel-ink);border-radius:9px;background:#fffaff;box-shadow:4px 4px 0 #ffadd4;margin-bottom:14px;padding:14px 16px}.faq-preview details:last-child,.question-list details:last-child{border-bottom:3px solid var(--pixel-ink)}.faq-preview summary,.question-list summary{font-family:var(--mono);color:#653c63}.friends-section{border:3px solid var(--pixel-ink);border-radius:12px;background:#fffdd0;box-shadow:7px 7px 0 #ff69b4;margin-bottom:43px}.friend-links a{border:2px solid var(--pixel-ink);border-radius:6px;background:#fffaff;box-shadow:2px 2px 0 #caa4ff;font-family:var(--mono)}.site-footer{border-top:4px solid var(--pixel-ink);background:linear-gradient(100deg,#5c3b62,#7a4b7f,#4a7890);color:#fffdd0}.page-hero{position:relative;overflow:hidden;max-width:1208px;margin:40px auto 0;border:4px solid var(--pixel-ink);border-radius:18px 18px 8px 8px;background:linear-gradient(110deg,#ffb8dc,#fff5fc 56%,#bfeafa);box-shadow:8px 8px 0 #caa4ff}.page-hero::before{content:'♥  ✦  ♥  ✦  ♥';position:absolute;right:20px;top:10px;color:#fffdd0;font:18px var(--mono);text-shadow:2px 2px #a24377}.page-hero h1{position:relative;font-family:var(--mono);color:#603a61;text-shadow:3px 3px #fffdd0}.page-content{margin-top:25px;border:3px solid var(--pixel-ink);border-radius:11px;background:#fffaff;box-shadow:8px 8px 0 #ff9cca;padding:38px}.page-content h2,.page-content h3{font-family:var(--mono);color:#633b62}.page-content p,.page-content li{color:#694f64}.info-table{border:3px solid var(--pixel-ink);box-shadow:4px 4px 0 #caa4ff}.info-table th,.info-table td{border:1px solid #e6a0c7}.info-table th{background:#ffdcEC;font-family:var(--mono);color:#633b62}.notice{border:3px solid var(--pixel-ink);border-left:10px solid #ff69b4;border-radius:6px;background:#fffdd0;box-shadow:4px 4px 0 #caa4ff}.page-end{border-top:2px dashed #f19bc4}.page-end .button{min-width:130px}
@keyframes float-pixel{50%{transform:translateY(-10px) rotate(8deg)}}@keyframes heart-crack{50%{transform:scaleX(.72) rotate(-9deg);color:#253b32}}
@media(max-width:900px){.hero{margin-left:22px;margin-right:22px;padding:76px 32px 42px}.primary-nav{padding:4px 8px;gap:10px}.work-card:first-child .work-image img{height:240px}}@media(max-width:680px){.site-header{height:66px}.primary-nav{border-radius:0;border-width:0 0 3px;box-shadow:0 5px 0 #caa4ff;background:#fff6fc}.primary-nav a:hover{padding:11px 2px;margin:0}.hero{min-height:0;margin:27px 14px 42px;padding:65px 20px 35px;border-width:3px;box-shadow:7px 7px 0 #ff69b4,11px 11px 0 #caa4ff}.hero::before{height:30px;border-width:3px;font-size:8px}.hero::after{font-size:10px;top:7px}.hero h1{font-size:36px}.hero-visual{margin:0 8px 18px 0;box-shadow:5px 5px 0 #caa4ff,8px 8px 0 var(--pixel-ink)}.secret-heart{width:70px;height:70px;bottom:-22px;right:-18px}.secret-heart span{font-size:21px}.secret-heart small{font-size:6px}.pixel-floaters{display:none}.fact-strip{margin:0 14px 21px;padding:12px 14px;border-width:3px;box-shadow:4px 4px 0 var(--pixel-ink)}.section{padding:52px 20px}.section-heading h2,.highlight-copy h2,.friends-heading h2{font-size:24px}.image-frame,.summary-panel,.highlight-copy{border-width:3px;box-shadow:4px 4px 0 #ff69b4}.work-grid{gap:22px}.work-card{box-shadow:5px 5px 0 var(--pixel-ink),8px 8px 0 #ff9cca}.work-card:first-child .work-image img,.work-image img{height:auto}.steps-grid{gap:12px}.steps-grid article{border-width:2px;box-shadow:3px 3px 0 #ff69b4}.resource-list{border-width:3px;box-shadow:5px 5px 0 #caa4ff}.update-section{margin:20px 14px;border-width:3px;box-shadow:5px 5px 0 var(--pixel-ink)}.friends-section{margin:0 14px 35px}.page-hero{margin:25px 14px 0;border-width:3px;box-shadow:5px 5px 0 #caa4ff}.page-hero::before{font-size:11px}.page-content{margin:25px 14px 0;padding:25px 19px;border-width:3px;box-shadow:5px 5px 0 #ff9cca}.info-table{display:block;overflow-x:auto}.faq-preview details,.question-list details{border-width:2px;box-shadow:3px 3px 0 #ffadd4}}
