*{box-sizing:border-box}
html,body{margin:0;background:oklch(0.975 0.008 80);color:oklch(0.25 0.02 60);font-family:"Noto Sans SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:oklch(0.5 0.12 40);text-decoration:none}a:hover{color:oklch(0.4 0.12 40)}
input,textarea,button{font-family:inherit;font-size:14px;color:inherit}
button{cursor:pointer;border:0;background:none}
.serif{font-family:"Noto Serif SC",Georgia,serif}
.mono{font-family:ui-monospace,monospace;font-size:22px}
.sub{font-size:13px;color:oklch(.55 .02 60)}
.kicker{font-size:11px;letter-spacing:.1em;color:oklch(.5 .03 60)}
.app{display:flex;min-height:100vh}
.side{width:216px;flex:none;padding:28px 16px;display:flex;flex-direction:column;gap:6px;border-right:1px solid oklch(.92 .01 80);position:sticky;top:0;height:100vh}
.brand{padding:0 12px 22px}.brand h1{font-size:26px;margin:0;letter-spacing:.04em;line-height:1}.brand p{font-size:12px;color:oklch(.55 .02 60);margin:8px 0 0}
.nav{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;border-radius:12px;font-size:15px;font-weight:500;color:oklch(.4 .02 60)}
.nav:hover{background:oklch(.93 .012 80)}.nav.on{background:oklch(.93 .012 80);color:oklch(.2 .02 60)}
.nav .dot{width:8px;height:8px;border-radius:50%;flex:none}
.badge{background:oklch(.68 .14 40);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px}
.primary{padding:12px;border-radius:12px;background:oklch(.28 .02 60);color:oklch(.97 .008 80);font-size:15px;font-weight:500}.primary:hover{background:oklch(.35 .03 60)}
.dark{background:oklch(.28 .02 60);color:#fff;border-radius:12px;padding:10px 18px;font-size:14px}
.accent{background:oklch(.68 .14 40);color:#fff;border-radius:12px;padding:11px 18px;font-weight:500}.accent:hover{background:oklch(.62 .14 40)}
.round{border-radius:999px}
.ghost{border:1px solid oklch(.85 .02 60);border-radius:999px;padding:8px 14px;font-size:13px;white-space:nowrap}.ghost:hover{background:oklch(.95 .01 80)}
.ghost.sm{padding:6px 12px;font-size:12px}.ghost.block{width:100%;border-radius:12px;padding:11px}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:oklch(.95 .01 80)}.me:hover{background:oklch(.93 .012 80)}.me small{display:block;color:oklch(.55 .02 60);font-size:12px}
.avatar{border-radius:50%;flex:none;display:inline-block}
main{flex:1;min-width:0;padding:22px 32px 48px;display:flex;flex-direction:column;gap:24px}
.top{display:flex;align-items:center;gap:16px}
.search{flex:1;display:flex;align-items:center;gap:10px;background:oklch(.995 .004 80);border:1px solid oklch(.9 .012 80);border-radius:999px;padding:11px 18px;max-width:640px}
.search input{flex:1;border:0;outline:0;background:transparent;min-width:0}
.today{font-size:13px;color:oklch(.55 .02 60);white-space:nowrap}
.lang{padding:7px 14px;border-radius:999px;border:1px solid oklch(.88 .02 60);font-size:13px;font-weight:500}.lang:hover{background:oklch(.95 .01 80)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:999px;font-size:13px;background:oklch(.995 .004 80);color:oklch(.4 .02 60)}.chip.on{background:oklch(.28 .02 60);color:oklch(.97 .008 80)}.chip.sm{padding:6px 12px;font-size:12px;background:oklch(.95 .01 80)}
.page{display:flex;flex-direction:column;gap:20px}.page h2{font-size:30px;margin:0 0 6px}
.empty{padding:40px;text-align:center;color:oklch(.55 .02 60);font-size:14px;border:2px dashed oklch(.9 .01 80);border-radius:20px;white-space:pre-line}
.masonry{column-count:4;column-gap:16px}@media(max-width:1200px){.masonry{column-count:3}}@media(max-width:900px){.masonry{column-count:2}}
.card{break-inside:avoid;margin-bottom:16px;background:oklch(.995 .004 80);border-radius:16px;overflow:hidden;border:1px solid oklch(.93 .01 80);cursor:pointer}.card:hover{box-shadow:0 8px 24px oklch(.3 .02 60/.08)}
.card .img{display:flex;align-items:flex-end;padding:10px}
.tag{font-family:ui-monospace,monospace;font-size:11px;color:oklch(.45 .03 60);background:oklch(.98 .005 80/.8);padding:2px 6px;border-radius:6px;font-weight:400}
.tag.ugc{background:oklch(.68 .14 40);color:#fff;font-family:inherit}.tag.got{background:oklch(.88 .06 150);color:oklch(.32 .06 150);font-family:inherit}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}.card .title{font-size:14px;line-height:1.5;font-weight:500;text-wrap:pretty}
.meta{display:flex;align-items:center;gap:8px;font-size:12px;color:oklch(.55 .02 60)}.meta .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid{display:grid;gap:16px}.grid.scenes{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.grid.comps{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.grid.plays{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.scene{border-radius:20px;padding:22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;border:1px solid oklch(.93 .01 80);transition:transform .15s}.scene:hover{transform:translateY(-2px)}
.scene .head b{font-size:22px}.scene p{font-size:13px;color:oklch(.45 .03 60);margin:8px 0 0;line-height:1.6}
.scene .foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:oklch(.45 .03 60)}
.pill{font-size:13px;font-weight:500;padding:7px 14px;border-radius:999px;background:oklch(.28 .02 60);color:oklch(.97 .008 80)}
.buddy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;align-items:start}@media(max-width:900px){.buddy{grid-template-columns:1fr}}
.buddy .left{display:flex;flex-direction:column;gap:18px;position:sticky;top:22px}
.mood{border:1px solid transparent;padding:9px 16px;border-radius:999px;color:oklch(.35 .04 60)}.mood.on{color:#fff}
textarea{width:100%;resize:none;border:1px solid oklch(.9 .012 80);border-radius:16px;padding:14px 16px;line-height:1.6;background:oklch(.995 .004 80);outline:0}
.list{display:flex;flex-direction:column;gap:12px}.hint{font-size:13px;color:oklch(.55 .02 60)}
.row{display:flex;gap:14px;align-items:center;background:oklch(.995 .004 80);border:1px solid oklch(.93 .01 80);border-radius:16px;padding:14px 16px}
.row .who{display:flex;gap:8px;align-items:center;font-size:15px;font-weight:500}.row .tagm{font-size:11px;padding:2px 8px;border-radius:99px;color:oklch(.35 .05 60);font-weight:400}.row p{font-size:13px;color:oklch(.5 .02 60);margin:4px 0 0;line-height:1.5}
.online{position:relative}.online::after{content:"";position:absolute;right:1px;bottom:1px;width:10px;height:10px;border-radius:50%;background:oklch(.72 .14 150);border:2px solid #fff}
.comp{background:oklch(.995 .004 80);border:1px solid oklch(.93 .01 80);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px}
.comp .head{display:flex;gap:14px;align-items:center}.comp .head .sq{width:56px;height:56px;border-radius:18px;flex:none}.comp .head b{font-size:17px}.comp .head small{display:block;font-size:12px;color:oklch(.55 .02 60);margin-top:2px;font-weight:400}
.comp q{font-size:13px;line-height:1.7;color:oklch(.4 .02 60)}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags span{font-size:11px;padding:3px 9px;border-radius:99px;background:oklch(.95 .01 80);color:oklch(.45 .02 60)}
.comp .acts{display:flex;gap:8px;margin-top:auto}.comp .acts .accent{flex:1;border-radius:12px;padding:10px}
.play{border-radius:20px;overflow:hidden;background:oklch(.995 .004 80);border:1px solid oklch(.93 .01 80);display:flex;flex-direction:column}
.play .cover{height:140px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:oklch(.35 .05 60)}
.play .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}.play b{font-size:16px}.play p{font-size:13px;color:oklch(.5 .02 60);margin:0;line-height:1.6}.play small{font-size:12px;color:oklch(.55 .02 60);margin-top:auto}
.inbox{display:flex;flex-direction:column;background:oklch(.995 .004 80);border:1px solid oklch(.93 .01 80);border-radius:20px;overflow:hidden;max-width:760px}
.msg{display:flex;gap:14px;align-items:center;padding:16px 20px;border-bottom:1px solid oklch(.94 .01 80);cursor:pointer}.msg:hover{background:oklch(.97 .008 80)}
.msg .c{flex:1;min-width:0}.msg .l{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:500}.msg .l time{font-size:12px;color:oklch(.6 .02 60);font-weight:400}.msg p{font-size:13px;color:oklch(.5 .02 60);margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* profile */
.phead{display:flex;gap:22px;align-items:center;background:oklch(.995 .004 80);border:1px solid oklch(.93 .01 80);border-radius:24px;padding:26px 28px;position:relative}
.pav{width:88px;height:88px;border-radius:50%;flex:none;padding:0}
.pname{font-size:26px;font-weight:700;display:flex;align-items:center;gap:8px;padding:0}.pname span{font-size:13px;color:oklch(.55 .02 60);font-family:"Noto Sans SC",sans-serif;font-weight:400}
.phandle{font-size:13px;color:oklch(.55 .02 60);margin-top:4px}
.pstats{display:flex;gap:22px;margin-top:14px;font-size:13px;color:oklch(.55 .02 60)}.pstats b{font-size:17px;color:oklch(.25 .02 60)}
.menu{position:absolute;top:96px;left:28px;width:210px;background:oklch(.995 .004 80);border:1px solid oklch(.9 .012 80);border-radius:14px;padding:6px;box-shadow:0 12px 30px oklch(.3 .02 60/.16);z-index:20}
.menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font-size:14px}.menu button:hover{background:oklch(.95 .01 80)}.menu .danger{color:oklch(.55 .16 25)}
.menu .sep{height:1px;background:oklch(.93 .01 80);margin:4px 8px}
.rec{border-radius:18px;padding:18px;border:1px solid oklch(.93 .01 80)}.rec .l{display:flex;justify-content:space-between;font-size:12px;color:oklch(.5 .03 60)}.rec .tx{font-size:14px;line-height:1.6;margin-top:8px;white-space:pre-wrap}
/* modal */
.modal{position:fixed;inset:0;background:oklch(.2 .02 60/.45);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.sheet{background:oklch(.985 .006 80);border-radius:24px;width:min(980px,100%);max-height:92vh;overflow:auto;box-shadow:0 30px 80px oklch(.2 .02 60/.3);position:relative}
.x{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;background:oklch(.95 .01 80);font-size:16px;color:oklch(.4 .02 60)}
.pad{padding:28px 30px;display:flex;flex-direction:column;gap:14px}.pad.narrow{width:min(460px,100%)}.pad.narrow2{max-width:640px}
.pad.center{padding:64px 40px;align-items:center;text-align:center}
.pad input,.pad textarea{border:1px solid oklch(.9 .012 80);border-radius:12px;padding:12px 14px;outline:0;background:#fff}
.pad input.big{border:0;border-bottom:1px solid oklch(.9 .012 80);border-radius:0;font-size:18px;font-weight:500;background:transparent;padding:10px 0}
.pad input.line{border:0;border-bottom:1px solid oklch(.7 .03 60);border-radius:0;background:transparent;font-size:16px;padding:10px 0}
.pad input.line.big{font-size:18px}
.swrow{display:flex;gap:8px;flex-wrap:wrap}.sw{width:36px;height:36px;border-radius:12px;border:3px solid transparent}.sw.round{border-radius:50%}
.sw6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.sw6 .sw{width:auto;aspect-ratio:1;height:auto}
.acc{display:flex;align-items:center;gap:14px;border:1px solid oklch(.92 .01 80);background:oklch(.995 .004 80);padding:14px 16px;border-radius:16px;text-align:left}
.acc.on{border-color:oklch(.72 .12 150);background:oklch(.97 .015 150)}.acc b{display:block;font-size:15px;font-weight:500}.acc small{display:block;font-size:12px;color:oklch(.55 .02 60);margin-top:2px}
.breathe-dot{width:90px;height:90px;border-radius:50%;background:oklch(.85 .08 40);animation:breathe 2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.6)}50%{transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.pulse{animation:pulse 2.5s ease-in-out infinite}
/* post detail */
.post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media(max-width:820px){.post{grid-template-columns:1fr}}
.pimg{min-height:520px;display:flex;align-items:flex-end;padding:16px}
.pbody{display:flex;flex-direction:column;padding:26px 28px;gap:16px;min-height:520px}
.phead2{display:flex;align-items:center;gap:10px}.phead2 b{font-size:14px;font-weight:500}.phead2 small{display:block;font-size:12px;color:oklch(.55 .02 60)}
.follow{margin-left:auto;border:1px solid oklch(.68 .14 40);color:oklch(.55 .14 40);padding:6px 14px;border-radius:999px;font-size:13px}
.pbody h2{font-size:21px;font-weight:700;margin:0;line-height:1.4}
.ptext{margin:0;font-size:14px;line-height:1.8;color:oklch(.35 .02 60);white-space:pre-wrap}
.htags{display:flex;gap:8px}.htags span{font-size:12px;color:oklch(.5 .12 40)}
.cms{border-top:1px solid oklch(.93 .01 80);padding-top:14px;display:flex;flex-direction:column;gap:12px;flex:1}
.cm{display:flex;gap:10px}.cm small{font-size:12px;color:oklch(.55 .02 60)}.cm div div{font-size:13px;line-height:1.6;margin-top:2px}
.pacts{display:flex;gap:10px;align-items:center;border-top:1px solid oklch(.93 .01 80);padding-top:14px}
.pacts button{font-size:14px;color:oklch(.4 .02 60)}.pacts .liked{color:oklch(.6 .16 25)}.pacts .colled{color:oklch(.7 .14 80)}
.pacts input{flex:1;border:1px solid oklch(.9 .012 80);border-radius:999px;padding:9px 14px;font-size:13px;outline:0;background:#fff;min-width:0}
.pacts .dark{padding:9px 16px;border-radius:999px;font-size:13px;color:#fff}
/* room */
.room{display:flex;flex-direction:column;min-height:560px}
.rhead{padding:28px 30px 22px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}.rhead .big{font-size:32px;font-weight:700;margin-top:4px}
.rbody{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);flex:1}@media(max-width:820px){.rbody{grid-template-columns:1fr}}
.rleft{padding:22px 28px;display:flex;flex-direction:column;gap:14px;border-right:1px solid oklch(.93 .01 80)}
.guide{background:oklch(.995 .004 80);border:1px solid oklch(.93 .01 80);border-radius:16px;padding:16px 18px}
.notes{display:flex;flex-direction:column;gap:10px;flex:1}
.inputrow{display:flex;gap:10px}.inputrow input{flex:1;border:1px solid oklch(.9 .012 80);border-radius:999px;padding:11px 16px;outline:0;background:#fff;min-width:0}
.inputrow .dark,.inputrow .accent{border-radius:999px;padding:11px 18px}
.rright{padding:22px 28px;display:flex;flex-direction:column;gap:16px}
.pres{display:flex;flex-wrap:wrap;gap:10px}.rfoot{margin-top:auto;display:flex;flex-direction:column;gap:8px}.rfoot .accent{border-radius:12px;padding:11px;text-align:center}
/* chat */
.chat{display:flex;flex-direction:column;height:min(680px,92vh)}
.chead{display:flex;align-items:center;gap:14px;padding:20px 26px;border-bottom:1px solid oklch(.93 .01 80)}
.chead b{font-size:16px}.chead small{display:block;font-size:12px;color:oklch(.55 .02 60);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.cbody{flex:1;overflow:auto;padding:22px 26px;display:flex;flex-direction:column;gap:12px}
.bubrow{display:flex}.bubrow.mine{justify-content:flex-end}
.bub{max-width:72%;padding:11px 15px;border-radius:18px;background:oklch(.95 .01 80);font-size:14px;line-height:1.6;text-wrap:pretty}
.bub.soft{background:oklch(.995 .004 80/.8);font-size:15px;line-height:1.7;max-width:78%}
.bubrow.mine .bub{background:oklch(.28 .02 60);color:#fff}
.bub.typing{color:oklch(.55 .02 60);animation:pulse 1s infinite}
.cfoot{padding:14px 26px 20px;border-top:1px solid oklch(.93 .01 80);display:flex;flex-direction:column;gap:10px}
/* compose */
.compose{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}@media(max-width:820px){.compose{grid-template-columns:1fr}}
.cover2{min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;gap:14px}
/* playables */
.playwrap{display:flex;flex-direction:column;min-height:560px}
.phead3{padding:26px 30px 0;display:flex;align-items:baseline;gap:12px}
.pcenter{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px}
.breath{width:240px;height:240px;border-radius:50%;background:oklch(.75 .1 200/.55);box-shadow:0 0 0 30px oklch(.75 .1 200/.15);animation:breathe14 14s cubic-bezier(.45,0,.55,1) infinite}
@keyframes breathe14{0%{transform:scale(.6)}50%{transform:scale(1)}100%{transform:scale(.6)}}
.cgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}@media(max-width:820px){.cgrid{grid-template-columns:repeat(4,1fr)}}
.ccard{aspect-ratio:1;border-radius:18px;border:4px solid transparent;display:flex;align-items:flex-end;padding:8px;font-size:12px;color:oklch(.3 .05 60)}
.result{background:oklch(.995 .004 80/.7);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.result .dark{align-self:flex-start}
.bar{display:flex;align-items:center;gap:10px;font-size:12px}.bar .bn{width:56px;color:oklch(.45 .02 60)}.bar .bt{flex:1;height:10px;border-radius:99px;background:oklch(.95 .01 80);overflow:hidden}.bar .bt span{display:block;height:100%}.bar .bp{width:36px;text-align:right}
.two{flex:1;padding:26px 30px 30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}@media(max-width:820px){.two{grid-template-columns:1fr}}
.two .pad{padding:0}
.postcard{background:oklch(.995 .004 80);border-radius:6px;padding:26px;box-shadow:0 12px 30px oklch(.3 .03 60/.15);display:flex;flex-direction:column;gap:12px;transform:rotate(1.5deg);align-self:center}
.postcard .pc{font-size:17px;line-height:1.9;white-space:pre-wrap;min-height:110px}
.dots{display:flex;gap:6px}.dots span{flex:1;height:4px;border-radius:99px}
.lglist{display:flex;flex-direction:column;gap:8px}
.lg{padding:10px 14px;border-radius:12px;background:oklch(.995 .004 80/.7);font-size:14px;transition:opacity .6s}.lg.off{opacity:.35;text-decoration:line-through}
.box{width:200px;border-radius:16px 16px 10px 10px;background:oklch(.4 .05 60);position:relative;transition:height .5s;display:flex;align-items:center;justify-content:center;color:oklch(.9 .02 80);font-family:"Noto Serif SC",serif;font-size:32px}
.box .lid{position:absolute;top:-14px;left:-6px;right:-6px;height:22px;border-radius:8px;background:oklch(.32 .05 60)}