:root{--bg:#111318;--surface:#1a1d26;--border:#2a2f3d;--text:#e8eaef;--text-muted:#8b92a5;--accent:#4f8cff;--accent-hover:#6ba0ff;--radius:10px;--sans:"Outfit", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;font:16px/1.5 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-height:100svh;margin:0}body.banner-mode{overflow:hidden}h1,p{margin:0}#app{min-height:100svh}.app{max-width:900px;margin:0 auto;padding:24px 20px 40px}.header{text-align:center;margin-bottom:24px}.header h1{letter-spacing:.04em;font-size:1.75rem;font-weight:700}.subtitle{color:var(--text-muted);margin-top:6px;font-size:.95rem}.display-section{margin-bottom:24px}.display-frame{border:2px solid var(--border);border-radius:var(--radius);background:#111318;height:120px;overflow:hidden}.mobile-hint{color:var(--text-muted);text-align:center;margin:8px 0 0;font-size:.8rem;display:none}.exit-banner-btn{display:none}body.banner-mode .app{max-width:none;padding:0}body.banner-mode .header,body.banner-mode .controls{display:none}body.banner-mode .display-section{z-index:1000;background:#111318;flex-direction:column;margin:0;display:flex;position:fixed;inset:0;overflow:hidden}body.banner-mode .display-frame{border:none;border-radius:0;flex:1;width:100%;position:relative;overflow:hidden;height:auto!important;min-height:0!important;max-height:none!important}.display-rotator,body.banner-mode.banner-landscape .display-rotator{width:100%;height:100%}body.banner-mode.banner-portrait .display-rotator{width:100svh;height:100svw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(90deg)}body.banner-mode #fullscreen-btn,body.banner-mode .mobile-hint{display:none}body.banner-mode .exit-banner-btn{top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:1001;width:44px;height:44px;color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1a1d26d9;border:none;border-radius:50%;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:fixed}body.banner-mode .exit-banner-btn:hover{background:#2a2e3af2}.exit-banner-btn__icon{font-size:1.75rem;font-weight:300;line-height:1}#banner-canvas{width:100%;height:100%;display:block}.btn{font:inherit;cursor:pointer;border:none;border-radius:8px;margin-top:10px;padding:10px 16px;transition:background .2s,color .2s}.btn-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.btn-fullscreen{background:var(--accent);color:#fff;border-radius:var(--radius);justify-content:center;align-items:center;gap:10px;width:100%;margin-top:12px;padding:14px 20px;font-size:1.05rem;font-weight:700;display:flex;box-shadow:0 4px 20px #4f8cff59}.btn-fullscreen:hover{background:var(--accent-hover);box-shadow:0 6px 24px #4f8cff73}.btn-icon-only{width:40px;height:40px;color:var(--text-muted);border:1px solid var(--border);background:0 0;border-radius:8px;justify-content:center;align-items:center;margin-top:0;padding:0;display:inline-flex}.btn-icon-only:hover{color:var(--text);border-color:var(--text-muted);background:#ffffff08}.controls{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:16px;padding:20px;display:flex}.field{flex-direction:column;flex:1;gap:8px;display:flex}.field-narrow{max-width:200px}.field-label{color:var(--text-muted);font-size:.875rem}.field-row{gap:16px;display:flex}.emoji-picker{flex-wrap:wrap;gap:10px;display:flex}.emoji-btn{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:1.35rem;line-height:1;transition:border-color .2s,background .2s,transform .15s;display:flex}.emoji-btn:hover{border-color:var(--accent);background:#4f8cff1a;transform:scale(1.06)}.emoji-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.selectpicker{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b92a5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;border-radius:8px;width:100%;padding:12px 36px 12px 12px;font-weight:700}.selectpicker option{color:var(--text);background:var(--surface)}textarea,input[type=color]{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px}textarea{resize:vertical;min-height:72px;line-height:1.4}textarea:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input[type=range]{width:100%;accent-color:var(--accent)}input[type=color]{cursor:pointer;width:100%;height:44px;padding:4px}.actions{justify-content:flex-end;align-items:center;gap:10px;margin-top:4px;display:flex}.share-status{color:#6ee7a0;font-size:.8rem}@media (width<=900px){.mobile-hint{display:block}}@media (width<=640px){.field-row{flex-direction:column}.field-narrow{max-width:none}}@media (width<=900px){.display-frame{height:22svh;min-height:100px;max-height:200px}}