/* Framework demo shell: palette rail + viewport bar around a framework site (site.html in an iframe).
   Modeled on the ARCFORM prototype chrome (frameworks/arcform/index.html); keep the two visually in step. */
:root{color-scheme:dark;--ink:#0d0c0a;--rail:#12100e;--rail-line:#26221d;--chip:#1a1713;--chip-line:#2d2822;--dim:#8f877b;--paper:#f5f0e8;--accent:#d4af7a;--serif:'Cormorant Garamond',Georgia,serif;--ui:'Syne',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--ui);overflow:hidden}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font-family:inherit}

.proto{height:100%;display:flex}
.rail{width:92px;flex:none;border-right:1px solid var(--rail-line);display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 0;background:var(--rail);overflow-y:auto;scrollbar-width:none}
.rail-mark{width:34px;height:34px;flex:none;margin-bottom:18px;display:grid;place-items:center;border:1px solid var(--chip-line);border-radius:50%;font:400 18px/1 var(--serif);color:var(--paper)}
.rail-sws{display:contents}
.rail-label{writing-mode:vertical-rl;transform:rotate(180deg);font:400 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-top:auto;padding-top:14px}
.sw{all:unset;box-sizing:border-box;flex:none;width:58px;height:58px;padding:5px;border-radius:15px;border:1px solid var(--chip-line);background:var(--chip);cursor:pointer;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.sw span{display:block;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(245,240,232,.1)}
.sw:hover{transform:translateY(-2px);border-color:#4a4238}
.sw.on{border-color:var(--paper);box-shadow:0 0 0 4px rgba(245,240,232,.12)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.bar{min-height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding:10px 20px;border-bottom:1px solid var(--rail-line);background:var(--rail);flex-wrap:wrap}
.bar-title{font:400 12px/1.2 var(--mono);color:var(--dim);letter-spacing:.04em}
.bar-title b{color:var(--paper);font-weight:400}
.bar-title i{font-style:normal;color:var(--paper)}
.bar-ctrls{display:flex;gap:12px;flex-wrap:wrap}
.seg{display:flex;padding:4px;gap:2px;background:var(--chip);border:1px solid var(--chip-line);border-radius:12px}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;height:36px;padding:0 14px;border-radius:9px;font:400 12px/36px var(--mono);color:#a39a8c;display:flex;align-items:center;gap:8px;transition:background .3s,color .3s;white-space:nowrap}
.seg button:hover{color:#fff}
.seg button.on{background:var(--paper);color:#1a1815}
.seg svg{width:16px;height:16px}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;background-color:var(--ink);background-image:radial-gradient(#26221d 1px,transparent 1.2px);background-size:22px 22px}
.device{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ink);
  transition:width .85s cubic-bezier(.75,0,.2,1),height .85s cubic-bezier(.75,0,.2,1),border-radius .85s cubic-bezier(.75,0,.2,1),box-shadow .85s}
.device.mob{width:390px;height:calc(100% - 48px);max-height:844px;border-radius:48px;box-shadow:0 0 0 10px #1a1713,0 0 0 11px #342e27,0 50px 90px rgba(0,0,0,.65)}
.device iframe{display:block;width:100%;height:100%;border:0;background:transparent;transition:opacity .3s ease}
.device.swap iframe{opacity:0}

/* narrow real screens: drop the frame */
@media (max-width:760px){
  .proto{flex-direction:column-reverse}
  .rail{width:auto;flex-direction:row;border-right:0;border-top:1px solid var(--rail-line);padding:10px;justify-content:center;gap:10px;overflow:auto hidden}
  .rail-mark,.rail-label{display:none}
  .sw{width:46px;height:46px;border-radius:12px;padding:4px}
  .bar{padding:8px 12px}
  .bar-title{display:none}
  .seg button{padding:0 10px}
  .seg[data-viewport]{display:none}
  .device.mob{width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
}