*,*:before,*:after{box-sizing:border-box}:root{--bg: #fff7fb;--panel: #ffffff;--line: #f2d3de;--text: #271923;--muted: #7d6472;--pink: #ff8fb1;--blue: #1398ff;--shadow: 0 18px 42px rgba(83, 31, 52, .12);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}body{min-width:320px;min-height:100vh;margin:0;padding-top:61px;background:linear-gradient(90deg,rgba(255,143,177,.08) 1px,transparent 1px),linear-gradient(rgba(19,152,255,.06) 1px,transparent 1px),var(--bg);background-size:40px 40px;letter-spacing:0}body.auth-callback-route{padding-top:0}.page-transition{min-height:calc(100vh - 61px);animation-duration:1.2s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;will-change:opacity,transform}.page-transition-forward{animation-name:pageSlideInForward}.page-transition-back{animation-name:pageSlideInBack}.page-transition-route-cafes{animation-name:pageFadeIn}body.auth-callback-route .page-transition{min-height:100vh}@keyframes pageFadeIn{0%{opacity:0}to{opacity:1}}@keyframes pageSlideInForward{0%{opacity:0;transform:translate3d(54px,0,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes pageSlideInBack{0%{opacity:0;transform:translate3d(-44px,0,0) scale(.988)}to{opacity:1;transform:translateZ(0) scale(1)}}@media(prefers-reduced-motion:reduce){.page-transition,.article-view-forward,.article-view-back{animation:none}}button,input,textarea{font:inherit}a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.app-header{position:fixed;top:0;left:0;right:0;z-index:2000;border-bottom:1px solid rgba(218,220,224,.82);background:#ffffffe6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px #ffffffd1 inset,0 10px 24px #17203314,0 2px 8px #1720330a}.app-header-inner{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px}.app-header-brand{min-width:0;display:flex;align-items:center;gap:8px;flex:1 1 auto;border-radius:14px;outline:none;-webkit-user-select:none;user-select:none}.app-header-brand:focus-visible{box-shadow:0 0 0 3px #1398ff24}.app-header-brand-mark{width:42px;height:42px;flex:0 0 42px}.app-header-brand-mark img{width:100%;height:100%;display:block;object-fit:contain}.app-header-brand-name{width:min(150px,36vw);display:block}.app-header-brand-name img{width:100%;height:auto;display:block}.app-header-actions{position:relative;min-width:67px;display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto}.app-header-login{min-height:30px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(218,220,224,.95);border-radius:999px;padding:0 11px;color:#1f1f1f;background:#fff;font-size:11px;font-weight:900;line-height:1;white-space:nowrap;box-shadow:0 5px 14px #17203314;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.app-header-support{min-height:30px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1px solid transparent;border-radius:999px;padding:0 8px;color:#697386;background:transparent;font-size:11px;font-weight:900;line-height:1;white-space:nowrap;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.app-header-support img{width:18px;height:18px;display:block;flex:0 0 auto}.app-header-login span{width:14px;height:14px;display:grid;place-items:center;border:1px solid rgba(218,220,224,.95);border-radius:999px;color:#1398ff;background:#fff;font-size:10px;line-height:1}.app-header-login:hover,.app-header-support:hover,.app-header-menu a:hover,.app-header-menu button:hover{background:#f8fbff;color:#1398ff}.app-header-login:focus-visible,.app-header-support:focus-visible,.app-header-icon-button:focus-visible,.app-header-user:focus-visible{outline:none;border-color:#1398ff85;box-shadow:0 0 0 3px #1398ff24,0 5px 14px #17203314}.app-header-icon-button,.app-header-user{width:30px;height:30px;display:inline-grid;place-items:center;border:1px solid rgba(218,220,224,.95);border-radius:999px;padding:0;background:#fff;box-shadow:0 5px 14px #17203314;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent}.app-header-icon-button:focus,.app-header-user:focus{outline:none}.app-header-icon-button{position:relative;color:#1398ff}.app-header-icon-button.has-badge:after{content:"";position:absolute;top:1px;right:1px;width:8px;height:8px;border:2px solid #fff;border-radius:999px;background:#ff4d6d;box-shadow:0 0 0 1px #ff4d6d47}.app-header-members-icon{position:relative;width:18px;height:16px;display:block}.app-header-members-icon:before,.app-header-members-icon:after{content:"";position:absolute;border-radius:999px;background:currentColor}.app-header-members-icon:before{left:7px;top:1px;width:6px;height:6px;box-shadow:-6px 2px 0 -1px currentColor}.app-header-members-icon:after{left:5px;bottom:1px;width:11px;height:7px;border-radius:999px 999px 5px 5px;box-shadow:-6px 2px 0 -2px currentColor}.app-header-user{overflow:hidden;border-color:#1398ff38;color:#fff;background:linear-gradient(135deg,#1398ff,#36c49a);font-size:13px;font-weight:900;line-height:1}.app-header-user.has-image{border-color:#dadce0f2;background:#fff}.app-header-user img,.header-invitation-avatar img{width:100%;height:100%;display:block;object-fit:cover}.app-header-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:2001;min-width:176px;display:grid;gap:4px;border:1px solid rgba(218,220,224,.95);border-radius:14px;padding:8px;background:#fff;box-shadow:0 16px 34px #17203324}.app-header-menu a,.app-header-menu button{width:100%;min-height:38px;display:flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:0 10px;color:#172033;background:transparent;font-size:13px;font-weight:900;text-align:left;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}.app-header-menu a:focus,.app-header-menu button:focus{outline:none}.app-header-modal{position:fixed;inset:var(--app-viewport-offset-top, 0px) 0 auto;z-index:3000;height:var(--app-viewport-height, 100dvh);display:grid;place-items:center;padding:16px;background:#1720336b;overscroll-behavior:contain}.app-header-modal-panel{width:min(460px,100%);max-height:min(680px,calc(var(--app-viewport-height, 100dvh) - 32px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;border:1px solid rgba(218,220,224,.95);border-radius:18px;padding:18px;background:#fff;box-shadow:0 24px 68px #1720333d}.app-header-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.app-header-modal-head h2{margin:0;color:#172033;font-size:18px;font-weight:900}.app-header-modal-head .app-header-icon-button{color:#697386;font-size:18px;font-weight:900}.header-invitation-list{display:grid;gap:14px}.header-invitation-section{display:grid;gap:10px}.header-invitation-section h3{margin:0;color:#172033;font-size:13px;font-weight:900}.header-invitation-empty,.header-invitation-error{margin:0;border:1px dashed rgba(19,152,255,.32);border-radius:12px;padding:14px;color:#697386;background:#f8fbff;font-size:13px;font-weight:800;text-align:center}.header-invitation-error{color:#c2410c;border-color:#c2410c38;background:#fff8f2}.header-invitation-item{display:grid;gap:5px;border:1px solid rgba(218,220,224,.95);border-radius:12px;padding:12px;background:#fff}.header-invitation-item strong{color:#172033;font-size:14px;font-weight:900}.header-invitation-user{min-width:0;display:flex;align-items:center;gap:8px;color:#697386;font-size:12px;font-weight:800}.header-invitation-user>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-invitation-avatar{width:24px;height:24px;flex:0 0 24px;display:inline-grid;place-items:center;overflow:hidden;border-radius:999px;color:#fff;background:linear-gradient(135deg,#1398ff,#36c49a);font-size:11px;font-weight:900}.header-invitation-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.header-invitation-approve,.header-invitation-reject{min-width:64px;min-height:32px;border:1px solid rgba(218,220,224,.95);border-radius:999px;padding:0 12px;background:#fff;color:#697386;font-size:12px;font-weight:900;cursor:pointer}.header-invitation-approve{border-color:#1398ff;color:#fff;background:#1398ff}.header-invitation-approve:disabled,.header-invitation-reject:disabled{cursor:wait;opacity:.62}.header-invite-notice-panel{width:min(380px,100%)}.header-invite-notice-body{display:grid;justify-items:center;gap:12px;text-align:center}.header-invite-notice-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;color:#1398ff;background:#eaf4ff}.header-invite-notice-body p{margin:0;color:#4f5d6a;font-size:13px;font-weight:800}.header-invite-notice-button{min-height:36px;border:0;border-radius:999px;padding:0 16px;color:#fff;background:#1398ff;font-size:12px;font-weight:900;cursor:pointer}.header-language-body{display:grid;gap:14px}.header-language-copy{margin:0;color:#697386;font-size:13px;font-weight:800}.header-language-options{display:grid;gap:8px}.header-language-option{min-height:44px;display:flex;align-items:center;gap:10px;border:1px solid rgba(218,220,224,.95);border-radius:12px;padding:0 12px;background:#fff;color:#172033;font-size:14px;font-weight:900;cursor:pointer}.header-language-option:has(input:checked){border-color:#1398ff85;background:#f5fbff;box-shadow:0 0 0 3px #1398ff1a}.header-language-error{margin:0;color:#b4234c;font-size:12px;font-weight:800}.header-language-actions{display:flex;justify-content:flex-end;gap:8px}.cafes-page,.new-classroom-page{width:min(980px,calc(100% - 32px));margin:0 auto;padding:18px 0 40px}.login-page{width:min(520px,calc(100% - 32px));margin:0 auto;padding:44px 0}.support-page{width:min(560px,calc(100% - 32px));min-height:calc(100vh - 61px);margin:0 auto;padding:44px 0}.privacy-page{width:min(760px,calc(100% - 32px));min-height:calc(100vh - 61px);margin:0 auto;padding:44px 0}.tutorial-page{width:min(920px,calc(100% - 32px));min-height:calc(100vh - 61px);margin:0 auto;padding:30px 0 46px}.login-back{min-height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:0 14px;margin-bottom:14px;background:#fff;color:var(--muted);font-size:13px;font-weight:900;box-shadow:0 8px 20px #531f340f;white-space:nowrap;cursor:pointer;appearance:none;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.login-panel,.support-panel{border:1px solid rgba(242,211,222,.92);border-radius:22px;padding:24px;background:#fffffff0;box-shadow:var(--shadow)}.privacy-panel{border:1px solid rgba(242,211,222,.92);border-radius:22px;padding:28px;background:#fffffff2;box-shadow:var(--shadow)}.privacy-header{padding-bottom:22px;border-bottom:1px solid rgba(242,211,222,.92)}.privacy-kicker{margin:0 0 8px;color:#f48fb1;font-size:12px;line-height:1.35;font-weight:900}.tutorial-hero,.tutorial-footer-panel{border:1px solid rgba(242,211,222,.92);border-radius:22px;background:#fffffff0;box-shadow:var(--shadow)}.tutorial-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:center;padding:26px}.tutorial-kicker{margin:0 0 10px;color:#1398ff;font-size:12px;line-height:1.35;font-weight:900}.login-title,.support-title{margin:0;font-size:26px;line-height:1.15;font-weight:900}.privacy-title{margin:0;font-size:28px;line-height:1.2;font-weight:900}.tutorial-title{max-width:620px;margin:0;font-size:31px;line-height:1.25;font-weight:900}.login-copy,.support-copy{margin:8px 0 22px;color:var(--muted);font-size:14px;line-height:1.6;font-weight:700}.privacy-updated{margin:10px 0 0;color:#8a94a6;font-size:12px;line-height:1.5;font-weight:800}.privacy-copy{margin:16px 0 0;color:var(--muted);font-size:14px;line-height:1.75;font-weight:700}.privacy-section-list{display:grid;gap:20px;margin-top:24px}.privacy-section{display:grid;gap:10px}.privacy-section h2{margin:0;color:var(--text);font-size:17px;line-height:1.4;font-weight:900}.privacy-section ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.privacy-section li{position:relative;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.75;font-weight:700}.privacy-section li:before{content:"";position:absolute;top:.72em;left:0;width:6px;height:6px;border-radius:999px;background:#f48fb1}.policy-link{display:inline-flex;justify-self:center;border:0;padding:0;margin-top:18px;color:#7d6472;background:transparent;font-size:12px;line-height:1.5;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;appearance:none}.policy-link:hover,.policy-link:focus-visible{color:#f48fb1;outline:none}.page-bottom-policy-link{display:flex;justify-self:center;margin:18px auto 0}.tutorial-copy{max-width:650px;margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.8;font-weight:700}.tutorial-hero-preview{min-height:220px;display:grid;place-items:center}.tutorial-hero-image{width:min(100%,220px);aspect-ratio:1170 / 1344;display:block;border:1px solid rgba(242,211,222,.92);border-radius:20px;object-fit:cover;box-shadow:0 18px 34px #531f341f}.tutorial-preview-window{position:relative;width:min(100%,240px);aspect-ratio:1 / 1.18;display:block;border:1px solid rgba(242,211,222,.92);border-radius:20px;background:linear-gradient(180deg,#fff7fbd9,#fffffff5),#fff;box-shadow:0 18px 34px #531f341f;overflow:hidden}.tutorial-preview-bar,.tutorial-preview-cafe,.tutorial-preview-message,.tutorial-preview-board{position:absolute;display:block}.tutorial-preview-bar{top:14px;left:16px;right:16px;height:20px;border-radius:999px;background:linear-gradient(90deg,#ff8fb1,#1398ff);opacity:.78}.tutorial-preview-cafe{top:52px;left:50%;width:92px;height:92px;border:8px solid #ff8fb1;border-top-color:#36c49a;border-radius:999px;transform:translate(-50%)}.tutorial-preview-cafe:before,.tutorial-preview-cafe:after{content:"";position:absolute;border-radius:999px;background:#1398ff}.tutorial-preview-cafe:before{left:25px;top:21px;width:24px;height:24px}.tutorial-preview-cafe:after{left:16px;top:51px;width:42px;height:16px}.tutorial-preview-message{left:26px;right:26px;height:24px;border-radius:999px;background:#eef7ff}.tutorial-preview-message.is-first{top:160px}.tutorial-preview-message.is-second{top:194px;left:58px;background:#fff0f6}.tutorial-preview-board{left:26px;right:26px;bottom:20px;height:32px;border-radius:12px;background:linear-gradient(90deg,#36c49a,#8fdcc5)}.tutorial-section{margin-top:26px}.tutorial-section-title{margin:0 0 14px;font-size:19px;line-height:1.35;font-weight:900}.tutorial-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tutorial-feature,.tutorial-step{border:1px solid rgba(242,211,222,.9);border-radius:18px;background:#ffffffeb;box-shadow:0 10px 24px #531f3412}.tutorial-feature{padding:18px}.tutorial-feature h2,.tutorial-step h2,.tutorial-footer-panel h2{margin:0;color:var(--text);font-size:15px;line-height:1.45;font-weight:900}.tutorial-feature p,.tutorial-step p,.tutorial-footer-panel p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.7;font-weight:700}.tutorial-step-list{display:grid;gap:10px}.tutorial-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:16px}.tutorial-step-number{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;color:#fff;background:linear-gradient(135deg,#ff6fae,#1398ff);font-size:14px;font-weight:900}.tutorial-footer-panel{display:grid;gap:14px;margin-top:26px;padding:20px}.tutorial-footer-panel p{margin:0}.tutorial-actions{display:flex;justify-content:flex-end;gap:10px}.support-form{display:grid;gap:18px}.support-description{min-height:180px}.support-complete{display:grid;gap:4px;border:1px solid rgba(54,196,154,.34);border-radius:16px;padding:14px 16px;margin-bottom:18px;color:#155f49;background:#f0fff9;font-size:13px;line-height:1.5;font-weight:800}.support-complete strong{color:#0f513b;font-size:15px;font-weight:900}.form-message.is-success{color:#0f7a54}.sso-list{display:grid;gap:12px}.sso-button{min-height:52px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid rgba(218,220,224,.95);border-radius:16px;padding:0 16px;background:#fff;color:#1f1f1f;font-size:15px;font-weight:900;box-shadow:0 8px 20px #17203314;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sso-button:hover{background:#f8fbff;border-color:#1398ff52}.sso-button:focus-visible,.login-back:focus-visible,.auth-link:focus-visible{box-shadow:0 0 0 3px #1398ff24,0 8px 20px #17203314}.sso-mark{width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(218,220,224,.95);border-radius:999px;color:#4285f4;background:#fff;font-size:16px;font-weight:900}.login-note{margin:18px 0 0;color:var(--muted);font-size:12px;line-height:1.55;font-weight:700}.auth-callback{width:min(360px,calc(100% - 32px));min-height:calc(100vh - 61px);display:grid;align-content:center;justify-items:center;gap:18px;margin:0 auto;padding:34px 0;text-align:center}.auth-callback:before{content:"";position:absolute;width:min(360px,calc(100% - 32px));min-height:260px;border:1px solid rgba(242,211,222,.9);border-radius:28px;background:#ffffffeb;box-shadow:0 20px 48px #36222d1f}.auth-callback>*{position:relative;z-index:1}.auth-loader{width:58px;height:58px;border:6px solid rgba(54,196,154,.18);border-top-color:#36c49a;border-radius:50%;animation:cafe-loading-spin .85s linear infinite}.auth-title{margin:0;color:var(--blue);font-size:22px;line-height:1.35;font-weight:900}.auth-message{margin:0;color:var(--muted);font-size:14px;line-height:1.7;font-weight:800}.auth-error{width:100%;margin:0;border:1px solid rgba(255,143,177,.35);border-radius:16px;padding:12px;color:#9d1239;background:#fff4f8;font-size:13px;line-height:1.6;font-weight:800}.auth-link{color:var(--blue);border-radius:10px;font-size:13px;font-weight:900;outline:none;-webkit-tap-highlight-color:transparent}.new-classroom-page{width:min(920px,calc(100% - 32px));padding-top:24px}.page-top{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:18px}.page-title{margin:0;font-size:26px;line-height:1.15;font-weight:900}.page-copy{margin:0;color:var(--muted);font-size:10px;line-height:1.6;font-weight:700}.page-actions{display:grid;justify-items:end;gap:8px;flex:0 0 auto}.create-link,.button,.back-link{min-height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,143,177,.62);border-radius:999px;padding:0 18px;color:var(--text);background:#fff;font-size:14px;font-weight:900;box-shadow:0 8px 20px #531f341f;cursor:pointer;appearance:none}.back-link{min-height:38px;border-color:var(--line);color:var(--muted);font-size:13px;box-shadow:0 8px 20px #531f340f;white-space:nowrap}.create-link{min-height:38px;display:none;gap:8px;padding:0 16px 0 12px;color:#fff;background:radial-gradient(circle at 18% 16%,rgba(255,255,255,.58),transparent 22%),linear-gradient(135deg,#ff8fb1,#ff6fae 52%,#d64563);font-size:13px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,filter .18s ease}.create-link:before{content:"+";width:22px;height:22px;display:grid;place-items:center;border-radius:999px;color:#d64563;background:#ffffffeb;font-size:17px;line-height:1}.cafe-filter{display:flex;justify-content:flex-end;gap:4px;padding:3px;border:1px solid rgba(242,211,222,.92);border-radius:999px;background:#ffffffc7;box-shadow:0 8px 18px #531f3414}.cafe-filter-button{min-height:26px;border:0;border-radius:999px;padding:0 9px;color:var(--muted);background:transparent;font-size:10px;font-weight:900;white-space:nowrap;cursor:pointer}.cafe-filter-button.is-active{color:#fff;background:var(--blue);box-shadow:0 5px 12px #1398ff33}.cafe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cafe-card,.cafe-create-card{min-height:260px;overflow:hidden;border:1px solid rgba(242,211,222,.92);border-radius:22px;background:#fffffff0;box-shadow:var(--shadow)}.cafe-card{display:grid;grid-template-rows:132px minmax(0,1fr);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.cafe-card:hover{transform:translateY(-2px);border-color:#ff8fb1b8;box-shadow:0 24px 48px #531f3429}.cafe-create-card{display:grid;place-items:center;border-color:#ff8fb1b8;padding:22px;color:#8a1230;background:linear-gradient(145deg,#fffffff5,#fff6faf0),linear-gradient(135deg,#ff8fb12e,#1398ff1f);text-align:inherit;cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,border-color .18s ease,filter .18s ease}.create-link:active,.create-link.is-pressing,.cafe-create-card:active,.cafe-create-card.is-pressing{transform:translateY(1px) scale(.985);filter:saturate(1.04);box-shadow:inset 0 2px 8px #531f341f,0 8px 16px #d645632e}.cafe-create-card-inner{display:grid;justify-items:center;gap:12px;text-align:center}.cafe-create-card-mark{width:58px;height:58px;display:grid;place-items:center;position:relative;border-radius:18px;background:linear-gradient(135deg,#ff6fae,#ff9671);box-shadow:0 14px 24px #ff6fae47;padding:8px}.cafe-create-card-mark img{width:100%;height:100%;display:block;object-fit:contain}.cafe-create-card-plus{position:absolute;right:-8px;bottom:-8px;width:26px;height:26px;display:grid;place-items:center;border:2px solid #fff;border-radius:999px;color:#fff;background:var(--blue);box-shadow:0 8px 18px #1398ff47;font-size:18px;line-height:1;font-weight:900}.cafe-create-card-title{margin:0;color:var(--text);font-size:18px;font-weight:900}.cafe-create-card-copy{margin:0;color:var(--muted);font-size:12px;line-height:1.6;font-weight:800}.cafe-image{position:relative;overflow:hidden;background:var(--pink)}.cafe-image img{width:100%;height:100%;display:block;object-fit:cover}.cafe-body{display:grid;gap:10px;padding:14px}.cafe-row{display:flex;align-items:center;justify-content:flex-start;gap:10px}.cafe-name{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;font-size:17px;font-weight:900}.cafe-tags{flex:0 0 auto;display:flex;justify-content:flex-end;gap:6px}.cafe-badge,.cafe-role-badge{flex:0 0 auto;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900}.cafe-badge{border:1px solid rgba(255,143,177,.28);color:#8a1230;background:#fff6fa}.cafe-role-badge{border:1px solid rgba(19,152,255,.24);color:#075985;background:#eff8ff}.cafe-desc{margin:0;color:var(--muted);font-size:12px;line-height:1.65;font-weight:700}.cafe-empty,.cafe-loading{grid-column:1 / -1;border:1px dashed rgba(255,143,177,.5);border-radius:22px;background:#ffffffb8}.cafe-empty{padding:24px;color:var(--muted);font-size:13px;font-weight:900;text-align:center}.cafe-loading{min-height:180px;display:grid;place-items:center}.cafe-loading-spinner{width:34px;height:34px;border:4px solid rgba(255,143,177,.22);border-top-color:#ff6fae;border-radius:999px;animation:cafe-loading-spin .78s linear infinite}@keyframes cafe-loading-spin{to{transform:rotate(360deg)}}.classroom-form{display:grid;gap:18px;border:1px solid rgba(242,211,222,.9);border-radius:22px;padding:20px;background:#ffffffeb;box-shadow:var(--shadow)}.field{display:grid;gap:8px}.field-error{min-height:18px;margin:0;color:#b4234c;font-size:12px;line-height:1.5;font-weight:800}.field-help{margin:-3px 0 0;color:#8a94a6;font-size:9px;line-height:1.4;font-weight:700}.field label,.section-label{color:var(--text);font-size:14px;font-weight:900}.text-input,.textarea{width:100%;border:1px solid var(--line);border-radius:16px;padding:12px 14px;color:var(--text);background:#fff;outline:none;font-size:15px;font-weight:700;box-shadow:inset 0 1px #fffc}.textarea{min-height:128px;resize:vertical;line-height:1.55}.text-input:focus,.textarea:focus{border-color:#1398ff9e;box-shadow:0 0 0 4px #1398ff1f}.access-options{display:grid;gap:8px}.access-option{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;box-shadow:0 10px 24px #531f340f;cursor:pointer}.access-option input{width:18px;height:18px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--blue)}.access-option:has(input:checked){border-color:#1398ff9e;background:#1398ff0d}.access-option-body{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:1}.access-option-title{display:block;color:var(--text);font-size:15px;font-weight:900}.tooltip{position:relative;z-index:2;width:24px;height:24px;flex:0 0 auto;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:999px;color:var(--blue);background:#fff;font-size:13px;font-weight:900;cursor:help}.tooltip:after{content:attr(data-tooltip);position:absolute;right:0;bottom:calc(100% + 10px);width:min(280px,calc(100vw - 48px));display:none;border:1px solid rgba(242,211,222,.95);border-radius:12px;padding:10px 12px;color:var(--text);background:#fff;box-shadow:0 16px 38px #531f342e;font-size:12px;line-height:1.55;font-weight:700}.tooltip:hover:after,.tooltip:focus:after{display:block}.background-current{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:14px;border:1px solid var(--line);border-radius:18px;padding:12px;background:#fff;box-shadow:0 10px 24px #531f340f}.background-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.background-option{position:relative;min-height:154px;overflow:hidden;border:2px solid rgba(242,211,222,.84);border-radius:18px;cursor:pointer;background:#fff;box-shadow:0 10px 22px #531f3414;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.background-option input{position:absolute;inset:0;opacity:0;cursor:pointer}.background-preview{width:100%;height:112px;display:block;background-position:center;background-size:cover}.background-current .background-preview{height:92px;border-radius:14px;overflow:hidden}.background-preview.bg-0{background-image:url(/uploads/backgrounds/1/cafe_background_1.webp)}.background-preview.bg-1{background-image:url(/uploads/backgrounds/2/cafe_background_2.webp)}.background-current-name{min-width:0;color:var(--text);font-size:15px;font-weight:900}.background-name{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;color:var(--text);background:#fff;font-size:13px;font-weight:900}.background-name:after{content:"";width:18px;height:18px;border:2px solid var(--line);border-radius:999px;background:#fff}.background-option:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 3px #1398ff1f,0 14px 28px #1398ff24;transform:translateY(-1px)}.background-option:has(input:checked) .background-name:after{border-color:var(--blue);background:radial-gradient(circle,var(--blue) 0 45%,transparent 48%),#fff}.form-actions,.login-required-actions{display:flex;justify-content:flex-end;gap:10px}.form-message{min-height:20px;margin:0;color:#b4234c;font-size:13px;font-weight:800}.button{border-color:#ff8fb1db;color:#fff;background:linear-gradient(135deg,#ff6fae,#ff9671)}.create-submit-button{gap:8px;padding:0 18px 0 12px;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,filter .18s ease}.create-submit-button:before{content:"+";width:22px;height:22px;display:grid;place-items:center;border-radius:999px;color:#d64563;background:#ffffffeb;font-size:17px;line-height:1}.create-submit-button:active{transform:translateY(1px) scale(.985);filter:saturate(1.04);box-shadow:inset 0 2px 8px #12547024,0 8px 16px #d645632e}.button-secondary{border-color:var(--line);color:var(--muted);background:#fff}.button:disabled{cursor:not-allowed;opacity:.62}.login-required-modal,.background-modal{position:fixed;inset:var(--app-viewport-offset-top, 0px) 0 auto;z-index:1300;height:var(--app-viewport-height, 100dvh);display:none;place-items:center;padding:18px;background:#2719236b;overscroll-behavior:contain}.background-modal{z-index:1200;padding:24px}.background-modal.is-open,.login-required-modal.is-open{display:grid}.login-required-panel,.background-modal-panel{border:1px solid rgba(242,211,222,.95);background:#fffffffa;box-shadow:0 24px 68px #531f343d}.login-required-panel{width:min(360px,100%);border-radius:18px;padding:22px}.login-required-title{margin:0 0 8px;color:var(--text);font-size:18px;font-weight:900}.login-required-message{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.6;font-weight:700}.background-modal-panel{width:min(820px,calc(100vw - 48px));max-height:min(560px,calc(var(--app-viewport-height, 100dvh) - 48px));display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;overscroll-behavior:contain;border-radius:20px;padding:0}.background-modal-head{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(242,211,222,.9);padding:12px 16px;background:#fffffff5}.background-modal-title{min-width:0;margin:0;color:var(--text);font-size:18px;font-weight:900}.background-modal-close{width:38px;height:38px;flex:0 0 auto;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:22px;line-height:1;font-weight:900;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.background-modal-close:active{transform:translateY(1px) scale(.96);box-shadow:inset 0 2px 6px #531f341a}.background-modal-body{min-height:0;overflow-y:auto;padding:16px;background:#fff9fc;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}.cafe-detail-page{--app-header-height: 61px;--cafe-field-width: 375px;--detail-panel-width: 300px;--detail-panel-gap: 5px;--cafe-field-height: calc(var(--cafe-field-width) * .75);--detail-top-gap: 20px;--detail-bottom-gap: 20px;width:min(calc(var(--cafe-field-width) + var(--detail-panel-gap) + var(--detail-panel-width)),calc(100% - 32px));height:calc(100vh - var(--app-header-height));height:calc(100svh - var(--app-header-height));min-height:calc(100vh - var(--app-header-height));min-height:calc(100svh - var(--app-header-height));display:grid;grid-template-columns:var(--cafe-field-width) var(--detail-panel-width);grid-template-rows:var(--cafe-field-height) minmax(0,1fr);justify-content:center;align-items:stretch;gap:var(--detail-panel-gap);margin:0 auto;padding:var(--detail-top-gap) 0 var(--detail-bottom-gap)}.cafe-field-detail{position:relative;grid-column:1;grid-row:1;width:var(--cafe-field-width);height:var(--cafe-field-height);aspect-ratio:4 / 3;overflow:hidden;border:1px solid rgba(242,211,222,.9);border-radius:18px;background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:cover;box-shadow:var(--shadow)}.cafe-background-layer{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;transform:translateZ(0)}.cafe-room-label{position:absolute;top:9px;left:10px;z-index:5;max-width:calc(100% - 20px);overflow:hidden;border:2px solid rgba(135,77,46,.34);border-radius:12px;padding:7px 18px 8px;color:#6f2a3c;background:linear-gradient(90deg,rgba(255,255,255,.32),transparent 22%,rgba(255,255,255,.22) 48%,transparent 72%),linear-gradient(180deg,#fff5bf,#ffd982);box-shadow:0 8px 18px #531f342e,inset 0 1px #ffffffbd,inset 0 -3px #ac5d2a24;font-size:12px;font-weight:900;line-height:1.1;text-overflow:ellipsis;white-space:nowrap;transform:rotate(-1deg);pointer-events:none}.cafe-room-label:before,.cafe-room-label:after{content:"";position:absolute;top:50%;width:7px;height:7px;border:1px solid rgba(135,77,46,.24);border-radius:999px;background:#fff7d6;box-shadow:inset 0 -1px #874d2e29;transform:translateY(-50%)}.cafe-room-label:before{left:6px}.cafe-room-label:after{right:6px}.object-layer,.avatar-layer,.object-forward-layer{position:absolute;inset:0}.object-layer{z-index:1}.avatar-layer{z-index:2}.object-forward-layer{z-index:4;pointer-events:none}.debug-region-layer{position:absolute;inset:0;z-index:5;pointer-events:none}.debug-region{position:absolute;left:var(--debug-x);top:var(--debug-y);width:var(--debug-width);height:var(--debug-height);border:2px solid currentColor;opacity:.82}.debug-region-character{color:#1398ff;background:#1398ff38}.debug-region-object{color:#ff4d6d;background:#ff4d6d38}.debug-region-forward{color:#21b66f;background:#21b66f38}.debug-region-background{color:#f0b000;background:#f0b00038}.debug-region-legend{position:absolute;right:8px;bottom:8px;display:flex;flex-wrap:wrap;justify-content:end;gap:5px;max-width:calc(100% - 16px)}.debug-region-legend-item{border:1px solid currentColor;border-radius:7px;padding:3px 6px;background:#ffffffdb;font-size:9px;font-weight:900;line-height:1}.debug-region-legend-character{color:#1398ff}.debug-region-legend-object{color:#ff4d6d}.debug-region-legend-forward{color:#21b66f}.debug-region-legend-background{color:#f0b000}.cafe-object{position:absolute;left:var(--object-x);top:var(--object-y);z-index:2;width:calc(102px * var(--object-size));height:calc(102px * var(--object-size));transform:translate(-50%,-50%);pointer-events:none}.cafe-object img{width:100%;height:100%;display:block;object-fit:contain}.cafe-user{position:absolute;left:var(--character-x);top:var(--character-y);z-index:3;width:var(--character-wrapper-width, 72px);height:var(--character-wrapper-height, 84px);transform:translate(-50%,-50%);transition:left var(--character-move-duration, 3.6s) cubic-bezier(.22,.86,.18,1),top var(--character-move-duration, 3.6s) cubic-bezier(.22,.86,.18,1);pointer-events:none}.cafe-user.is-bumping{animation:cafeUserBump .52s cubic-bezier(.22,.86,.18,1)}.cafe-sticky{position:absolute;left:50%;top:calc(50% - var(--character-name-offset, 24px));width:min(var(--sticky-width, 192px),calc(100vw - 32px));max-width:var(--sticky-width, 192px);transform:translate(-50%,-100%);border:1px solid rgba(255,214,102,.74);border-radius:14px;padding:5px 9px;color:var(--text);background:#fff8cf;box-shadow:0 8px 16px #531f3424,inset 0 1px #ffffffd1;font-size:10px;font-weight:800;line-height:1.35;text-align:center;overflow-wrap:anywhere}.cafe-sticky:before,.cafe-sticky:after{content:"";position:absolute;left:50%;transform:translate(-50%)}.cafe-sticky:before{bottom:-8px;border-top:8px solid rgba(255,214,102,.74);border-right:7px solid transparent;border-left:7px solid transparent}.cafe-sticky:after{bottom:-6px;border-top:7px solid #fff8cf;border-right:6px solid transparent;border-left:6px solid transparent}.cafe-character{position:absolute;left:50%;top:50%;width:min(var(--character-sprite-width, 42px),8vw);aspect-ratio:362 / 724;display:block;overflow:hidden;background-image:var(--character-image);background-repeat:no-repeat;background-size:600% 100%;transform:translate(-50%,-50%) scaleX(calc(var(--character-direction, 1) * -1));animation:studentCafe 1.6s steps(1,end) infinite}.cafe-user.is-moving .cafe-character{background-image:var(--character-run-image, var(--character-image));transform:translate(-50%,-50%) scaleX(var(--character-direction, 1)) scale(var(--character-move-sprite-scale, 1.2));animation-duration:var(--character-move-sprite-duration, .6s)}.cafe-user.is-arrived .cafe-character{background-image:var(--character-image);background-position:0 0;transform:translate(-50%,-50%) scaleX(calc(var(--character-direction, 1) * -1));animation:none}.cafe-user-name{position:absolute;left:50%;top:calc(50% + var(--character-name-offset, 24px));max-width:90px;overflow:hidden;transform:translate(-50%);border-radius:999px;padding:2px 7px;color:#fff;background:#27192370;font-size:9px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}@keyframes studentCafe{0%{background-position:0 0}16.66%{background-position:20% 0}33.33%{background-position:40% 0}50%{background-position:60% 0}66.66%{background-position:80% 0}83.33%{background-position:100% 0}to{background-position:0 0}}@keyframes cafeUserBump{0%{transform:translate(-50%,-50%)}18%{transform:translate(calc(-50% - 5px),calc(-50% - 1px))}34%{transform:translate(calc(-50% + 4px),calc(-50% + 1px))}50%{transform:translate(calc(-50% - 3px),-50%)}68%{transform:translate(calc(-50% + 2px),-50%)}to{transform:translate(-50%,-50%)}}.field-action-stack{position:absolute;top:10px;right:10px;z-index:6;display:flex;gap:8px}.field-exit-control{position:absolute;left:10px;bottom:10px;z-index:6}.field-action-control{display:grid;justify-items:center;gap:3px}.field-board-control{display:none}.exit-door-button,.field-board-button,.field-decorate-button,.field-members-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.78);border-radius:14px;background:#ffffffe6;box-shadow:0 10px 18px #531f3429;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,filter .18s ease,border-color .18s ease}.exit-door-button:active,.field-board-button:active,.field-decorate-button:active,.field-members-button:active{transform:translateY(1px) scale(.94);filter:saturate(1.05);box-shadow:inset 0 2px 7px #531f3424,0 6px 12px #531f342e}.exit-door-button:hover,.field-board-button:hover,.field-decorate-button:hover,.field-members-button:hover{border-color:#1398ff57;box-shadow:0 13px 22px #531f342e}.exit-door-button img,.field-board-button img,.field-decorate-button img{width:27px;height:27px;display:block;object-fit:contain}.field-members-button{color:#1398ff}.field-members-icon{position:relative;width:21px;height:18px;display:block}.field-members-icon:before,.field-members-icon:after{content:"";position:absolute;border-radius:999px;background:currentColor}.field-members-icon:before{left:8px;top:1px;width:7px;height:7px;box-shadow:-7px 2px 0 -1px currentColor}.field-members-icon:after{left:6px;bottom:1px;width:13px;height:8px;border-radius:999px 999px 5px 5px;box-shadow:-7px 2px 0 -2px currentColor}.field-action-label{color:#fff;-webkit-text-stroke:.35px rgba(39,25,35,.86);paint-order:stroke fill;text-shadow:-1px -1px 0 rgba(39,25,35,.78),1px -1px 0 rgba(39,25,35,.78),-1px 1px 0 rgba(39,25,35,.78),1px 1px 0 rgba(39,25,35,.78),0 2px 4px rgba(39,25,35,.42);font-size:9px;font-weight:900}.desktop-board-panel{grid-column:1;grid-row:2;width:var(--cafe-field-width);height:100%;min-height:0;display:grid;justify-self:center;border:1px solid rgba(255,143,177,.3);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#fffffff5,#fff9fcf5),#fff;box-shadow:0 16px 30px #531f341f,inset 0 1px #ffffffd9}.desktop-board-panel .board-view{height:100%}.message-panel-detail{grid-column:2;grid-row:1 / span 2;width:var(--detail-panel-width);height:calc(100vh - var(--app-header-height) - var(--detail-top-gap) - var(--detail-bottom-gap));height:calc(100svh - var(--app-header-height) - var(--detail-top-gap) - var(--detail-bottom-gap));min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);justify-self:center;overflow:hidden;border:1px solid rgba(242,211,222,.9);border-radius:18px;background:#fffffff0;box-shadow:var(--shadow)}.message-panel-header{border-bottom:1px solid rgba(242,211,222,.9);padding:12px 14px}.message-panel-header h2{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:900}.message-panel-header-icon{width:22px;height:22px;display:block;object-fit:contain}.view-panel{min-height:0;height:100%;display:none;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}.view-panel.is-active{display:grid}.message-composer-position-button{display:none}.message-panel-detail>.message-view-panel{display:grid}.message-panel-detail>.view-panel:last-child{display:none}.message-list{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;display:grid;align-content:start;gap:10px;padding:14px}.message-list-shell{min-height:0;position:relative;display:grid}.message-list-shell .message-list{height:100%}.message{width:fit-content;max-width:88%;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:end;gap:8px;justify-self:start}.message.mine{grid-template-columns:minmax(0,1fr) 32px;justify-self:end}.message.mine .message-avatar{grid-column:2;grid-row:1}.message.mine .message-body{grid-column:1;align-items:end;justify-items:end}.message-avatar{width:32px;height:32px;display:grid;place-items:center;overflow:hidden;border-radius:999px;color:#fff;background:var(--pink);font-size:12px;font-weight:900}.message-avatar img{width:100%;height:100%;display:block;object-fit:cover}.message-body{min-width:0;display:grid;justify-items:start;gap:3px}.message-name{color:var(--muted);font-size:10px;font-weight:800}.message-bubble{position:relative;max-width:min(230px,100%);border:1px solid rgba(242,211,222,.95);border-radius:16px 16px 16px 6px;padding:8px 11px;color:var(--text);background:#fff6fa;font-size:13px;line-height:1.45;font-weight:700;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 6px 14px #531f3414}.message-bubble:before,.message-bubble:after{content:"";position:absolute;bottom:3px}.message-bubble:before{left:-8px;border-right:8px solid rgba(242,211,222,.95);border-top:7px solid transparent;border-bottom:2px solid transparent}.message-bubble:after{left:-6px;border-right:7px solid #fff6fa;border-top:6px solid transparent;border-bottom:2px solid transparent}.message.mine .message-bubble{border-color:#1398ff47;border-radius:16px 16px 6px;color:#fff;background:linear-gradient(135deg,#36c49a,#1398ff);box-shadow:0 8px 16px #1398ff29}.message.mine .message-bubble:before{right:-8px;left:auto;border-right:0;border-left:8px solid rgba(19,152,255,.28);border-top:7px solid transparent;border-bottom:2px solid transparent}.message.mine .message-bubble:after{right:-6px;left:auto;border-right:0;border-left:7px solid #1398ff;border-top:6px solid transparent;border-bottom:2px solid transparent}.message-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;border-top:1px solid rgba(242,211,222,.9);padding:10px;background:#ffffffe6}.message-view-panel.is-composer-top .message-composer{border-top:0;border-bottom:1px solid rgba(242,211,222,.9)}.message-input{min-height:42px;max-height:96px;min-width:0;border:1px solid var(--line);border-radius:18px;padding:10px 14px;color:var(--text);background:#fff;outline:none;font-size:14px;font-weight:700;line-height:1.45;resize:vertical}.cafe-show-effect-button{gap:8px;padding:0 18px 0 12px;border-color:#8b6cff9e;background:radial-gradient(circle at 18% 16%,rgba(255,255,255,.58),transparent 22%),linear-gradient(135deg,#9c7bff,#6d7cff 52%,#3f62d9);box-shadow:0 8px 20px #3f62d929;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,filter .18s ease}.cafe-show-effect-button:before{width:22px;height:22px;display:grid;place-items:center;border-radius:999px;color:#4d5fe0;background:#ffffffeb;font-size:17px;line-height:1}.cafe-show-create-button{border-color:#ff8fb1db;background:linear-gradient(135deg,#ff6fae,#ff9671);box-shadow:0 8px 20px #531f341f}.cafe-show-create-button:before{content:"+";color:#d64563}.cafe-show-login-button{border-color:#1db5b89e;background:radial-gradient(circle at 18% 16%,rgba(255,255,255,.58),transparent 22%),linear-gradient(135deg,#37c9d0,#28aee8 52%,#2b78d6);box-shadow:0 8px 20px #1c749b29}.cafe-show-login-button:before{content:"›";color:#1f8cc9;font-size:22px;line-height:.85}.cafe-show-effect-button:active{transform:translateY(1px) scale(.985);filter:saturate(1.04);box-shadow:inset 0 2px 8px #2b327624,0 8px 16px #3f62d933}.cafe-show-create-button:active{box-shadow:inset 0 2px 8px #531f341f,0 8px 16px #d645632e}.cafe-show-send-press-button{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,filter .18s ease}.cafe-show-send-press-button:active{animation:cafe-show-send-press .22s cubic-bezier(.2,.9,.2,1)}@keyframes cafe-show-send-press{0%{transform:translateY(0) scale(1);filter:saturate(1);box-shadow:0 8px 20px #531f341f}45%{transform:translateY(1px) scale(.985);filter:saturate(1.05);box-shadow:inset 0 2px 8px #531f341f,0 8px 16px #d645632e}to{transform:translateY(0) scale(1);filter:saturate(1);box-shadow:0 8px 20px #531f341f}}.cafe-show-login-button:active{box-shadow:inset 0 2px 8px #12547024,0 8px 16px #2b78d633}.board-view{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:linear-gradient(180deg,#fff6fac2,#ffffffb8 48%),#fff}.board-header{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,143,177,.22);padding:10px 12px;background:linear-gradient(90deg,#ff6fae1c,#36c49a1a),#ffffffd1}.board-create-button{min-height:32px;flex:0 0 auto;padding:0 12px 0 8px;font-size:11px}.board-create-button:before{width:18px;height:18px;font-size:14px}.board-title{min-height:34px;margin:0;min-width:0;display:flex;align-items:center;gap:9px;color:#6f2a3c;font-size:16px;font-weight:900}.board-title-icon{width:34px;height:34px;flex:0 0 auto;display:block;filter:drop-shadow(0 6px 9px rgba(83,31,52,.16))}.thread-list{min-height:0;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;display:grid;align-content:start;gap:9px;padding:12px}.thread-card{position:relative;display:grid;border:1px solid rgba(242,211,222,.82);border-radius:14px;background:linear-gradient(180deg,#fffffffa,#fffafdf5),#fff;box-shadow:0 8px 16px #531f3412;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.thread-card:hover{border-color:#ff8fb19e;transform:translateY(-1px);box-shadow:0 12px 22px #531f341c}.thread-card.is-draggable{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.thread-card.is-draggable:active{cursor:grabbing}.thread-card.is-dragging{opacity:.52;transform:scale(.985)}.thread-card.is-drag-over{border-color:#1398ff94;box-shadow:0 0 0 3px #1398ff1f,0 12px 22px #531f341c}.thread-card-link{display:grid;gap:7px;padding:12px;color:inherit;text-decoration:none}.thread-delete-button,.article-delete-button{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:999px;color:#9d3d57;background:#ffffffdb;font-size:17px;line-height:1;font-weight:900;cursor:pointer}.thread-delete-button:active,.article-delete-button:active{transform:scale(.94)}.thread-card-title{margin:0;color:var(--text);font-size:14px;font-weight:900;line-height:1.25}.thread-card-body{margin:0;color:var(--muted);font-size:12px;line-height:1.55;font-weight:700}.thread-card-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:10px;font-weight:900}.panel-back-button{min-height:34px;border:0;border-top:1px solid rgba(242,211,222,.9);color:var(--muted);background:#ffffffe6;font-size:12px;font-weight:900;cursor:pointer}.thread-modal{position:fixed;inset:var(--app-viewport-offset-top, 0px) 0 auto;z-index:1350;height:var(--app-viewport-height, 100dvh);display:none;place-items:center;padding:18px;background:#2719236b;overscroll-behavior:contain}.thread-modal.is-open{display:grid}.thread-modal-panel{width:min(520px,100%);max-height:min(680px,calc(var(--app-viewport-height, 100dvh) - 36px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;border:1px solid rgba(242,211,222,.95);border-radius:22px;padding:18px;background:#fffffffa;box-shadow:0 24px 68px #531f343d}.thread-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.thread-modal-title{margin:0;font-size:18px;font-weight:900}.thread-form{display:grid;gap:14px}.thread-textarea{min-height:112px}.articles-page{width:min(920px,100%);min-height:calc(100vh - 61px);margin:12px auto 0;border-inline:1px solid rgba(242,211,222,.86);background:#ffffffe6}.articles-topbar{position:sticky;top:61px;z-index:20;min-height:60px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(242,211,222,.9);padding:8px 14px;background:#ffffffeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.articles-back-button{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:0;border-radius:999px;color:var(--text);background:transparent;font-size:30px;line-height:1;cursor:pointer}.articles-back-button:hover{background:#fff0f6}.articles-list-back-button{width:38px;height:38px;min-width:38px;min-height:38px;flex:0 0 auto;padding:0;border:0;color:#d64563;background:transparent;font-size:24px;font-weight:800;line-height:1;box-shadow:none}.articles-list-back-button:hover{color:#d64563;background:#fff0f6}.articles-heading{min-width:0;flex:1 1 auto}.members-page{width:min(720px,100%);min-height:calc(100vh - 61px);margin:12px auto 0;border-inline:1px solid rgba(242,211,222,.86);background:#ffffffe6}.members-page.is-modal{width:100%;min-height:0;margin:0;border-inline:0;background:#fff}.members-modal{position:fixed;inset:var(--app-viewport-offset-top, 0px) 0 auto;z-index:2800;height:var(--app-viewport-height, 100dvh);display:grid;place-items:center;padding:16px;background:#1720336b;overscroll-behavior:contain}.members-modal-panel{width:min(520px,100%);max-height:min(680px,calc(var(--app-viewport-height, 100dvh) - 32px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;border:1px solid rgba(218,220,224,.95);border-radius:16px;background:#fff;box-shadow:0 24px 68px #1720333d}.members-page.is-modal .members-topbar{top:0}.members-topbar{position:sticky;top:61px;z-index:20;min-height:60px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(242,211,222,.9);padding:8px 14px;background:#ffffffeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.members-back-button{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:0;border-radius:999px;color:var(--text);background:transparent;font-size:30px;line-height:1;cursor:pointer}.members-back-button:hover{background:#fff0f6}.members-invite-button{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid rgba(255,111,174,.24);border-radius:999px;color:#fff;background:linear-gradient(135deg,#ff6fae,#1398ff);box-shadow:0 8px 18px #ff6fae38;font-size:24px;font-weight:900;line-height:1;cursor:pointer}.members-invite-button:hover{transform:translateY(-1px)}.members-invite-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;border-bottom:1px solid rgba(242,211,222,.75);padding:10px 14px;background:#fffafdf2}.members-invite-input{min-width:0;height:38px;border:1px solid rgba(242,211,222,.95);border-radius:10px;padding:0 12px;color:var(--text);background:#fff;font-size:13px;font-weight:800;outline:none}.members-invite-input:focus{border-color:#ff6faeb8;box-shadow:0 0 0 3px #ff6fae1f}.members-invite-submit{height:38px;border:0;border-radius:10px;padding:0 14px;color:#fff;background:#ff6fae;font-size:12px;font-weight:900;cursor:pointer}.members-invite-submit:disabled{cursor:not-allowed;opacity:.55}.members-invite-error{grid-column:1 / -1;margin:0;color:#b43b63;font-size:11px;font-weight:800}.members-heading{min-width:0;flex:1 1 auto}.members-title{margin:0;color:var(--text);font-size:18px;font-weight:900;line-height:1.2}.members-subtitle{max-width:100%;overflow:hidden;margin:3px 0 0;color:var(--muted);font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.member-list{display:grid;gap:10px;padding:14px}.member-card{display:flex;align-items:center;gap:12px;border:1px solid rgba(242,211,222,.86);border-radius:14px;padding:12px;background:#fff;box-shadow:0 10px 22px #531f3414}.member-avatar{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;overflow:hidden;border-radius:999px;color:#fff;background:linear-gradient(135deg,#1398ff,#36c49a);font-size:15px;font-weight:900}.member-avatar img{width:100%;height:100%;display:block;object-fit:cover}.member-body{min-width:0;flex:1 1 auto}.member-row{display:flex;align-items:center;gap:8px}.member-name{overflow:hidden;margin:0;color:var(--text);font-size:14px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.member-role{flex:0 0 auto;border-radius:999px;padding:3px 8px;color:#2f6d55;background:#e9fff5;font-size:10px;font-weight:900}.member-role.is-owner{color:#9d3d57;background:#fff0f6}.member-role.is-inviting{color:#8a5a12;background:#fff4d6}.member-empty{margin:0;padding:28px 16px;color:var(--muted);font-size:13px;font-weight:800;text-align:center}.articles-title{margin:0;overflow:hidden;color:var(--text);font-size:18px;line-height:1.25;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.articles-subtitle{margin:2px 0 0;overflow:hidden;color:var(--muted);font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.articles-header-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}.articles-compose-button,.articles-change-button{min-height:36px;flex:0 0 auto;border:1px solid rgba(255,143,177,.62);border-radius:999px;padding:0 14px;color:#fff;background:linear-gradient(135deg,#ff8fb1,#ff6fae 52%,#d64563);font-size:12px;font-weight:900;box-shadow:0 10px 20px #d6456333;cursor:pointer}.articles-change-button{color:#d64563;background:#fff;box-shadow:none}.thread-edit-description-input{min-height:96px}.article-view{min-height:calc(100vh - 121px);overflow:hidden}.article-view-forward{animation:articlePageSlideIn .36s cubic-bezier(.2,.9,.2,1) both}.article-view-back{animation:articleListIn .22s cubic-bezier(.2,.9,.2,1) both}.article-list{display:grid;align-content:start}.article-card{position:relative}.article-card-select{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px;border:0;border-bottom:1px solid rgba(242,211,222,.86);padding:14px 16px;background:#fff;color:inherit;text-align:left;cursor:pointer}.article-card-select:hover{background:#fff9fc}.article-card-select:focus-visible{outline:3px solid rgba(19,152,255,.18);outline-offset:-3px}.article-avatar{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:999px;color:#fff;background:linear-gradient(135deg,#1398ff,#36c49a);font-size:14px;font-weight:900}.article-avatar img{width:100%;height:100%;display:block;object-fit:cover}.article-card-body{min-width:0}.article-card-title{margin:0;color:var(--text);font-size:15px;line-height:1.42;font-weight:900}.article-card-meta{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.4;font-weight:800}.article-card-text{margin:7px 0 0;color:var(--text);font-size:13px;line-height:1.6;font-weight:700;white-space:pre-wrap}.article-empty{margin:0;padding:34px 16px;color:var(--muted);font-size:13px;font-weight:800;text-align:center}.article-detail{padding:24px 20px 42px;background:#fff}.article-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.article-detail-title{min-width:0;margin:0;color:var(--text);font-size:24px;line-height:1.42;font-weight:900}.article-detail-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;gap:8px}.article-detail-icon-button{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(242,211,222,.95);border-radius:999px;color:var(--muted);background:#fff;font-size:18px;font-weight:900;line-height:1;cursor:pointer}.article-detail-icon-button svg{width:18px;height:18px;display:block;fill:currentColor}.article-detail-icon-button:hover,.article-detail-icon-button:focus-visible{color:var(--blue);background:#f0f9ff;outline:none}.article-detail-icon-button-danger{border-color:#f43f5e6b;color:#d92352;background:#fff0f6}.article-detail-icon-button-danger:hover,.article-detail-icon-button-danger:focus-visible{color:#fff;background:#e11d48}.article-detail-meta{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--muted);font-size:13px;font-weight:800}.article-detail-avatar{width:28px;height:28px;font-size:10px}.article-detail-body{margin:28px 0 0;color:var(--text);font-size:16px;line-height:1.8;font-weight:700;white-space:normal;overflow-wrap:anywhere}.article-loading{min-height:calc(100vh - 61px)}@keyframes articlePageSlideIn{0%{transform:translate3d(100%,0,0);filter:drop-shadow(-18px 0 20px rgba(83,31,52,.12))}to{transform:translateZ(0);filter:drop-shadow(0 0 0 rgba(83,31,52,0))}}@keyframes articleListIn{0%{opacity:0;transform:translate3d(-18px,0,0)}to{opacity:1;transform:translateZ(0)}}.article-compose-backdrop{position:fixed;inset:var(--app-viewport-offset-top, 0px) 0 auto;z-index:2100;height:var(--app-viewport-height, 100dvh);display:grid;place-items:center;padding:16px;background:#2719236b;overscroll-behavior:contain}.article-compose-panel{width:min(560px,100%);max-height:min(720px,calc(var(--app-viewport-height, 100dvh) - 32px));display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid rgba(242,211,222,.95);border-radius:22px;background:#fffffffa;box-shadow:0 24px 68px #531f343d}.article-compose-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(242,211,222,.9);padding:14px 16px}.article-compose-title{margin:0;font-size:18px;font-weight:900}.article-compose-close{width:34px;height:34px;border:0;border-radius:999px;color:var(--muted);background:transparent;font-size:24px;line-height:1;cursor:pointer}.article-compose-close:hover{background:#fff0f6}.article-compose-form{min-height:0;display:grid;gap:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:16px}.article-compose-field{display:grid;gap:6px;color:var(--muted);font-size:11px;font-weight:900}.article-title-input,.article-body-input{width:100%;border:1px solid rgba(242,211,222,.95);border-radius:14px;padding:12px;color:var(--text);background:#fff;outline:none;font-size:14px;font-weight:700}.article-title-input:focus,.article-body-input:focus{border-color:#1398ff85;box-shadow:0 0 0 3px #1398ff1f}.article-body-input{min-height:240px;resize:vertical;line-height:1.6}.article-format-toggle{display:inline-flex;width:fit-content;overflow:hidden;border:1px solid rgba(242,211,222,.95);border-radius:999px;background:#fff}.article-format-toggle label{position:relative;display:grid;place-items:center;min-width:92px;min-height:34px;padding:0 12px;color:var(--muted);cursor:pointer}.article-format-toggle input{position:absolute;inset:0;opacity:0;cursor:pointer}.article-format-toggle label:has(input:checked){color:#fff;background:var(--blue)}.article-rich-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid rgba(242,211,222,.95);border-radius:14px;padding:8px;background:#fff8fb}.article-rich-toolbar button,.article-rich-toolbar select,.article-color-picker{min-height:32px;border:1px solid rgba(242,211,222,.95);border-radius:10px;color:var(--text);background:#fff;font-size:12px;font-weight:900;cursor:pointer}.article-style-buttons{display:flex;flex-wrap:wrap;gap:6px}.article-rich-toolbar button{min-width:32px;padding:0 10px}.article-rich-toolbar button.is-active{border-color:#1398ffc7;color:#fff;background:var(--blue);box-shadow:0 0 0 3px #1398ff1f}.article-style-buttons button:nth-child(1){font-weight:1000}.article-style-buttons button:nth-child(2){font-style:italic}.article-style-buttons button:nth-child(3){text-decoration:line-through}.article-rich-toolbar select{padding:0 8px}.article-color-picker{display:inline-flex;align-items:center;gap:6px;padding:0 8px}.article-color-picker input{width:28px;height:22px;border:0;padding:0;background:transparent;cursor:pointer}.article-rich-editor{overflow-y:auto;white-space:normal}.article-rich-editor:empty:before{content:attr(data-placeholder);color:#77636cb8}.article-detail-body :is(p,ul,ol,blockquote,pre,table,h1,h2,h3){margin-top:0;margin-bottom:12px}.article-detail-body ul,.article-detail-body ol{padding-left:22px}.article-detail-body a{color:var(--blue);font-weight:900}.article-detail-body code{border-radius:6px;padding:1px 5px;background:#fff0f6}.article-detail-body pre{overflow-x:auto;border:1px solid rgba(242,211,222,.95);border-radius:10px;padding:12px;background:#2f2630;color:#fff8fb}.article-detail-body pre code{padding:0;background:transparent;color:inherit;font-size:13px;line-height:1.6}.article-detail-body table{width:100%;display:block;overflow-x:auto;border-collapse:collapse;white-space:nowrap}.article-detail-body th,.article-detail-body td{border:1px solid rgba(242,211,222,.95);padding:8px 10px;text-align:left}.article-detail-body th{background:#fff0f6;font-weight:900}.article-detail-body td{background:#fff}.article-compose-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px;font-weight:800}.article-compose-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:2px}.decorate-page{--decorate-field-width: min(100%, 560px);--decorate-object-base-size: calc(var(--decorate-field-width) * .272);width:min(1120px,calc(100% - 28px));min-height:calc(100vh - 61px);display:grid;align-content:start;gap:14px;margin:12px auto 0;padding-bottom:24px}.decorate-preview-panel,.decorate-actions-panel{min-width:0;border:1px solid #fff;border-radius:8px;background:#fffffff0;box-shadow:var(--shadow)}.decorate-preview-panel{display:grid;grid-template-rows:auto auto;justify-items:center;gap:12px;padding:14px}.decorate-field{position:relative;width:var(--decorate-field-width);aspect-ratio:4 / 3;overflow:hidden;border:1px solid rgba(242,211,222,.9);border-radius:8px;background-color:#fff6fa;touch-action:none;-webkit-user-select:none;user-select:none}.decorate-field:before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--decorate-background-image);background-position:center;background-repeat:no-repeat;background-size:cover;transition:filter .18s ease,transform .18s ease}.decorate-object{position:absolute;left:var(--object-x, 50%);top:var(--object-y, 50%);z-index:2;width:var(--decorate-object-base-size);aspect-ratio:1;border:0;padding:0;background:transparent;cursor:grab;filter:drop-shadow(0 12px 14px rgba(83,31,52,.2));transform:translate(-50%,-50%) scale(var(--object-size, 1))}.decorate-object.is-selected{outline:3px solid rgba(19,152,255,.44);outline-offset:3px;border-radius:8px}.decorate-object img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}.decorate-object-remove{position:absolute;right:-8px;top:-8px;width:22px;height:22px;display:grid;place-items:center;border:2px solid #fff;border-radius:999px;color:#fff;background:#ff4d6d;font-size:13px;font-weight:900;line-height:1;box-shadow:0 8px 14px #531f3429;cursor:pointer}.decorate-tool-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 0 2px}.decorate-tool-button{min-height:44px;display:grid;place-items:center;border:0;padding:0;background:transparent;cursor:pointer;transition:transform .12s ease,filter .12s ease}.decorate-tool-button:hover{transform:translateY(-1px);filter:brightness(1.04)}.decorate-tool-button:active{transform:translateY(2px) scale(.94);filter:brightness(.95)}.decorate-tool-button img{width:36px;height:36px;display:block}.decorate-actions-panel{display:grid;justify-items:center;align-items:center;gap:14px;padding:14px}.decorate-actions{width:min(100%,360px);display:grid;grid-template-columns:1fr 1fr;gap:8px}.decorate-danger-section{width:min(100%,360px);border-top:1px solid rgba(242,211,222,.9);padding-top:12px}.decorate-danger-section .button{width:100%}.decorate-message{min-height:20px;color:var(--muted);font-size:12px;font-weight:800}.decorate-loading{min-height:320px}.decorate-modal-loading{min-height:260px;border-radius:8px}.decor-modal-backdrop{position:fixed;inset:var(--app-viewport-offset-top, 0px) 0 auto;z-index:2100;height:var(--app-viewport-height, 100dvh);display:grid;place-items:center;padding:14px;background:#2719235c;overflow:hidden;overscroll-behavior:contain}.decor-modal{width:min(640px,calc(100vw - 28px));min-height:0;max-height:min(720px,calc(var(--app-viewport-height, 100dvh) - 48px));display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid rgba(255,143,177,.26);border-radius:8px;background:#fffffffa;box-shadow:0 24px 70px #27192338}.decor-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,143,177,.18);padding:14px}.decor-modal-head h2{margin:0;font-size:16px;font-weight:900}.decor-modal-close{width:34px;height:34px;border:1px solid rgba(148,163,184,.32);border-radius:8px;color:var(--muted);background:#fff;font-size:18px;font-weight:900;cursor:pointer}.decor-modal-body{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:14px}.decorate-choice-grid,.decorate-object-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.decorate-choice-button{min-width:0;border:1px solid rgba(148,163,184,.32);border-radius:8px;padding:7px;color:var(--text);background:#fff;text-align:left;cursor:pointer}.decorate-choice-button.is-selected{border-color:#1398ff9e;box-shadow:0 0 0 3px #1398ff1f}.decorate-choice-preview,.decorate-object-preview{width:100%;aspect-ratio:16 / 9;display:block;border-radius:6px;margin-bottom:6px;background:#f8fafc center / cover no-repeat}.decorate-object-preview{aspect-ratio:1;background-size:contain;background-repeat:no-repeat}.decorate-choice-name{display:block;overflow:hidden;color:var(--text);font-size:11px;font-weight:900;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.decorate-info-form,.decorate-settings-form{display:grid;gap:14px}.decorate-danger-button{border-color:#ff4d6d57;color:#fff;background:#ff4d6d;box-shadow:0 12px 26px #ff4d6d38}.decorate-danger-button:hover{background:#f43f5e}.profile-edit-page{width:min(520px,calc(100% - 32px));min-height:calc(100vh - 61px);margin:0 auto;padding:44px 0}.profile-edit-panel{border:1px solid rgba(221,230,240,.92);border-radius:22px;padding:24px;background:#fffffff0;box-shadow:0 18px 44px #1720331f}.profile-edit-title{margin:0 0 20px;font-size:26px;font-weight:900}.profile-edit-form{display:grid}.profile-edit-form .field{margin-bottom:22px}.profile-edit-form .field label,.profile-edit-form .field-label{color:#697386;font-size:12px;font-weight:800;line-height:1.35}.text-input.is-readonly{color:#7b8494;border-color:#d8e0ea;background:#eef2f7;cursor:default}.profile-image-row{display:flex;align-items:center;gap:14px}.profile-image-preview{width:72px;height:72px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid var(--line);border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--blue),#36c49a);font-size:28px;font-weight:900}.profile-image-preview img{width:100%;height:100%;display:block;object-fit:cover}.file-input-label{min-height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:0 14px;color:var(--text);background:#fff;font-size:13px;font-weight:900;box-shadow:0 8px 20px #531f340f;cursor:pointer}.file-input-label input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.profile-character-grid{display:grid;grid-template-columns:repeat(auto-fit,100px);gap:10px;justify-content:start}.profile-character-option{position:relative;width:100px;min-height:118px;display:grid;justify-items:center;gap:8px;border:2px solid transparent;border-radius:16px;padding:12px;background:#fff;box-shadow:0 8px 20px #531f340f;cursor:pointer}.profile-character-option input{position:absolute;inset:0;opacity:0;cursor:pointer}.profile-character-option:has(input:checked){border-color:var(--blue);background:#f5fbff}.profile-character-sprite{width:34px;aspect-ratio:362 / 724;display:block;background-position:0 0;background-repeat:no-repeat;background-size:650% 100%}.profile-loading{min-height:320px}@media(max-width:860px){.cafe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-hero{grid-template-columns:1fr}.tutorial-hero-preview{min-height:190px}.tutorial-preview-window{width:210px}.tutorial-feature-grid{grid-template-columns:1fr}}@media(max-width:629px){.decorate-page{--decorate-field-width: min(100%, 375px);width:min(100%,calc(100% - 20px))}.decorate-actions-panel{grid-template-columns:1fr}.articles-page{border-inline:0}.articles-topbar{padding-inline:10px}.articles-compose-button{padding-inline:12px}.articles-header-actions{gap:6px}.articles-change-button{padding-inline:12px}.create-link{display:inline-flex}.cafe-create-card{display:none}}@media(max-width:620px){.cafes-page,.new-classroom-page{width:min(100% - 20px,980px)}.app-header-support{width:30px;height:30px;min-height:30px;border-color:#dadce0f2;padding:0;background:#fff;box-shadow:0 5px 14px #17203314}.app-header-support.is-authenticated{display:none}.app-header-support span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.tutorial-page{width:min(100% - 20px,920px);padding-top:18px}.tutorial-hero{gap:18px;padding:20px}.tutorial-title{font-size:25px}.tutorial-copy{font-size:14px}.tutorial-step{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px}.tutorial-step-number{width:32px;height:32px}.tutorial-actions{flex-direction:column-reverse}.page-top{align-items:stretch;flex-direction:column}.create-link,.page-actions,.cafe-filter{width:100%}.cafe-filter-button{flex:1 1 0;padding:0 6px}.cafe-grid,.background-grid,.background-current{grid-template-columns:1fr}.cafe-detail-page{--cafe-field-width: min(100%, 375px);--detail-panel-width: min(100%, 375px);--detail-panel-gap: 10px;--cafe-field-height: min( calc((100vw - 20px)*.75) , 281px);--detail-top-gap: 16px;width:min(100% - 20px,700px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px}.field-board-control{display:grid}.desktop-board-panel{display:none}.message-panel-detail>.view-panel:first-child,.message-panel-detail>.view-panel:last-child,.message-panel-detail>.message-view-panel{display:none}.message-panel-detail>.view-panel.is-active{display:grid}.cafe-field-detail{grid-column:1;grid-row:1;justify-self:center;margin-top:2px}.message-panel-detail{grid-column:1;grid-row:2;grid-template-rows:minmax(0,1fr);height:calc(100vh - var(--app-header-height) - var(--detail-top-gap) - var(--cafe-field-height) - 10px - var(--detail-bottom-gap));height:calc(100svh - var(--app-header-height) - var(--detail-top-gap) - var(--cafe-field-height) - 10px - var(--detail-bottom-gap));background:transparent}.message-panel-header{display:none}.message-view-panel{grid-template-rows:minmax(0,1fr) auto;background:transparent}.message-view-panel.is-composer-top{grid-template-rows:auto minmax(0,1fr)}.message-composer-position-button{position:absolute;top:0;left:50%;z-index:2;transform:translate(-50%);justify-self:center;display:inline-flex;align-items:center;justify-content:center;width:32px;height:24px;border:0;padding:0;color:#8d3651;background:transparent;background-color:transparent;box-shadow:none;font-size:18px;line-height:1;font-weight:900;cursor:pointer}.message-composer{grid-template-columns:minmax(0,1fr) auto}.message-list{background:#fffffff0}}