.kin-entry-theme-control{--theme-knob:var(--kin-ink-text);--theme-selected:var(--kin-ink-surface);border:1px solid var(--kin-line-strong);background:var(--kin-ink-surface);isolation:isolate;border-radius:999px;padding:4px;display:flex;position:relative}.kin-entry-theme-control:before{border-radius:inherit;background:var(--theme-knob);content:"";width:calc(50% - 4px);transition:transform .22s cubic-bezier(.16,1,.3,1),background-color .18s;position:absolute;inset:4px auto 4px 4px}.kin-entry-theme-control button{min-width:5.25rem;min-height:44px;color:var(--kin-ink-muted);font:500 .75rem/1.2 var(--sans);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:999px;flex:1 0 0;justify-content:center;align-items:center;gap:.5rem;margin:0;padding:.5rem .75rem;transition:color .18s;display:inline-flex;position:relative}.kin-entry-theme-control svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}html:not([data-kin-theme=white]) .kin-entry-theme-control button:first-child{color:var(--theme-selected)}html[data-kin-theme=white] .kin-entry-theme-control{--theme-knob:var(--kin-ink-surface);--theme-selected:var(--kin-ink-text);background:var(--kin-panel-2)}html[data-kin-theme=white] .kin-entry-theme-control:before{transform:translate(100%)}html[data-kin-theme=white] .kin-entry-theme-control button{color:var(--kin-muted)}html[data-kin-theme=white] .kin-entry-theme-control button:last-child{color:var(--theme-selected)}.kin-entry-theme-control button:focus-visible{outline:2px solid var(--kin-thread-soft);outline-offset:3px}.kin-entry-theme>p{z-index:3;border:1px solid var(--kin-line);background:var(--kin-bg);width:min(20rem,100vw - 2rem);color:var(--kin-muted);font:.8125rem/1.5 var(--sans);border-radius:10px;margin:0;padding:.75rem;position:absolute;top:calc(100% + .5rem);right:0}@media (hover:hover){.kin-entry-theme-control button:hover svg{transform:rotate(-12deg)}}@media (width<=580px){.kin-entry-theme-control button{min-width:44px;padding:.5rem}.kin-entry-theme-control button>span{display:none}}@media (width<=380px){.kin-entry-theme-control button{min-width:5.25rem}.kin-entry-theme-control button>span{display:inline}}@media (prefers-reduced-motion:reduce){.kin-entry-theme-control:before,.kin-entry-theme-control button{transition:none}.kin-entry-theme-control button:hover svg{transform:none}}
